Vue.component("statements", {
// 'answers' is an object containing
// 'inputs'(array),
- // 'displayAll'(bool),
+ // 'displayAll'(bool), //TODO: should be in questions!
// 'showSolution'(bool),
// 'indices': order of appearance
// 'index': current integer index (focused question)
// 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 domTree = (this.questions || [ ]).map( (q,i) => {
let questionContent = [ ];
questionContent.push(
h(
"class": {
option: true,
choiceCorrect: this.answers.showSolution && this.questions[i].answer.includes(idx),
- choiceWrong: this.answers.showSolution && this.inputs[i][idx] && !q.answer.includes(idx),
+ choiceWrong: this.answers.showSolution && this.answers.inputs[i][idx] && !q.answer.includes(idx),
},
},
option
optionList
)
);
+ if (this.answers.displayAll && i < this.questions.length-1)
+ questionContent.push( h("hr") );
return h(
"div",
{
"class": {
"question": true,
- "hide": !this.answers.displayAll && this.answers.index != i,
+ "hide": !this.answers.displayAll && this.answers.indices[this.answers.index] != i,
},
},
questionContent
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.