'update'

diff --git a/public/javascripts/assessment.js b/public/javascripts/assessment.js
index 5019840..20ca2cb 100644 (file)
--- 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 (file)
--- 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 (file)
--- 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 (file)
--- 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!