public/javascripts/assessment.js

   1 let socket = null; //monitor answers in real time
   2
   3 if (assessment.mode == "secure" && !checkWindowSize())
   4     document.location.href= "/fullscreen";
   5
   6 function checkWindowSize()
   7 {
   8     // NOTE: temporarily accept smartphone (security hole: pretend being a smartphone on desktop browser...)
   9     if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/))
  10         return true;
  11     // 3 is arbitrary, but a small tolerance is required (e.g. in Firefox)
  12     return window.innerWidth >= screen.width-3 && window.innerHeight >= screen.height-3;
  13 };
  14
  15 let V = new Vue({
  16     el: "#assessment",
  17     data: {
  18         assessment: assessment,
  19         answers: { }, //filled later with answering parameters
  20         student: { }, //filled later (name, password)
  21         // Stage 0: unauthenticated (number),
  22         //       1: authenticated (got a name, unvalidated)
  23         //       2: locked: password set, exam started
  24         //       3: completed
  25         //       4: show answers
  26         stage: assessment.mode != "open" ? 0 : 1,
  27         remainingTime: 0, //global, in seconds
  28         warnMsg: "",
  29     },
  30     computed: {
  31         countdown: function() {
  32             let seconds = this.remainingTime % 60;
  33             let minutes = Math.floor(this.remainingTime / 60);
  34             return this.padWithZero(minutes) + ":" + this.padWithZero(seconds);
  35         },
  36         showAnswers: function() {
  37             return this.stage == 4;
  38         },
  39     },
  40     mounted: function() {
  41         $(".modal").modal();
  42         if (assessment.mode != "secure")
  43             return;
  44         window.addEventListener("keydown", e => {
  45             // Ignore F12 (avoid accidental window resize due to devtools)
  46             // NOTE: in Chromium at least, fullscreen mode exit with F11 cannot be prevented.
  47             // Workaround: disable key at higher level. Possible xbindkey config:
  48             // "false"
  49             //   m:0x10 + c:95
  50             //   Mod2 + F11
  51             if (e.keyCode == 123)
  52                 e.preventDefault();
  53         }, false);
  54         window.addEventListener("blur", () => {
  55             this.trySendCurrentAnswer();
  56             document.location.href= "/noblur";
  57         }, false);
  58         window.addEventListener("resize", e => {
  59             this.trySendCurrentAnswer();
  60             document.location.href= "/fullscreen";
  61         }, false);
  62     },
  63     methods: {
  64         // In case of AJAX errors
  65         showWarning: function(message) {
  66             this.warnMsg = message;
  67             $("#warning").modal("open");
  68         },
  69         padWithZero: function(x) {
  70             if (x < 10)
  71                 return "0" + x;
  72             return x;
  73         },
  74         trySendCurrentAnswer: function() {
  75             if (this.stage == 2)
  76                 this.sendAnswer();
  77         },
  78         // stage 0 --> 1
  79         getStudent: function(cb) {
  80             $.ajax("/get/student", {
  81                 method: "GET",
  82                 data: {
  83                     number: this.student.number,
  84                     cid: assessment.cid,
  85                 },
  86                 dataType: "json",
  87                 success: s => {
  88                     if (!!s.errmsg)
  89                         return this.showWarning(s.errmsg);
  90                     this.stage = 1;
  91                     this.student = s.student;
  92                     Vue.nextTick( () => { Materialize.updateTextFields(); });
  93                     if (!!cb)
  94                         cb();
  95                 },
  96             });
  97         },
  98         // stage 1 --> 0
  99         cancelStudent: function() {
 100             this.stage = 0;
 101         },
 102         // stage 1 --> 2 (get all questions, set password)
 103         startAssessment: function() {
 104             let initializeStage2 = (questions,paper) => {
 105                 $("#leftButton, #rightButton").hide();
 106                 if (assessment.time > 0)
 107                 {
 108                     const deltaTime = !!paper ? Date.now() - paper.startTime : 0;
 109                     this.remainingTime = assessment.time * 60 - Math.round(deltaTime / 1000);
 110                     this.runTimer();
 111                 }
 112                 // Initialize structured answer(s) based on questions type and nesting (TODO: more general)
 113                 if (!!questions)
 114                     assessment.questions = questions;
 115                 this.answers.inputs = [ ];
 116                 for (let q of assessment.questions)
 117                     this.answers.inputs.push( _(q.options.length).times( _.constant(false) ) );
 118                 if (!paper)
 119                 {
 120                     this.answers.indices = assessment.fixed
 121                         ? _.range(assessment.questions.length)
 122                         : _.shuffle( _.range(assessment.questions.length) );
 123                 }
 124                 else
 125                 {
 126                     // Resuming
 127                     let indices = paper.inputs.map( input => { return input.index; });
 128                     let remainingIndices = _.difference( _.range(assessment.questions.length).map(String), indices );
 129                     this.answers.indices = indices.concat( _.shuffle(remainingIndices) );
 130                 }
 131                 this.answers.index = !!paper ? paper.inputs.length : 0;
 132                 this.answers.displayAll = assessment.display == "all";
 133                 this.answers.showSolution = false;
 134                 this.stage = 2;
 135             };
 136             if (assessment.mode == "open")
 137                 return initializeStage2();
 138             $.ajax("/start/assessment", {
 139                 method: "GET",
 140                 data: {
 141                     number: this.student.number,
 142                     aid: assessment._id
 143                 },
 144                 dataType: "json",
 145                 success: s => {
 146                     if (!!s.errmsg)
 147                         return this.showWarning(s.errmsg);
 148                     if (!!s.paper)
 149                     {
 150                         // Resuming: receive stored answers + startTime
 151                         this.student.password = s.paper.password;
 152                         this.answers.inputs = s.paper.inputs.map( inp => { return inp.input; });
 153                     }
 154                     else
 155                     {
 156                         this.student.password = s.password;
 157                         // Got password: students answers locked to this page until potential teacher
 158                         // action (power failure, computer down, ...)
 159                     }
 160                     socket = io.connect("/" + assessment.name, {
 161                         query: "aid=" + assessment._id + "&number=" + this.student.number + "&password=" + this.student.password
 162                     });
 163                     socket.on(message.allAnswers, this.setAnswers);
 164                     initializeStage2(s.questions, s.paper);
 165                 },
 166             });
 167         },
 168         // stage 2
 169         runTimer: function() {
 170             if (assessment.time <= 0)
 171                 return;
 172             let self = this;
 173             setInterval( function() {
 174                 self.remainingTime--;
 175                 if (self.remainingTime <= 0)
 176                 {
 177                     if (self.stage == 2)
 178                         self.endAssessment();
 179                     clearInterval(this);
 180                 }
 181             }, 1000);
 182         },
 183         // stage 2
 184         sendAnswer: function() {
 185             const realIndex = this.answers.indices[this.answers.index];
 186             let gotoNext = () => {
 187                 if (this.answers.index == assessment.questions.length - 1)
 188                     this.endAssessment();
 189                 else
 190                     this.answers.index++;
 191                 this.$children[0].$forceUpdate(); //TODO: bad HACK, and shouldn't be required...
 192             };
 193             if (assessment.mode == "open")
 194                 return gotoNext(); //only local
 195             let answerData = {
 196                 aid: assessment._id,
 197                 answer: JSON.stringify({
 198                     index: realIndex.toString(),
 199                     input: this.answers.inputs[realIndex]
 200                         .map( (tf,i) => { return {val:tf,idx:i}; } )
 201                         .filter( item => { return item.val; })
 202                         .map( item => { return item.idx; })
 203                 }),
 204                 number: this.student.number,
 205                 password: this.student.password,
 206             };
 207             $.ajax("/send/answer", {
 208                 method: "GET",
 209                 data: answerData,
 210                 dataType: "json",
 211                 success: ret => {
 212                     if (!!ret.errmsg)
 213                         return this.showWarning(ret.errmsg);
 214                     gotoNext();
 215                     socket.emit(message.newAnswer, answerData);
 216                 },
 217             });
 218         },
 219         // stage 2 --> 3 (or 4)
 220         // from a message by statements component, or time over
 221         endAssessment: function() {
 222             // Set endTime, destroy password
 223             $("#leftButton, #rightButton").show();
 224             if (assessment.mode == "open")
 225             {
 226                 this.stage = 4;
 227                 this.answers.showSolution = true;
 228                 return;
 229             }
 230             $.ajax("/end/assessment", {
 231                 method: "GET",
 232                 data: {
 233                     aid: assessment._id,
 234                     number: this.student.number,
 235                     password: this.student.password,
 236                 },
 237                 dataType: "json",
 238                 success: ret => {
 239                     if (!!ret.errmsg)
 240                         return this.showWarning(ret.errmsg);
 241                     assessment.conclusion = ret.conclusion;
 242                     this.stage = 3;
 243                     delete this.student["password"]; //unable to send new answers now
 244                     socket.disconnect();
 245                     socket = null;
 246                 },
 247             });
 248         },
 249         // stage 3 --> 4 (on socket message "feedback")
 250         setAnswers: function(m) {
 251             for (let i=0; i<m.answers.length; i++)
 252                 assessment.questions[i].answer = m.answers[i];
 253             this.answers.showSolution = true;
 254             this.stage = 4;
 255         },
 256     },
 257 });