Draft logic to toggle students presence in exam + send answers only if everyone finished
[qomet.git] / public / javascripts / monitor.js
index 9f43ce0..b5a0fe4 100644 (file)
-// 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)
-//   + temps total ?
-//   click sur en-tête de colonne : tri alphabétique, tri décroissant...
-// Affiché si (hash du) mdp du cours est correctement entré
-// Doit reprendre les données en base si refresh (sinon : sockets)
-
-// Also buttons "start exam", "end exam" for logged in teacher
-
 let socket = null; //monitor answers in real time
 
 new Vue({
        el: "#monitor",
        data: {
                password: "", //from password field
-               assessment: null, //obtained after authentication
+               assessment: { }, //obtained after authentication
                // Stage 0: unauthenticated (password),
                //       1: authenticated (password hash validated), start monitoring
                stage: 0,
+               answers: {
+                       displayAll: true,
+                       showSolution: true, //TODO: allow to hide, to let teachers search too
+                       inputs: [ ],
+                       index : -1,
+               },
+               students: [ ], //to know their names
+               display: "assessment", //or student's answers
        },
        methods: {
+               // TODO: redundant code, next 4 funcs already exist in course.js
+               toggleDisplay: function(area) {
+                       if (this.display == area)
+                               this.display = "";
+                       else
+                               this.display = area;
+               },
+               studentList: function(group) {
+                       return this.students
+                               .filter( s => { return group==0 || s.group == group; })
+                               .map( s => { return Object.assign({}, s); }) //not altering initial array
+                               .sort( (a,b) => { return a.name.localeCompare(b.name); });
+               },
+               groupList: function() {
+                       let maxGrp = 1;
+                       this.students.forEach( s => {
+                               if (s.group > maxGrp)
+                                       maxGrp = s.group;
+                       });
+                       return _.range(1,maxGrp+1);
+               },
+               groupId: function(group, prefix) {
+                       return (prefix || "") + "group" + group;
+               },
+               togglePresence: function(s) {
+                       s.present = !s.present;
+               },
+               allFinished: function() {
+                       for (s of this.students)
+                       {
+                               if (!s.present)
+                                       continue;
+                               const paperIdx = this.assessment.papers.findIndex( item => { return item.number == number; });
+                               if (paperIdx === -1)
+                                       return false;
+                               const paper = this.assessment.papers[paperIdx];
+                               if (paper.inputs.length < this.assessment.questions.length)
+                                       return false;
+                       }
+                       return true;
+               },
+               getColor: function(number, qIdx) {
+                       // For the moment, green if correct and red if wrong; grey if unanswered yet
+                       // TODO: in-between color for partially right (especially for multi-questions)
+                       const paperIdx = this.assessment.papers.findIndex( item => { return item.number == number; });
+                       if (paperIdx === -1)
+                               return "grey"; //student didn't start yet
+                       const inputIdx = this.assessment.papers[paperIdx].inputs.findIndex( item => {
+                               const qNum = parseInt(item.index.split(".")[0]); //indexes separated by dots
+                               return qIdx == qNum;
+                       });
+                       if (inputIdx === -1)
+                               return "grey";
+                       if (_.isEqual(this.assessment.papers[paperIdx].inputs[inputIdx].input, this.assessment.questions[qIdx].answer))
+                               return "green";
+                       return "red";
+               },
+               seeDetails: function(number, i) {
+                       // UNIMPLEMENTED: see question details, with current answer(s)
+               },
                // stage 0 --> 1
                startMonitoring: function() {
                        $.ajax("/start/monitoring", {
                                method: "GET",
                                data: {
-                                       password: this.,
+                                       password: Sha1.Compute(this.password),
                                        aname: examName,
-                                       cname: courseName,
+                                       ccode: courseCode,
+                                       initials: initials,
                                },
                                dataType: "json",
                                success: s => {
                                        if (!!s.errmsg)
-                                               return this.warning(s.errmsg);
+                                               return alert(s.errmsg);
+                                       this.assessment = s.assessment;
+                                       this.answers.inputs = s.assessment.questions.map( q => {
+                                               let input = _(q.options.length).times( _.constant(false) );
+                                               q.answer.forEach( idx => { input[idx] = true; });
+                                               return input;
+                                       });
+                                       this.students = s.students;
+                                       this.students.forEach( s => { s.present = true; }); //a priori...
                                        this.stage = 1;
-                               },
-                       });
-               },
-               // TODO: 2-level sockets, for prof and monitors
-                                       socket = io.connect("/" + assessment.name, {
-                                               query: "number=" + this.student.number + "&password=" + this.password
+                                       socket = io.connect("/", {
+                                               query: "aid=" + this.assessment._id + "&secret=" + s.secret
+                                       });
+                                       socket.on(message.studentBlur, m => {
+                                               const sIdx = this.students.findIndex( item => { return item.number == m.number; });
+                                               Vue.set(this.students, sIdx, Object.assign({},this.students[sIdx],{blur: true}));
+                                               //this.students[sIdx].blur = true;
+                                       });
+                                       socket.on(message.studentFocus, m => {
+                                               const sIdx = this.students.findIndex( item => { return item.number == m.number; });
+                                               this.students[sIdx].blur = false;
+                                       });
+                                       socket.on(message.studentResize, m => {
+                                               const sIdx = this.students.findIndex( item => { return item.number == m.number; });
+                                               Vue.set(this.students, sIdx, Object.assign({},this.students[sIdx],{resize: true}));
+                                               //this.students[sIdx].resize = true;
+                                       });
+                                       socket.on(message.studentFullscreen, m => {
+                                               const sIdx = this.students.findIndex( item => { return item.number == m.number; });
+                                               this.students[sIdx].resize = false;
+                                       });
+                                       socket.on(message.studentDisconnect, m => {
+                                               const sIdx = this.students.findIndex( item => { return item.number == m.number; });
+                                               Vue.set(this.students, sIdx, Object.assign({},this.students[sIdx],{disco: true}));
+                                               //this.students[sIdx].disco = true;
+                                       });
+                                       socket.on(message.studentConnect, m => {
+                                               const sIdx = this.students.findIndex( item => { return item.number == m.number; });
+                                               this.students[sIdx].disco = false;
+                                       });
+                                       socket.on(message.newAnswer, m => {
+                                               let paperIdx = this.assessment.papers.findIndex( item => {
+                                                       return item.number == m.number;
+                                               });
+                                               if (paperIdx === -1)
+                                               {
+                                                       // First answer
+                                                       paperIdx = this.assessment.papers.length;
+                                                       this.assessment.papers.push({
+                                                               number: m.number,
+                                                               inputs: [ ], //other fields irrelevant here
+                                                       });
+                                               }
+                                               // TODO: notations not coherent (input / answer... when, which ?)
+                                               this.assessment.papers[paperIdx].inputs.push(JSON.parse(m.answer)); //input+index
                                        });
-                                       socket.on(message.allAnswers, this.setAnswers);
-                                       initializeStage2(s.questions, s.paper);
                                },
                        });
                },
-               // stage 2 --> 3 (or 4)
-               // from a message by statements component, or time over
-               // TODO: also function startAssessment (for main teacher only)
-               endAssessment: function() {
-                       // Set endTime, destroy password
-                       $("#leftButton, #rightButton").show();
-                       if (assessment.mode == "open")
-                       {
-                               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 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;
-                               },
-                       });
+               endMonitoring: function() {
+                       // In the end, send answers to students
+                       // TODO: disable this button until everyone finished (need ability to mark absents)
+                       socket.emit(
+                               message.allAnswers,
+                               { answers: JSON.stringify(this.assessment.questions.map( q => { return q.answer; })) }
+                       );
                },
        },
 });