refactoring, better README (breaking commit...)

[qomet.git] / public / javascripts / components / statements.js

diff --git a/public/javascripts/components/statements.js b/public/javascripts/components/statements.js
index d93a97f..0fb5124 100644 (file)
--- a/public/javascripts/components/statements.js
+++ b/public/javascripts/components/statements.js
@@ -1,10 +1,35 @@
+/*
+ * questions group by index prefix 1.2.3 1.1 ...etc --> '1'
+
+NOTE: questions can contain parameterized exercises (how ?
+--> describe variables (syntax ?)
+--> write javascript script (OK, users trusted ? ==> safe mode possible if public website)
+Imaginary example: (using math.js)
+       <params> (avant l'exo)
+       x: math.random()
+       y: math.random()
+       M: math.matrix([[7, x], [y, -3]]);
+       res: math.det(M)
+       </params>
+       <div>Calculer le déterminant de 
+       $$\begin{matrix}7 & x\\y & -3\end{matrix}$$</div>
+       * ...
+*/
+
 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), //TODO: should be in questions!
+       //   '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) {
-               let domTree = this.questions.map( (q,i) => {
+               // TODO: render nothing if answers is empty
+               let domTree = (this.questions || [ ]).map( (q,i) => {
                        let questionContent = [ ];
                        questionContent.push(
                                h(
@@ -30,7 +55,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,9 +63,10 @@ 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; },
                                                        },
                                                },
+                                               [ '' ] //to work in Firefox 45.9 ESR @ ENSTA...
                                        )
                                );
                                option.push(
@@ -62,8 +88,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.answers.inputs[i][idx] && !q.answer.includes(idx),
                                                        },
                                                },
                                                option
@@ -81,12 +107,14 @@ Vue.component("statements", {
                                        optionList
                                )
                        );
+                       if (this.answers.displayAll && i < this.questions.length-1)
+                               questionContent.push( h("hr") );
                        return h(
                                "div",
                                {
                                        "class": {
                                                "question": true,
-                                               "hide": index >= 0 && index != i,
+                                               "hide": !this.answers.displayAll && this.answers.indices[this.answers.index] != i,
                                        },
                                },
                                questionContent
@@ -99,9 +127,12 @@ Vue.component("statements", {
                                        id: "statements",
                                },
                        },
-                       questions
+                       domTree
                );
        },
+       mounted: function() {
+               statementsLibsRefresh();
+       },
        updated: function() {
                // TODO: next line shouldn't be required: questions wordings + answer + options
                // are processed earlier; their content should be updated at this time.