stripe rows and dash columns in m_n_x grids

In a "match choice with answers" part, every other row now has a faint
background, and each column has a dashed border down the side, to help
with readability.

The `accent-color` is set on the inputs in each cell corresponding to
the feedback state, and the whole cell gets an underline, like the 1_n_2
and m_n_2 inputs do.

The "incorrect" feedback state produces a dashed underline, to
differentiate it from the "correct" state through a means other than
colour.

themes/default/files/resources/bootstrap/css/bootstrap.css

@@ -23,7 +23,7 @@ html {
   -webkit-text-size-adjust: 100%;
 }
 body {
-  margin: 0;
+    margin: 0;
 }
 article,
 aside,
@@ -1098,6 +1098,7 @@ body {
   color: var(--text-colour);
   background-color: #ffffff;
   background-color: var(--background-colour);
+  --faint-background-colour: rgba(var(--opposite-background-colour), 0.1);
 }
 input,
 button,

themes/default/files/resources/exam.css

@@ -384,7 +384,7 @@ input.jme {
 }
 
 .jme-preview {
-	background-color: #eee;
+	background-color: var(--faint-background-colour);
 	padding: 0.2em;
 	display: inline-block;
 	margin-left: 0.5em;
@@ -549,41 +549,23 @@ input.jme {
     box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     color: black;
 }
-.part:not(.dirty) > .student-answer.answered[feedback-state='correct'] input {
-    border-color: hsl(120, 50%, 50%);
-    background: hsl(120, 50%, 95%);
-    color: black;
-}
-.part:not(.dirty) > .student-answer.answered[feedback-state='wrong'] input {
-    border-color: hsl(0, 50%, 50%);
-    background: hsl(0, 50%, 95%);
-    color: black;
-}
-.part:not(.dirty) > .student-answer.answered[feedback-state='partial'] input {
-    background: white;
-    background: var(--background-colour);
-    color: black;
-}
 
-.part:not(.dirty) > .student-answer.answered .multiplechoice.show-cell-answer-state .checked label {
-    border-bottom: 1px solid hsl(204,72%,50%);
+.part > .student-answer .show-cell-answer-state label {
+    --feedback-colour: transparent;
+    border-bottom: 1px solid var(--feedback-colour);
 }
-.part:not(.dirty) > .student-answer.answered:not([feedback-state='none']) .multiplechoice.show-cell-answer-state .checked.correct label {
-    border-bottom-color: hsl(120,50%,50%);
+.part:not(.dirty) > .student-answer.answered .show-cell-answer-state .checked label {
+    --feedback-colour: hsl(204,72%,50%);
+    accent-color: var(--feedback-colour);
 }
-.part:not(.dirty) > .student-answer.answered:not([feedback-state='none']) .multiplechoice.show-cell-answer-state .checked:not(.correct) label {
-    border-bottom-color: hsl(0,50%,50%);
+.part:not(.dirty) > .student-answer.answered:not([feedback-state='none']) .show-cell-answer-state .checked.correct label {
+    --feedback-colour: hsl(120,50%,50%);
 }
-
-#everything .part:not(.dirty) > .student-answer.answered .choices-grid.show-cell-answer-state td.checked {
-    background: hsl(204,72%,95%);
-}
-#everything .part:not(.dirty) > .student-answer.answered:not([feedback-state='none']) .choices-grid.show-cell-answer-state td.checked.correct {
-    background: hsl(120,50%,95%);
-}
-#everything .part:not(.dirty) > .student-answer.answered:not([feedback-state='none']) .choices-grid.show-cell-answer-state td.checked:not(.correct) {
-    background: hsl(0,50%,95%);
+.part:not(.dirty) > .student-answer.answered:not([feedback-state='none']) .show-cell-answer-state .checked:not(.correct) label {
+    --feedback-colour: hsl(0,50%,50%);
+    border-bottom-style: dashed;
 }
+
 .exam-name {
 	font-weight: bold;
     max-height: 5em;
@@ -1041,6 +1023,16 @@ select.multiplechoice {
 	background: none;
 }
 
+#everything .part.type-m_n_x .choices-grid tbody tr:nth-child(2n+1) th,
+#everything .part.type-m_n_x .choices-grid tbody tr:nth-child(2n+1) td {
+    background: var(--faint-background-colour);
+}
+
+#everything .part.type-m_n_x .choices-grid thead th:not(:first-child),
+#everything .part.type-m_n_x .choices-grid tbody td:not(:first-child) {
+    border-left: thin dashed rgba(var(--opposite-background-colour), 0.3);
+}
+
 .part.type-m_n_x table.choices-grid td.option {
 	text-align: center;
 }

themes/default/templates/xslt/parts/m_n_x.xslt

@@ -65,14 +65,13 @@
         <xsl:for-each select="$answers/answer">
             <xsl:variable name="answernum" select="count(preceding-sibling::answer)"/>
             <td class="option">
+                <xsl:attribute name="data-bind">css: tickFeedback()[<xsl:value-of select="$answernum"/>][<xsl:value-of select="$choicenum"/>]</xsl:attribute>
                 <label>
                 <xsl:choose>
                     <xsl:when test="$displaytype='checkbox'">
-                        <xsl:attribute name="data-bind">css: tickFeedback()[<xsl:value-of select="$answernum"/>][<xsl:value-of select="$choicenum"/>]</xsl:attribute>
                         <input type="checkbox" class="choice" data-bind="checked: ticks[{$answernum}][{$choicenum}], disable: disabled, visible: layout[{$answernum}][{$choicenum}], attr: {{name: part.full_path+'-choice-{$choicenum}', 'aria-labelledby': part.full_path+'-choice-{$choicenum} '+part.full_path+'-answer-{$answernum}'}}" />
                     </xsl:when>
                     <xsl:when test="$displaytype='radiogroup'">
-                        <xsl:attribute name="data-bind">css: tickFeedback()[<xsl:value-of select="$answernum"/>][<xsl:value-of select="$choicenum"/>]</xsl:attribute>
                         <input type="radio" class="choice" data-bind="checked: ticks[{$choicenum}], disable: disabled, visible: layout[{$answernum}][{$choicenum}], attr: {{name: part.path+'-choice-'+{$choicenum}, 'aria-labelledby': part.full_path+'-choice-{$choicenum} '+part.full_path+'-answer-{$answernum}'}}" value="{$answernum}"/>
                     </xsl:when>
                 </xsl:choose>