Prepare monitoring using Statements component (early draft stage)
[qomet.git] / public / javascripts / components / statements.js
... / ...
CommitLineData
1Vue.component("statements", {
2 props: ['questions','inputs','showAnswers','index'], // index=-1 : show all, otherwise show current question
3 // TODO: general render function for nested exercises
4 // There should be a questions navigator below, or next (visible if display=='all')
5 // Full questions tree is rendered, but some parts hidden depending on display settings
6 render(h) {
7 let domTree = this.questions.map( (q,i) => {
8 let questionContent = [ ];
9 questionContent.push(
10 h(
11 "div",
12 {
13 "class": {
14 wording: true,
15 },
16 domProps: {
17 innerHTML: q.wording,
18 },
19 }
20 )
21 );
22 let optionsOrder = _.range(q.options.length);
23 if (!q.fixed)
24 optionsOrder = _.shuffle(optionsOrder);
25 let optionList = [ ];
26 optionsOrder.forEach( idx => {
27 let option = [ ];
28 option.push(
29 h(
30 "input",
31 {
32 domProps: {
33 checked: this.inputs.length > 0 && this.inputs[i][idx],
34 disabled: monitoring,
35 },
36 attrs: {
37 id: this.inputId(i,idx),
38 type: "checkbox",
39 },
40 on: {
41 change: e => { this.inputs[i][idx] = e.target.checked; },
42 },
43 },
44 )
45 );
46 option.push(
47 h(
48 "label",
49 {
50 domProps: {
51 innerHTML: q.options[idx],
52 },
53 attrs: {
54 "for": this.inputId(i,idx),
55 },
56 }
57 )
58 );
59 optionList.push(
60 h(
61 "div",
62 {
63 "class": {
64 option: true,
65 choiceCorrect: showAnswers && this.questions[i].answer.includes(idx),
66 choiceWrong: showAnswers && this.inputs[i][idx] && !questions[i].answer.includes(idx),
67 },
68 },
69 option
70 )
71 );
72 });
73 questionContent.push(
74 h(
75 "div",
76 {
77 "class": {
78 optionList: true,
79 },
80 },
81 optionList
82 )
83 );
84 return h(
85 "div",
86 {
87 "class": {
88 "question": true,
89 "hide": index >= 0 && index != i,
90 },
91 },
92 questionContent
93 );
94 });
95 return h(
96 "div",
97 {
98 attrs: {
99 id: "statements",
100 },
101 },
102 questions
103 );
104 },
105 updated: function() {
106 // TODO: next line shouldn't be required: questions wordings + answer + options
107 // are processed earlier; their content should be updated at this time.
108 statementsLibsRefresh();
109 },
110 methods: {
111 inputId: function(i,j) {
112 return "q" + i + "_" + "input" + j;
113 },
114 },
115});