part feedback summary shows when the feedback has changed

To try to get the student's attention, the "Show feedback" text is bold
when the feedback messages have changed.

Author: christianp

locales/en-GB.json

@@ -292,6 +292,7 @@
     "part.unknown type": "{{part}}: Unrecognised part type {{type}}",
     "part.setting not present": "Property '{{property}}' not set",
     "part.feedback out of date": "This feedback is based on your last submitted answer. Save your changed answer to get updated feedback.",
+    "part.there is new feedback": "The feedback has changed.",
     "part.input title": "Answer for part {{name}}",
     "part.show feedback": "Show feedback",
     "part.hide feedback": "Hide feedback",
@@ -490,4 +491,4 @@
     "worksheet.reconfigure": "Generate different sheets",
     "worksheet.show sheet": "Preview the sheet with ID:",
     "worksheet.answersheet show question content": "Show question content in answer sheets?"
-}
+}

themes/default/files/resources/exam.css

@@ -1179,6 +1179,10 @@ select.multiplechoice {
     cursor: pointer;
 }
 
+.part .feedbackMessages.changed > summary {
+    font-weight: bold;
+}
+
 .part.dirty > .submit-and-feedback > .feedbackMessages .out-of-date-message {
     font-size: 0.9em;
     font-style: italic;

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

@@ -265,12 +265,32 @@ Numbas.queueScript('part-display',['display-util', 'display-base','util','jme'],
          */
         this.feedbackMessages = Knockout.observableArray([]);
 
+        /** 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.
+         *
+         * @member {observable|boolean} isNotOnlyPart
+         * @memberof Numbas.display.PartDisplay
+         */
+        this.isNotOnlyPart = Knockout.computed(function() {
+            return this.question.display.numParts()>1 || this.part.isStep;
+        },this);
+
+        var _feedbackShown = ko.observable(false);
+
         /** Is the box containing the feedback messages open?
          *
          * @member {observable.<boolean>} feedbackShown
          * @memberof Numbas.display.PartDisplay
          */
-        this.feedbackShown = ko.observable(false);
+        this.feedbackShown = Knockout.computed({
+            read: function() {
+                return _feedbackShown() || !this.isNotOnlyPart()
+            },
+
+            write: function(v) {
+                _feedbackShown(v);
+            }
+        }, this);
 
         /** Text for the button to toggle the display of the feedback messages.
          *
@@ -284,15 +304,6 @@ Numbas.queueScript('part-display',['display-util', 'display-base','util','jme'],
             return this.feedbackShown() ? R('part.hide feedback') : R('part.show feedback');
         }, this);
 
-        /** 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.
-         *
-         * @member {observable|boolean} isNotOnlyPart
-         * @memberof Numbas.display.PartDisplay
-         */
-        this.isNotOnlyPart = Knockout.computed(function() {
-            return this.question.display.numParts()>1 || this.part.isStep;
-        },this);
         /** Have the steps ever been shown? 
          *
          * @see Numbas.parts.Part#stepsShown
@@ -416,6 +427,18 @@ Numbas.queueScript('part-display',['display-util', 'display-base','util','jme'],
          */
         this.showFeedbackMessages = Numbas.display_util.resolve_feedback_setting(this, p.question.exam.settings.showPartFeedbackMessages);
 
+        /** Has the feedback changed since it was last looked at?
+         * @member {observable|boolean} showFeedbackMessages
+         * @memberof Numbas.display.PartDisplay
+         */
+        this.changedFeedback = Knockout.observable(false);
+
+        this.feedbackShown.subscribe(function(shown) {
+            if(shown) {
+                pd.changedFeedback(false);
+            }
+        });
+
         /**
          * Feedback messages that are shown to the student.
          * If all feedback should be shown, then returns the entire list. If not, then only messages relating to invalid input are shown.
@@ -439,7 +462,7 @@ Numbas.queueScript('part-display',['display-util', 'display-base','util','jme'],
             }
 
             // If showing the current score and this part is marked, add a message giving the total score.
-            if(feedback_settings.showFeedbackIcon && this.marks()!=0 && this.scoreFeedback.showActualMark()) {
+            if(feedback_settings.showFeedbackIcon && this.marks()!=0 && this.scoreFeedback.showActualMark() && this.answered()) {
                 messages.push({
                     credit_change: '',
                     message: '',
@@ -451,6 +474,10 @@ Numbas.queueScript('part-display',['display-util', 'display-base','util','jme'],
             return messages;
         },this);
 
+        this.shownFeedbackMessages.subscribe(function() {
+            pd.changedFeedback(!pd.feedbackShown());
+        })
+
         /**
          * Does this part have any shown feedback messages?
          *

themes/default/templates/xslt/part.xslt

@@ -58,8 +58,11 @@
                     </div>
                     <small class="answered-state" data-bind="html: scoreFeedback.answeredString"></small>
                 </div>
-                <details class="feedbackMessages" role="log" aria-live="polite" aria-atomic="true" data-bind="pulse: scoreFeedback.update, open: feedbackShown() || !isNotOnlyPart()" localise-data-jme-context-description="part.feedback">
-                    <summary data-bind="text: feedbackToggleText, visible: isNotOnlyPart"></summary>
+                <details class="feedbackMessages" role="log" aria-live="polite" aria-atomic="true" data-bind="pulse: scoreFeedback.update, open: feedbackShown, css: {{changed: changedFeedback()}}" localise-data-jme-context-description="part.feedback">
+                    <summary data-bind="visible: isNotOnlyPart">
+                        <span data-bind="text: feedbackToggleText"></span>
+                        <span class="sr-only" data-bind="visible: changedFeedback"><localise>part.there is new feedback</localise></span>
+                    </summary>
                     <p class="out-of-date-message" data-bind="visible: isDirty"><localise>part.feedback out of date</localise></p>
                     <p class="sr-only" data-bind="visible: isNotOnlyPart, text: feedback_title"></p>
                     <ol data-bind="visible: shownFeedbackMessages().length, foreach: shownFeedbackMessages">