X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=public%2Fjavascripts%2Fassessment.js;h=c014b5a88381bf6fb47bf930eccbbb3e03f19057;hb=e5ec7dead171feebb299430f298e3930864e096d;hp=1db80a081c1d683ce96587241bbf38097d2a78d8;hpb=e99c53fb3be56eb4c685dd061eef0e5b5bf22b73;p=qomet.git

diff --git a/public/javascripts/assessment.js b/public/javascripts/assessment.js
index 1db80a0..c014b5a 100644
--- a/public/javascripts/assessment.js
+++ b/public/javascripts/assessment.js
@@ -1,35 +1,30 @@
+// 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
 
+if (assessment.mode == "secure" && !checkWindowSize())
+	document.location.href= "/fullscreen";
+
 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;
+	// NOTE: temporarily accept smartphone (security hole: pretend being a smartphone on desktop browser...)
+	if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/))
+		return true;
+	// 3 is arbitrary, but a small tolerance is required (e.g. in Firefox)
+	return window.innerWidth >= screen.width-3 && window.innerHeight >= screen.height-3;
 };
 
 function libsRefresh()
 {
+	// Run Prism + MathJax on questions text
 	$("#statements").find("code[class^=language-]").each( (i,elem) => {
 		Prism.highlightElement(elem);
 	});
 	MathJax.Hub.Queue(["Typeset",MathJax.Hub,"statements"]);
-};
+}
 
-// 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,
@@ -42,52 +37,24 @@ let V = new Vue({
 		//       4: show answers
 		stage: assessment.mode != "open" ? 0 : 1,
 		remainingTime: 0, //global, in seconds
+		warnMsg: "",
 	},
 	components: {
 		"statements": {
 			props: ['assessment','inputs','student','stage'],
-			data: function() {
-				return {
-					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)
 			// There should be a questions navigator below, or next (visible if display=='all')
 			// Full questions tree is rendered, but some parts hidden depending on display settings
 			render(h) {
 				let self = this;
-				let questions = assessment.questions.map( (q,i) => {
+				let questions = (assessment.questions || [ ]).map( (q,i) => {
 					let questionContent = [ ];
 					questionContent.push(
 						h(
 							"div",
 							{
 								"class": {
-									"wording": true,
+									wording: true,
 								},
 								domProps: {
 									innerHTML: q.wording,
@@ -106,7 +73,7 @@ let V = new Vue({
 								"input",
 								{
 									domProps: {
-										checked: this.inputs[i][idx],
+										checked: this.inputs.length > 0 && this.inputs[i][idx],
 									},
 									attrs: {
 										id: this.inputId(i,idx),
@@ -161,7 +128,7 @@ let V = new Vue({
 						{
 							"class": {
 								"question": true,
-								"hide": this.stage == 2 && assessment.display == 'one' && assessment.indices[this.index] != i,
+								"hide": this.stage == 2 && assessment.display == 'one' && assessment.indices[assessment.index] != i,
 							},
 						},
 						questionContent
@@ -169,7 +136,6 @@ let V = new Vue({
 				});
 				if (this.stage == 2)
 				{
-					// TODO: one button per question
 					questions.unshift(
 						h(
 							"button",
@@ -179,8 +145,13 @@ 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]),
+									click: () => this.sendAnswer(assessment.indices[assessment.index]),
 								},
 							},
 							"Send"
@@ -197,24 +168,50 @@ let V = new Vue({
 					questions
 				);
 			},
+			mounted: function() {
+				if (assessment.mode != "secure")
+					return;
+				window.addEventListener("keydown", e => {
+					// Ignore F12 (avoid accidental window resize due to devtools)
+					// NOTE: in Chromium at least, fullscreen mode exit with F11 cannot be prevented.
+					// Workaround: disable key at higher level. Possible xbindkey config:
+					// "false"
+					//   m:0x10 + c:95
+					//   Mod2 + F11
+					if (e.keyCode == 123)
+						e.preventDefault();
+				}, false);
+				window.addEventListener("blur", () => {
+					this.trySendCurrentAnswer();
+					document.location.href= "/noblur";
+				}, false);
+				window.addEventListener("resize", e => {
+					this.trySendCurrentAnswer();
+					document.location.href= "/fullscreen";
+				}, false);
+			},
+			updated: function() {
+				libsRefresh(); //TODO: shouldn't be required: "MathJax" strings on start and assign them to assessment.questions. ...
+			},
 			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[assessment.index]);
 				},
 				// stage 2
 				sendAnswer: function(realIndex) {
-					if (this.index == assessment.questions.length - 1)
-						this.$emit("gameover");
-					else
-						this.index++;
+					let gotoNext = () => {
+						if (assessment.index == assessment.questions.length - 1)
+							this.$emit("gameover");
+						else
+							assessment.index++;
+						this.$forceUpdate(); //TODO: shouldn't be required
+					};
 					if (assessment.mode == "open")
-						return; //only local
+						return gotoNext(); //only local
 					let answerData = {
 						aid: assessment._id,
 						answer: JSON.stringify({
@@ -233,48 +230,16 @@ let V = new Vue({
 						dataType: "json",
 						success: ret => {
 							if (!!ret.errmsg)
-								return alert(ret.errmsg);
-							//socket.emit(message.newAnswer, answer);
+								return this.$emit("warning", ret.errmsg);
+							else
+								gotoNext();
+							socket.emit(message.newAnswer, answerData);
 						},
 					});
 				},
-				// stage 2 after blur or resize
-				resumeAssessment: function() {
-					checkWindowSize();
-				},
 			},
 		},
 	},
-	mounted: function() {
-		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 (assessment.mode != "open")
-				{
-					if (this.stage == 2)
-						this.endAssessment();
-					document.location.href = "/nodevtools";
-				}
-			}
-		});
-	},
 	computed: {
 		countdown: function() {
 			let seconds = this.remainingTime % 60;
@@ -282,8 +247,15 @@ let V = new Vue({
 			return this.padWithZero(minutes) + ":" + this.padWithZero(seconds);
 		},
 	},
+	mounted: function() {
+		$(".modal").modal();
+	},
 	methods: {
-		// HELPERS:
+		// In case of AJAX errors
+		warning: function(message) {
+			this.warnMsg = message;
+			$("#warning").modal("open");
+		},
 		padWithZero: function(x) {
 			if (x < 10)
 				return "0" + x;
@@ -300,7 +272,7 @@ let V = new Vue({
 				dataType: "json",
 				success: s => {
 					if (!!s.errmsg)
-						return alert(s.errmsg);
+						return this.warning(s.errmsg);
 					this.stage = 1;
 					this.student = s.student;
 					Vue.nextTick( () => { Materialize.updateTextFields(); });
@@ -315,12 +287,12 @@ let V = new Vue({
 		},
 		// stage 1 --> 2 (get all questions, set password)
 		startAssessment: function() {
-			checkWindowSize();
-			let initializeStage2 = questions => {
+			let initializeStage2 = (questions,paper) => {
 				$("#leftButton, #rightButton").hide();
 				if (assessment.time > 0)
 				{
-					this.remainingTime = assessment.time * 60;
+					const deltaTime = !!paper ? Date.now() - paper.startTime : 0;
+					this.remainingTime = assessment.time * 60 - Math.round(deltaTime / 1000);
 					this.runTimer();
 				}
 				// Initialize structured answer(s) based on questions type and nesting (TODO: more general)
@@ -328,11 +300,22 @@ let V = new Vue({
 					assessment.questions = questions;
 				for (let q of assessment.questions)
 					this.inputs.push( _(q.options.length).times( _.constant(false) ) );
-				assessment.indices = assessment.fixed
-					? _.range(assessment.questions.length)
-					: _.shuffle( _.range(assessment.questions.length) );
+				if (!paper)
+				{
+					assessment.indices = assessment.fixed
+						? _.range(assessment.questions.length)
+						: _.shuffle( _.range(assessment.questions.length) );
+				}
+				else
+				{
+					// Resuming
+					let indices = paper.inputs.map( input => { return input.index; });
+					let remainingIndices = _.difference( _.range(assessment.questions.length).map(String), indices );
+					assessment.indices = indices.concat( _.shuffle(remainingIndices) );
+				}
+				assessment.index = !!paper ? paper.inputs.length : 0;
+				Vue.nextTick(libsRefresh);
 				this.stage = 2;
-				Vue.nextTick( () => { libsRefresh(); });
 			};
 			if (assessment.mode == "open")
 				return initializeStage2();
@@ -345,16 +328,24 @@ let V = new Vue({
 				dataType: "json",
 				success: s => {
 					if (!!s.errmsg)
-						return alert(s.errmsg);
-					this.student.password = s.password;
-					// Got password: students answers locked to this page until potential teacher
-					// action (power failure, computer down, ...)
-					// 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);
-					initializeStage2(s.questions);
+						return this.warning(s.errmsg);
+					if (!!s.paper)
+					{
+						// Resuming: receive stored answers + startTime
+						this.student.password = s.paper.password;
+						this.inputs = s.paper.inputs.map( inp => { return inp.input; });
+					}
+					else
+					{
+						this.student.password = s.password;
+						// Got password: students answers locked to this page until potential teacher
+						// action (power failure, computer down, ...)
+					}
+					socket = io.connect("/" + assessment.name, {
+						query: "number=" + this.student.number + "&password=" + this.password
+					});
+					socket.on(message.allAnswers, this.setAnswers);
+					initializeStage2(s.questions, s.paper);
 				},
 			});
 		},
@@ -370,40 +361,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 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;
+				},
+			});
 		},
 		// stage 3 --> 4 (on socket message "feedback")
 		setAnswers: function(answers) {