From: Benjamin Auder Date: Tue, 30 Jan 2018 21:04:05 +0000 (+0100) Subject: Prepare monitoring using Statements component (early draft stage) X-Git-Url: https://git.auder.net/variants/current/doc/css/pieces/img/%7B%7B%20targetUrl%20%7D%7D?a=commitdiff_plain;h=435371c7ba4b60790953115b9ebed68a047bb0a3;p=qomet.git Prepare monitoring using Statements component (early draft stage) --- diff --git a/public/javascripts/assessment.js b/public/javascripts/assessment.js index c014b5a..5019840 100644 --- a/public/javascripts/assessment.js +++ b/public/javascripts/assessment.js @@ -1,6 +1,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 socket = null; //monitor answers in real time if (assessment.mode == "secure" && !checkWindowSize()) @@ -15,15 +12,6 @@ function checkWindowSize() return window.innerWidth >= screen.width-3 && window.innerHeight >= screen.height-3; }; -function libsRefresh() -{ - // Run Prism + MathJax on questions text - $("#statements").find("code[class^=language-]").each( (i,elem) => { - Prism.highlightElement(elem); - }); - MathJax.Hub.Queue(["Typeset",MathJax.Hub,"statements"]); -} - new Vue({ el: "#assessment", data: { @@ -39,207 +27,6 @@ new Vue({ remainingTime: 0, //global, in seconds warnMsg: "", }, - components: { - "statements": { - props: ['assessment','inputs','student','stage'], - // TODO: general render function for nested exercises - // 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.length > 0 && 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[assessment.index] != i, - }, - }, - questionContent - ); - }); - if (this.stage == 2) - { - questions.unshift( - h( - "button", - { - "class": { - "waves-effect": true, - "waves-light": true, - "btn": true, - }, - style: { - "display": "block", - "margin-left": "auto", - "margin-right": "auto", - }, - on: { - click: () => this.sendAnswer(assessment.indices[assessment.index]), - }, - }, - "Send" - ) - ); - } - return h( - "div", - { - attrs: { - id: "statements", - }, - }, - questions - ); - }, - mounted: function() { - 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); - }, - updated: function() { - libsRefresh(); //TODO: shouldn't be required: "MathJax" strings on start and assign them to assessment.questions. ... - }, - methods: { - inputId: function(i,j) { - return "q" + i + "_" + "input" + j; - }, - trySendCurrentAnswer: function() { - if (this.stage == 2) - this.sendAnswer(assessment.indices[assessment.index]); - }, - // stage 2 - sendAnswer: function(realIndex) { - let gotoNext = () => { - if (assessment.index == assessment.questions.length - 1) - this.$emit("gameover"); - else - assessment.index++; - this.$forceUpdate(); //TODO: 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.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.$emit("warning", ret.errmsg); - else - gotoNext(); - socket.emit(message.newAnswer, answerData); - }, - }); - }, - }, - }, - }, computed: { countdown: function() { let seconds = this.remainingTime % 60; @@ -249,6 +36,31 @@ new Vue({ }, 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); + }, + trySendCurrentAnswer: function() { + if (this.stage == 2) + this.sendAnswer(assessment.indices[assessment.index]); + }, }, methods: { // In case of AJAX errors @@ -361,6 +173,45 @@ new Vue({ clearInterval(this); }, 1000); }, + // stage 2 + // TODO: currentIndex ? click: () => this.sendAnswer(assessment.indices[assessment.index]), + // De même, cette condition sur le display d'une question doit remonter (résumée dans 'index' property) : + // à faire par ici : "hide": this.stage == 2 && assessment.display == 'one' && assessment.indices[assessment.index] != i, + sendAnswer: function(realIndex) { + let gotoNext = () => { + if (assessment.index == assessment.questions.length - 1) + this.$emit("gameover"); + else + assessment.index++; + this.$forceUpdate(); //TODO: 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.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.$emit("warning", ret.errmsg); + else + gotoNext(); + socket.emit(message.newAnswer, answerData); + }, + }); + }, // stage 2 --> 3 (or 4) // from a message by statements component, or time over endAssessment: function() { diff --git a/public/javascripts/components/statements.js b/public/javascripts/components/statements.js new file mode 100644 index 0000000..d93a97f --- /dev/null +++ b/public/javascripts/components/statements.js @@ -0,0 +1,115 @@ +Vue.component("statements", { + props: ['questions','inputs','showAnswers','index'], // index=-1 : show all, otherwise show current question + // TODO: general render function for nested exercises + // 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 domTree = this.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.length > 0 && this.inputs[i][idx], + disabled: monitoring, + }, + 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: showAnswers && this.questions[i].answer.includes(idx), + choiceWrong: showAnswers && this.inputs[i][idx] && !questions[i].answer.includes(idx), + }, + }, + option + ) + ); + }); + questionContent.push( + h( + "div", + { + "class": { + optionList: true, + }, + }, + optionList + ) + ); + return h( + "div", + { + "class": { + "question": true, + "hide": index >= 0 && index != i, + }, + }, + questionContent + ); + }); + return h( + "div", + { + attrs: { + id: "statements", + }, + }, + questions + ); + }, + updated: function() { + // TODO: next line shouldn't be required: questions wordings + answer + options + // are processed earlier; their content should be updated at this time. + statementsLibsRefresh(); + }, + methods: { + inputId: function(i,j) { + return "q" + i + "_" + "input" + j; + }, + }, +}); diff --git a/public/javascripts/monitor.js b/public/javascripts/monitor.js index 1d32d0c..9f43ce0 100644 --- a/public/javascripts/monitor.js +++ b/public/javascripts/monitor.js @@ -1,5 +1,3 @@ -// UNIMPLEMENTED - // TODO: onglets pour chaque groupe + section déroulante questionnaire (chargé avec réponses) // NOM Prenom (par grp, puis alphabétique) // réponse : vert si OK (+ choix), rouge si faux, gris si texte (clic pour voir) @@ -10,19 +8,8 @@ // Also buttons "start exam", "end exam" for logged in teacher -// TODO: réutiliser le component... trouver un moyen - let socket = null; //monitor answers in real time -function libsRefresh() -{ - // Run Prism + MathJax on questions text - $("#statements").find("code[class^=language-]").each( (i,elem) => { - Prism.highlightElement(elem); - }); - MathJax.Hub.Queue(["Typeset",MathJax.Hub,"statements"]); -} - new Vue({ el: "#monitor", data: { @@ -32,145 +19,6 @@ new Vue({ // 1: authenticated (password hash validated), start monitoring stage: 0, }, - components: { - "statements": { - props: ['assessment','inputs','student','stage'], - // TODO: general render function for nested exercises - // 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.length > 0 && 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[assessment.index] != i, - }, - }, - questionContent - ); - }); - if (this.stage == 2) - { - questions.unshift( - h( - "button", - { - "class": { - "waves-effect": true, - "waves-light": true, - "btn": true, - }, - style: { - "display": "block", - "margin-left": "auto", - "margin-right": "auto", - }, - on: { - click: () => this.sendAnswer(assessment.indices[assessment.index]), - }, - }, - "Send" - ) - ); - } - return h( - "div", - { - attrs: { - id: "statements", - }, - }, - questions - ); - }, - mounted: function() { - libsRefresh(); - }, - methods: { - inputId: function(i,j) { - return "q" + i + "_" + "input" + j; - }, - }, - }, - }, methods: { // stage 0 --> 1 startMonitoring: function() { diff --git a/public/javascripts/utils/libsRefresh.js b/public/javascripts/utils/libsRefresh.js new file mode 100644 index 0000000..4bdb7a0 --- /dev/null +++ b/public/javascripts/utils/libsRefresh.js @@ -0,0 +1,8 @@ +function statementsLibsRefresh() +{ + // Run Prism + MathJax on questions text + $("#statements").find("code[class^=language-]").each( (i,elem) => { + Prism.highlightElement(elem); + }); + MathJax.Hub.Queue(["Typeset",MathJax.Hub,"statements"]); +} diff --git a/views/assessment.pug b/views/assessment.pug index c5395d6..94b87ae 100644 --- a/views/assessment.pug +++ b/views/assessment.pug @@ -47,7 +47,8 @@ block content .card .timer.center(v-if="stage==2") {{ countdown }} .card - statements(:assessment="assessment" :student="student" :stage="stage" :inputs="inputs" @gameover="endAssessment" @warning="warning") + button.waves-effect.waves-light.btn(style="display:block;margin:0 auto" @click="sendAnswer") Send + statements(:questions="assessment.questions" :showAnswers="showAnswers" :index="index" :inputs="inputs" @gameover="endAssessment") #stage3(v-show="stage==3") .card .finish Exam completed ☺ ...don't close the window! @@ -58,4 +59,6 @@ block content block append javascripts script. let assessment = !{JSON.stringify(assessment)}; + const monitoring = false; + script(src="/javascripts/components/statements.js") script(src="/javascripts/assessment.js") diff --git a/views/monitor.pug b/views/monitor.pug index 6c9cf6a..f4f2e3c 100644 --- a/views/monitor.pug +++ b/views/monitor.pug @@ -28,4 +28,7 @@ block content .conclusion(v-html="assessment.conclusion") block append javascripts + script. + const monitoring = true; + script(src="/javascripts/components/statements.js") script(src="/javascripts/monitor.js")