early draft of sockets logic for monitoring
[qomet.git] / public / javascripts / assessment.js
index c574f1f..c014b5a 100644 (file)
@@ -11,9 +11,19 @@ function checkWindowSize()
        // NOTE: temporarily accept smartphone (security hole: pretend being a smartphone on desktop browser...)
        if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/))
                return true;
-       return window.innerWidth == screen.width && window.innerHeight == screen.height;
+       // 3 is arbitrary, but a small tolerance is required (e.g. in Firefox)
+       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: {
@@ -27,23 +37,17 @@ new Vue({
                //       4: show answers
                stage: assessment.mode != "open" ? 0 : 1,
                remainingTime: 0, //global, in seconds
+               warnMsg: "",
        },
        components: {
                "statements": {
                        props: ['assessment','inputs','student','stage'],
-                       data: function() {
-                               return {
-                                       index: 0, //current question index in assessment.indices
-                               };
-                       },
                        // 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 questions = (assessment.questions || [ ]).map( (q,i) => {
                                        let questionContent = [ ];
                                        questionContent.push(
                                                h(
@@ -69,7 +73,7 @@ new Vue({
                                                                "input",
                                                                {
                                                                        domProps: {
-                                                                               checked: this.inputs[i][idx],
+                                                                               checked: this.inputs.length > 0 && this.inputs[i][idx],
                                                                        },
                                                                        attrs: {
                                                                                id: this.inputId(i,idx),
@@ -124,7 +128,7 @@ new Vue({
                                                {
                                                        "class": {
                                                                "question": true,
-                                                               "hide": this.stage == 2 && assessment.display == 'one' && assessment.indices[this.index] != i,
+                                                               "hide": this.stage == 2 && assessment.display == 'one' && assessment.indices[assessment.index] != i,
                                                        },
                                                },
                                                questionContent
@@ -132,7 +136,6 @@ new Vue({
                                });
                                if (this.stage == 2)
                                {
-                                       // TODO: one button per question
                                        questions.unshift(
                                                h(
                                                        "button",
@@ -148,7 +151,7 @@ new Vue({
                                                                        "margin-right": "auto",
                                                                },
                                                                on: {
-                                                                       click: () => this.sendAnswer(assessment.indices[this.index]),
+                                                                       click: () => this.sendAnswer(assessment.indices[assessment.index]),
                                                                },
                                                        },
                                                        "Send"
@@ -169,13 +172,13 @@ new Vue({
                                if (assessment.mode != "secure")
                                        return;
                                window.addEventListener("keydown", e => {
-                                       // (Try to) Ignore F11 + F12 (avoid accidental window resize)
-                                       // NOTE: in Chromium at least, exiting fullscreen mode with F11 cannot be prevented.
+                                       // 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 ([122,123].includes(e.keyCode))
+                                       if (e.keyCode == 123)
                                                e.preventDefault();
                                }, false);
                                window.addEventListener("blur", () => {
@@ -187,22 +190,28 @@ new Vue({
                                        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[this.index]);
+                                               this.sendAnswer(assessment.indices[assessment.index]);
                                },
                                // stage 2
                                sendAnswer: function(realIndex) {
-                                       if (this.index == assessment.questions.length - 1)
-                                               this.$emit("gameover");
-                                       else
-                                               this.index++;
+                                       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; //only local
+                                               return gotoNext(); //only local
                                        let answerData = {
                                                aid: assessment._id,
                                                answer: JSON.stringify({
@@ -221,8 +230,10 @@ new Vue({
                                                dataType: "json",
                                                success: ret => {
                                                        if (!!ret.errmsg)
-                                                               return alert(ret.errmsg);
-                                                       //socket.emit(message.newAnswer, answer);
+                                                               return this.$emit("warning", ret.errmsg);
+                                                       else
+                                                               gotoNext();
+                                                       socket.emit(message.newAnswer, answerData);
                                                },
                                        });
                                },
@@ -236,7 +247,15 @@ new Vue({
                        return this.padWithZero(minutes) + ":" + this.padWithZero(seconds);
                },
        },
+       mounted: function() {
+               $(".modal").modal();
+       },
        methods: {
+               // In case of AJAX errors
+               warning: function(message) {
+                       this.warnMsg = message;
+                       $("#warning").modal("open");
+               },
                padWithZero: function(x) {
                        if (x < 10)
                                return "0" + x;
@@ -253,7 +272,7 @@ new Vue({
                                dataType: "json",
                                success: s => {
                                        if (!!s.errmsg)
-                                               return alert(s.errmsg);
+                                               return this.warning(s.errmsg);
                                        this.stage = 1;
                                        this.student = s.student;
                                        Vue.nextTick( () => { Materialize.updateTextFields(); });
@@ -268,11 +287,12 @@ new Vue({
                },
                // stage 1 --> 2 (get all questions, set password)
                startAssessment: function() {
-                       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)
@@ -280,22 +300,25 @@ new Vue({
                                        assessment.questions = questions;
                                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) );
+                               if (!paper)
+                               {
+                                       assessment.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 );
+                                       assessment.indices = indices.concat( _.shuffle(remainingIndices) );
+                               }
+                               assessment.index = !!paper ? paper.inputs.length : 0;
+                               Vue.nextTick(libsRefresh);
                                this.stage = 2;
-                               Vue.nextTick( () => {
-                                       // Run Prism + MathJax on questions text
-                                       $("#statements").find("code[class^=language-]").each( (i,elem) => {
-                                               Prism.highlightElement(elem);
-                                       });
-                                       MathJax.Hub.Queue(["Typeset",MathJax.Hub,"statements"]);
-                               });
                        };
                        if (assessment.mode == "open")
                                return initializeStage2();
-                       // TODO: if existing password cookie: get stored answers (papers[number cookie]), inject (inputs), set index+indices
-                       //       (instead of following ajax call)
                        $.ajax("/start/assessment", {
                                method: "GET",
                                data: {
@@ -305,18 +328,24 @@ 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: set password cookie
-                                       // 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);
-                                       //socket.on("disconnect", () => { }); //TODO: notify monitor (highlight red), redirect
-                                       initializeStage2(s.questions);
+                                               return this.warning(s.errmsg);
+                                       if (!!s.paper)
+                                       {
+                                               // Resuming: receive stored answers + startTime
+                                               this.student.password = s.paper.password;
+                                               this.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: "number=" + this.student.number + "&password=" + this.password
+                                       });
+                                       socket.on(message.allAnswers, this.setAnswers);
+                                       initializeStage2(s.questions, s.paper);
                                },
                        });
                },
@@ -352,12 +381,12 @@ new Vue({
                                dataType: "json",
                                success: ret => {
                                        if (!!ret.errmsg)
-                                               return alert(ret.errmsg);
+                                               return this.warning(ret.errmsg);
                                        assessment.conclusion = ret.conclusion;
                                        this.stage = 3;
                                        delete this.student["password"]; //unable to send new answers now
-                                       //socket.disconnect();
-                                       //socket = null;
+                                       socket.disconnect();
+                                       socket = null;
                                },
                        });
                },