New: Added support for _canShowCorrectness

README.md

@@ -55,6 +55,8 @@ guide the learner’s interaction with the component.
 
 **\_canShowModelAnswer** (boolean): Setting this to `false` prevents the [**_showCorrectAnswer** button](https://github.com/adaptlearning/adapt_framework/wiki/Core-Buttons) from being displayed. The default is `true`.
 
+**\_canShowCorrectness** (boolean): Setting this to `true` replaces the associated `_canShowModelAnswer` toggle button and a comma separated list of correct options is displayed below the submitted input. The default is `false`.
+
 **\_canShowFeedback** (boolean): Setting this to `false` disables feedback, so it is not shown to the user. The default is `true`.
 
 **\_canShowMarking** (boolean): Setting this to `false` prevents ticks and crosses being displayed on question completion. The default is `true`.

example.json

@@ -17,6 +17,7 @@
         "_isRandom": false,
         "_questionWeight": 1,
         "_canShowModelAnswer": true,
+        "_canShowCorrectness": false,
         "_canShowFeedback": true,
         "_canShowMarking": true,
         "_recordInteraction": true,

js/textInputModel.js

@@ -8,6 +8,7 @@ class TextInputModel extends QuestionModel {
     this.set('_genericAnswerIndexOffset', TextInputModel.genericAnswerIndexOffset);
 
     this.setupQuestionItemIndexes();
+    this.setupCorrectAnswers();
     this.checkCanSubmit();
   }
 
@@ -33,6 +34,18 @@ class TextInputModel extends QuestionModel {
     });
   }
 
+  setupCorrectAnswers() {
+    const genericAnswers = this.get('_answers') || [];
+    this.get('_items').forEach(item => {
+      const hasItemAnswers = Boolean(item._answers?.length);
+      const itemAnswers = item._answers || [];
+      const answers = hasItemAnswers
+        ? itemAnswers.flatMap(items => items || [])
+        : genericAnswers.flatMap(items => items || []);
+      item._correctAnswers = answers.filter(Boolean).map(item => item.trim()).filter(Boolean);
+    });
+  }
+
   restoreUserAnswers() {
     if (!this.get('_isSubmitted')) return;
 

properties.schema

@@ -113,6 +113,15 @@
       "validators": [],
       "help": "Allow the user to view the 'model answer' if they answer the question incorrectly?"
     },
+    "_canShowCorrectness": {
+      "type": "boolean",
+      "required": false,
+      "default": false,
+      "title": "Display correct answers after submit",
+      "inputType": "Checkbox",
+      "validators": [],
+      "help": "If enabled, this replaces the associated 'model answer' toggle button and a comma separated list of correct options is displayed below the submitted text input."
+    },
     "_canShowFeedback": {
       "type": "boolean",
       "required": true,

schema/component.schema.json

@@ -94,6 +94,12 @@
           "description": "Allow the user to view the 'model answer' if they answer the question incorrectly",
           "default": true
         },
+        "_canShowCorrectness": {
+          "type": "boolean",
+          "title": "Enable correct answers to display after submit",
+          "description": "If enabled, this replaces the associated 'model answer' toggle button and a comma separated list of correct options is displayed below the submitted text input",
+          "default": false
+        },
         "_canShowFeedback": {
           "type": "boolean",
           "title": "Enable feedback",

templates/textinput.jsx

@@ -8,6 +8,7 @@ export default function TextInput (props) {
     _isEnabled,
     _isCorrect,
     _shouldShowMarking,
+    _canShowCorrectness,
     _globals,
     displayTitle,
     body,
@@ -26,71 +27,82 @@ export default function TextInput (props) {
           'component__widget textinput__widget',
           !_isEnabled && 'is-disabled',
           _isInteractionComplete && 'is-complete is-submitted show-user-answer',
+          _isInteractionComplete && _canShowCorrectness && 'show-correctness',
           _isCorrect && 'is-correct'
         ])}
         aria-labelledby={ariaQuestion ? null : (displayTitle || body || instruction) && `${_id}-header`}
         aria-label={ariaQuestion || null}
         role='group'
       >
 
-        {props._items.map(({ prefix, _index, input, placeholder, userAnswer, suffix }, index) =>
+        {props._items.map(({ prefix, _index, input, placeholder, userAnswer, suffix, _correctAnswers }, index) =>
 
-          <div
-            className={classes([
-              'textinput-item js-textinput-item',
-              _shouldShowMarking && _isCorrect && 'is-correct',
-              _shouldShowMarking && !_isCorrect && 'is-incorrect'
-            ])}
-            key={_index}>
-            {prefix &&
-              <div className="textinput-item__prefix-container">
-                <label
-                  className="textinput-item__prefix"
-                  id={`${_id}-${index}-aria`}
-                  htmlFor={`${_id}-${index}`}
-                  aria-label={prefix}
-                  dangerouslySetInnerHTML={{ __html: compile(prefix, props) }}
-                >
-                </label>
-              </div>
-            }
-
-            <div className="textinput-item__textbox-container">
-              <input
-                className="textinput-item__textbox js-textinput-textbox"
-                type="text"
-                placeholder={placeholder}
-                data-id={`${input}-${index}`}
-                id={`${_id}-${index}`}
-                aria-labelledby={prefix && `${_id}-${index}-aria`}
-                aria-label={placeholder}
-                defaultValue={userAnswer}
-                disabled={!_isEnabled}
-              />
-              <div className="textinput-item__state">
-                <div className="textinput-item__icon textinput-item__correct-icon" aria-label={_globals._accessibility._ariaLabels.correct}>
-                  <div className="icon" aria-hidden="true"/>
+          <>
+            <div
+              className={classes([
+                'textinput-item js-textinput-item',
+                _shouldShowMarking && _isCorrect && 'is-correct',
+                _shouldShowMarking && !_isCorrect && 'is-incorrect'
+              ])}
+              key={_index}>
+              {prefix &&
+                <div className="textinput-item__prefix-container">
+                  <label
+                    className="textinput-item__prefix"
+                    id={`${_id}-${index}-aria`}
+                    htmlFor={`${_id}-${index}`}
+                    aria-label={prefix}
+                    dangerouslySetInnerHTML={{ __html: compile(prefix, props) }}
+                  >
+                  </label>
                 </div>
-                <div className="textinput-item__icon textinput-item__incorrect-icon" aria-label={_globals._accessibility._ariaLabels.incorrect}>
-                  <div className="icon" aria-hidden="true" />
+              }
+
+              <div className="textinput-item__textbox-container">
+                <input
+                  className="textinput-item__textbox js-textinput-textbox"
+                  type="text"
+                  placeholder={placeholder}
+                  data-id={`${input}-${index}`}
+                  id={`${_id}-${index}`}
+                  aria-labelledby={prefix && `${_id}-${index}-aria`}
+                  aria-label={placeholder}
+                  defaultValue={userAnswer}
+                  disabled={!_isEnabled}
+                />
+                <div className="textinput-item__state">
+                  <div className="textinput-item__icon textinput-item__correct-icon" aria-label={_globals._accessibility._ariaLabels.correct}>
+                    <div className="icon" aria-hidden="true"/>
+                  </div>
+                  <div className="textinput-item__icon textinput-item__incorrect-icon" aria-label={_globals._accessibility._ariaLabels.incorrect}>
+                    <div className="icon" aria-hidden="true" />
+                  </div>
                 </div>
               </div>
-            </div>
 
-            {suffix &&
-              <div className="textinput-item__suffix-container">
-                <label
-                  className="textinput-item__suffix"
-                  id={`${_id}-${index}-aria`}
-                  htmlFor={`${_id}-${index}`}
-                  aria-label={suffix}
-                  dangerouslySetInnerHTML={{ __html: compile(suffix, props) }}
-                >
-                </label>
-              </div>
+              {suffix &&
+                <div className="textinput-item__suffix-container">
+                  <label
+                    className="textinput-item__suffix"
+                    id={`${_id}-${index}-aria`}
+                    htmlFor={`${_id}-${index}`}
+                    aria-label={suffix}
+                    dangerouslySetInnerHTML={{ __html: compile(suffix, props) }}
+                  >
+                  </label>
+                </div>
+              }
+
+            </div>
+            {_isInteractionComplete && _canShowCorrectness &&
+            <div
+              key={_index}
+              className="textinput-item__answer-container"
+              dangerouslySetInnerHTML={{ __html: _correctAnswers }}>
+            </div>
             }
+          </>
 
-          </div>
         )}
 
       </div>