matrix entry: style cells based on correctness

fixes #972

When the correct answer is shown, the cells of matrix entry parts are styled to show their correctness.

Author: christianp

themes/default/files/resources/exam.css

@@ -467,6 +467,17 @@ Copyright 2011-25 Newcastle University
 
                 & td {
                     text-align: center;
+
+                    &[feedback-state="correct"] {
+                        --feedback-color: var(--success-color);
+                    }
+                    &[feedback-state="incorrect"] {
+                        --feedback-color: var(--danger-color);
+
+                        & input {
+                            border-style: dashed;
+                        }
+                    }
                 }
             }
 

themes/default/files/scripts/answer-widgets.js

@@ -545,6 +545,7 @@ Numbas.signals.on('localisation initialised', () => {
             this.hasColumnHeaders = Knockout.computed(function() {
                 return Knockout.unwrap(this.columnHeaders).length > 0;
             }, this);
+            this.cellFeedback = defaultObservable(params.cellFeedback, []);
             this.title = params.title || '';
             var _numRows = typeof params.rows == 'function' ? params.rows : Knockout.observable(Knockout.unwrap(params.rows) || 2);
             this.numRows = Knockout.computed({
@@ -606,7 +607,16 @@ Numbas.signals.on('localisation initialised', () => {
                 var prefilled = ((Knockout.unwrap(vm.prefilledCells) || [])[row] || [])[column];
                 var use_prefilled = prefilled != '' && prefilled !== undefined;
                 c = use_prefilled ? prefilled : c;
-                var cell = {cell: Knockout.observable(c), prefilled: use_prefilled, label: R('matrix input.cell label', {row:row + 1, column:column + 1})};
+                const feedback = Knockout.pureComputed(() => {
+                    const v = (vm.cellFeedback()[row] || [])[column];
+                    return v;
+                });
+                var cell = {
+                    cell: Knockout.observable(c),
+                    prefilled: use_prefilled,
+                    label: R('matrix input.cell label', {row:row + 1, column:column + 1}),
+                    feedback
+                };
                 cell.cell.subscribe(make_result);
                 return cell;
             }
@@ -769,7 +779,7 @@ Numbas.signals.on('localisation initialised', () => {
                             <tr>
                                 <th data-bind="visible: $parent.hasRowHeaders"><span data-bind="latex: $parent.rowHeaders()[$index()+($parent.hasColumnHeaders() ? 1 : 0)] || ''"></span></th>
                                 <!-- ko foreach: $data -->
-                                <td class="cell"><input type="text" autocapitalize="off" inputmode="text" spellcheck="false" data-bind="attr: {'aria-label': label}, textInput: cell, autosize: true, disable: prefilled || $parents[1].disable, event: $parents[1].events"/></td>
+                                <td class="cell" data-bind="attr: {'feedback-state': feedback}"><input type="text" autocapitalize="off" inputmode="text" spellcheck="false" data-bind="attr: {'aria-label': label}, textInput: cell, autosize: true, disable: prefilled || $parents[1].disable, event: $parents[1].events"/></td>
                                 <!-- /ko -->
                             </tr>
                         </tbody>

themes/default/files/scripts/part-display.js

@@ -274,6 +274,14 @@ Numbas.queueScript('part-display', ['display-util', 'display-base', 'util', 'jme
          */
         this.feedbackMessages = Knockout.observableArray([]);
 
+
+        /** The values of marking notes.
+         *
+         * @member {observable} marking_values
+         * @memberof Numbas.display.PartDisplay
+         */
+        this.marking_values = Knockout.observable({});
+
         /** Are there other parts in line with this one? (Used to decide whether to show the submit button and feedback text)
          * True if there's more than one part in the question, or this is a step.
          *
@@ -783,6 +791,7 @@ Numbas.queueScript('part-display', ['display-util', 'display-base', 'util', 'jme
             } else {
                 this.feedbackMessages([]);
             }
+            this.marking_values(p.marking_values);
         },
         /** Called when 'show steps' button is pressed, or coming back to a part after steps shown.
          *

themes/default/files/scripts/parts/matrix-display.js

@@ -53,6 +53,25 @@ Numbas.queueScript('display/parts/matrix',['display-base','part-display','util',
                 p.storeAnswer(m);
             }
         },this);
+        this.cellFeedback = Knockout.pureComputed(function() {
+            let feedback = this.studentAnswer().map((row) => row.map(c => ''));
+            if(!p.settings.markPerCell || !this.showCorrectAnswer()) {
+                return feedback;
+            }
+
+            const correct_cells = this.marking_values()?.correct_cells;
+
+            if(!correct_cells) {
+                return feedback;
+            }
+
+            feedback = feedback.map(row => row.map(c => 'incorrect'));
+
+            Numbas.jme.unwrapValue(correct_cells).map(([r,c]) => {
+                feedback[r][c] = 'correct';
+            });
+            return feedback;
+        }, this);
     }
     display.MatrixEntryPartDisplay.prototype =
     {

themes/default/templates/xslt/parts/matrix.xslt

@@ -1,7 +1,24 @@
 {% raw %}
 <xsl:template match="part[@type='matrix']" mode="typespecific">
     <xsl:if test="count(steps/part)>0"><localise>part.with steps answer prompt</localise></xsl:if>
-    <matrix-input data-bind="attr: {{id: part.full_path+'-input'}}" params="rows: studentAnswerRows, columns: studentAnswerColumns, prefilledCells: prefilledCells, value: studentAnswer, allowResize: allowResize, minColumns: minColumns, maxColumns: maxColumns, minRows: minRows, maxRows: maxRows, disable: disabled, events: inputEvents, title: input_title"></matrix-input>
+    <matrix-input 
+        data-bind="attr: {{id: part.full_path+'-input'}}"
+        params="
+            rows: studentAnswerRows,
+            columns: studentAnswerColumns,
+            prefilledCells: prefilledCells,
+            value: studentAnswer,
+            allowResize: allowResize,
+            minColumns: minColumns,
+            maxColumns: maxColumns,
+            minRows: minRows,
+            maxRows: maxRows,
+            cellFeedback: cellFeedback,
+            disable: disabled,
+            events: inputEvents,
+            title: input_title
+    ">
+    </matrix-input>
 {% endraw %}
     {% include 'xslt/feedback_icon.xslt' %}
 {% raw %}