Commit | Line | Data |
---|---|---|
43828378 BA |
1 | /* |
2 | * questions group by index prefix 1.2.3 1.1 ...etc --> '1' | |
3 | ||
4 | NOTE: questions can contain parameterized exercises (how ? | |
5 | --> describe variables (syntax ?) | |
6 | --> write javascript script (OK, users trusted ? ==> safe mode possible if public website) | |
7 | Imaginary example: (using math.js) | |
8 | <params> (avant l'exo) | |
9 | x: math.random() | |
10 | y: math.random() | |
11 | M: math.matrix([[7, x], [y, -3]]); | |
12 | res: math.det(M) | |
13 | </params> | |
14 | <div>Calculer le déterminant de | |
15 | $$\begin{matrix}7 & x\\y & -3\end{matrix}$$</div> | |
16 | * ... | |
73609d3b | 17 | |
a3080c33 BA |
18 | + fixed + question time (syntax ?) |
19 | ||
73609d3b BA |
20 | --> input of type text (number, or vector, or matrix e.g. in R syntax) |
21 | --> parameter stored in question.param (TODO) | |
22 | ||
43828378 BA |
23 | */ |
24 | ||
435371c7 | 25 | Vue.component("statements", { |
73609d3b | 26 | // 'inputs': object with key = question index and value = text or boolean array |
a80c6a3b BA |
27 | // display: 'all', 'one', 'solution' |
28 | // iidx: current level-0 integer index (can match a group of questions / inputs) | |
29 | props: ['questions','inputs','display','iidx'], | |
30 | data: function() { | |
31 | return { | |
32 | displayStyle: "compact", //or "all": all on same page | |
33 | }; | |
34 | } | |
435371c7 BA |
35 | // Full questions tree is rendered, but some parts hidden depending on display settings |
36 | render(h) { | |
73609d3b BA |
37 | // Prepare questions groups, ordered |
38 | let questions = this.questions || [ ] | |
39 | let questionGroups = _.groupBy(questions, q => { | |
40 | const dotPos = q.index.indexOf("."); | |
41 | return dotPos === -1 ? q.index : q.index.substring(0,dotPos); | |
42 | }); | |
43 | let domTree = questionGroups.map( (qg,i) => { | |
44 | // Re-order questions 1.1.1 then 1.1.2 then... | |
45 | const orderedQg = qg.sort( (a,b) => { | |
46 | let aParts = a.split('.').map(Number); | |
47 | let bParts = b.split('.').map(Number); | |
48 | const La = aParts.length, Lb = bParts.length; | |
49 | for (let i=0; i<Math.min(La,Lb); i++) | |
50 | { | |
51 | if (aParts[i] != bParts[i]) | |
52 | return aParts[i] - bParts[i]; | |
53 | } | |
54 | return La - Lb; //the longer should appear after | |
55 | }); | |
56 | let qgDom = orderedQg.map( q => { | |
57 | let questionContent = [ ]; | |
58 | questionContent.push( | |
59 | h( | |
60 | "h4", | |
61 | { | |
62 | "class": { | |
63 | "questionIndex": true, | |
64 | } | |
435371c7 | 65 | }, |
73609d3b BA |
66 | q.index |
67 | ) | |
68 | ); | |
69 | questionContent.push( | |
70 | h( | |
71 | "div", | |
72 | { | |
73 | "class": { | |
74 | wording: true, | |
435371c7 | 75 | }, |
73609d3b BA |
76 | domProps: { |
77 | innerHTML: q.wording, | |
78 | }, | |
79 | } | |
80 | ) | |
81 | ); | |
82 | if (!!q.options) | |
83 | { | |
84 | // quiz-like question | |
85 | let optionsOrder = _.range(q.options.length); | |
86 | if (!q.fixed) | |
87 | optionsOrder = _.shuffle(optionsOrder); | |
88 | let optionList = [ ]; | |
89 | optionsOrder.forEach( idx => { | |
90 | let option = [ ]; | |
91 | option.push( | |
92 | h( | |
93 | "input", | |
94 | { | |
95 | domProps: { | |
a3080c33 BA |
96 | checked: !!this.inputs && this.inputs[q.index][idx], |
97 | disabled: monitoring || this.display == "solution", | |
73609d3b BA |
98 | }, |
99 | attrs: { | |
100 | id: this.inputId(q.index,idx), | |
101 | type: "checkbox", | |
102 | }, | |
103 | on: { | |
104 | change: e => { this.inputs[q.index][idx] = e.target.checked; }, | |
105 | }, | |
a80c6a3b | 106 | }, |
73609d3b BA |
107 | [ '' ] //to work in Firefox 45.9 ESR @ ENSTA... |
108 | ) | |
109 | ); | |
110 | option.push( | |
111 | h( | |
112 | "label", | |
113 | { | |
114 | domProps: { | |
115 | innerHTML: q.options[idx], | |
116 | }, | |
117 | attrs: { | |
118 | "for": this.inputId(q.index,idx), | |
119 | }, | |
120 | } | |
121 | ) | |
122 | ); | |
123 | optionList.push( | |
124 | h( | |
125 | "div", | |
126 | { | |
127 | "class": { | |
128 | option: true, | |
129 | choiceCorrect: this.display == "solution" && q.answer.includes(idx), | |
a3080c33 | 130 | choiceWrong: this.display == "solution" && !!this.inputs && this.inputs[q.index][idx] && !q.answer.includes(idx), |
73609d3b | 131 | }, |
a80c6a3b | 132 | }, |
73609d3b BA |
133 | option |
134 | ) | |
135 | ); | |
136 | }); | |
137 | questionContent.push( | |
a80c6a3b BA |
138 | h( |
139 | "div", | |
140 | { | |
141 | "class": { | |
73609d3b | 142 | optionList: true, |
a80c6a3b | 143 | }, |
435371c7 | 144 | }, |
73609d3b | 145 | optionList |
a80c6a3b BA |
146 | ) |
147 | ); | |
73609d3b BA |
148 | } |
149 | const depth = (q.index.match(/\./g) || []).length; | |
150 | return h( | |
151 | "div", | |
152 | { | |
153 | "class": { | |
154 | "question": true, | |
155 | "depth" + depth: true, | |
435371c7 | 156 | }, |
73609d3b BA |
157 | }, |
158 | questionContent | |
435371c7 | 159 | ); |
73609d3b | 160 | }); |
435371c7 BA |
161 | return h( |
162 | "div", | |
163 | { | |
164 | "class": { | |
73609d3b | 165 | "questionGroup": true, |
a80c6a3b | 166 | "hide": this.display == "one" && this.iidx != i, |
435371c7 | 167 | }, |
73609d3b BA |
168 | } |
169 | qgDom | |
435371c7 BA |
170 | ); |
171 | }); | |
a80c6a3b BA |
172 | const navigator = h( |
173 | "div", | |
174 | { | |
175 | "class": { | |
176 | "hide": this.displayStyle == "all" | |
177 | }, | |
178 | }, | |
179 | [ | |
180 | h( | |
181 | "button", | |
182 | { | |
183 | "class": { | |
184 | "btn": true, | |
185 | }, | |
186 | on: { | |
187 | click: () => { | |
188 | this.index = Math.max(0, this.index - 1); | |
189 | }, | |
190 | }, | |
191 | }, | |
192 | [ h("span", { "class": { "material-icon": true } }, "fast_rewind") ] | |
73609d3b | 193 | ), |
a80c6a3b BA |
194 | h("span",{ },(this.iidx+1).toString()), |
195 | h( | |
196 | "button", | |
197 | { | |
198 | "class": { | |
199 | "btn": true, | |
200 | }, | |
201 | on: { | |
202 | click: () => { | |
203 | this.index = Math.min(this.index+1, this.questions.length-1) | |
204 | }, | |
205 | }, | |
206 | }, | |
207 | [ h("span", { "class": { "material-icon": true } }, "fast_forward") ] | |
208 | ) | |
209 | ] | |
210 | ); | |
211 | domTree.push(navigator); | |
212 | domTree.push( | |
213 | h( | |
214 | "button", | |
215 | { | |
216 | on: { | |
217 | click: () => { | |
218 | this.displayStyle = displayStyle == "compact" ? "all" : "compact"; | |
219 | }, | |
220 | }, | |
221 | }, | |
222 | this.displayStyle == "compact" ? "Show all" : "Navigator" | |
223 | ) | |
224 | ); | |
435371c7 BA |
225 | return h( |
226 | "div", | |
227 | { | |
228 | attrs: { | |
229 | id: "statements", | |
230 | }, | |
231 | }, | |
71d1ca9c | 232 | domTree |
435371c7 BA |
233 | ); |
234 | }, | |
3b8117c5 BA |
235 | mounted: function() { |
236 | statementsLibsRefresh(); | |
237 | }, | |
435371c7 | 238 | updated: function() { |
435371c7 BA |
239 | statementsLibsRefresh(); |
240 | }, | |
241 | methods: { | |
242 | inputId: function(i,j) { | |
243 | return "q" + i + "_" + "input" + j; | |
244 | }, | |
245 | }, | |
246 | }); |