From 8a51dbf760226cbe6bddc44cddef2262c4945f5d Mon Sep 17 00:00:00 2001 From: Benjamin Auder 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 ☺ ...don't close the window! -- 2.44.0