[qomet.git] / public / javascripts / assessment.js

let socket = null; //monitor answers in real time

if (assessment.mode == "secure" && !checkWindowSize())
	document.location.href= "/fullscreen";

function checkWindowSize()
{
	// 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;
};

new Vue({
	el: "#assessment",
	data: {
		assessment: assessment,
		answers: { }, //filled later with answering parameters
		student: { }, //filled later (name, password)
		// Stage 0: unauthenticated (number),
		//       1: authenticated (got a name, unvalidated)
		//       2: locked: password set, exam started
		//       3: completed
		//       4: show answers
		stage: assessment.mode != "open" ? 0 : 1,
		remainingTime: 0, //global, in seconds
		warnMsg: "",
	},
	computed: {
		countdown: function() {
			let seconds = this.remainingTime % 60;
			let minutes = Math.floor(this.remainingTime / 60);
			return this.padWithZero(minutes) + ":" + this.padWithZero(seconds);
		},
		showAnswers: function() {
			return this.stage == 4;
		},
	},
	mounted: function() {
		$(".modal").modal();
		if (assessment.mode != "open")
		{
			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", () => {
			if (!socket)
				return;
			if (assessment.mode == "secure")
			{
				this.trySendCurrentAnswer();
				document.location.href= "/noblur";
			}
			else if (assessment.mode == "exam")
				socket.emit(message.studentBlur, {number:this.student.number});
		}, false);
		if (assessment.mode == "exam")
		{
			window.addEventListener("focus", () => {
				if (!socket)
					return;
				socket.emit(message.studentFocus, {number:this.student.number});
			}, false);
		}
		window.addEventListener("resize", e => {
			if (!socket)
				return;
			if (assessment.mode == "secure")
			{
				this.trySendCurrentAnswer();
				document.location.href= "/fullscreen";
			}
			else if (assessment.mode == "exam")
			{
				if (checkWindowSize())
					socket.emit(message.studentFullscreen, {number:this.student.number});
				else
					socket.emit(message.studentResize, {number:this.student.number});
			}
		}, false);
	},
	methods: {
		// In case of AJAX errors
		showWarning: function(message) {
			this.warnMsg = message;
			$("#warning").modal("open");
		},
		padWithZero: function(x) {
			if (x < 10)
				return "0" + x;
			return x;
		},
		trySendCurrentAnswer: function() {
			if (this.stage == 2)
				this.sendAnswer();
		},
		// stage 0 --> 1
		getStudent: function(cb) {
			$.ajax("/get/student", {
				method: "GET",
				data: {
					number: this.student.number,
					cid: assessment.cid,
				},
				dataType: "json",
				success: s => {
					if (!!s.errmsg)
						return this.showWarning(s.errmsg);
					this.stage = 1;
					this.student = s.student;
					Vue.nextTick( () => { Materialize.updateTextFields(); });
					if (!!cb)
						cb();
				},
			});
		},
		// stage 1 --> 0
		cancelStudent: function() {
			this.stage = 0;
		},
		// stage 1 --> 2 (get all questions, set password)
		startAssessment: function() {
			let initializeStage2 = (questions,paper) => {
				$("#leftButton, #rightButton").hide();
				if (assessment.time > 0)
				{

// TODO: distinguish total exam time AND question time

					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)
				if (!!questions)
					assessment.questions = questions;
				this.answers.inputs = [ ];
				for (let q of assessment.questions)
					this.answers.inputs.push( _(q.options.length).times( _.constant(false) ) );
				if (!paper)
				{
					this.answers.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 );
					this.answers.indices = indices.concat( _.shuffle(remainingIndices) );
				}
				this.answers.index = !!paper ? paper.inputs.length : 0;
				this.answers.displayAll = assessment.display == "all";
				this.answers.showSolution = false;
				this.stage = 2;
			};
			if (assessment.mode == "open")
				return initializeStage2();
			$.ajax("/start/assessment", {
				method: "GET",
				data: {
					number: this.student.number,
					aid: assessment._id
				},
				dataType: "json",
				success: s => {
					if (!!s.errmsg)
						return this.showWarning(s.errmsg);
					if (!!s.paper)
					{
						// Resuming: receive stored answers + startTime
						this.student.password = s.paper.password;
						this.answers.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("/", {
						query: "aid=" + assessment._id + "&number=" + this.student.number + "&password=" + this.student.password
					});
					socket.on(message.allAnswers, this.setAnswers);
					initializeStage2(s.questions, s.paper);
				},
			});
		},
		// stage 2
		runTimer: function() {
			if (assessment.time <= 0)
				return;
			let self = this;
			setInterval( function() {
				self.remainingTime--;
				if (self.remainingTime <= 0)
				{
					if (self.stage == 2)
						self.endAssessment();
					clearInterval(this);
				}
			}, 1000);
		},
		// stage 2
		sendOneAnswer: function() {
			const realIndex = this.answers.indices[this.answers.index];
			let gotoNext = () => {
				if (this.answers.index == assessment.questions.length - 1)
					this.endAssessment();
				else
					this.answers.index++;
				this.$children[0].$forceUpdate(); //TODO: bad HACK, and shouldn't be required...
			};
			if (assessment.mode == "open")
				return gotoNext(); //only local
			let answerData = {
				aid: assessment._id,
				answer: JSON.stringify({
					index: realIndex.toString(),
					input: this.answers.inputs[realIndex]
						.map( (tf,i) => { return {val:tf,idx:i}; } )
						.filter( item => { return item.val; })
						.map( item => { return item.idx; })
				}),
				number: this.student.number,
				password: this.student.password,
			};
			$.ajax("/send/answer", {
				method: "GET",
				data: answerData,
				dataType: "json",
				success: ret => {
					if (!!ret.errmsg)
						return this.showWarning(ret.errmsg);
					gotoNext();
					socket.emit(message.newAnswer, answerData);
				},
			});
		},
		// TODO: I don't like that + sending should not be definitive in exam mode with display = all
		sendAnswer: function() {
			if (assessment.display == "one")
				this.sendOneAnswer();
			else
				assessment.questions.forEach(this.sendOneAnswer);
		},
		// stage 2 --> 3 (or 4)
		// from a message by statements component, or time over
		endAssessment: function() {
			// Set endTime, destroy password
			$("#leftButton, #rightButton").show();
			if (assessment.mode == "open")
			{
				this.stage = 4;
				this.answers.showSolution = true;
				this.answers.displayAll = true;
				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.showWarning(ret.errmsg);
					this.stage = 3;
					delete this.student["password"]; //unable to send new answers now
				},
			});
		},
		// stage 3 --> 4 (on socket message "feedback")
		setAnswers: function(m) {
			const answers = JSON.parse(m.answers);
			for (let i=0; i<answers.length; i++)
				assessment.questions[i].answer = answers[i];
			this.answers.showSolution = true;
			this.answers.displayAll = true;
			this.stage = 4;
			socket.disconnect();
			socket = null;
		},
	},
});
Commit	Line	Data
e99c53fb BA	1	let socket = null; //monitor answers in real time
e99c53fb BA	2
cc7c0f5e BA	3	if (assessment.mode == "secure" && !checkWindowSize())
cc7c0f5e BA	4	document.location.href= "/fullscreen";
e99c53fb	5
cc7c0f5e	6	function checkWindowSize()
e99c53fb	7	{
cc7c0f5e BA	8	// NOTE: temporarily accept smartphone (security hole: pretend being a smartphone on desktop browser...)
	9	if (navigator.userAgent.match(/(iPhone\|iPod\|iPad\|Android\|BlackBerry)/))
	10	return true;
f03a2ad9 BA	11	// 3 is arbitrary, but a small tolerance is required (e.g. in Firefox)
f03a2ad9 BA	12	return window.innerWidth >= screen.width-3 && window.innerHeight >= screen.height-3;
e99c53fb BA	13	};
e99c53fb BA	14
8a2b3260	15	new Vue({
e99c53fb BA	16	el: "#assessment",
	17	data: {
	18	assessment: assessment,
8a51dbf7 BA	19	answers: { }, //filled later with answering parameters
8a51dbf7 BA	20	student: { }, //filled later (name, password)
e99c53fb BA	21	// Stage 0: unauthenticated (number),
	22	// 1: authenticated (got a name, unvalidated)
	23	// 2: locked: password set, exam started
	24	// 3: completed
	25	// 4: show answers
	26	stage: assessment.mode != "open" ? 0 : 1,
	27	remainingTime: 0, //global, in seconds
f03a2ad9	28	warnMsg: "",
e99c53fb	29	},
e99c53fb BA	30	computed: {
	31	countdown: function() {
	32	let seconds = this.remainingTime % 60;
	33	let minutes = Math.floor(this.remainingTime / 60);
	34	return this.padWithZero(minutes) + ":" + this.padWithZero(seconds);
	35	},
8a51dbf7 BA	36	showAnswers: function() {
	37	return this.stage == 4;
	38	},
e99c53fb	39	},
f03a2ad9 BA	40	mounted: function() {
f03a2ad9 BA	41	$(".modal").modal();
2bada710 BA	42	if (assessment.mode != "open")
	43	{
	44	window.addEventListener("keydown", e => {
	45	// Ignore F12 (avoid accidental window resize due to devtools)
	46	// NOTE: in Chromium at least, fullscreen mode exit with F11 cannot be prevented.
	47	// Workaround: disable key at higher level. Possible xbindkey config:
	48	// "false"
	49	// m:0x10 + c:95
	50	// Mod2 + F11
	51	if (e.keyCode == 123)
	52	e.preventDefault();
	53	}, false);
	54	}
435371c7	55	window.addEventListener("blur", () => {
2bada710 BA	56	if (!socket)
	57	return;
	58	if (assessment.mode == "secure")
	59	{
	60	this.trySendCurrentAnswer();
	61	document.location.href= "/noblur";
	62	}
	63	else if (assessment.mode == "exam")
	64	socket.emit(message.studentBlur, {number:this.student.number});
435371c7	65	}, false);
2bada710 BA	66	if (assessment.mode == "exam")
	67	{
	68	window.addEventListener("focus", () => {
	69	if (!socket)
	70	return;
	71	socket.emit(message.studentFocus, {number:this.student.number});
	72	}, false);
	73	}
435371c7	74	window.addEventListener("resize", e => {
2bada710 BA	75	if (!socket)
	76	return;
	77	if (assessment.mode == "secure")
	78	{
	79	this.trySendCurrentAnswer();
	80	document.location.href= "/fullscreen";
	81	}
	82	else if (assessment.mode == "exam")
	83	{
	84	if (checkWindowSize())
	85	socket.emit(message.studentFullscreen, {number:this.student.number});
	86	else
	87	socket.emit(message.studentResize, {number:this.student.number});
	88	}
435371c7	89	}, false);
f03a2ad9	90	},
e99c53fb	91	methods: {
f03a2ad9	92	// In case of AJAX errors
71d1ca9c	93	showWarning: function(message) {
f03a2ad9 BA	94	this.warnMsg = message;
	95	$("#warning").modal("open");
	96	},
e99c53fb BA	97	padWithZero: function(x) {
	98	if (x < 10)
	99	return "0" + x;
	100	return x;
	101	},
8a51dbf7 BA	102	trySendCurrentAnswer: function() {
8a51dbf7 BA	103	if (this.stage == 2)
71d1ca9c	104	this.sendAnswer();
8a51dbf7	105	},
e99c53fb BA	106	// stage 0 --> 1
	107	getStudent: function(cb) {
	108	$.ajax("/get/student", {
	109	method: "GET",
	110	data: {
	111	number: this.student.number,
	112	cid: assessment.cid,
	113	},
	114	dataType: "json",
	115	success: s => {
	116	if (!!s.errmsg)
71d1ca9c	117	return this.showWarning(s.errmsg);
e99c53fb BA	118	this.stage = 1;
	119	this.student = s.student;
	120	Vue.nextTick( () => { Materialize.updateTextFields(); });
	121	if (!!cb)
	122	cb();
	123	},
	124	});
	125	},
	126	// stage 1 --> 0
	127	cancelStudent: function() {
	128	this.stage = 0;
	129	},
	130	// stage 1 --> 2 (get all questions, set password)
	131	startAssessment: function() {
f03a2ad9	132	let initializeStage2 = (questions,paper) => {
e99c53fb BA	133	$("#leftButton, #rightButton").hide();
	134	if (assessment.time > 0)
	135	{
43828378 BA	136
	137	// TODO: distinguish total exam time AND question time
	138
85cf9f89 BA	139	const deltaTime = !!paper ? Date.now() - paper.startTime : 0;
85cf9f89 BA	140	this.remainingTime = assessment.time * 60 - Math.round(deltaTime / 1000);
e99c53fb BA	141	this.runTimer();
	142	}
	143	// Initialize structured answer(s) based on questions type and nesting (TODO: more general)
	144	if (!!questions)
	145	assessment.questions = questions;
8a51dbf7	146	this.answers.inputs = [ ];
e99c53fb	147	for (let q of assessment.questions)
71d1ca9c	148	this.answers.inputs.push( _(q.options.length).times( _.constant(false) ) );
f03a2ad9 BA	149	if (!paper)
f03a2ad9 BA	150	{
8a51dbf7	151	this.answers.indices = assessment.fixed
f03a2ad9 BA	152	? _.range(assessment.questions.length)
	153	: _.shuffle( _.range(assessment.questions.length) );
	154	}
	155	else
	156	{
	157	// Resuming
	158	let indices = paper.inputs.map( input => { return input.index; });
6bf4a38e	159	let remainingIndices = _.difference( _.range(assessment.questions.length).map(String), indices );
8a51dbf7	160	this.answers.indices = indices.concat( _.shuffle(remainingIndices) );
f03a2ad9	161	}
8a51dbf7	162	this.answers.index = !!paper ? paper.inputs.length : 0;
3b8117c5 BA	163	this.answers.displayAll = assessment.display == "all";
3b8117c5 BA	164	this.answers.showSolution = false;
e99c53fb	165	this.stage = 2;
e99c53fb BA	166	};
	167	if (assessment.mode == "open")
	168	return initializeStage2();
	169	$.ajax("/start/assessment", {
	170	method: "GET",
	171	data: {
	172	number: this.student.number,
	173	aid: assessment._id
	174	},
	175	dataType: "json",
	176	success: s => {
	177	if (!!s.errmsg)
71d1ca9c	178	return this.showWarning(s.errmsg);
f03a2ad9 BA	179	if (!!s.paper)
	180	{
	181	// Resuming: receive stored answers + startTime
	182	this.student.password = s.paper.password;
8a51dbf7	183	this.answers.inputs = s.paper.inputs.map( inp => { return inp.input; });
f03a2ad9 BA	184	}
	185	else
	186	{
	187	this.student.password = s.password;
	188	// Got password: students answers locked to this page until potential teacher
	189	// action (power failure, computer down, ...)
	190	}
29c8b391	191	socket = io.connect("/", {
71d1ca9c	192	query: "aid=" + assessment._id + "&number=" + this.student.number + "&password=" + this.student.password
e5ec7dea BA	193	});
e5ec7dea BA	194	socket.on(message.allAnswers, this.setAnswers);
f03a2ad9	195	initializeStage2(s.questions, s.paper);
e99c53fb BA	196	},
	197	});
	198	},
	199	// stage 2
	200	runTimer: function() {
	201	if (assessment.time <= 0)
	202	return;
	203	let self = this;
	204	setInterval( function() {
	205	self.remainingTime--;
71d1ca9c BA	206	if (self.remainingTime <= 0)
	207	{
	208	if (self.stage == 2)
	209	self.endAssessment();
e99c53fb	210	clearInterval(this);
71d1ca9c	211	}
e99c53fb BA	212	}, 1000);
e99c53fb BA	213	},
435371c7	214	// stage 2
9f4f3259	215	sendOneAnswer: function() {
71d1ca9c	216	const realIndex = this.answers.indices[this.answers.index];
435371c7	217	let gotoNext = () => {
71d1ca9c	218	if (this.answers.index == assessment.questions.length - 1)
8a51dbf7	219	this.endAssessment();
435371c7	220	else
71d1ca9c BA	221	this.answers.index++;
71d1ca9c BA	222	this.$children[0].$forceUpdate(); //TODO: bad HACK, and shouldn't be required...
435371c7 BA	223	};
	224	if (assessment.mode == "open")
	225	return gotoNext(); //only local
	226	let answerData = {
	227	aid: assessment._id,
	228	answer: JSON.stringify({
71d1ca9c BA	229	index: realIndex.toString(),
71d1ca9c BA	230	input: this.answers.inputs[realIndex]
435371c7 BA	231	.map( (tf,i) => { return {val:tf,idx:i}; } )
	232	.filter( item => { return item.val; })
	233	.map( item => { return item.idx; })
	234	}),
	235	number: this.student.number,
	236	password: this.student.password,
	237	};
	238	$.ajax("/send/answer", {
	239	method: "GET",
	240	data: answerData,
	241	dataType: "json",
	242	success: ret => {
	243	if (!!ret.errmsg)
71d1ca9c BA	244	return this.showWarning(ret.errmsg);
71d1ca9c BA	245	gotoNext();
435371c7 BA	246	socket.emit(message.newAnswer, answerData);
	247	},
	248	});
	249	},
9f4f3259 BA	250	// TODO: I don't like that + sending should not be definitive in exam mode with display = all
	251	sendAnswer: function() {
	252	if (assessment.display == "one")
4a4a6497	253	this.sendOneAnswer();
9f4f3259	254	else
4a4a6497	255	assessment.questions.forEach(this.sendOneAnswer);
9f4f3259	256	},
e99c53fb	257	// stage 2 --> 3 (or 4)
cc7c0f5e	258	// from a message by statements component, or time over
e99c53fb	259	endAssessment: function() {
cc7c0f5e	260	// Set endTime, destroy password
e99c53fb	261	$("#leftButton, #rightButton").show();
cc7c0f5e	262	if (assessment.mode == "open")
e99c53fb	263	{
e99c53fb	264	this.stage = 4;
3b8117c5	265	this.answers.showSolution = true;
29c8b391	266	this.answers.displayAll = true;
cc7c0f5e BA	267	return;
	268	}
	269	$.ajax("/end/assessment", {
	270	method: "GET",
	271	data: {
	272	aid: assessment._id,
	273	number: this.student.number,
	274	password: this.student.password,
	275	},
	276	dataType: "json",
	277	success: ret => {
	278	if (!!ret.errmsg)
71d1ca9c	279	return this.showWarning(ret.errmsg);
cc7c0f5e BA	280	this.stage = 3;
cc7c0f5e BA	281	delete this.student["password"]; //unable to send new answers now
cc7c0f5e BA	282	},
cc7c0f5e BA	283	});
e99c53fb BA	284	},
e99c53fb BA	285	// stage 3 --> 4 (on socket message "feedback")
71d1ca9c	286	setAnswers: function(m) {
29c8b391 BA	287	const answers = JSON.parse(m.answers);
	288	for (let i=0; i<answers.length; i++)
	289	assessment.questions[i].answer = answers[i];
3b8117c5	290	this.answers.showSolution = true;
29c8b391	291	this.answers.displayAll = true;
e99c53fb	292	this.stage = 4;
29c8b391 BA	293	socket.disconnect();
29c8b391 BA	294	socket = null;
e99c53fb BA	295	},
	296	},
	297	});