Simplify cheating detection
authorBenjamin Auder <benjamin.auder@somewhere>
Sun, 28 Jan 2018 12:05:01 +0000 (13:05 +0100)
committerBenjamin Auder <benjamin.auder@somewhere>
Sun, 28 Jan 2018 12:05:01 +0000 (13:05 +0100)
public/javascripts/assessment.js
public/stylesheets/assessment.css
routes/pages.js
views/assessment.pug
views/enable-js.pug [deleted file]
views/enablejs.pug [new file with mode: 0644]
views/fullscreen.pug [new file with mode: 0644]
views/no-devtools.pug [deleted file]
views/noblur.pug [new file with mode: 0644]

index 05b4d58..c574f1f 100644 (file)
@@ -1,35 +1,20 @@
+// 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
 
-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;
+       return window.innerWidth == screen.width && window.innerHeight == screen.height;
 };
 
-// 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({
+new Vue({
        el: "#assessment",
        data: {
                assessment: assessment,
@@ -51,28 +36,6 @@ let V = new Vue({
                                        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)
@@ -87,7 +50,7 @@ let V = new Vue({
                                                        "div",
                                                        {
                                                                "class": {
-                                                                       "wording": true,
+                                                                       wording: true,
                                                                },
                                                                domProps: {
                                                                        innerHTML: q.wording,
@@ -179,6 +142,11 @@ let V = new Vue({
                                                                        "waves-light": true,
                                                                        "btn": true,
                                                                },
+                                                               style: {
+                                                                       "display": "block",
+                                                                       "margin-left": "auto",
+                                                                       "margin-right": "auto",
+                                                               },
                                                                on: {
                                                                        click: () => this.sendAnswer(assessment.indices[this.index]),
                                                                },
@@ -197,15 +165,35 @@ let V = new Vue({
                                        questions
                                );
                        },
+                       mounted: function() {
+                               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.
+                                       // Workaround: disable key at higher level. Possible xbindkey config:
+                                       // "false"
+                                       //   m:0x10 + c:95
+                                       //   Mod2 + F11
+                                       if ([122,123].includes(e.keyCode))
+                                               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:
                                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');
+                               trySendCurrentAnswer: function() {
+                                       if (this.stage == 2)
+                                               this.sendAnswer(assessment.indices[this.index]);
                                },
                                // stage 2
                                sendAnswer: function(realIndex) {
@@ -238,42 +226,9 @@ let V = new Vue({
                                                },
                                        });
                                },
-                               // 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";
-                       }
-               });
-       },
        computed: {
                countdown: function() {
                        let seconds = this.remainingTime % 60;
@@ -282,7 +237,6 @@ let V = new Vue({
                },
        },
        methods: {
-               // HELPERS:
                padWithZero: function(x) {
                        if (x < 10)
                                return "0" + x;
@@ -314,7 +268,6 @@ let V = new Vue({
                },
                // stage 1 --> 2 (get all questions, set password)
                startAssessment: function() {
-                       checkWindowSize();
                        let initializeStage2 = questions => {
                                $("#leftButton, #rightButton").hide();
                                if (assessment.time > 0)
@@ -331,10 +284,18 @@ let V = new Vue({
                                        ? _.range(assessment.questions.length)
                                        : _.shuffle( _.range(assessment.questions.length) );
                                this.stage = 2;
-                               Vue.nextTick( () => { libsRefresh(); });
+                               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: {
@@ -348,11 +309,13 @@ let V = new Vue({
                                        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);
                                },
                        });
@@ -369,40 +332,34 @@ let V = new Vue({
                                        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 --> 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;
+                               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 alert(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) {
index 1511857..4805a53 100644 (file)
@@ -9,11 +9,6 @@ a#rightButton {
        padding: 15px 0;
 }
 
-#assessment button {
-       display: block;
-       margin: 0 auto 15px auto;
-}
-
 .question label {
        color: black;
 }
index 37b84cf..15cf1fd 100644 (file)
@@ -28,14 +28,20 @@ router.get("/login", access.unlogged, (req,res) => {
 
 // Redirection screens when possible cheating attempt detected in exam
 router.get("/enablejs", (req,res) => {
-       res.render("enable-js", {
+       res.render("enablejs", {
                title: "JS disabled",
        });
 });
 
-router.get("/nodevtools", (req,res) => {
-       res.render("no-devtools", {
-               title: "Devtools enabled",
+router.get("/fullscreen", (req,res) => {
+       res.render("fullscreen", {
+               title: "Not in fullscreen",
+       });
+});
+
+router.get("/noblur", (req,res) => {
+       res.render("noblur", {
+               title: "Lost focus",
        });
 });
 
index 9caa03d..b4ba8c8 100644 (file)
@@ -25,13 +25,13 @@ block content
                .row
                        .col.s12.m10.offset-m1.l8.offset-l2.xl6.offset-xl3
                                h4= assessment.name
-                               #stage0(v-if="stage==0")
+                               #stage0(v-show="stage==0")
                                        .card
                                                .input-field.inline.on-left
                                                        label(for="number") Number
                                                        input#number(type="text" v-model="student.number" @keyup.enter="getStudent()")
                                                button.waves-effect.waves-light.btn(@click="getStudent()") Send
-                               #stage1(v-if="stage==1")
+                               #stage1(v-show="stage==1")
                                        .card
                                                if assessment.mode != "open"
                                                        .input-field.inline.on-left
@@ -40,23 +40,23 @@ block content
                                                        .input-field.inline
                                                                label(for="name") Name
                                                                input#name(type="text" v-model="student.name" disabled)
-                                               p
+                                               p.center-align
                                                        if assessment.mode != "open"
                                                                button.waves-effect.waves-light.btn.on-left(@click="cancelStudent") Cancel
                                                        button.waves-effect.waves-light.btn(@click="startAssessment") Start!
-                               #stage1_2_4(v-if="stage==1 || stage==2 || stage == 4")
+                               #stage1_2_4(v-show="stage==1 || stage==2 || stage == 4")
                                        .card
                                                .introduction(v-html="assessment.introduction")
-                               #stage2_4(v-if="stage==2 || stage==4")
+                               #stage2_4(v-show="stage==2 || stage==4")
                                        if assessment.time > 0
                                                .card
                                                        .timer.center(v-if="stage==2") {{ countdown }}
                                        .card
                                                statements(:assessment="assessment" :student="student" :stage="stage" :inputs="inputs" @gameover="endAssessment")
-                               #stage3(v-if="stage==3")
+                               #stage3(v-show="stage==3")
                                        .card
                                                .finish Exam completed &#9786; ...don't close the window!
-                               #stage3_4(v-if="stage==3 || stage==4")
+                               #stage3_4(v-show="stage==3 || stage==4")
                                        .card
                                                .conclusion(v-html="assessment.conclusion")
 
diff --git a/views/enable-js.pug b/views/enable-js.pug
deleted file mode 100644 (file)
index f05a445..0000000
+++ /dev/null
@@ -1,4 +0,0 @@
-extends layout
-
-block content
-       p.warn Javascript must be enabled. Change settings, and reload exam page.
diff --git a/views/enablejs.pug b/views/enablejs.pug
new file mode 100644 (file)
index 0000000..20c8c74
--- /dev/null
@@ -0,0 +1,6 @@
+extends layout
+
+block content
+       p.red-text.text-darken-4.center-align.
+               Javascript must be enabled. #[br]
+               Change settings, and reload exam page.
diff --git a/views/fullscreen.pug b/views/fullscreen.pug
new file mode 100644 (file)
index 0000000..c69096e
--- /dev/null
@@ -0,0 +1,7 @@
+extends layout
+
+block content
+       p.red-text.text-darken-4.center-align.
+               Full-screen mode required, window resizing forbidden. #[br]
+               Your current answer (if any) was sent to the server. #[br]
+               Please go back to the exam page ASAP.
diff --git a/views/no-devtools.pug b/views/no-devtools.pug
deleted file mode 100644 (file)
index bdc6021..0000000
+++ /dev/null
@@ -1,5 +0,0 @@
-extends layout
-
-block content
-       p.warn Devtools is forbidden during an exam. Exit devtools and go back to exam page.
-       p.warn NOTE: if the exam was started already, then you cannot resume it :/
diff --git a/views/noblur.pug b/views/noblur.pug
new file mode 100644 (file)
index 0000000..b8d22ff
--- /dev/null
@@ -0,0 +1,7 @@
+extends layout
+
+block content
+       p.red-text.text-darken-4.center-align.
+               Losing focus is forbidden. #[br]
+               Your current answer (if any) was sent to the server. #[br]
+               Please go back to the exam page ASAP, in full screen mode.