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)")
  93                                     | {{ grade(i,student.number) }}
  94                 .modal-footer
  95                     .center-align
  96                         a.modal-action.modal-close.waves-effect.waves-light.btn-flat(href="#!") Close
  97         .row(v-show="mode=='view'")
  98             .col.s12.m10.offset-m1
  99                 if teacher
 100                     h4.title(@click="toggleDisplay('students')") Students
 101                     .card(v-show="display=='students'")
 102                         .center-align
 103                             input.hide#upload(type="file" @change="upload")
 104                             button.on-left.waves-effect.waves-light.btn(@click="uploadTrigger()") Import
 105                         table
 106                             thead
 107                                 tr
 108                                     th Number
 109                                     th Name
 110                                     th Group
 111                             tbody
 112                                 tr.student(v-for="student in studentList(0)")
 113                                     td {{ student.number }}
 114                                     td {{ student.name }}
 115                                     td {{ student.group }}
 116                 h4.title(@click="toggleDisplay('assessments')") Assessments
 117                 .card(v-show="display=='assessments'")
 118                     if teacher
 119                         .center-align
 120                             a.on-left.waves-effect.waves-light.btn.modal-trigger(href="#newAssessment") New assessment
 121                             input#password(type="password" v-model="monitorPwd" @keyup.enter="setPassword"
 122                                     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" :class="{idle:!assessment.active}"
 132                                     @click.left="actionAssessment(i)" @contextmenu.prevent="deleteAssessment(assessment)")
 133                                 td {{ assessment.name }}
 134                                 td {{ assessment.mode }}
 135                                 td {{ assessment.questions.reduce( (a,b) => { return b.active ? a+1 : a; }, 0) }}
 136                                 td {{ assessment.time }}
 137                 if teacher
 138                     h4.title(@click="toggleDisplay('grades')") Grades
 139                     .card(v-show="display=='grades'")
 140                         .center-align
 141                             button.on-left.waves-effect.waves-light.btn(@click="gradeSettings()") Settings
 142                             a#download.hide(href="#" ref="download")
 143                             button.waves-effect.waves-light.btn(@click="download") Download
 144                         ul.tabs.tabs-fixed-width
 145                             li.tab
 146                                 a(href="#group0") All
 147                             li.tab(v-for="group in groupList()")
 148                                 a(:href="groupId(group,'#')") G.{{ group }}
 149                         table.result(:id="groupId(group)" v-for="group in [0].concat(groupList())" @click="showDetails(group)")
 150                             thead
 151                                 tr
 152                                     th Number
 153                                     th Name
 154                                     th Final
 155                             tbody
 156                                 tr.grade(v-for="student in studentList(group)")
 157                                     td {{ student.number }}
 158                                     td {{ student.name }}
 159                                     td grade...
 160                                     //td {{ grades[student.number].final }}
 161                                 tr.stats
 162                                     td(colspan="4") Stats: range= stdev= mean=
 163         if teacher
 164             .row(v-show="mode=='edit'")
 165                 .col.s12.m10.offset-m1
 166                     h4 {{ assessment.name }}
 167                     .card
 168                         .center-align
 169                             button.waves-effect.waves-light.btn.on-left(@click="materialOpenModal('assessmentSettings')") Settings
 170                             button.waves-effect.waves-light.btn.on-left(@click="materialOpenModal('assessmentEdit')") Content
 171                             button.waves-effect.waves-light.btn(@click="redirect(assessment.name)") View
 172                         #questionList
 173                             .introduction(v-html="assessment.introduction")
 174                             .question(v-for="(question,i) in assessment.questions" :class="{questionInactive:!question.active}")
 175                                 .wording(v-html="question.wording")
 176                                 .option(v-for="(option,j) in question.options" :class="{choiceCorrect:question.answer.includes(j)}" v-html="option")
 177                                 p
 178                                     input(:id="checkBoxFixedId(i)" type="checkbox" v-model="question.fixed")
 179                                     label.on-left(:for="checkBoxFixedId(i)") Fixed
 180                                     input(:id="checkBoxActiveId(i)" type="checkbox" v-model="question.active")
 181                                     label(:for="checkBoxActiveId(i)") Active
 182                             .conclusion(v-html="assessment.conclusion")
 183                         .center-align
 184                             button.waves-effect.waves-light.btn.on-left(@click="mode='view'") Cancel
 185                             button.waves-effect.waves-light.btn(@click="updateAssessment") Send
 186
 187 block append javascripts
 188     script(src="//cdnjs.cloudflare.com/ajax/libs/PapaParse/4.3.6/papaparse.min.js")
 189     script.
 190         let assessmentArray = !{JSON.stringify(assessmentArray)};
 191         const course = !{JSON.stringify(course)};
 192         const initials = "#{initials}";
 193         const admin = #{teacher};
 194     script(src="/javascripts/utils/sha1.js")
 195     script(src="/javascripts/utils/validation.js")
 196     script(src="/javascripts/course.js")