X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=public%2Fjavascripts%2Fassessment.js;h=985864371fe702988ef2d56af3899d2b6d254a5a;hb=3b8117c51c644b050b87811f1a923f6b7e5b7916;hp=05b4d58559042592b9b9efa69fd53e5acdbe9fae;hpb=d6cda0c62c38927146e5e3f44cfae8708ea32ea6;p=qomet.git diff --git a/public/javascripts/assessment.js b/public/javascripts/assessment.js index 05b4d58..9858643 100644 --- a/public/javascripts/assessment.js +++ b/public/javascripts/assessment.js @@ -1,40 +1,23 @@ let socket = null; //monitor answers in real time -function checkWindowSize() -{ - if (assessment.mode == "secure") - { - // NOTE: temporarily accept smartphone (security hole: pretend being a smartphone on desktop browser...) - if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) - return true; - let test = () => { - return window.innerWidth < screen.width || window.innerHeight < screen.height; - }; - const returnVal = test; - while (!test) - alert("Please enter fullscreen mode (F11)"); - return returnVal; - } - return true; -}; +if (assessment.mode == "secure" && !checkWindowSize()) + document.location.href= "/fullscreen"; -function libsRefresh() +function checkWindowSize() { - $("#statements").find("code[class^=language-]").each( (i,elem) => { - Prism.highlightElement(elem); - }); - MathJax.Hub.Queue(["Typeset",MathJax.Hub,"statements"]); + // NOTE: temporarily accept smartphone (security hole: pretend being a smartphone on desktop browser...) + if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) + return true; + // 3 is arbitrary, but a small tolerance is required (e.g. in Firefox) + return window.innerWidth >= screen.width-3 && window.innerHeight >= screen.height-3; }; -// TODO: if display == "all", les envois devraient être non définitifs (possibilité de corriger) -// Et, blur sur une (sous-)question devrait envoyer la version courante de la sous-question - let V = new Vue({ el: "#assessment", data: { assessment: assessment, - inputs: [ ], //student's answers - student: { }, //filled later + answers: { }, //filled later with answering parameters + student: { }, //filled later (name, password) // Stage 0: unauthenticated (number), // 1: authenticated (got a name, unvalidated) // 2: locked: password set, exam started @@ -42,237 +25,7 @@ let V = new Vue({ // 4: show answers stage: assessment.mode != "open" ? 0 : 1, remainingTime: 0, //global, in seconds - }, - components: { - "statements": { - props: ['assessment','inputs','student','stage'], - data: function() { - return { - index: 0, //current question index in assessment.indices - }; - }, - mounted: function() { - if (assessment.mode != "secure") - return; - $("#warning").modal({ - complete: () => { - this.stage = 2; - this.resumeAssessment(); - }, - }); - window.addEventListener("blur", () => { - if (this.stage == 2) - this.showWarning(); - }, false); - window.addEventListener("resize", e => { - if (this.stage == 2 && !checkWindowSize()) - this.showWarning(); - }, false); - //socket.on("disconnect", () => { }); //TODO: notify monitor (highlight red) - }, - updated: function() { - libsRefresh(); - }, - // TODO: general render function for nested exercises - // TODO: with answer if stage==4 : class "wrong" if ticked AND stage==4 AND received answers - // class "right" if stage == 4 AND received answers (background-color: red / green) - // There should be a questions navigator below, or next (visible if display=='all') - // Full questions tree is rendered, but some parts hidden depending on display settings - render(h) { - let self = this; - let questions = assessment.questions.map( (q,i) => { - let questionContent = [ ]; - questionContent.push( - h( - "div", - { - "class": { - "wording": true, - }, - domProps: { - innerHTML: q.wording, - }, - } - ) - ); - let optionsOrder = _.range(q.options.length); - if (!q.fixed) - optionsOrder = _.shuffle(optionsOrder); - let optionList = [ ]; - optionsOrder.forEach( idx => { - let option = [ ]; - option.push( - h( - "input", - { - domProps: { - checked: this.inputs[i][idx], - }, - attrs: { - id: this.inputId(i,idx), - type: "checkbox", - }, - on: { - change: e => { this.inputs[i][idx] = e.target.checked; }, - }, - }, - ) - ); - option.push( - h( - "label", - { - domProps: { - innerHTML: q.options[idx], - }, - attrs: { - "for": this.inputId(i,idx), - }, - } - ) - ); - optionList.push( - h( - "div", - { - "class": { - option: true, - choiceCorrect: this.stage == 4 && assessment.questions[i].answer.includes(idx), - choiceWrong: this.stage == 4 && this.inputs[i][idx] && !assessment.questions[i].answer.includes(idx), - }, - }, - option - ) - ); - }); - questionContent.push( - h( - "div", - { - "class": { - optionList: true, - }, - }, - optionList - ) - ); - return h( - "div", - { - "class": { - "question": true, - "hide": this.stage == 2 && assessment.display == 'one' && assessment.indices[this.index] != i, - }, - }, - questionContent - ); - }); - if (this.stage == 2) - { - // TODO: one button per question - questions.unshift( - h( - "button", - { - "class": { - "waves-effect": true, - "waves-light": true, - "btn": true, - }, - on: { - click: () => this.sendAnswer(assessment.indices[this.index]), - }, - }, - "Send" - ) - ); - } - return h( - "div", - { - attrs: { - id: "statements", - }, - }, - questions - ); - }, - methods: { - // HELPERS: - inputId: function(i,j) { - return "q" + i + "_" + "input" + j; - }, - showWarning: function(action) { - this.sendAnswer(assessment.indices[this.index]); - this.stage = 32; //fictive stage to hide all elements - $("#warning").modal('open'); - }, - // stage 2 - sendAnswer: function(realIndex) { - if (this.index == assessment.questions.length - 1) - this.$emit("gameover"); - else - this.index++; - if (assessment.mode == "open") - return; //only local - let answerData = { - aid: assessment._id, - answer: JSON.stringify({ - index:realIndex.toString(), - input:this.inputs[realIndex] - .map( (tf,i) => { return {val:tf,idx:i}; } ) - .filter( item => { return item.val; }) - .map( item => { return item.idx; }) - }), - number: this.student.number, - password: this.student.password, - }; - $.ajax("/send/answer", { - method: "GET", - data: answerData, - dataType: "json", - success: ret => { - if (!!ret.errmsg) - return alert(ret.errmsg); - //socket.emit(message.newAnswer, answer); - }, - }); - }, - // stage 2 after blur or resize - resumeAssessment: function() { - checkWindowSize(); - }, - }, - }, - }, - mounted: function() { - if (assessment.mode == "open") - return; //no security needed in open mode - window.addEventListener("keydown", e => { - // If F12 or ctrl+shift (ways to access devtools) - if (e.keyCode == 123 || (e.ctrlKey && e.shiftKey)) - e.preventDefault(); - }, false); - // Devtools detect based on https://jsfiddle.net/ebhjxfwv/4/ - let div = document.createElement('div'); - let devtoolsLoop = setInterval( - () => { - if (assessment.mode != "open") - { - console.log(div); - console.clear(); - } - }, - 1000 - ); - Object.defineProperty(div, "id", { - get: () => { - clearInterval(devtoolsLoop); - if (this.stage == 2) - this.endAssessment(); - document.location.href = "/nodevtools"; - } - }); + warnMsg: "", }, computed: { countdown: function() { @@ -280,14 +33,48 @@ let V = new Vue({ let minutes = Math.floor(this.remainingTime / 60); return this.padWithZero(minutes) + ":" + this.padWithZero(seconds); }, + showAnswers: function() { + return this.stage == 4; + }, + }, + mounted: function() { + $(".modal").modal(); + if (assessment.mode != "secure") + return; + window.addEventListener("keydown", e => { + // Ignore F12 (avoid accidental window resize due to devtools) + // NOTE: in Chromium at least, fullscreen mode exit with F11 cannot be prevented. + // Workaround: disable key at higher level. Possible xbindkey config: + // "false" + // m:0x10 + c:95 + // Mod2 + F11 + if (e.keyCode == 123) + e.preventDefault(); + }, false); + window.addEventListener("blur", () => { + this.trySendCurrentAnswer(); + document.location.href= "/noblur"; + }, false); + window.addEventListener("resize", e => { + this.trySendCurrentAnswer(); + document.location.href= "/fullscreen"; + }, false); }, methods: { - // HELPERS: + // In case of AJAX errors + showWarning: function(message) { + this.warnMsg = message; + $("#warning").modal("open"); + }, padWithZero: function(x) { if (x < 10) return "0" + x; return x; }, + trySendCurrentAnswer: function() { + if (this.stage == 2) + this.sendAnswer(); + }, // stage 0 --> 1 getStudent: function(cb) { $.ajax("/get/student", { @@ -299,7 +86,7 @@ let V = new Vue({ dataType: "json", success: s => { if (!!s.errmsg) - return alert(s.errmsg); + return this.showWarning(s.errmsg); this.stage = 1; this.student = s.student; Vue.nextTick( () => { Materialize.updateTextFields(); }); @@ -314,24 +101,37 @@ let V = new Vue({ }, // stage 1 --> 2 (get all questions, set password) startAssessment: function() { - checkWindowSize(); - let initializeStage2 = questions => { + let initializeStage2 = (questions,paper) => { $("#leftButton, #rightButton").hide(); if (assessment.time > 0) { - this.remainingTime = assessment.time * 60; + const deltaTime = !!paper ? Date.now() - paper.startTime : 0; + this.remainingTime = assessment.time * 60 - Math.round(deltaTime / 1000); this.runTimer(); } // Initialize structured answer(s) based on questions type and nesting (TODO: more general) if (!!questions) assessment.questions = questions; + this.answers.inputs = [ ]; for (let q of assessment.questions) - this.inputs.push( _(q.options.length).times( _.constant(false) ) ); - assessment.indices = assessment.fixed - ? _.range(assessment.questions.length) - : _.shuffle( _.range(assessment.questions.length) ); + this.answers.inputs.push( _(q.options.length).times( _.constant(false) ) ); + if (!paper) + { + this.answers.indices = assessment.fixed + ? _.range(assessment.questions.length) + : _.shuffle( _.range(assessment.questions.length) ); + } + else + { + // Resuming + let indices = paper.inputs.map( input => { return input.index; }); + let remainingIndices = _.difference( _.range(assessment.questions.length).map(String), indices ); + this.answers.indices = indices.concat( _.shuffle(remainingIndices) ); + } + this.answers.index = !!paper ? paper.inputs.length : 0; + this.answers.displayAll = assessment.display == "all"; + this.answers.showSolution = false; this.stage = 2; - Vue.nextTick( () => { libsRefresh(); }); }; if (assessment.mode == "open") return initializeStage2(); @@ -344,16 +144,24 @@ let V = new Vue({ dataType: "json", success: s => { if (!!s.errmsg) - return alert(s.errmsg); - this.student.password = s.password; - // Got password: students answers locked to this page until potential teacher - // action (power failure, computer down, ...) - // TODO: password also exchanged by sockets to check identity - //socket = io.connect("/" + assessment.name, { - // query: "number=" + this.student.number + "&password=" + this.password - //}); - //socket.on(message.allAnswers, this.setAnswers); - initializeStage2(s.questions); + return this.showWarning(s.errmsg); + if (!!s.paper) + { + // Resuming: receive stored answers + startTime + this.student.password = s.paper.password; + this.answers.inputs = s.paper.inputs.map( inp => { return inp.input; }); + } + else + { + this.student.password = s.password; + // Got password: students answers locked to this page until potential teacher + // action (power failure, computer down, ...) + } + socket = io.connect("/" + assessment.name, { + query: "aid=" + assessment._id + "&number=" + this.student.number + "&password=" + this.student.password + }); + socket.on(message.allAnswers, this.setAnswers); + initializeStage2(s.questions, s.paper); }, }); }, @@ -364,50 +172,85 @@ let V = new Vue({ let self = this; setInterval( function() { self.remainingTime--; - if (self.remainingTime <= 0 || self.stage >= 4) - self.endAssessment(); + if (self.remainingTime <= 0) + { + if (self.stage == 2) + self.endAssessment(); clearInterval(this); + } }, 1000); }, - // stage 2 after disconnect (socket) - resumeAssessment: function() { - // UNIMPLEMENTED - // TODO: get stored answers (papers[number cookie]), inject (inputs), set index+indices + // stage 2 + sendAnswer: function() { + const realIndex = this.answers.indices[this.answers.index]; + let gotoNext = () => { + if (this.answers.index == assessment.questions.length - 1) + this.endAssessment(); + else + this.answers.index++; + this.$children[0].$forceUpdate(); //TODO: bad HACK, and shouldn't be required... + }; + if (assessment.mode == "open") + return gotoNext(); //only local + let answerData = { + aid: assessment._id, + answer: JSON.stringify({ + index: realIndex.toString(), + input: this.answers.inputs[realIndex] + .map( (tf,i) => { return {val:tf,idx:i}; } ) + .filter( item => { return item.val; }) + .map( item => { return item.idx; }) + }), + number: this.student.number, + password: this.student.password, + }; + $.ajax("/send/answer", { + method: "GET", + data: answerData, + dataType: "json", + success: ret => { + if (!!ret.errmsg) + return this.showWarning(ret.errmsg); + gotoNext(); + socket.emit(message.newAnswer, answerData); + }, + }); }, // stage 2 --> 3 (or 4) - // from a message by statements component + // from a message by statements component, or time over endAssessment: function() { - // If time over or cheating: set endTime, destroy password + // Set endTime, destroy password $("#leftButton, #rightButton").show(); - //this.sendAnswer(...); //TODO: for each non-answered (and non-empty!) index (yet) - if (assessment.mode != "open") + if (assessment.mode == "open") { - $.ajax("/end/assessment", { - method: "GET", - data: { - aid: assessment._id, - number: this.student.number, - password: this.student.password, - }, - dataType: "json", - success: ret => { - if (!!ret.errmsg) - return alert(ret.errmsg); - assessment.conclusion = ret.conclusion; - this.stage = 3; - delete this.student["password"]; //unable to send new answers now - //socket.disconnect(); - //socket = null; - }, - }); - } - else this.stage = 4; + this.answers.showSolution = true; + return; + } + $.ajax("/end/assessment", { + method: "GET", + data: { + aid: assessment._id, + number: this.student.number, + password: this.student.password, + }, + dataType: "json", + success: ret => { + if (!!ret.errmsg) + return this.showWarning(ret.errmsg); + assessment.conclusion = ret.conclusion; + this.stage = 3; + delete this.student["password"]; //unable to send new answers now + socket.disconnect(); + socket = null; + }, + }); }, // stage 3 --> 4 (on socket message "feedback") - setAnswers: function(answers) { - for (let i=0; i