views/course.pug

   1 extends withQuestions
   2
   3 block append stylesheets
   4     link(rel="stylesheet" href="/stylesheets/statements.css")
   5     link(rel="stylesheet" href="/stylesheets/course.css")
   6
   7 block content
   8     .container#course
   9         if teacher
  10             #newAssessment.modal
  11                 .modal-content
  12                     form(@submit.prevent="addAssessment")
  13                         .input-field
  14                             input#assessmentName(type="text" v-model="newAssessment.name" required)
  15                             label(for="assessmentName") Name
  16                 .modal-footer
  17                     .center-align
  18                         a.waves-effect.waves-light.btn(href="#!" @click="addAssessment()")
  19                             span Submit
  20                             i.material-icons.right send
  21         .row(v-show="mode=='view'")
  22
  23
  24
  25
  26
  27
  28
  29
  30             #assessmentEdit
  31                 form
  32                     p
  33                         input#active(type="checkbox" v-model="assessment.active")
  34                         label(for="active") Assessment is active
  35                     div
  36                         h4 Questions mode:
  37                         span(title="Exam mode, secured (class only): students cannot lose focus or exit fullscreen")
  38                             input#secure(name="status" type="radio" value="secure" v-model="assessment.mode")
  39                             label(for="secure") secure
  40                         span(title="Exam mode, watched (class only): teachers are notified when students lose focus or resize window")
  41                             input#watch(name="status" type="radio" value="watch" v-model="assessment.mode")
  42                             label(for="watch") watch
  43                         span(title="Exam mode, unwatched: students can browse the web freely")
  44                             input#exam(name="status" type="radio" value="exam" v-model="assessment.mode")
  45                             label(for="exam") exam
  46                         span(title="Questions list open to the world (useful mode after an exam, or for a 'questions bank'")
  47                             input#open(name="status" type="radio" value="open" v-model="assessment.mode")
  48                             label(for="open") open
  49                     p
  50                         input#fixed(type="checkbox" v-model="assessment.fixed")
  51                         label(for="fixed") Fixed questions order
  52                     div
  53                         h4 Display type:
  54                         span(title="Show only one question at a time (with potential sub-questions)")
  55                             input#displayOne(name="display" type="radio" value="one" v-model="assessment.display")
  56                             label(for="displayOne") one
  57                         span(title="Always show all questions (with an optional navigator)")
  58                             input#displayAll(name="display" type="radio" value="all" v-model="assessment.display")
  59                             label(for="displayAll") all
  60                     .input-field
  61                         input#time(type="number" v-model.number="assessment.time")
  62                         label(for="time") Time (minutes)
  63                     .input-field
  64                         textarea#introduction.materialize-textarea(v-model="assessment.introduction")
  65                         label(for="introduction") Introduction
  66                     .input-field
  67                         textarea#assessmentEdition.materialize-textarea(v-model="assessmentText")
  68                         label(for="assessmentEdition") Assessment in text format
  69
  70
  71
  72
  73
  74
  75
  76             .col.s12.m10.offset-m1
  77                 if teacher
  78                     h4.title(@click="toggleDisplay('students')") Students
  79                     .card(v-show="display=='students'")
  80                         .center-align
  81                             input.hide#upload(type="file" @change="upload")
  82                             button.on-left.waves-effect.waves-light.btn(@click="uploadTrigger()") Import
  83                         table
  84                             thead
  85                                 tr
  86                                     th Number
  87                                     th Name
  88                                     th Group
  89                             tbody
  90                                 tr.student(v-for="student in studentList(0)")
  91                                     td {{ student.number }}
  92                                     td {{ student.name }}
  93                                     td {{ student.group }}
  94                 h4.title(@click="toggleDisplay('assessments')") Assessments
  95                 .card(v-show="display=='assessments'")
  96                     if teacher
  97                         .center-align
  98                             a.on-left.waves-effect.waves-light.btn.modal-trigger(href="#newAssessment") New assessment
  99                             input#password(type="password" v-model="monitorPwd" @keyup.enter="setPassword"
 100                                     placeholder="Password" title="Monitoring password")
 101                     table
 102                         thead
 103                             tr
 104                                 th Name
 105                                 th Mode
 106                                 th #Questions
 107                                 th Time
 108                         tbody
 109                             tr.assessment(v-for="(assessment,i) in assessmentArray" :class="{idle:!assessment.active}"
 110                                     @click.left="actionAssessment(i)" @contextmenu.prevent="deleteAssessment(assessment)")
 111                                 td {{ assessment.name }}
 112                                 td {{ assessment.mode }}
 113                                 td {{ assessment.questions.reduce( (a,b) => { return b.active ? a+1 : a; }, 0) }}
 114                                 td {{ assessment.time }}
 115         if teacher
 116             .row(v-show="mode=='edit'")
 117                 .col.s12.m10.offset-m1
 118
 119
 120
 121
 122                     // TODO: always edit mode, with a modal preview
 123
 124
 125
 126                     h4 {{ assessment.name }}
 127                     .card
 128                         .center-align
 129                             button.waves-effect.waves-light.btn.on-left(@click="materialOpenModal('assessmentSettings')") Settings
 130                             button.waves-effect.waves-light.btn.on-left(@click="materialOpenModal('assessmentEdit')") Content
 131                             button.waves-effect.waves-light.btn(@click="redirect(assessment.name)") View
 132                         #questionList
 133                             .introduction(v-html="assessment.introduction")
 134                             .question(v-for="(question,i) in assessment.questions" :class="{questionInactive:!question.active}")
 135                                 .wording(v-html="question.wording")
 136                                 .option(v-for="(option,j) in question.options" :class="{choiceCorrect:question.answer.includes(j)}" v-html="option")
 137                                 p
 138                                     input(:id="checkboxFixedId(i)" type="checkbox" v-model="question.fixed")
 139                                     label.on-left(:for="checkboxFixedId(i)") Fixed
 140                                     input(:id="checkboxActiveId(i)" type="checkbox" v-model="question.active")
 141                                     label(:for="checkboxActiveId(i)") Active
 142                                     input(time default 0 = untimed)
 143                                     label Time for the question
 144                         .center-align
 145                             button.waves-effect.waves-light.btn.on-left(@click="mode='view'") Cancel
 146                             button.waves-effect.waves-light.btn(@click="updateAssessment") Send
 147
 148 block append javascripts
 149     script(src="//cdnjs.cloudflare.com/ajax/libs/PapaParse/4.3.6/papaparse.min.js")
 150     script.
 151         let assessmentArray = !{JSON.stringify(assessmentArray)};
 152         const course = !{JSON.stringify(course)};
 153         const initials = "#{initials}";
 154         const admin = #{teacher};
 155     script(src="/javascripts/utils/sha1.js")
 156     script(src="/javascripts/utils/validation.js")
 157     script(src="/javascripts/course.js")