views/assessment.pug

   1 extends withQuestions
   2
   3 block append stylesheets
   4     link(rel="stylesheet" href="/stylesheets/assessment.css")
   5     noscript
   6         meta(http-equiv="Refresh" content="0; URL=/enablejs")
   7
   8 block rightMenu
   9     a#rightButton.btn-floating.btn-large.grey(href=assessment.name + "/monitor")
  10         i.material-icons video_label
  11
  12 block content
  13     .container#assessment
  14         .row
  15             #warning.modal
  16                 .modal-content {{ warnMsg }}
  17                 .modal-footer
  18                     .center-align
  19                         a.modal-action.modal-close.waves-effect.waves-light.btn-flat(href="#!") Ok
  20         .row
  21             .col.s12.m10.offset-m1.l8.offset-l2.xl6.offset-xl3
  22                 h4= assessment.name
  23                 #stage0(v-show="stage==0")
  24                     .card
  25                         .input-field.inline.on-left
  26                             label(for="number") Number
  27                             input#number(type="text" v-model="student.number" @keyup.enter="getStudent()")
  28                         button.waves-effect.waves-light.btn(@click="getStudent()") Send
  29                 #stage1(v-show="stage==1")
  30                     .card
  31                         if assessment.mode != "open"
  32                             .input-field.inline.on-left
  33                                 label(for="forename") Forename
  34                                 input#forename(type="text" v-model="student.forename" disabled)
  35                             .input-field.inline
  36                                 label(for="name") Name
  37                                 input#name(type="text" v-model="student.name" disabled)
  38                         p.center-align
  39                             if assessment.mode != "open"
  40                                 button.waves-effect.waves-light.btn.on-left(@click="cancelStudent") Cancel
  41                             button.waves-effect.waves-light.btn(@click="startAssessment") Start!
  42                 #stage0_1_4(v-show="[0,1,4].includes(stage)")
  43                     .card
  44                         .introduction(v-html="assessment.introduction")
  45                 #stage2_4(v-if="[2,4].includes(stage)")
  46                     if assessment.time > 0
  47                         .card(v-show="stage==2")
  48                             .timer.center {{ countdown }}
  49                     .card
  50                         button.sendAnswer.waves-effect.waves-light.btn(@click="sendAnswer") Send
  51                         statements(:questions="assessment.questions" :answers="answers")
  52                         if assessment.display == "all"
  53                             button.sendAnswer.waves-effect.waves-light.btn(@click="sendAnswer") Send
  54                 #stage3(v-show="stage==3")
  55                     .card
  56                         .finish Exam completed &#9786; ...don't close the window!
  57                 #stage3_4(v-show="[3,4].includes(stage)")
  58                     .card
  59                         .conclusion(v-html="assessment.conclusion")
  60
  61 block append javascripts
  62     script.
  63         let assessment = !{JSON.stringify(assessment)};
  64         const monitoring = false;
  65     script(src="//cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js")
  66     script(src="/javascripts/utils/libsRefresh.js")
  67     script(src="/javascripts/components/statements.js")
  68     script(src="/javascripts/assessment.js")