| 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 | getColor: function(number, qIdx) { |
| 46 | // For the moment, green if correct and red if wrong; grey if unanswered yet |
| 47 | // TODO: in-between color for partially right (especially for multi-questions) |
| 48 | const paperIdx = this.assessment.papers.findIndex( item => { return item.number == number; }); |
| 49 | if (paperIdx === -1) |
| 50 | return "grey"; //student didn't start yet |
| 51 | const inputIdx = this.assessment.papers[paperIdx].inputs.findIndex( item => { |
| 52 | const qNum = parseInt(item.index.split(".")[0]); //indexes separated by dots |
| 53 | return qIdx == qNum; |
| 54 | }); |
| 55 | if (inputIdx === -1) |
| 56 | return "grey"; |
| 57 | if (_.isEqual(this.assessment.papers[paperIdx].inputs[inputIdx].input, this.assessment.questions[qIdx].answer)) |
| 58 | return "green"; |
| 59 | return "red"; |
| 60 | }, |
| 61 | seeDetails: function(number, i) { |
| 62 | // UNIMPLEMENTED: see question details, with current answer(s) |
| 63 | }, |
| 64 | // stage 0 --> 1 |
| 65 | startMonitoring: function() { |
| 66 | $.ajax("/start/monitoring", { |
| 67 | method: "GET", |
| 68 | data: { |
| 69 | password: Sha1.Compute(this.password), |
| 70 | aname: examName, |
| 71 | ccode: courseCode, |
| 72 | initials: initials, |
| 73 | }, |
| 74 | dataType: "json", |
| 75 | success: s => { |
| 76 | if (!!s.errmsg) |
| 77 | return alert(s.errmsg); |
| 78 | this.assessment = s.assessment; |
| 79 | this.answers.inputs = s.assessment.questions.map( q => { |
| 80 | let input = _(q.options.length).times( _.constant(false) ); |
| 81 | q.answer.forEach( idx => { input[idx] = true; }); |
| 82 | return input; |
| 83 | }); |
| 84 | this.students = s.students; |
| 85 | this.stage = 1; |
| 86 | socket = io.connect("/", { |
| 87 | query: "aid=" + this.assessment._id + "&secret=" + s.secret |
| 88 | }); |
| 89 | socket.on(message.studentBlur, m => { |
| 90 | const sIdx = this.students.findIndex( item => { return item.number == m.number; }); |
| 91 | Vue.set(this.students, sIdx, Object.assign({},this.students[sIdx],{blur: true})); |
| 92 | //this.students[sIdx].blur = true; |
| 93 | }); |
| 94 | socket.on(message.studentFocus, m => { |
| 95 | const sIdx = this.students.findIndex( item => { return item.number == m.number; }); |
| 96 | this.students[sIdx].blur = false; |
| 97 | }); |
| 98 | socket.on(message.studentResize, m => { |
| 99 | const sIdx = this.students.findIndex( item => { return item.number == m.number; }); |
| 100 | Vue.set(this.students, sIdx, Object.assign({},this.students[sIdx],{resize: true})); |
| 101 | //this.students[sIdx].resize = true; |
| 102 | }); |
| 103 | socket.on(message.studentFullscreen, m => { |
| 104 | const sIdx = this.students.findIndex( item => { return item.number == m.number; }); |
| 105 | this.students[sIdx].resize = false; |
| 106 | }); |
| 107 | socket.on(message.studentDisconnect, m => { |
| 108 | const sIdx = this.students.findIndex( item => { return item.number == m.number; }); |
| 109 | Vue.set(this.students, sIdx, Object.assign({},this.students[sIdx],{disco: true})); |
| 110 | //this.students[sIdx].disco = true; |
| 111 | }); |
| 112 | socket.on(message.studentConnect, m => { |
| 113 | const sIdx = this.students.findIndex( item => { return item.number == m.number; }); |
| 114 | this.students[sIdx].disco = false; |
| 115 | }); |
| 116 | socket.on(message.newAnswer, m => { |
| 117 | let paperIdx = this.assessment.papers.findIndex( item => { |
| 118 | return item.number == m.number; |
| 119 | }); |
| 120 | if (paperIdx === -1) |
| 121 | { |
| 122 | // First answer |
| 123 | paperIdx = this.assessment.papers.length; |
| 124 | this.assessment.papers.push({ |
| 125 | number: m.number, |
| 126 | inputs: [ ], //other fields irrelevant here |
| 127 | }); |
| 128 | } |
| 129 | // TODO: notations not coherent (input / answer... when, which ?) |
| 130 | this.assessment.papers[paperIdx].inputs.push(JSON.parse(m.answer)); //input+index |
| 131 | }); |
| 132 | }, |
| 133 | }); |
| 134 | }, |
| 135 | endMonitoring: function() { |
| 136 | // In the end, send answers to students |
| 137 | // TODO: disable this button until everyone finished (need ability to mark absents) |
| 138 | socket.emit( |
| 139 | message.allAnswers, |
| 140 | { answers: JSON.stringify(this.assessment.questions.map( q => { return q.answer; })) } |
| 141 | ); |
| 142 | }, |
| 143 | }, |
| 144 | }); |