From 8a51dbf760226cbe6bddc44cddef2262c4945f5d Mon Sep 17 00:00:00 2001
From: Benjamin Auder <benjamin.auder@somewhere>
Date: Thu, 1 Feb 2018 12:51:44 +0100
Subject: [PATCH] 'update'

---
 public/javascripts/assessment.js            | 27 ++++++++++++---------
 public/javascripts/components/statements.js | 19 ++++++++++-----
 public/stylesheets/assessment.css           |  5 ++++
 views/assessment.pug                        |  4 +--
 4 files changed, 35 insertions(+), 20 deletions(-)

diff --git a/public/javascripts/assessment.js b/public/javascripts/assessment.js
index 5019840..20ca2cb 100644
--- a/public/javascripts/assessment.js
+++ b/public/javascripts/assessment.js
@@ -16,8 +16,8 @@ new Vue({
 	el: "#assessment",
 	data: {
 		assessment: assessment,
-		inputs: [ ], //student's answers
-		student: { }, //filled later
+		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
@@ -33,6 +33,9 @@ new Vue({
 			let minutes = Math.floor(this.remainingTime / 60);
 			return this.padWithZero(minutes) + ":" + this.padWithZero(seconds);
 		},
+		showAnswers: function() {
+			return this.stage == 4;
+		},
 	},
 	mounted: function() {
 		$(".modal").modal();
@@ -56,11 +59,6 @@ new Vue({
 			this.trySendCurrentAnswer();
 			document.location.href= "/fullscreen";
 		}, false);
-	},
-		trySendCurrentAnswer: function() {
-			if (this.stage == 2)
-				this.sendAnswer(assessment.indices[assessment.index]);
-		},
 	},
 	methods: {
 		// In case of AJAX errors
@@ -73,6 +71,10 @@ new Vue({
 				return "0" + x;
 			return x;
 		},
+		trySendCurrentAnswer: function() {
+			if (this.stage == 2)
+				this.sendAnswer(assessment.indices[assessment.index]);
+		},
 		// stage 0 --> 1
 		getStudent: function(cb) {
 			$.ajax("/get/student", {
@@ -110,11 +112,12 @@ new Vue({
 				// 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.inputs.push( _(q.options.length).times( _.constant(false) ) );
 				if (!paper)
 				{
-					assessment.indices = assessment.fixed
+					this.answers.indices = assessment.fixed
 						? _.range(assessment.questions.length)
 						: _.shuffle( _.range(assessment.questions.length) );
 				}
@@ -123,9 +126,9 @@ new Vue({
 					// 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) );
+					this.answers.indices = indices.concat( _.shuffle(remainingIndices) );
 				}
-				assessment.index = !!paper ? paper.inputs.length : 0;
+				this.answers.index = !!paper ? paper.inputs.length : 0;
 				Vue.nextTick(libsRefresh);
 				this.stage = 2;
 			};
@@ -145,7 +148,7 @@ new Vue({
 					{
 						// Resuming: receive stored answers + startTime
 						this.student.password = s.paper.password;
-						this.inputs = s.paper.inputs.map( inp => { return inp.input; });
+						this.answers.inputs = s.paper.inputs.map( inp => { return inp.input; });
 					}
 					else
 					{
@@ -180,7 +183,7 @@ new Vue({
 		sendAnswer: function(realIndex) {
 			let gotoNext = () => {
 				if (assessment.index == assessment.questions.length - 1)
-					this.$emit("gameover");
+					this.endAssessment();
 				else
 					assessment.index++;
 				this.$forceUpdate(); //TODO: shouldn't be required
diff --git a/public/javascripts/components/statements.js b/public/javascripts/components/statements.js
index d93a97f..6ebea85 100644
--- a/public/javascripts/components/statements.js
+++ b/public/javascripts/components/statements.js
@@ -1,9 +1,16 @@
 Vue.component("statements", {
-	props: ['questions','inputs','showAnswers','index'], // index=-1 : show all, otherwise show current question
+	// 'answers' is an object containing
+	//   'inputs'(array),
+	//   'displayAll'(bool),
+	//   'showSolution'(bool),
+	//   'indices': order of appearance
+	//   'index': current integer index (focused question)
+	props: ['questions','answers'],
 	// TODO: general render function for nested exercises
 	// 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) {
+		// TODO: render nothing if answers is empty
 		let domTree = this.questions.map( (q,i) => {
 			let questionContent = [ ];
 			questionContent.push(
@@ -30,7 +37,7 @@ Vue.component("statements", {
 						"input",
 						{
 							domProps: {
-								checked: this.inputs.length > 0 && this.inputs[i][idx],
+								checked: this.answers.inputs.length > 0 && this.answers.inputs[i][idx],
 								disabled: monitoring,
 							},
 							attrs: {
@@ -38,7 +45,7 @@ Vue.component("statements", {
 								type: "checkbox",
 							},
 							on: {
-								change: e => { this.inputs[i][idx] = e.target.checked; },
+								change: e => { this.answers.inputs[i][idx] = e.target.checked; },
 							},
 						},
 					)
@@ -62,8 +69,8 @@ Vue.component("statements", {
 						{
 							"class": {
 								option: true,
-								choiceCorrect: showAnswers && this.questions[i].answer.includes(idx),
-								choiceWrong: showAnswers && this.inputs[i][idx] && !questions[i].answer.includes(idx),
+								choiceCorrect: this.answers.showSolution && this.questions[i].answer.includes(idx),
+								choiceWrong: this.answers.showSolution && this.inputs[i][idx] && !q.answer.includes(idx),
 							},
 						},
 						option
@@ -86,7 +93,7 @@ Vue.component("statements", {
 				{
 					"class": {
 						"question": true,
-						"hide": index >= 0 && index != i,
+						"hide": !this.answers.displayAll && this.answers.index != i,
 					},
 				},
 				questionContent
diff --git a/public/stylesheets/assessment.css b/public/stylesheets/assessment.css
index 4805a53..b8a2409 100644
--- a/public/stylesheets/assessment.css
+++ b/public/stylesheets/assessment.css
@@ -4,6 +4,11 @@ a#rightButton {
 	right: 0;
 }
 
+button#sendAnswer {
+	display: block;
+	margin: 0 auto;
+}
+
 .question {
 	margin: 20px 5px;
 	padding: 15px 0;
diff --git a/views/assessment.pug b/views/assessment.pug
index 94b87ae..b8ed733 100644
--- a/views/assessment.pug
+++ b/views/assessment.pug
@@ -47,8 +47,8 @@ block content
 						.card
 							.timer.center(v-if="stage==2") {{ countdown }}
 					.card
-						button.waves-effect.waves-light.btn(style="display:block;margin:0 auto" @click="sendAnswer") Send
-						statements(:questions="assessment.questions" :showAnswers="showAnswers" :index="index" :inputs="inputs" @gameover="endAssessment")
+						button#sendAsnwer.waves-effect.waves-light.btn(@click="sendAnswer") Send
+						statements(:questions="assessment.questions" :answers="answers")
 				#stage3(v-show="stage==3")
 					.card
 						.finish Exam completed &#9786; ...don't close the window!
-- 
2.44.0