|
1 @charset "UTF-8"; |
|
2 |
|
3 /* $Id$ */ |
|
4 |
|
5 @import url(publidoc.css); |
|
6 |
|
7 |
|
8 publiquiz { |
|
9 display: block; |
|
10 font-family: sans-serif; |
|
11 padding: 0; |
|
12 } |
|
13 |
|
14 |
|
15 /* Component level ========================================================= */ |
|
16 |
|
17 quiz:before { |
|
18 display: block; |
|
19 color: #7f7f7f; |
|
20 background-color: #ddddcc; |
|
21 border: 1px solid #aeaea0; |
|
22 font-weight: bold; |
|
23 padding: .5em 5px .5em 5px; |
|
24 content: collapser() " " insert-before-button() insert-after-button() |
|
25 " " add-attribute-button() " Quiz"; |
|
26 } |
|
27 |
|
28 quiz[xml|id]:before { |
|
29 content: collapser() " " insert-before-button() insert-after-button() " Quiz" |
|
30 " – ID = " text-field(attribute, "xml:id", columns, 15, color, black); |
|
31 } |
|
32 |
|
33 quiz { |
|
34 display: block; |
|
35 border: 1px solid #aeaea0; |
|
36 margin-bottom: .5em; |
|
37 padding: 5px; |
|
38 collapsible: yes; |
|
39 } |
|
40 quiz:last-child { |
|
41 margin-bottom: 0; |
|
42 } |
|
43 |
|
44 quiz > head { |
|
45 background-color: #ffffee; |
|
46 padding: .3em .5em .3em .5em; |
|
47 border-radius: 0.5em; |
|
48 } |
|
49 |
|
50 |
|
51 /* Top level =============================================================== */ |
|
52 |
|
53 publiquiz > *:before { |
|
54 display: block; |
|
55 color: #bbbbbb; |
|
56 background: #993333 url('top.png') repeat-x top left; |
|
57 font-weight: bold; |
|
58 padding: 1.2em 5px 1em 5px; |
|
59 } |
|
60 publiquiz > document:before { |
|
61 content: add-attribute-button() " Document" |
|
62 " – ID = " text-field(attribute, "xml:id", columns, 15, color, white); |
|
63 } |
|
64 publiquiz > document[xml|id][xml|lang]:before { |
|
65 content: "Document" |
|
66 " – ID = " text-field(attribute, "xml:id", columns, 15, color, white) |
|
67 " – Langue principale = " combo-box(attribute, "xml:lang", font-size, 75%, |
|
68 values, "en\A fr\A fr-FR\A es", color, white); |
|
69 } |
|
70 publiquiz > quiz[xml|id]:before { |
|
71 content: add-attribute-button() " Quiz" |
|
72 " – ID = " text-field(attribute, "xml:id", columns, 15, color, white); |
|
73 } |
|
74 publiquiz > quiz[xml|id][xml|lang]:before { |
|
75 content: "Quiz" |
|
76 " – ID = " text-field(attribute, "xml:id", columns, 15, color, white) |
|
77 " – Langue principale = " combo-box(attribute, "xml:lang", font-size, 75%, |
|
78 values, "en\A fr\A fr-FR\A es", color, white); |
|
79 } |
|
80 |
|
81 publiquiz > * { |
|
82 display: block; |
|
83 margin: 5px; |
|
84 padding: 0; |
|
85 border: 0; |
|
86 } |
|
87 |
|
88 publiquiz > * > head { |
|
89 background-color: #ffffee; |
|
90 padding: .3em .5em .3em .5em; |
|
91 border-radius: 0.5em; |
|
92 } |
|
93 |
|
94 publiquiz > * > head > title { |
|
95 font-size: 140%; |
|
96 } |
|
97 |
|
98 |
|
99 /* Section level =========================================================== */ |
|
100 |
|
101 quiz > *:before, quiz > composite > *:before { |
|
102 display: block; |
|
103 color: #7f7f7f; |
|
104 text-align: left; |
|
105 font-style: normal; |
|
106 font-size: 75%; |
|
107 padding-bottom: 3px; |
|
108 } |
|
109 |
|
110 quiz > *, quiz > composite > * { |
|
111 display: block; |
|
112 } |
|
113 |
|
114 quiz > *:after, quiz > composite > *:after { |
|
115 color: #7f7f7f; |
|
116 content: insert-after-button(); |
|
117 } |
|
118 |
|
119 quiz > head:after { |
|
120 display: none; |
|
121 } |
|
122 |
|
123 /* instructions ~~~~~~~~~~~~~~~~~~~~~ */ |
|
124 |
|
125 instructions:before { |
|
126 background-color: #e8f0f7; |
|
127 content: insert-before-button() " Consigne"; |
|
128 } |
|
129 |
|
130 instructions { |
|
131 display: block; |
|
132 background-color: #e8f0f7; |
|
133 } |
|
134 |
|
135 instructions section:before, instructions section, instructions section:after { |
|
136 margin-left: 1em; |
|
137 } |
|
138 |
|
139 /* choices ~~~~~~~~~~~~~~~~~~~~~~~~~~ */ |
|
140 |
|
141 choices-radio:before { |
|
142 content: insert-before-button() |
|
143 command-button(command, "putAttribute", parameter, "shuffle true", icon, icon(plus-box)) |
|
144 " QCM – radio"; |
|
145 } |
|
146 choices-radio[shuffle]:before { |
|
147 content: insert-before-button() |
|
148 " QCM – radio" |
|
149 " – shuffle = " label(attribute, shuffle, color, black) |
|
150 set-attribute-button(attribute, shuffle, unset-attribute, yes); |
|
151 } |
|
152 |
|
153 choices-check:before { |
|
154 content: insert-before-button() |
|
155 command-button(command, "putAttribute", parameter, "shuffle true", icon, icon(plus-box)) |
|
156 " QCM – check"; |
|
157 } |
|
158 choices-check[shuffle]:before { |
|
159 content: insert-before-button() |
|
160 " QCM – check" |
|
161 " – shuffle = " label(attribute, shuffle, color, black) |
|
162 set-attribute-button(attribute, shuffle, unset-attribute, yes); |
|
163 } |
|
164 |
|
165 /* blanks ~~~~~~~~~~~~~~~~~~~~~~~~~~ */ |
|
166 |
|
167 blanks-fill:before { |
|
168 content: insert-before-button() |
|
169 command-button(command, "putAttribute", parameter, "strict true", icon, icon(plus-box)) |
|
170 " Exercice à trous – saisie libre"; |
|
171 } |
|
172 blanks-fill[strict]:before { |
|
173 content: insert-before-button() |
|
174 " Exercice à trous – saisie libre" |
|
175 " – strict = " label(attribute, strict, color, black) |
|
176 set-attribute-button(attribute, strict, unset-attribute, yes); |
|
177 } |
|
178 |
|
179 blanks-select:before { |
|
180 content: insert-before-button() |
|
181 command-button(command, "putAttribute", parameter, "multiple true", icon, icon(plus-box)) |
|
182 " Exercice à trous – liste fermée"; |
|
183 } |
|
184 blanks-select[multiple]:before { |
|
185 content: insert-before-button() |
|
186 " Exercice à trous – liste fermée" |
|
187 " – multiple = " label(attribute, multiple, color, black) |
|
188 set-attribute-button(attribute, multiple, unset-attribute, yes); |
|
189 } |
|
190 |
|
191 /* point ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ |
|
192 |
|
193 point:before { |
|
194 content: insert-before-button() " " |
|
195 command-button(command, "putAttribute", parameter, "type radio", icon, icon(plus-box)) |
|
196 " Pointage"; |
|
197 } |
|
198 point[type]:before { |
|
199 content: insert-before-button() |
|
200 " Pointage – type = " label(attribute, type, color, black) |
|
201 set-attribute-button(attribute, type, unset-attribute, yes); |
|
202 } |
|
203 |
|
204 /* matching ~~~~~~~~~~~~~~~~~~~~~~~~ */ |
|
205 |
|
206 matching:before { |
|
207 content: insert-before-button() " Appariement"; |
|
208 } |
|
209 |
|
210 /* sort ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ |
|
211 |
|
212 sort:before { |
|
213 content: insert-before-button() |
|
214 command-button(command, "putAttribute", parameter, "shuffle true", icon, icon(plus-box)) |
|
215 " Tri"; |
|
216 } |
|
217 sort[shuffle]:before { |
|
218 content: insert-before-button() |
|
219 " Tri – shuffle = " label(attribute, shuffle, color, black) |
|
220 set-attribute-button(attribute, shuffle, unset-attribute, yes); |
|
221 } |
|
222 |
|
223 /* production ~~~~~~~~~~~~~~~~~~~~~~ */ |
|
224 |
|
225 production:before { |
|
226 content: insert-before-button() " Production"; |
|
227 } |
|
228 |
|
229 /* composite ~~~~~~~~~~~~~~~~~~~~~~~ */ |
|
230 |
|
231 composite:before { |
|
232 content: insert-before-button() " Composite"; |
|
233 } |
|
234 |
|
235 subquiz { |
|
236 display: block; |
|
237 border-style: none; |
|
238 margin: 0 0 .6em 1em; |
|
239 padding: 0; |
|
240 } |
|
241 |
|
242 subquiz > *, subquiz > *:before { |
|
243 display: block; |
|
244 } |
|
245 |
|
246 subquiz > head { |
|
247 background-color: #ffffee; |
|
248 padding: .3em .5em .3em .5em; |
|
249 border-radius: 0.5em; |
|
250 } |
|
251 |
|
252 subquiz > instructions:before { |
|
253 content: "Consigne"; |
|
254 } |
|
255 |
|
256 /* help ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ |
|
257 |
|
258 help:before { |
|
259 margin-top: .5em; |
|
260 background-color: #ffffdd; |
|
261 content: insert-before-button() insert-button() " Aide 2"; |
|
262 } |
|
263 |
|
264 help, help > *:before, help > * { |
|
265 background-color: #ffffdd; |
|
266 } |
|
267 |
|
268 /* answer ~~~~~~~~~~~~~~~~~~~~~~~~~~ */ |
|
269 |
|
270 answer:before { |
|
271 margin-top: .5em; |
|
272 background-color: #eaffe9; |
|
273 content: insert-before-button() insert-button() " Réponse"; |
|
274 } |
|
275 |
|
276 answer, answer > *:before, answer > * { |
|
277 background-color: #eaffe9; |
|
278 } |
|
279 |
|
280 answer:after { |
|
281 display: none; |
|
282 } |
|
283 |
|
284 |
|
285 /* Block level ============================================================= */ |
|
286 |
|
287 /* choices.right, choices.wrong ~~~~ */ |
|
288 |
|
289 choices-radio right:before, choices-radio wrong:before, |
|
290 choices-check right:before, choices-check wrong:before { |
|
291 display: marker; |
|
292 content: insert-before-button(color, #7f7f7f, icon, icon(left-half-disc)) |
|
293 insert-after-button(color, #7f7f7f, icon, icon(right-half-disc)); |
|
294 } |
|
295 |
|
296 choices-radio right, choices-radio wrong, |
|
297 choices-check right, choices-check wrong { |
|
298 display: block; |
|
299 margin-left: 24px; |
|
300 font-size: 115%; |
|
301 font-family: serif; |
|
302 } |
|
303 |
|
304 choices-radio > right:before { |
|
305 color: #7f7f7f; |
|
306 content: insert-before-button(icon, icon(left-half-disc)) |
|
307 insert-after-button(icon, icon(right-half-disc)) |
|
308 " " icon(radio-on) " "; |
|
309 |
|
310 } |
|
311 choices-radio > wrong:before { |
|
312 color: #7f7f7f; |
|
313 content: insert-before-button( icon, icon(left-half-disc)) |
|
314 insert-after-button(icon, icon(right-half-disc)) |
|
315 " " icon(radio-off) " "; |
|
316 |
|
317 } |
|
318 choices-check > right:before { |
|
319 color: #7f7f7f; |
|
320 content: insert-before-button(icon, icon(left-half-disc)) |
|
321 insert-after-button(icon, icon(right-half-disc)) |
|
322 command-button(command, "convert", parameter, "wrong", icon, icon(convert)) |
|
323 " " icon(check-on) " "; |
|
324 } |
|
325 choices-check > wrong:before { |
|
326 color: #7f7f7f; |
|
327 content: insert-before-button(icon, icon(left-half-disc)) |
|
328 insert-after-button(icon, icon(right-half-disc)) |
|
329 command-button(command, "convert", parameter, "right", icon, icon(convert)) |
|
330 " " icon(check-off) " "; |
|
331 } |
|
332 |
|
333 choices-radio > right, choices-radio > wrong { |
|
334 margin-left: 52px; |
|
335 } |
|
336 choices-check > right, choices-check > wrong { |
|
337 margin-left: 56px; |
|
338 } |
|
339 |
|
340 /* blanks.wrongs ~~~~~~~~~~~~~~~~~~~ */ |
|
341 |
|
342 blanks-select > wrongs:before { |
|
343 color: #7f7f7f; |
|
344 content: "Intrus : "; |
|
345 } |
|
346 |
|
347 blanks-select > wrongs { |
|
348 display: block; |
|
349 margin: .5em 0 .5em 0; |
|
350 } |
|
351 |
|
352 wrongs > wrong { |
|
353 display: inline; |
|
354 background-color: #c7e0f8; |
|
355 } |
|
356 |
|
357 wrongs > wrong:after { |
|
358 color: #7f7f7f; |
|
359 content: " – "; |
|
360 background-color: transparent; |
|
361 } |
|
362 wrongs > wrong:after:last-child { |
|
363 content: insert-same-after-button(color, #7f7f7f, icon, icon(right-half-disc)); |
|
364 } |
|
365 |
|
366 /* match ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ |
|
367 |
|
368 match:before { |
|
369 display: marker; |
|
370 color: #7f7f7f; |
|
371 content: insert-same-before-button(icon, icon(left-half-disc)) |
|
372 insert-same-after-button(icon, icon(right-half-disc)); |
|
373 } |
|
374 |
|
375 match { |
|
376 display: block; |
|
377 margin-left: 24px; |
|
378 } |
|
379 |
|
380 match > section:before, match > p:before { |
|
381 display: none; |
|
382 } |
|
383 |
|
384 match section, match p { |
|
385 display: inline; |
|
386 } |
|
387 |
|
388 match > section:first-child:after, match > p:first-child:after { |
|
389 color: #7f7f7f; |
|
390 content: " —> "; |
|
391 } |
|
392 match > section:last-child:after, match > p:last-child:after { |
|
393 display: none; |
|
394 } |
|
395 |
|
396 /* sort > comparison ~~~~~~~~~~~~~~~ */ |
|
397 |
|
398 comparison:before { |
|
399 color: #7f7f7f; |
|
400 content: "Logique de comparaison : " |
|
401 } |
|
402 |
|
403 comparison { |
|
404 display: block; |
|
405 margin: .2em 0 .5em 0; |
|
406 } |
|
407 |
|
408 /* sort > item ~~~~~~~~~~~~~~~~~~~~~ */ |
|
409 |
|
410 sort > item:before { |
|
411 color: #7f7f7f; |
|
412 content: insert-before-button(icon, icon(left-half-disc)) |
|
413 text-field(attribute, "shuffle", columns, 1, font-size, 75%, color, black) |
|
414 " "; |
|
415 } |
|
416 |
|
417 sort > item { |
|
418 display: inline; |
|
419 } |
|
420 |
|
421 sort > item:after { |
|
422 color: #7f7f7f; |
|
423 content: insert-same-after-button(icon, icon(right-half-disc)) |
|
424 " " xpath("../comparison") " "; |
|
425 } |
|
426 sort > item:last-child:after { |
|
427 content: insert-same-after-button(icon, icon(right-half-disc)) "\A"; |
|
428 } |
|
429 |
|
430 |
|
431 /* Inline level ============================================================ */ |
|
432 |
|
433 /* blank ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ |
|
434 |
|
435 blank { |
|
436 background-color: #c0ffc0; |
|
437 } |
|
438 |
|
439 s:after { |
|
440 color: #7f7f7f; |
|
441 background-color: transparent; |
|
442 content: insert-same-after-button(icon, icon(right-half-disc)); |
|
443 } |
|
444 |
|
445 /* point.right & point.wrong ~~~~~~~ */ |
|
446 |
|
447 point right:before, point wrong:before { |
|
448 background: transparent; |
|
449 color: #7f7f7f; |
|
450 } |
|
451 point right:before { |
|
452 content: command-button(command, "convert", parameter, "wrong", icon, icon(convert)); |
|
453 } |
|
454 point wrong:before { |
|
455 content: command-button(command, "convert", parameter, "right", icon, icon(convert)); |
|
456 } |
|
457 |
|
458 point right { |
|
459 background-color: #c0ffc0; |
|
460 } |
|
461 |
|
462 point wrong { |
|
463 background-color: #c7e0f8; |
|
464 } |