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
  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
  33                                 label(for="name") Name
  34                                 input#name(type="text" v-model="student.name" disabled)
  35                         p.center-align
  36                             if assessment.mode != "open"
  37                                 button.waves-effect.waves-light.btn.on-left(@click="cancelStudent") Cancel
  38                             button.waves-effect.waves-light.btn(@click="startAssessment") Start!
  39                 #stage0_1_4(v-show="[0,1,4].includes(stage)")
  40                     .card
  41                         .introduction(v-html="assessment.introduction")
  42                 #stage2_4(v-if="[2,4].includes(stage)")
  43                     if assessment.time > 0
  44                         .card(v-show="stage==2")
  45                             .timer.center {{ countdown }}
  46                     .card
  47                         button.sendAnswer.waves-effect.waves-light.btn(v-show="stage==2" @click="sendAnswer") Send
  48                         statements(:questions="assessment.questions" :answers="answers")
  49                         if assessment.display == "all"
  50                             button.sendAnswer.waves-effect.waves-light.btn(v-show="stage==2" @click="sendAnswer") Send
  51                 #stage3(v-show="stage==3")
  52                     .card
  53                         .finish Exam completed &#9786; ...don't close the window!
  54                 #stage3_4(v-show="[3,4].includes(stage)")
  55                     .card
  56                         .conclusion(v-html="assessment.conclusion")
  57
  58 block append javascripts
  59     script.
  60         let assessment = !{JSON.stringify(assessment)};
  61         const monitoring = false;
  62     script(src="//cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js")
  63     script(src="/javascripts/utils/libsRefresh.js")
  64     script(src="/javascripts/components/statements.js")
  65     script(src="/javascripts/assessment.js")