Skip to content

Commit d23d288

Browse files
christianpchristianp
committed
worksheet theme: render dropdowns as a box showing all options
fixes #1067
1 parent 5410839 commit d23d288

File tree

2 files changed

+147
-0
lines changed

2 files changed

+147
-0
lines changed

‎themes/worksheet/files/resources/worksheet.css

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -245,6 +245,23 @@ body.worksheet #examList > .exam:not([data-status="done"]) {
245245
display: none;
246246
}
247247

248+
body.worksheet .part .multiplechoice.dropdownlist {
249+
border: 1px solid var(--text-colour);
250+
padding: 0 0.5em;
251+
margin: 0.2em;
252+
}
253+
body.worksheet .part .multiplechoice .dropdownlist-option {
254+
font-style: italic;
255+
display: inline-block;
256+
}
257+
body.worksheet .part .student-answer .multiplechoice .dropdownlist-option ~ .dropdownlist-option::before {
258+
content: '/';
259+
margin: 0 1em;
260+
}
261+
body.worksheet .part .correct-answer .multiplechoice .dropdownlist-option:not(.checked) {
262+
display: none;
263+
}
264+
248265
@media print {
249266
body.worksheet #everything {
250267
overflow-y: hidden;

‎themes/worksheet/templates/xslt/parts/choices.xslt

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
{% raw %}
2+
<xsl:template match="choices" mode="one">
3+
<xsl:variable name="displaytype"><xsl:value-of select="@displaytype"/></xsl:variable>
4+
<span localise-data-jme-context-description="part.mcq.choices">
5+
<xsl:choose>
6+
<xsl:when test="@displaytype='radiogroup'">
7+
<fieldset data-bind="part_aria_validity: hasWarnings, part: $data, attr: {{id: part.full_path+'-input'}}">
8+
<legend data-bind="text: input_title" class="sr-only"></legend>
9+
<ul class="multiplechoice radiogroup" data-bind="reorder_list: {{order: part.shuffleAnswers}}, css: {{'show-cell-answer-state': showCellAnswerState, 'columns': displayColumns}}">
10+
<xsl:variable name="cols" select="@displaycolumns"/>
11+
<xsl:if test="$cols>0">
12+
<xsl:attribute name="style">grid-template-columns: repeat(<xsl:number value="$cols"/>,auto);</xsl:attribute>
13+
</xsl:if>
14+
<xsl:apply-templates select="choice" mode="radiogroup"/>
15+
</ul>
16+
</fieldset>
17+
</xsl:when>
18+
<xsl:when test="@displaytype='checkbox'">
19+
<fieldset data-bind="part_aria_validity: hasWarnings, part: $data, attr: {{id: part.full_path+'-input'}}">
20+
<legend data-bind="text: input_title" class="sr-only"></legend>
21+
<ul class="multiplechoice checkbox" data-bind="reorder_list: {{order: part.shuffleAnswers}}, css: {{'show-cell-answer-state': showCellAnswerState, 'columns': displayColumns}}">
22+
<xsl:variable name="cols" select="@displaycolumns"/>
23+
<xsl:if test="$cols>0">
24+
<xsl:attribute name="style">grid-template-columns: repeat(<xsl:number value="$cols"/>,auto);</xsl:attribute>
25+
</xsl:if>
26+
<xsl:apply-templates select="choice" mode="checkbox"/>
27+
</ul>
28+
</fieldset>
29+
</xsl:when>
30+
<xsl:when test="@displaytype='dropdownlist'">
31+
<span class="multiplechoice dropdownlist" data-bind="value: studentAnswer, reorder_list: {{order: part.shuffleAnswers, leaders: 0}}, css: {{'show-cell-answer-state': showCellAnswerState}}, attr: {{title: input_title, id: part.full_path+'-input'}}, part_aria_validity: hasWarnings, part: $data">
32+
<xsl:apply-templates select="choice" mode="dropdownlist"/>
33+
</span>
34+
</xsl:when>
35+
</xsl:choose>
36+
</span>
37+
</xsl:template>
38+
<xsl:template match="choices" mode="correctanswer">
39+
<xsl:variable name="displaytype"><xsl:value-of select="@displaytype"/></xsl:variable>
40+
<span>
41+
<xsl:choose>
42+
<xsl:when test="@displaytype='radiogroup'">
43+
<fieldset data-bind="attr: {{id: part.full_path+'-expected-input'}}">
44+
<legend><localise>part.correct answer</localise></legend>
45+
<ul class="multiplechoice radiogroup" data-bind="reorder_list: {{order: part.shuffleAnswers}}">
46+
<xsl:apply-templates select="choice" mode="radiogroup-correctanswer"/>
47+
</ul>
48+
</fieldset>
49+
</xsl:when>
50+
<xsl:when test="@displaytype='checkbox'">
51+
<fieldset data-bind="attr: {{id: part.full_path+'-expected-input'}}">
52+
<legend><localise>part.correct answer</localise></legend>
53+
<ul class="multiplechoice checkbox" data-bind="reorder_list: {{order: part.shuffleAnswers}}">
54+
<xsl:apply-templates select="choice" mode="checkbox-correctanswer"/>
55+
</ul>
56+
</fieldset>
57+
</xsl:when>
58+
<xsl:when test="@displaytype='dropdownlist'">
59+
<label>
60+
<localise>part.correct answer</localise>
61+
<span class="multiplechoice dropdownlist" data-bind="value: correctAnswer, reorder_list: {{order: part.shuffleAnswers, leaders: 0}}, attr: {{id: part.full_path+'-expected-input'}}" disabled="true">
62+
<xsl:apply-templates select="choice" mode="dropdownlist-correctanswer"/>
63+
</span>
64+
</label>
65+
</xsl:when>
66+
</xsl:choose>
67+
</span>
68+
</xsl:template>
69+
<xsl:template match="choice" mode="radiogroup">
70+
<xsl:variable name="path">
71+
<xsl:apply-templates select="../.." mode="path"/>
72+
</xsl:variable>
73+
<xsl:variable name="choicenum"><xsl:value-of select="count(preceding-sibling::choice)"/></xsl:variable>
74+
<li>
75+
<xsl:attribute name="data-bind">css: {checked: studentAnswer()==<xsl:value-of select="$choicenum"/>, correct: studentAnswer()==<xsl:value-of select="$choicenum"/> &amp;&amp; correctAnswer()==<xsl:value-of select="$choicenum"/>}</xsl:attribute>
76+
<label>
77+
<input type="radio" class="choice" data-bind="checked: studentAnswer, disable: disabled, attr: {{name: part.path+'-choice'}}" value="{$choicenum}"/>
78+
<xsl:apply-templates select="content"/>
79+
</label>
80+
</li>
81+
</xsl:template>
82+
<xsl:template match="choice" mode="radiogroup-correctanswer">
83+
<xsl:variable name="path">
84+
<xsl:apply-templates select="../.." mode="path"/>
85+
</xsl:variable>
86+
<xsl:variable name="choicenum"><xsl:value-of select="count(preceding-sibling::choice)"/></xsl:variable>
87+
<li>
88+
<label>
89+
<input type="radio" class="choice" data-bind="checked: correctAnswer()+'', attr: {{name: part.path+'-correctanswer'}}" disabled="true" value="{$choicenum}"/>
90+
<xsl:apply-templates select="content"/>
91+
</label>
92+
</li>
93+
</xsl:template>
94+
<xsl:template match="choice" mode="checkbox">
95+
<xsl:variable name="choicenum"><xsl:value-of select="count(preceding-sibling::choice)"/></xsl:variable>
96+
<li>
97+
<xsl:attribute name="data-bind">css: {checked: ticks[<xsl:value-of select="$choicenum"/>], correct: ticks[<xsl:value-of select="$choicenum"/>] &amp;&amp; correctTicks()[<xsl:value-of select="$choicenum"/>]}</xsl:attribute>
98+
<label>
99+
<input type="checkbox" class="choice" data-bind="checked: ticks[{$choicenum}], disable: disabled, attr: {{name: part.path+'-choice'}}" />
100+
<xsl:apply-templates select="content"/>
101+
</label>
102+
</li>
103+
</xsl:template>
104+
<xsl:template match="choice" mode="checkbox-correctanswer">
105+
<xsl:variable name="choicenum"><xsl:value-of select="count(preceding-sibling::choice)"/></xsl:variable>
106+
<li>
107+
<label>
108+
<input type="checkbox" class="choice" name="choice" data-bind="checked: correctTicks()[{$choicenum}], attr: {{name: part.path+'-correctanswer'}}" disabled="true" />
109+
<xsl:apply-templates select="content"/>
110+
</label>
111+
</li>
112+
</xsl:template>
113+
<xsl:template match="choice" mode="dropdownlist">
114+
<xsl:variable name="choicenum"><xsl:value-of select="count(preceding-sibling::choice)"/></xsl:variable>
115+
<span class="dropdownlist-option" value="{$choicenum}">
116+
<xsl:apply-templates select="content"/>
117+
</span>
118+
</xsl:template>
119+
<xsl:template match="choice" mode="dropdownlist-correctanswer">
120+
<xsl:variable name="choicenum"><xsl:value-of select="count(preceding-sibling::choice)"/></xsl:variable>
121+
<span class="dropdownlist-option" value="{$choicenum}">
122+
<xsl:attribute name="data-bind">css: {'checked': correctAnswer()==<xsl:value-of select="$choicenum"/>}</xsl:attribute>
123+
<xsl:apply-templates select="content"/>
124+
</span>
125+
</xsl:template>
126+
<xsl:template match="distractor">
127+
<span><xsl:apply-templates /></span>
128+
</xsl:template>
129+
{% endraw %}
130+

0 commit comments

Comments
 (0)