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

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

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;
};

function libsRefresh()
{
	$("#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({
	el: "#assessment",
	data: {
		assessment: assessment,
		inputs: [ ], //student's answers
		student: { }, //filled later
		// 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
	},
	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 questionContent = [ ];
					questionContent.push(
						h(
							"div",
							{
								"class": {
									"wording": true,
								},
								domProps: {
									innerHTML: q.wording,
								},
							}
						)
					);
					let optionsOrder = _.range(q.options.length);
					if (!q.fixed)
						optionsOrder = _.shuffle(optionsOrder);
					let optionList = [ ];
					optionsOrder.forEach( idx => {
						let option = [ ];
						option.push(
							h(
								"input",
								{
									domProps: {
										checked: this.inputs[i][idx],
									},
									attrs: {
										id: this.inputId(i,idx),
										type: "checkbox",
									},
									on: {
										change: e => { this.inputs[i][idx] = e.target.checked; },
									},
								},
							)
						);
						option.push(
							h(
								"label",
								{
									domProps: {
										innerHTML: q.options[idx],
									},
									attrs: {
										"for": this.inputId(i,idx),
									},
								}
							)
						);
						optionList.push(
							h(
								"div",
								{
									"class": {
										option: true,
										choiceCorrect: this.stage == 4 && assessment.questions[i].answer.includes(idx),
										choiceWrong: this.stage == 4 && this.inputs[i][idx] && !assessment.questions[i].answer.includes(idx),
									},
								},
								option
							)
						);
					});
					questionContent.push(
						h(
							"div",
							{
								"class": {
									optionList: true,
								},
							},
							optionList
						)
					);
					return h(
						"div",
						{
							"class": {
								"question": true,
								"hide": this.stage == 2 && assessment.display == 'one' && assessment.indices[this.index] != i,
							},
						},
						questionContent
					);
				});
				if (this.stage == 2)
				{
					// TODO: one button per question
					questions.unshift(
						h(
							"button",
							{
								"class": {
									"waves-effect": true,
									"waves-light": true,
									"btn": true,
								},
								on: {
									click: () => this.sendAnswer(assessment.indices[this.index]),
								},
							},
							"Send"
						)
					);
				}
				return h(
					"div",
					{
						attrs: {
							id: "statements",
						},
					},
					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');
				},
				// stage 2
				sendAnswer: function(realIndex) {
					if (this.index == assessment.questions.length - 1)
						this.$emit("gameover");
					else
						this.index++;
					if (assessment.mode == "open")
						return; //only local
					let answerData = {
						aid: assessment._id,
						answer: JSON.stringify({
							index:realIndex.toString(),
							input:this.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 alert(ret.errmsg);
							//socket.emit(message.newAnswer, answer);
						},
					});
				},
				// stage 2 after blur or resize
				resumeAssessment: function() {
					checkWindowSize();
				},
			},
		},
	},
	mounted: function() {
		if (assessment.mode == "open")
			return; //no security needed in open mode
		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 (this.stage == 2)
					this.endAssessment();
				document.location.href = "/nodevtools";
			}
		});
	},
	computed: {
		countdown: function() {
			let seconds = this.remainingTime % 60;
			let minutes = Math.floor(this.remainingTime / 60);
			return this.padWithZero(minutes) + ":" + this.padWithZero(seconds);
		},
	},
	methods: {
		// HELPERS:
		padWithZero: function(x) {
			if (x < 10)
				return "0" + x;
			return x;
		},
		// 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 alert(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() {
			checkWindowSize();
			let initializeStage2 = questions => {
				$("#leftButton, #rightButton").hide();
				if (assessment.time > 0)
				{
					this.remainingTime = assessment.time * 60;
					this.runTimer();
				}
				// Initialize structured answer(s) based on questions type and nesting (TODO: more general)
				if (!!questions)
					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) );
				this.stage = 2;
				Vue.nextTick( () => { libsRefresh(); });
			};
			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 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);
				},
			});
		},
		// stage 2
		runTimer: function() {
			if (assessment.time <= 0)
				return;
			let self = this;
			setInterval( function() {
				self.remainingTime--;
				if (self.remainingTime <= 0 || self.stage >= 4)
					self.endAssessment();
					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
		endAssessment: function() {
			// If time over or cheating: set endTime, destroy password
			$("#leftButton, #rightButton").show();
			//this.sendAnswer(...); //TODO: for each non-answered (and non-empty!) index (yet)
			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;
		},
		// stage 3 --> 4 (on socket message "feedback")
		setAnswers: function(answers) {
			for (let i=0; i<answers.length; i++)
				assessment.questions[i].answer = answers[i];
			this.stage = 4;
		},
	},
});
Commit	Line	Data
e99c53fb BA	1	let socket = null; //monitor answers in real time
	2
	3	function checkWindowSize()
	4	{
	5	if (assessment.mode == "secure")
	6	{
	7	// NOTE: temporarily accept smartphone (security hole: pretend being a smartphone on desktop browser...)
	8	if (navigator.userAgent.match(/(iPhone\|iPod\|iPad\|Android\|BlackBerry)/))
	9	return true;
	10	let test = () => {
	11	return window.innerWidth < screen.width \|\| window.innerHeight < screen.height;
	12	};
	13	const returnVal = test;
	14	while (!test)
	15	alert("Please enter fullscreen mode (F11)");
	16	return returnVal;
	17	}
	18	return true;
	19	};
	20
	21	function libsRefresh()
	22	{
	23	$("#statements").find("code[class^=language-]").each( (i,elem) => {
	24	Prism.highlightElement(elem);
	25	});
	26	MathJax.Hub.Queue(["Typeset",MathJax.Hub,"statements"]);
	27	};
	28
	29	// TODO: if display == "all", les envois devraient être non définitifs (possibilité de corriger)
	30	// Et, blur sur une (sous-)question devrait envoyer la version courante de la sous-question
	31
	32	let V = new Vue({
	33	el: "#assessment",
	34	data: {
	35	assessment: assessment,
	36	inputs: [ ], //student's answers
	37	student: { }, //filled later
	38	// Stage 0: unauthenticated (number),
	39	// 1: authenticated (got a name, unvalidated)
	40	// 2: locked: password set, exam started
	41	// 3: completed
	42	// 4: show answers
	43	stage: assessment.mode != "open" ? 0 : 1,
	44	remainingTime: 0, //global, in seconds
	45	},
	46	components: {
	47	"statements": {
	48	props: ['assessment','inputs','student','stage'],
	49	data: function() {
	50	return {
	51	index: 0, //current question index in assessment.indices
	52	};
	53	},
	54	mounted: function() {
	55	if (assessment.mode != "secure")
	56	return;
	57	$("#warning").modal({
	58	complete: () => {
	59	this.stage = 2;
	60	this.resumeAssessment();
	61	},
	62	});
	63	window.addEventListener("blur", () => {
	64	if (this.stage == 2)
65	this.showWarning();
66	}, false);
67	window.addEventListener("resize", e => {
68	if (this.stage == 2 && !checkWindowSize())
69	this.showWarning();
70	}, false);
71	//socket.on("disconnect", () => { }); //TODO: notify monitor (highlight red)
72	},
73	updated: function() {
74	libsRefresh();
75	},
76	// TODO: general render function for nested exercises
77	// TODO: with answer if stage==4 : class "wrong" if ticked AND stage==4 AND received answers
78	// class "right" if stage == 4 AND received answers (background-color: red / green)
79	// There should be a questions navigator below, or next (visible if display=='all')
80	// Full questions tree is rendered, but some parts hidden depending on display settings
81	render(h) {
82	let self = this;
83	let questions = assessment.questions.map( (q,i) => {
84	let questionContent = [ ];
85	questionContent.push(
86	h(
87	"div",
88	{
89	"class": {
90	"wording": true,
91	},
92	domProps: {
93	innerHTML: q.wording,
94	},
95	}
96	)
97	);
98	let optionsOrder = _.range(q.options.length);
99	if (!q.fixed)
100	optionsOrder = _.shuffle(optionsOrder);
101	let optionList = [ ];
102	optionsOrder.forEach( idx => {
103	let option = [ ];
104	option.push(
105	h(
106	"input",
107	{
108	domProps: {
109	checked: this.inputs[i][idx],
110	},
111	attrs: {
112	id: this.inputId(i,idx),
113	type: "checkbox",
114	},
115	on: {
116	change: e => { this.inputs[i][idx] = e.target.checked; },
117	},
118	},
119	)
120	);
121	option.push(
122	h(
123	"label",
124	{
125	domProps: {
126	innerHTML: q.options[idx],
127	},
128	attrs: {
129	"for": this.inputId(i,idx),
130	},
131	}
132	)
133	);
134	optionList.push(
135	h(
136	"div",
137	{
138	"class": {
139	option: true,
140	choiceCorrect: this.stage == 4 && assessment.questions[i].answer.includes(idx),
141	choiceWrong: this.stage == 4 && this.inputs[i][idx] && !assessment.questions[i].answer.includes(idx),
142	},
143	},
144	option
145	)
146	);
147	});
148	questionContent.push(
149	h(
150	"div",
151	{
152	"class": {
153	optionList: true,
154	},
155	},
156	optionList
157	)
158	);
159	return h(
160	"div",
161	{
162	"class": {
163	"question": true,
164	"hide": this.stage == 2 && assessment.display == 'one' && assessment.indices[this.index] != i,
165	},
166	},
167	questionContent
168	);
169	});
170	if (this.stage == 2)
171	{
172	// TODO: one button per question
173	questions.unshift(
174	h(
175	"button",
176	{
177	"class": {
178	"waves-effect": true,
179	"waves-light": true,
180	"btn": true,
181	},
182	on: {
183	click: () => this.sendAnswer(assessment.indices[this.index]),
184	},
185	},
186	"Send"
187	)
188	);
189	}
190	return h(
191	"div",
192	{
193	attrs: {
194	id: "statements",
195	},
196	},
197	questions
198	);
199	},
200	methods: {
201	// HELPERS:
202	inputId: function(i,j) {
203	return "q" + i + "_" + "input" + j;
204	},
205	showWarning: function(action) {
206	this.sendAnswer(assessment.indices[this.index]);
207	this.stage = 32; //fictive stage to hide all elements
208	$("#warning").modal('open');
209	},
210	// stage 2
211	sendAnswer: function(realIndex) {
212	if (this.index == assessment.questions.length - 1)
213	this.$emit("gameover");
214	else
215	this.index++;
216	if (assessment.mode == "open")
217	return; //only local
218	let answerData = {
219	aid: assessment._id,
220	answer: JSON.stringify({
221	index:realIndex.toString(),
222	input:this.inputs[realIndex]
223	.map( (tf,i) => { return {val:tf,idx:i}; } )
224	.filter( item => { return item.val; })
225	.map( item => { return item.idx; })
226	}),
227	number: this.student.number,
228	password: this.student.password,
229	};
230	$.ajax("/send/answer", {
231	method: "GET",
232	data: answerData,
233	dataType: "json",
234	success: ret => {
235	if (!!ret.errmsg)
236	return alert(ret.errmsg);
237	//socket.emit(message.newAnswer, answer);
238	},
239	});
240	},
241	// stage 2 after blur or resize
242	resumeAssessment: function() {
243	checkWindowSize();
244	},
245	},
246	},
247	},
248	mounted: function() {
d6cda0c6 BA	249	if (assessment.mode == "open")
d6cda0c6 BA	250	return; //no security needed in open mode
e99c53fb BA	251	window.addEventListener("keydown", e => {
	252	// If F12 or ctrl+shift (ways to access devtools)
	253	if (e.keyCode == 123 \|\| (e.ctrlKey && e.shiftKey))
	254	e.preventDefault();
	255	}, false);
	256	// Devtools detect based on https://jsfiddle.net/ebhjxfwv/4/
	257	let div = document.createElement('div');
	258	let devtoolsLoop = setInterval(
	259	() => {
	260	if (assessment.mode != "open")
	261	{
	262	console.log(div);
	263	console.clear();
	264	}
	265	},
	266	1000
	267	);
	268	Object.defineProperty(div, "id", {
	269	get: () => {
	270	clearInterval(devtoolsLoop);
d6cda0c6 BA	271	if (this.stage == 2)
	272	this.endAssessment();
	273	document.location.href = "/nodevtools";
e99c53fb BA	274	}
	275	});
	276	},
	277	computed: {
	278	countdown: function() {
	279	let seconds = this.remainingTime % 60;
	280	let minutes = Math.floor(this.remainingTime / 60);
	281	return this.padWithZero(minutes) + ":" + this.padWithZero(seconds);
	282	},
	283	},
	284	methods: {
	285	// HELPERS:
	286	padWithZero: function(x) {
	287	if (x < 10)
	288	return "0" + x;
	289	return x;
	290	},
	291	// stage 0 --> 1
	292	getStudent: function(cb) {
	293	$.ajax("/get/student", {
	294	method: "GET",
	295	data: {
	296	number: this.student.number,
	297	cid: assessment.cid,
	298	},
	299	dataType: "json",
	300	success: s => {
	301	if (!!s.errmsg)
	302	return alert(s.errmsg);
	303	this.stage = 1;
	304	this.student = s.student;
	305	Vue.nextTick( () => { Materialize.updateTextFields(); });
	306	if (!!cb)
	307	cb();
	308	},
	309	});
	310	},
	311	// stage 1 --> 0
	312	cancelStudent: function() {
	313	this.stage = 0;
	314	},
	315	// stage 1 --> 2 (get all questions, set password)
	316	startAssessment: function() {
	317	checkWindowSize();
	318	let initializeStage2 = questions => {
	319	$("#leftButton, #rightButton").hide();
	320	if (assessment.time > 0)
	321	{
	322	this.remainingTime = assessment.time * 60;
	323	this.runTimer();
	324	}
	325	// Initialize structured answer(s) based on questions type and nesting (TODO: more general)
	326	if (!!questions)
	327	assessment.questions = questions;
	328	for (let q of assessment.questions)
	329	this.inputs.push( _(q.options.length).times( _.constant(false) ) );
	330	assessment.indices = assessment.fixed
	331	? _.range(assessment.questions.length)
	332	: _.shuffle( _.range(assessment.questions.length) );
	333	this.stage = 2;
	334	Vue.nextTick( () => { libsRefresh(); });
	335	};
	336	if (assessment.mode == "open")
	337	return initializeStage2();
338	$.ajax("/start/assessment", {
339	method: "GET",
340	data: {
341	number: this.student.number,
342	aid: assessment._id
343	},
344	dataType: "json",
345	success: s => {
346	if (!!s.errmsg)
347	return alert(s.errmsg);
348	this.student.password = s.password;
349	// Got password: students answers locked to this page until potential teacher
350	// action (power failure, computer down, ...)
351	// TODO: password also exchanged by sockets to check identity
352	//socket = io.connect("/" + assessment.name, {
353	// query: "number=" + this.student.number + "&password=" + this.password
354	//});
355	//socket.on(message.allAnswers, this.setAnswers);
356	initializeStage2(s.questions);
357	},
358	});
359	},
360	// stage 2
361	runTimer: function() {
362	if (assessment.time <= 0)
363	return;
364	let self = this;
365	setInterval( function() {
366	self.remainingTime--;
367	if (self.remainingTime <= 0 \|\| self.stage >= 4)
368	self.endAssessment();
369	clearInterval(this);
370	}, 1000);
371	},
372	// stage 2 after disconnect (socket)
373	resumeAssessment: function() {
374	// UNIMPLEMENTED
375	// TODO: get stored answers (papers[number cookie]), inject (inputs), set index+indices
376	},
377	// stage 2 --> 3 (or 4)
378	// from a message by statements component
379	endAssessment: function() {
380	// If time over or cheating: set endTime, destroy password
381	$("#leftButton, #rightButton").show();
382	//this.sendAnswer(...); //TODO: for each non-answered (and non-empty!) index (yet)
383	if (assessment.mode != "open")
384	{
385	$.ajax("/end/assessment", {
386	method: "GET",
387	data: {
388	aid: assessment._id,
389	number: this.student.number,
390	password: this.student.password,
391	},
392	dataType: "json",
393	success: ret => {
394	if (!!ret.errmsg)
395	return alert(ret.errmsg);
396	assessment.conclusion = ret.conclusion;
397	this.stage = 3;
398	delete this.student["password"]; //unable to send new answers now
399	//socket.disconnect();
400	//socket = null;
401	},
402	});
403	}
404	else
405	this.stage = 4;
406	},
407	// stage 3 --> 4 (on socket message "feedback")
408	setAnswers: function(answers) {
409	for (let i=0; i<answers.length; i++)
410	assessment.questions[i].answer = answers[i];
411	this.stage = 4;
412	},
413	},
414	});