public/javascripts/monitor.js

   1 let socket = null; //monitor answers in real time
   2
   3 new Vue({
   4     el: "#monitor",
   5     data: {
   6         password: "", //from password field
   7         assessment: { }, //obtained after authentication
   8         // Stage 0: unauthenticated (password),
   9         //       1: authenticated (password hash validated), start monitoring
  10         stage: 0,
  11         answers: {
  12             displayAll: true,
  13             showSolution: true, //TODO: allow to hide, to let teachers search too
  14             inputs: [ ],
  15             index : -1,
  16         },
  17         students: [ ], //to know their names
  18         display: "assessment", //or student's answers
  19     },
  20     methods: {
  21         // TODO: redundant code, next 4 funcs already exist in course.js
  22         toggleDisplay: function(area) {
  23             if (this.display == area)
  24                 this.display = "";
  25             else
  26                 this.display = area;
  27         },
  28         studentList: function(group) {
  29             return this.students
  30                 .filter( s => { return group==0 || s.group == group; })
  31                 .map( s => { return Object.assign({}, s); }) //not altering initial array
  32                 .sort( (a,b) => { return a.name.localeCompare(b.name); });
  33         },
  34         groupList: function() {
  35             let maxGrp = 1;
  36             this.students.forEach( s => {
  37                 if (s.group > maxGrp)
  38                     maxGrp = s.group;
  39             });
  40             return _.range(1,maxGrp+1);
  41         },
  42         groupId: function(group, prefix) {
  43             return (prefix || "") + "group" + group;
  44         },
  45         togglePresence: function(student) {
  46             const sIdx = this.students.findIndex( s => { return s.number == student.number; });
  47             Vue.set( this.students, sIdx, Object.assign({},student,{present:!student.present}) );
  48             //s.present = !s.present;
  49         },
  50         allFinished: function() {
  51             for (s of this.students)
  52             {
  53                 if (!s.present)
  54                     continue;
  55                 const paperIdx = this.assessment.papers.findIndex( item => { return item.number == s.number; });
  56                 if (paperIdx === -1)
  57                     return false;
  58                 const paper = this.assessment.papers[paperIdx];
  59                 if (paper.inputs.length < this.assessment.questions.length)
  60                     return false;
  61             }
  62             return true;
  63         },
  64         getColor: function(number, qIdx) {
  65             // For the moment, green if correct and red if wrong; grey if unanswered yet
  66             // TODO: in-between color for partially right (especially for multi-questions)
  67             const paperIdx = this.assessment.papers.findIndex( item => { return item.number == number; });
  68             if (paperIdx === -1)
  69                 return "grey"; //student didn't start yet
  70             const inputIdx = this.assessment.papers[paperIdx].inputs.findIndex( item => {
  71                 const qNum = parseInt(item.index.split(".")[0]); //indexes separated by dots
  72                 return qIdx == qNum;
  73             });
  74             if (inputIdx === -1)
  75                 return "grey";
  76             if (_.isEqual(this.assessment.papers[paperIdx].inputs[inputIdx].input, this.assessment.questions[qIdx].answer))
  77                 return "green";
  78             return "red";
  79         },
  80         seeDetails: function(number, i) {
  81             // UNIMPLEMENTED: see question details, with current answer(s)
  82         },
  83         // stage 0 --> 1
  84         startMonitoring: function() {
  85             $.ajax("/assessments/monitor", {
  86                 method: "GET",
  87                 data: {
  88                     password: Sha1.Compute(this.password),
  89                     aname: examName,
  90                     ccode: courseCode,
  91                     initials: initials,
  92                 },
  93                 dataType: "json",
  94                 success: s => {
  95                     if (!!s.errmsg)
  96                         return alert(s.errmsg);
  97                     this.assessment = s.assessment;
  98                     this.answers.inputs = s.assessment.questions.map( q => {
  99                         let input = _(q.options.length).times( _.constant(false) );
 100                         q.answer.forEach( idx => { input[idx] = true; });
 101                         return input;
 102                     });
 103                     this.students = s.students;
 104                     this.students.forEach( s => { s.present = true; }); //a priori...
 105                     this.stage = 1;
 106                     socket = io.connect("/", {
 107                         query: "aid=" + this.assessment._id + "&secret=" + s.secret
 108                     });
 109                     socket.on(message.studentBlur, m => {
 110                         const sIdx = this.students.findIndex( item => { return item.number == m.number; });
 111                         Vue.set(this.students, sIdx, Object.assign({},this.students[sIdx],{blur: true}));
 112                         //this.students[sIdx].blur = true;
 113                     });
 114                     socket.on(message.studentFocus, m => {
 115                         const sIdx = this.students.findIndex( item => { return item.number == m.number; });
 116                         this.students[sIdx].blur = false;
 117                     });
 118                     socket.on(message.studentResize, m => {
 119                         const sIdx = this.students.findIndex( item => { return item.number == m.number; });
 120                         Vue.set(this.students, sIdx, Object.assign({},this.students[sIdx],{resize: true}));
 121                         //this.students[sIdx].resize = true;
 122                     });
 123                     socket.on(message.studentFullscreen, m => {
 124                         const sIdx = this.students.findIndex( item => { return item.number == m.number; });
 125                         this.students[sIdx].resize = false;
 126                     });
 127                     socket.on(message.studentDisconnect, m => {
 128                         const sIdx = this.students.findIndex( item => { return item.number == m.number; });
 129                         Vue.set(this.students, sIdx, Object.assign({},this.students[sIdx],{disco: true}));
 130                         //this.students[sIdx].disco = true;
 131                     });
 132                     socket.on(message.studentConnect, m => {
 133                         const sIdx = this.students.findIndex( item => { return item.number == m.number; });
 134                         this.students[sIdx].disco = false;
 135                     });
 136                     socket.on(message.newAnswer, m => {
 137                         let paperIdx = this.assessment.papers.findIndex( item => {
 138                             return item.number == m.number;
 139                         });
 140                         if (paperIdx === -1)
 141                         {
 142                             // First answer
 143                             paperIdx = this.assessment.papers.length;
 144                             this.assessment.papers.push({
 145                                 number: m.number,
 146                                 inputs: [ ], //other fields irrelevant here
 147                             });
 148                         }
 149                         // TODO: notations not coherent (input / answer... when, which ?)
 150                         this.assessment.papers[paperIdx].inputs.push(JSON.parse(m.answer)); //input+index
 151                     });
 152                 },
 153             });
 154         },
 155         endMonitoring: function() {
 156             // In the end, send answers to students
 157             // TODO: disable this button until everyone finished (need ability to mark absents)
 158             socket.emit(
 159                 message.allAnswers,
 160                 { answers: JSON.stringify(this.assessment.questions.map( q => { return q.answer; })) }
 161             );
 162         },
 163     },
 164 });