allow <code class=...>, temporary MathJax fix, try to fix pre-filled inputs bug
[qomet.git] / public / javascripts / assessment.js
1 // TODO: if display == "all", les envois devraient être non définitifs (possibilité de corriger)
2 // Et, blur sur une (sous-)question devrait envoyer la version courante de la sous-question
3
4 let socket = null; //monitor answers in real time
5
6 if (assessment.mode == "secure" && !checkWindowSize())
7 document.location.href= "/fullscreen";
8
9 function checkWindowSize()
10 {
11 // NOTE: temporarily accept smartphone (security hole: pretend being a smartphone on desktop browser...)
12 if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/))
13 return true;
14 // 3 is arbitrary, but a small tolerance is required (e.g. in Firefox)
15 return window.innerWidth >= screen.width-3 && window.innerHeight >= screen.height-3;
16 };
17
18 function libsRefresh()
19 {
20 // Run Prism + MathJax on questions text
21 $("#statements").find("code[class^=language-]").each( (i,elem) => {
22 Prism.highlightElement(elem);
23 });
24 MathJax.Hub.Queue(["Typeset",MathJax.Hub,"statements"]);
25 }
26
27 new Vue({
28 el: "#assessment",
29 data: {
30 assessment: assessment,
31 inputs: [ ], //student's answers
32 student: { }, //filled later
33 // Stage 0: unauthenticated (number),
34 // 1: authenticated (got a name, unvalidated)
35 // 2: locked: password set, exam started
36 // 3: completed
37 // 4: show answers
38 stage: assessment.mode != "open" ? 0 : 1,
39 remainingTime: 0, //global, in seconds
40 warnMsg: "",
41 },
42 components: {
43 "statements": {
44 props: ['assessment','inputs','student','stage'],
45 // TODO: general render function for nested exercises
46 // TODO: with answer if stage==4 : class "wrong" if ticked AND stage==4 AND received answers
47 // class "right" if stage == 4 AND received answers (background-color: red / green)
48 // There should be a questions navigator below, or next (visible if display=='all')
49 // Full questions tree is rendered, but some parts hidden depending on display settings
50 render(h) {
51 let self = this;
52 let questions = (assessment.questions || [ ]).map( (q,i) => {
53 let questionContent = [ ];
54 questionContent.push(
55 h(
56 "div",
57 {
58 "class": {
59 wording: true,
60 },
61 domProps: {
62 innerHTML: q.wording,
63 },
64 }
65 )
66 );
67 let optionsOrder = _.range(q.options.length);
68 if (!q.fixed)
69 optionsOrder = _.shuffle(optionsOrder);
70 let optionList = [ ];
71 optionsOrder.forEach( idx => {
72 let option = [ ];
73 option.push(
74 h(
75 "input",
76 {
77 domProps: {
78 checked: this.inputs.length > 0 && this.inputs[i][idx],
79 },
80 attrs: {
81 id: this.inputId(i,idx),
82 type: "checkbox",
83 },
84 on: {
85 change: e => { this.inputs[i][idx] = e.target.checked; },
86 },
87 },
88 )
89 );
90 option.push(
91 h(
92 "label",
93 {
94 domProps: {
95 innerHTML: q.options[idx],
96 },
97 attrs: {
98 "for": this.inputId(i,idx),
99 },
100 }
101 )
102 );
103 optionList.push(
104 h(
105 "div",
106 {
107 "class": {
108 option: true,
109 choiceCorrect: this.stage == 4 && assessment.questions[i].answer.includes(idx),
110 choiceWrong: this.stage == 4 && this.inputs[i][idx] && !assessment.questions[i].answer.includes(idx),
111 },
112 },
113 option
114 )
115 );
116 });
117 questionContent.push(
118 h(
119 "div",
120 {
121 "class": {
122 optionList: true,
123 },
124 },
125 optionList
126 )
127 );
128 return h(
129 "div",
130 {
131 "class": {
132 "question": true,
133 "hide": this.stage == 2 && assessment.display == 'one' && assessment.indices[assessment.index] != i,
134 },
135 },
136 questionContent
137 );
138 });
139 if (this.stage == 2)
140 {
141 questions.unshift(
142 h(
143 "button",
144 {
145 "class": {
146 "waves-effect": true,
147 "waves-light": true,
148 "btn": true,
149 },
150 style: {
151 "display": "block",
152 "margin-left": "auto",
153 "margin-right": "auto",
154 },
155 on: {
156 click: () => this.sendAnswer(assessment.indices[assessment.index]),
157 },
158 },
159 "Send"
160 )
161 );
162 }
163 return h(
164 "div",
165 {
166 attrs: {
167 id: "statements",
168 },
169 },
170 questions
171 );
172 },
173 mounted: function() {
174 if (assessment.mode != "secure")
175 return;
176 window.addEventListener("keydown", e => {
177 // (Try to) Ignore F11 + F12 (avoid accidental window resize)
178 // NOTE: in Chromium at least, exiting fullscreen mode with F11 cannot be prevented.
179 // Workaround: disable key at higher level. Possible xbindkey config:
180 // "false"
181 // m:0x10 + c:95
182 // Mod2 + F11
183 if ([122,123].includes(e.keyCode))
184 e.preventDefault();
185 }, false);
186 window.addEventListener("blur", () => {
187 this.trySendCurrentAnswer();
188 document.location.href= "/noblur";
189 }, false);
190 window.addEventListener("resize", e => {
191 this.trySendCurrentAnswer();
192 document.location.href= "/fullscreen";
193 }, false);
194 },
195 updated: function() {
196 libsRefresh(); //TODO: shouldn't be required: "MathJax" strings on start and assign them to assessment.questions. ...
197 },
198 methods: {
199 inputId: function(i,j) {
200 return "q" + i + "_" + "input" + j;
201 },
202 trySendCurrentAnswer: function() {
203 if (this.stage == 2)
204 this.sendAnswer(assessment.indices[assessment.index]);
205 },
206 // stage 2
207 sendAnswer: function(realIndex) {
208 let gotoNext = () => {
209 if (assessment.index == assessment.questions.length - 1)
210 this.$emit("gameover");
211 else
212 assessment.index++;
213 this.$forceUpdate(); //TODO: shouldn't be required
214 };
215 if (assessment.mode == "open")
216 return gotoNext(); //only local
217 let answerData = {
218 aid: assessment._id,
219 answer: JSON.stringify({
220 index:realIndex.toString(),
221 input:this.inputs[realIndex]
222 .map( (tf,i) => { return {val:tf,idx:i}; } )
223 .filter( item => { return item.val; })
224 .map( item => { return item.idx; })
225 }),
226 number: this.student.number,
227 password: this.student.password,
228 };
229 $.ajax("/send/answer", {
230 method: "GET",
231 data: answerData,
232 dataType: "json",
233 success: ret => {
234 if (!!ret.errmsg)
235 return this.$emit("warning", ret.errmsg);
236 else
237 gotoNext();
238 //socket.emit(message.newAnswer, answer);
239 },
240 });
241 },
242 },
243 },
244 },
245 computed: {
246 countdown: function() {
247 let seconds = this.remainingTime % 60;
248 let minutes = Math.floor(this.remainingTime / 60);
249 return this.padWithZero(minutes) + ":" + this.padWithZero(seconds);
250 },
251 },
252 mounted: function() {
253 $(".modal").modal();
254 },
255 methods: {
256 // In case of AJAX errors
257 warning: function(message) {
258 this.warnMsg = message;
259 $("#warning").modal("open");
260 },
261 padWithZero: function(x) {
262 if (x < 10)
263 return "0" + x;
264 return x;
265 },
266 // stage 0 --> 1
267 getStudent: function(cb) {
268 $.ajax("/get/student", {
269 method: "GET",
270 data: {
271 number: this.student.number,
272 cid: assessment.cid,
273 },
274 dataType: "json",
275 success: s => {
276 if (!!s.errmsg)
277 return this.warning(s.errmsg);
278 this.stage = 1;
279 this.student = s.student;
280 Vue.nextTick( () => { Materialize.updateTextFields(); });
281 if (!!cb)
282 cb();
283 },
284 });
285 },
286 // stage 1 --> 0
287 cancelStudent: function() {
288 this.stage = 0;
289 },
290 // stage 1 --> 2 (get all questions, set password)
291 startAssessment: function() {
292 let initializeStage2 = (questions,paper) => {
293 $("#leftButton, #rightButton").hide();
294 if (assessment.time > 0)
295 {
296 const deltaTime = !!paper ? Date.now() - paper.startTime : 0;
297 this.remainingTime = assessment.time * 60 - Math.round(deltaTime / 1000);
298 this.runTimer();
299 }
300 // Initialize structured answer(s) based on questions type and nesting (TODO: more general)
301 if (!!questions)
302 assessment.questions = questions;
303 for (let q of assessment.questions)
304 this.inputs.push( _(q.options.length).times( _.constant(false) ) );
305 if (!paper)
306 {
307 assessment.indices = assessment.fixed
308 ? _.range(assessment.questions.length)
309 : _.shuffle( _.range(assessment.questions.length) );
310 }
311 else
312 {
313 // Resuming
314 let indices = paper.inputs.map( input => { return input.index; });
315 let remainingIndices = _.difference( _.range(assessment.questions.length).map(String), indices );
316 assessment.indices = indices.concat( _.shuffle(remainingIndices) );
317 }
318 assessment.index = !!paper ? paper.inputs.length : 0;
319 Vue.nextTick(libsRefresh);
320 this.stage = 2;
321 };
322 if (assessment.mode == "open")
323 return initializeStage2();
324 $.ajax("/start/assessment", {
325 method: "GET",
326 data: {
327 number: this.student.number,
328 aid: assessment._id
329 },
330 dataType: "json",
331 success: s => {
332 if (!!s.errmsg)
333 return this.warning(s.errmsg);
334 if (!!s.paper)
335 {
336 // Resuming: receive stored answers + startTime
337 this.student.password = s.paper.password;
338 this.inputs = s.paper.inputs.map( inp => { return inp.input; });
339 }
340 else
341 {
342 this.student.password = s.password;
343 // Got password: students answers locked to this page until potential teacher
344 // action (power failure, computer down, ...)
345 }
346 // TODO: password also exchanged by sockets to check identity
347 //socket = io.connect("/" + assessment.name, {
348 // query: "number=" + this.student.number + "&password=" + this.password
349 //});
350 //socket.on(message.allAnswers, this.setAnswers);
351 //socket.on("disconnect", () => { }); //TODO: notify monitor (highlight red), redirect
352 initializeStage2(s.questions, s.paper);
353 },
354 });
355 },
356 // stage 2
357 runTimer: function() {
358 if (assessment.time <= 0)
359 return;
360 let self = this;
361 setInterval( function() {
362 self.remainingTime--;
363 if (self.remainingTime <= 0 || self.stage >= 4)
364 self.endAssessment();
365 clearInterval(this);
366 }, 1000);
367 },
368 // stage 2 --> 3 (or 4)
369 // from a message by statements component, or time over
370 endAssessment: function() {
371 // Set endTime, destroy password
372 $("#leftButton, #rightButton").show();
373 if (assessment.mode == "open")
374 {
375 this.stage = 4;
376 return;
377 }
378 $.ajax("/end/assessment", {
379 method: "GET",
380 data: {
381 aid: assessment._id,
382 number: this.student.number,
383 password: this.student.password,
384 },
385 dataType: "json",
386 success: ret => {
387 if (!!ret.errmsg)
388 return this.warning(ret.errmsg);
389 assessment.conclusion = ret.conclusion;
390 this.stage = 3;
391 delete this.student["password"]; //unable to send new answers now
392 //socket.disconnect();
393 //socket = null;
394 },
395 });
396 },
397 // stage 3 --> 4 (on socket message "feedback")
398 setAnswers: function(answers) {
399 for (let i=0; i<answers.length; i++)
400 assessment.questions[i].answer = answers[i];
401 this.stage = 4;
402 },
403 },
404 });