views/monitor.pug

   1 extends withQuestions
   2
   3 block append stylesheets
   4     link(rel="stylesheet" href="/stylesheets/monitor.css")
   5
   6 block content
   7     .container#monitor
   8         .row
   9             .col.s12.m10.offset-m1.l8.offset-l2.xl6.offset-xl3
  10                 h4= examName
  11                 #stage0(v-show="stage==0")
  12                     .card
  13                         .input-field.inline.on-left
  14                             label(for="password") Password
  15                             input#password(type="password" v-model="password" @keyup.enter="startMonitoring()")
  16                         button.waves-effect.waves-light.btn(@click="startMonitoring()") Send
  17                 #stage1(v-show="stage==1")
  18                     button.waves-effect.waves-light.btn(@click="endMonitoring()") Send feedback
  19                     h4.title(@click="toggleDisplay('answers')") Anwers
  20                     // TODO: aussi afficher stats, permettre tri par colonnes
  21                     .card(v-show="display=='answers'")
  22                         ul.tabs.tabs-fixed-width
  23                             li.tab
  24                                 a(href="#group0") All
  25                             li.tab(v-for="group in groupList()")
  26                                 a(:href="groupId(group,'#')") G.{{ group }}
  27                         table(:id="groupId(group)" v-for="group in [0].concat(groupList())")
  28                             thead
  29                                 tr
  30                                     th Forename
  31                                     th Name
  32                                     th(v-for="(q,i) in assessment.questions") Q.{{ (i+1) }}
  33                             tbody
  34                                 tr.assessment(v-for="s in studentList(group)")
  35                                     td {{ s.forename }}
  36                                     td {{ s.name }}
  37                                     td(v-for="(q,i) in assessment.questions" :style="{backgroundColor: getColor(s.number,i)}" @click="seeDetails(s.number,i)") &nbsp;
  38                     h4.title(@click="toggleDisplay('assessment')") Assessment
  39                     div(v-show="display=='assessment'")
  40                         .card
  41                             .introduction(v-html="assessment.introduction")
  42                         .card
  43                             statements(:questions="assessment.questions" :answers="answers")
  44                         .card
  45                             .conclusion(v-html="assessment.conclusion")
  46
  47 block append javascripts
  48     script.
  49         const examName = "#{examName}";
  50         const courseCode = "#{courseCode}";
  51         const initials = "#{initials}";
  52         const monitoring = true;
  53     script(src="/javascripts/utils/libsRefresh.js")
  54     script(src="/javascripts/components/statements.js")
  55     script(src="//cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js")
  56     script(src="/javascripts/utils/sha1.js")
  57     script(src="/javascripts/monitor.js")