X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=public%2Fjavascripts%2Fmonitor.js;h=b5a0fe41754222a6d297eb761c495c863b92b492;hb=25cb8d539e4f68586f2e5fa95e20f6de3c031b6f;hp=9f43ce0a403540cca2299953c8db73c6290c9ea5;hpb=435371c7ba4b60790953115b9ebed68a047bb0a3;p=qomet.git diff --git a/public/javascripts/monitor.js b/public/javascripts/monitor.js index 9f43ce0..b5a0fe4 100644 --- a/public/javascripts/monitor.js +++ b/public/javascripts/monitor.js @@ -1,80 +1,162 @@ -// 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; })) } + ); }, }, });