Commit | Line | Data |
---|---|---|
cc7c0f5e BA |
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 | ||
e99c53fb BA |
4 | let socket = null; //monitor answers in real time |
5 | ||
cc7c0f5e BA |
6 | if (assessment.mode == "secure" && !checkWindowSize()) |
7 | document.location.href= "/fullscreen"; | |
e99c53fb | 8 | |
cc7c0f5e | 9 | function checkWindowSize() |
e99c53fb | 10 | { |
cc7c0f5e BA |
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; | |
f03a2ad9 BA |
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; | |
e99c53fb BA |
16 | }; |
17 | ||
6bf4a38e BA |
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 | ||
cc7c0f5e | 27 | new Vue({ |
e99c53fb BA |
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 | |
f03a2ad9 | 40 | warnMsg: "", |
e99c53fb BA |
41 | }, |
42 | components: { | |
43 | "statements": { | |
44 | props: ['assessment','inputs','student','stage'], | |
e99c53fb BA |
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; | |
f03a2ad9 | 52 | let questions = (assessment.questions || [ ]).map( (q,i) => { |
e99c53fb BA |
53 | let questionContent = [ ]; |
54 | questionContent.push( | |
55 | h( | |
56 | "div", | |
57 | { | |
58 | "class": { | |
cc7c0f5e | 59 | wording: true, |
e99c53fb BA |
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: { | |
f03a2ad9 | 78 | checked: this.inputs.length > 0 && this.inputs[i][idx], |
e99c53fb BA |
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, | |
f03a2ad9 | 133 | "hide": this.stage == 2 && assessment.display == 'one' && assessment.indices[assessment.index] != i, |
e99c53fb BA |
134 | }, |
135 | }, | |
136 | questionContent | |
137 | ); | |
138 | }); | |
139 | if (this.stage == 2) | |
140 | { | |
e99c53fb BA |
141 | questions.unshift( |
142 | h( | |
143 | "button", | |
144 | { | |
145 | "class": { | |
146 | "waves-effect": true, | |
147 | "waves-light": true, | |
148 | "btn": true, | |
149 | }, | |
cc7c0f5e BA |
150 | style: { |
151 | "display": "block", | |
152 | "margin-left": "auto", | |
153 | "margin-right": "auto", | |
154 | }, | |
e99c53fb | 155 | on: { |
f03a2ad9 | 156 | click: () => this.sendAnswer(assessment.indices[assessment.index]), |
e99c53fb BA |
157 | }, |
158 | }, | |
159 | "Send" | |
160 | ) | |
161 | ); | |
162 | } | |
163 | return h( | |
164 | "div", | |
165 | { | |
166 | attrs: { | |
167 | id: "statements", | |
168 | }, | |
169 | }, | |
170 | questions | |
171 | ); | |
172 | }, | |
cc7c0f5e BA |
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 | }, | |
6bf4a38e BA |
195 | updated: function() { |
196 | libsRefresh(); //TODO: shouldn't be required: "MathJax" strings on start and assign them to assessment.questions. ... | |
197 | }, | |
e99c53fb | 198 | methods: { |
e99c53fb BA |
199 | inputId: function(i,j) { |
200 | return "q" + i + "_" + "input" + j; | |
201 | }, | |
cc7c0f5e BA |
202 | trySendCurrentAnswer: function() { |
203 | if (this.stage == 2) | |
f03a2ad9 | 204 | this.sendAnswer(assessment.indices[assessment.index]); |
e99c53fb BA |
205 | }, |
206 | // stage 2 | |
207 | sendAnswer: function(realIndex) { | |
2c545c26 BA |
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 | }; | |
e99c53fb | 215 | if (assessment.mode == "open") |
2c545c26 | 216 | return gotoNext(); //only local |
e99c53fb BA |
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) | |
f03a2ad9 | 235 | return this.$emit("warning", ret.errmsg); |
2c545c26 BA |
236 | else |
237 | gotoNext(); | |
e99c53fb BA |
238 | //socket.emit(message.newAnswer, answer); |
239 | }, | |
240 | }); | |
241 | }, | |
e99c53fb BA |
242 | }, |
243 | }, | |
244 | }, | |
e99c53fb BA |
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 | }, | |
f03a2ad9 BA |
252 | mounted: function() { |
253 | $(".modal").modal(); | |
254 | }, | |
e99c53fb | 255 | methods: { |
f03a2ad9 BA |
256 | // In case of AJAX errors |
257 | warning: function(message) { | |
258 | this.warnMsg = message; | |
259 | $("#warning").modal("open"); | |
260 | }, | |
e99c53fb BA |
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) | |
f03a2ad9 | 277 | return this.warning(s.errmsg); |
e99c53fb BA |
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() { | |
f03a2ad9 | 292 | let initializeStage2 = (questions,paper) => { |
e99c53fb BA |
293 | $("#leftButton, #rightButton").hide(); |
294 | if (assessment.time > 0) | |
295 | { | |
85cf9f89 BA |
296 | const deltaTime = !!paper ? Date.now() - paper.startTime : 0; |
297 | this.remainingTime = assessment.time * 60 - Math.round(deltaTime / 1000); | |
e99c53fb BA |
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) ) ); | |
f03a2ad9 BA |
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; }); | |
6bf4a38e | 315 | let remainingIndices = _.difference( _.range(assessment.questions.length).map(String), indices ); |
f03a2ad9 BA |
316 | assessment.indices = indices.concat( _.shuffle(remainingIndices) ); |
317 | } | |
318 | assessment.index = !!paper ? paper.inputs.length : 0; | |
6bf4a38e | 319 | Vue.nextTick(libsRefresh); |
e99c53fb | 320 | this.stage = 2; |
e99c53fb BA |
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) | |
f03a2ad9 BA |
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 | } | |
e99c53fb BA |
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); | |
cc7c0f5e | 351 | //socket.on("disconnect", () => { }); //TODO: notify monitor (highlight red), redirect |
f03a2ad9 | 352 | initializeStage2(s.questions, s.paper); |
e99c53fb BA |
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 | }, | |
e99c53fb | 368 | // stage 2 --> 3 (or 4) |
cc7c0f5e | 369 | // from a message by statements component, or time over |
e99c53fb | 370 | endAssessment: function() { |
cc7c0f5e | 371 | // Set endTime, destroy password |
e99c53fb | 372 | $("#leftButton, #rightButton").show(); |
cc7c0f5e | 373 | if (assessment.mode == "open") |
e99c53fb | 374 | { |
e99c53fb | 375 | this.stage = 4; |
cc7c0f5e BA |
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) | |
f03a2ad9 | 388 | return this.warning(ret.errmsg); |
cc7c0f5e BA |
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 | }); | |
e99c53fb BA |
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 | }); |