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