views/course.pug

   1 extends withQuestions
   2
   3 block append stylesheets
   4     link(rel="stylesheet" href="/stylesheets/course.css")
   5
   6 block content
   7     .container#course
   8         if teacher
   9             #newAssessment.modal
  10                 .modal-content
  11                     form(@submit.prevent="addAssessment")
  12                         .input-field
  13                             input#assessmentName(type="text" v-model="newAssessment.name" required)
  14                             label(for="assessmentName") Name
  15                 .modal-footer
  16                     .center-align
  17                         a.waves-effect.waves-light.btn(href="#!" @click="addAssessment()")
  18                             span Submit
  19                             i.material-icons.right send
  20             #assessmentSettings.modal
  21                 .modal-content
  22                     form
  23                         p
  24                             input#active(type="checkbox" v-model="assessment.active")
  25                             label(for="active") Active
  26                         p
  27                             input#secure(name="status" type="radio" value="secure" v-model="assessment.mode")
  28                             label(for="secure") Exam mode, secured (class only)
  29                         p
  30                             input#exam(name="status" type="radio" value="exam" v-model="assessment.mode")
  31                             label(for="exam") Exam mode, free (class only)
  32                         p
  33                             input#open(name="status" type="radio" value="open" v-model="assessment.mode")
  34                             label(for="open") Open to everyone
  35                         p
  36                             input#fixed(type="checkbox" v-model="assessment.fixed")
  37                             label(for="fixed") Fixed questions order
  38                         p
  39                             input#displayOne(name="display" type="radio" value="one" v-model="assessment.display")
  40                             label(for="displayOne") One question at a time
  41                         p
  42                             input#displayAll(name="display" type="radio" value="all" v-model="assessment.display")
  43                             label(for="displayAll") Display all questions
  44                         .input-field
  45                             input#time(type="number" v-model.number="assessment.time")
  46                             label(for="time") Time (minutes)
  47                 .modal-footer
  48                     .center-align
  49                         a.modal-action.modal-close.waves-effect.waves-light.btn-flat(href="#!") Done
  50             #assessmentEdit.modal
  51                 .modal-content
  52                     form
  53                         .input-field
  54                             textarea#introduction.materialize-textarea(v-model="assessment.introduction")
  55                             label(for="introduction") Introduction
  56                         .input-field
  57                             textarea#assessmentEdition.materialize-textarea(v-model="assessmentText")
  58                             label(for="assessmentEdition") Assessment in text format
  59                         .input-field
  60                             textarea#conclusion.materialize-textarea(v-model="assessment.conclusion")
  61                             label(for="conclusion") Conclusion
  62                 .modal-footer
  63                     .center-align
  64                         a.modal-action.modal-close.waves-effect.waves-light.btn-flat(href="#!") Done
  65             #gradeSettings.modal
  66                 .modal-content
  67                     form(@submit.prevent="computeGrades")
  68                         .input-field
  69                             input#points(type="number" v-model.number="settings.totalPoints" required)
  70                             label(for="points") Total points
  71                         p
  72                             input#partial(type="checkbox" v-model="settings.halfPoint")
  73                             label(for="partial") Half point for partial answers? (&ge; 50%)
  74                         p
  75                             input#malus(type="checkbox" v-model="settings.zeroSum")
  76                             label(for="malus") Lose points on wrong answers? ("Zero-sum" game)
  77                 .modal-footer
  78                     .center-align
  79                         a.modal-action.modal-close.waves-effect.waves-light.btn(href="#!" @click="computeGrades()")
  80                             span Compute
  81                             i.material-icons.right send
  82             #detailedGrades.modal
  83                 .modal-content
  84                     table
  85                         thead
  86                             tr
  87                                 th Number
  88                                 th(v-for="assessment in assessmentArray") {{ assessment.name }}
  89                         tbody
  90                             tr.grade(v-for="student in studentList(group)")
  91                                 td {{ student.number }}
  92                                 td(v-for="(assessment,i) in assessmentArray" @click="togglePresence(student.number,i)") {{ grade(i,student.number) }}
  93                 .modal-footer
  94                     .center-align
  95                         a.modal-action.modal-close.waves-effect.waves-light.btn-flat(href="#!") Close
  96         .row(v-show="mode=='view'")
  97             .col.s12.m10.offset-m1.l8.offset-l2.xl6.offset-xl3
  98                 if teacher
  99                     h4.title(@click="toggleDisplay('students')") Students
 100                     .card(v-show="display=='students'")
 101                         .center-align
 102                             input.hide#upload(type="file" @change="upload")
 103                             button.on-left.waves-effect.waves-light.btn(@click="uploadTrigger()") Import
 104                         table
 105                             thead
 106                                 tr
 107                                     th Number
 108                                     th Forename
 109                                     th Name
 110                                     th Group
 111                             tbody
 112                                 tr.student(v-for="student in studentList(0)")
 113                                     td {{ student.number }}
 114                                     td {{ student.forename }}
 115                                     td {{ student.name }}
 116                                     td {{ student.group }}
 117                 h4.title(@click="toggleDisplay('assessments')") Assessments
 118                 .card(v-show="display=='assessments'")
 119                     if teacher
 120                         .center-align
 121                             a.on-left.waves-effect.waves-light.btn.modal-trigger(href="#newAssessment") New assessment
 122                             input#password(type="password" v-model="monitorPwd" @keyup.enter="setPassword" placeholder="Password" title="Monitoring password")
 123                     table
 124                         thead
 125                             tr
 126                                 th Name
 127                                 th Mode
 128                                 th #Questions
 129                                 th Time
 130                         tbody
 131                             tr.assessment(v-for="(assessment,i) in assessmentArray" @click.left="actionAssessment(i)" @contextmenu.prevent="deleteAssessment(assessment)")
 132                                 td {{ assessment.name }}
 133                                 td {{ assessment.mode }}
 134                                 td {{ assessment.questions.reduce( (a,b) => { return b.active ? a+1 : a; }, 0) }}
 135                                 td {{ assessment.time }}
 136                 if teacher
 137                     h4.title(@click="toggleDisplay('grades')") Grades
 138                     .card(v-show="display=='grades'")
 139                         .center-align
 140                             button.on-left.waves-effect.waves-light.btn(@click="gradeSettings()") Settings
 141                             a#download.hide(href="#" ref="download")
 142                             button.waves-effect.waves-light.btn(@click="download") Download
 143                         ul.tabs.tabs-fixed-width
 144                             li.tab
 145                                 a(href="#group0") All
 146                             li.tab(v-for="group in groupList()")
 147                                 a(:href="groupId(group,'#')") G.{{ group }}
 148                         table.result(:id="groupId(group)" v-for="group in [0].concat(groupList())" @click="showDetails(group)")
 149                             thead
 150                                 tr
 151                                     th Number
 152                                     th Forename
 153                                     th Name
 154                                     th Final
 155                             tbody
 156                                 tr.grade(v-for="student in studentList(group)")
 157                                     td {{ student.number }}
 158                                     td {{ student.forename }}
 159                                     td {{ student.name }}
 160                                     td grade...
 161                                     //td {{ grades[student.number].final }}
 162                                 tr.stats
 163                                     td(colspan="4") Stats: range= stdev= mean=
 164         if teacher
 165             .row(v-show="mode=='edit'")
 166                 .col.s12.m10.offset-m1.l8.offset-l2.xl6.offset-xl3
 167                     h4 {{ assessment.name }}
 168                     .card
 169                         .center-align
 170                             button.waves-effect.waves-light.btn.on-left(@click="materialOpenModal('assessmentSettings')") Settings
 171                             button.waves-effect.waves-light.btn.on-left(@click="materialOpenModal('assessmentEdit')") Content
 172                             button.waves-effect.waves-light.btn(@click="redirect(assessment.name)") View
 173                         #questionList
 174                             .introduction(v-html="assessment.introduction")
 175                             .question(v-for="(question,i) in assessment.questions" :class="{questionInactive:!question.active}")
 176                                 .wording(v-html="question.wording")
 177                                 .option(v-for="(option,j) in question.options" :class="{choiceCorrect:question.answer.includes(j)}" v-html="option")
 178                                 p
 179                                     input(:id="checkBoxFixedId(i)" type="checkbox" v-model="question.fixed")
 180                                     label.on-left(:for="checkBoxFixedId(i)") Fixed
 181                                     input(:id="checkBoxActiveId(i)" type="checkbox" v-model="question.active")
 182                                     label(:for="checkBoxActiveId(i)") Active
 183                             .conclusion(v-html="assessment.conclusion")
 184                         .center-align
 185                             button.waves-effect.waves-light.btn.on-left(@click="mode='view'") Cancel
 186                             button.waves-effect.waves-light.btn(@click="updateAssessment") Send
 187
 188 block append javascripts
 189     script(src="//cdnjs.cloudflare.com/ajax/libs/PapaParse/4.3.6/papaparse.min.js")
 190     script(src="/javascripts/utils/sha1.js")
 191     script(src="/javascripts/utils/validation.js")
 192     script.
 193         let assessmentArray = !{JSON.stringify(assessmentArray)};
 194         const course = !{JSON.stringify(course)};
 195         const initials = "#{initials}";
 196         const admin = #{teacher};
 197     script(src="/javascripts/course.js")