Skip to content

Commit

Permalink
worksheet theme: render dropdowns as a box showing all options
Browse files Browse the repository at this point in the history 
fixes #1067
  • Loading branch information
@christianp
christianp committed Nov 30, 2023
1 parent 5410839 commit d23d288
Show file tree
Hide file tree
Showing 2 changed files with 147 additions and 0 deletions.
17 changes: 17 additions & 0 deletions themes/worksheet/files/resources/worksheet.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -245,6 +245,23 @@ body.worksheet #examList > .exam:not([data-status="done"]) {
display: none;
}

body.worksheet .part .multiplechoice.dropdownlist {
border: 1px solid var(--text-colour);
padding: 0 0.5em;
margin: 0.2em;
}
body.worksheet .part .multiplechoice .dropdownlist-option {
font-style: italic;
display: inline-block;
}
body.worksheet .part .student-answer .multiplechoice .dropdownlist-option ~ .dropdownlist-option::before {
content: '/';
margin: 0 1em;
}
body.worksheet .part .correct-answer .multiplechoice .dropdownlist-option:not(.checked) {
display: none;
}

@media print {
body.worksheet #everything {
overflow-y: hidden;
Expand Down
130 changes: 130 additions & 0 deletions themes/worksheet/templates/xslt/parts/choices.xslt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,130 @@
{% raw %}
<xsl:template match="choices" mode="one">
<xsl:variable name="displaytype"><xsl:value-of select="@displaytype"/></xsl:variable>
<span localise-data-jme-context-description="part.mcq.choices">
<xsl:choose>
<xsl:when test="@displaytype='radiogroup'">
<fieldset data-bind="part_aria_validity: hasWarnings, part: $data, attr: {{id: part.full_path+'-input'}}">
<legend data-bind="text: input_title" class="sr-only"></legend>
<ul class="multiplechoice radiogroup" data-bind="reorder_list: {{order: part.shuffleAnswers}}, css: {{'show-cell-answer-state': showCellAnswerState, 'columns': displayColumns}}">
<xsl:variable name="cols" select="@displaycolumns"/>
<xsl:if test="$cols>0">
<xsl:attribute name="style">grid-template-columns: repeat(<xsl:number value="$cols"/>,auto);</xsl:attribute>
</xsl:if>
<xsl:apply-templates select="choice" mode="radiogroup"/>
</ul>
</fieldset>
</xsl:when>
<xsl:when test="@displaytype='checkbox'">
<fieldset data-bind="part_aria_validity: hasWarnings, part: $data, attr: {{id: part.full_path+'-input'}}">
<legend data-bind="text: input_title" class="sr-only"></legend>
<ul class="multiplechoice checkbox" data-bind="reorder_list: {{order: part.shuffleAnswers}}, css: {{'show-cell-answer-state': showCellAnswerState, 'columns': displayColumns}}">
<xsl:variable name="cols" select="@displaycolumns"/>
<xsl:if test="$cols>0">
<xsl:attribute name="style">grid-template-columns: repeat(<xsl:number value="$cols"/>,auto);</xsl:attribute>
</xsl:if>
<xsl:apply-templates select="choice" mode="checkbox"/>
</ul>
</fieldset>
</xsl:when>
<xsl:when test="@displaytype='dropdownlist'">
<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">
<xsl:apply-templates select="choice" mode="dropdownlist"/>
</span>
</xsl:when>
</xsl:choose>
</span>
</xsl:template>
<xsl:template match="choices" mode="correctanswer">
<xsl:variable name="displaytype"><xsl:value-of select="@displaytype"/></xsl:variable>
<span>
<xsl:choose>
<xsl:when test="@displaytype='radiogroup'">
<fieldset data-bind="attr: {{id: part.full_path+'-expected-input'}}">
<legend><localise>part.correct answer</localise></legend>
<ul class="multiplechoice radiogroup" data-bind="reorder_list: {{order: part.shuffleAnswers}}">
<xsl:apply-templates select="choice" mode="radiogroup-correctanswer"/>
</ul>
</fieldset>
</xsl:when>
<xsl:when test="@displaytype='checkbox'">
<fieldset data-bind="attr: {{id: part.full_path+'-expected-input'}}">
<legend><localise>part.correct answer</localise></legend>
<ul class="multiplechoice checkbox" data-bind="reorder_list: {{order: part.shuffleAnswers}}">
<xsl:apply-templates select="choice" mode="checkbox-correctanswer"/>
</ul>
</fieldset>
</xsl:when>
<xsl:when test="@displaytype='dropdownlist'">
<label>
<localise>part.correct answer</localise>
<span class="multiplechoice dropdownlist" data-bind="value: correctAnswer, reorder_list: {{order: part.shuffleAnswers, leaders: 0}}, attr: {{id: part.full_path+'-expected-input'}}" disabled="true">
<xsl:apply-templates select="choice" mode="dropdownlist-correctanswer"/>
</span>
</label>
</xsl:when>
</xsl:choose>
</span>
</xsl:template>
<xsl:template match="choice" mode="radiogroup">
<xsl:variable name="path">
<xsl:apply-templates select="../.." mode="path"/>
</xsl:variable>
<xsl:variable name="choicenum"><xsl:value-of select="count(preceding-sibling::choice)"/></xsl:variable>
<li>
<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>
<label>
<input type="radio" class="choice" data-bind="checked: studentAnswer, disable: disabled, attr: {{name: part.path+'-choice'}}" value="{$choicenum}"/>
<xsl:apply-templates select="content"/>
</label>
</li>
</xsl:template>
<xsl:template match="choice" mode="radiogroup-correctanswer">
<xsl:variable name="path">
<xsl:apply-templates select="../.." mode="path"/>
</xsl:variable>
<xsl:variable name="choicenum"><xsl:value-of select="count(preceding-sibling::choice)"/></xsl:variable>
<li>
<label>
<input type="radio" class="choice" data-bind="checked: correctAnswer()+'', attr: {{name: part.path+'-correctanswer'}}" disabled="true" value="{$choicenum}"/>
<xsl:apply-templates select="content"/>
</label>
</li>
</xsl:template>
<xsl:template match="choice" mode="checkbox">
<xsl:variable name="choicenum"><xsl:value-of select="count(preceding-sibling::choice)"/></xsl:variable>
<li>
<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>
<label>
<input type="checkbox" class="choice" data-bind="checked: ticks[{$choicenum}], disable: disabled, attr: {{name: part.path+'-choice'}}" />
<xsl:apply-templates select="content"/>
</label>
</li>
</xsl:template>
<xsl:template match="choice" mode="checkbox-correctanswer">
<xsl:variable name="choicenum"><xsl:value-of select="count(preceding-sibling::choice)"/></xsl:variable>
<li>
<label>
<input type="checkbox" class="choice" name="choice" data-bind="checked: correctTicks()[{$choicenum}], attr: {{name: part.path+'-correctanswer'}}" disabled="true" />
<xsl:apply-templates select="content"/>
</label>
</li>
</xsl:template>
<xsl:template match="choice" mode="dropdownlist">
<xsl:variable name="choicenum"><xsl:value-of select="count(preceding-sibling::choice)"/></xsl:variable>
<span class="dropdownlist-option" value="{$choicenum}">
<xsl:apply-templates select="content"/>
</span>
</xsl:template>
<xsl:template match="choice" mode="dropdownlist-correctanswer">
<xsl:variable name="choicenum"><xsl:value-of select="count(preceding-sibling::choice)"/></xsl:variable>
<span class="dropdownlist-option" value="{$choicenum}">
<xsl:attribute name="data-bind">css: {'checked': correctAnswer()==<xsl:value-of select="$choicenum"/>}</xsl:attribute>
<xsl:apply-templates select="content"/>
</span>
</xsl:template>
<xsl:template match="distractor">
<span><xsl:apply-templates /></span>
</xsl:template>
{% endraw %}

0 comments on commit d23d288

Please sign in to comment.