1 Vue
.component("statements", {
2 // 'answers' is an object containing
4 // 'displayAll'(bool), //TODO: should be in questions!
5 // 'showSolution'(bool),
6 // 'indices': order of appearance
7 // 'index': current integer index (focused question)
8 props: ['questions','answers'],
9 // TODO: general render function for nested exercises
10 // There should be a questions navigator below, or next (visible if display=='all')
11 // Full questions tree is rendered, but some parts hidden depending on display settings
13 // TODO: render nothing if answers is empty
14 let domTree
= (this.questions
|| [ ]).map( (q
,i
) => {
15 let questionContent
= [ ];
29 let optionsOrder
= _
.range(q
.options
.length
);
31 optionsOrder
= _
.shuffle(optionsOrder
);
33 optionsOrder
.forEach( idx
=> {
40 checked: this.answers
.inputs
.length
> 0 && this.answers
.inputs
[i
][idx
],
44 id: this.inputId(i
,idx
),
48 change: e
=> { this.answers
.inputs
[i
][idx
] = e
.target
.checked
; },
51 [ '' ] //to work in Firefox 45.9 ESR @ ENSTA...
59 innerHTML: q
.options
[idx
],
62 "for": this.inputId(i
,idx
),
73 choiceCorrect: this.answers
.showSolution
&& this.questions
[i
].answer
.includes(idx
),
74 choiceWrong: this.answers
.showSolution
&& this.answers
.inputs
[i
][idx
] && !q
.answer
.includes(idx
),
92 if (this.answers
.displayAll
&& i
< this.questions
.length
-1)
93 questionContent
.push( h("hr") );
99 "hide": !this.answers
.displayAll
&& this.answers
.indices
[this.answers
.index
] != i
,
115 mounted: function() {
116 statementsLibsRefresh();
118 updated: function() {
119 // TODO: next line shouldn't be required: questions wordings + answer + options
120 // are processed earlier; their content should be updated at this time.
121 statementsLibsRefresh();
124 inputId: function(i
,j
) {
125 return "q" + i
+ "_" + "input" + j
;