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
; },
58 innerHTML: q
.options
[idx
],
61 "for": this.inputId(i
,idx
),
72 choiceCorrect: this.answers
.showSolution
&& this.questions
[i
].answer
.includes(idx
),
73 choiceWrong: this.answers
.showSolution
&& this.answers
.inputs
[i
][idx
] && !q
.answer
.includes(idx
),
91 if (this.answers
.displayAll
&& i
< this.questions
.length
-1)
92 questionContent
.push( h("hr") );
98 "hide": !this.answers
.displayAll
&& this.answers
.indices
[this.answers
.index
] != i
,
114 mounted: function() {
115 statementsLibsRefresh();
117 updated: function() {
118 // TODO: next line shouldn't be required: questions wordings + answer + options
119 // are processed earlier; their content should be updated at this time.
120 statementsLibsRefresh();
123 inputId: function(i
,j
) {
124 return "q" + i
+ "_" + "input" + j
;