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,21 @@ 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;
 

js/textInputView.js

@@ -84,7 +84,7 @@ class TextInputView extends QuestionView {
 
   onInputChanged(e) {
     const $input = $(e.target);
-    this.model.setItemUserAnswer($input.parents('.js-textinput-item').index(), $input.val());
+    this.model.setItemUserAnswer(parseInt($input.attr('data-adapt-index')), $input.val());
   }
 
 }

properties.schema

@@ -11,6 +11,24 @@
       "inputType": "Text",
       "validators": [],
       "translatable": true
+    },
+    "correctAnswerPrefix": {
+      "type": "string",
+      "required": false,
+      "default": "The correct answer is",
+      "inputType": "Text",
+      "validators": [],
+      "help": "If _canShowCorrectness is enabled, this text provides a prefix for the correct option displayed below the submitted input",
+      "translatable": true
+    },
+    "correctAnswersPrefix": {
+      "type": "string",
+      "required": false,
+      "default": "Accepted correct answers include",
+      "inputType": "Text",
+      "validators": [],
+      "help": "If _canShowCorrectness is enabled, this text provides a prefix for the comma separated list of correct options displayed below the submitted input",
+      "translatable": true
     }
   },
   "properties": {
@@ -113,6 +131,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",

schema/course.schema.json

@@ -28,6 +28,24 @@
                       "_adapt": {
                         "translatable": true
                       }
+                    },
+                    "correctAnswerPrefix": {
+                      "type": "string",
+                      "title": "ARIA prefix for correct answer",
+                      "description": "If _canShowCorrectness is enabled, this text provides a prefix for the correct option displayed below the submitted input",
+                      "default": "The correct answer is",
+                      "_adapt": {
+                        "translatable": true
+                      }
+                    },
+                    "correctAnswersPrefix": {
+                      "type": "string",
+                      "title": "ARIA prefix for correct answers",
+                      "description": "If _canShowCorrectness is enabled, this text provides a prefix for the comma separated list of correct options displayed below the submitted input",
+                      "default": "Accepted correct answers include",
+                      "_adapt": {
+                        "translatable": true
+                      }
                     }
                   }
                 }

templates/textinput.jsx

@@ -8,13 +8,18 @@ export default function TextInput (props) {
     _isEnabled,
     _isCorrect,
     _shouldShowMarking,
+    _canShowCorrectness,
     _globals,
     displayTitle,
     body,
     instruction,
-    ariaQuestion
+    ariaQuestion,
+    _items
   } = props;
 
+  const correctAnswerPrefix = _globals?._components?._textinput?.correctAnswerPrefix + ' ' || '';
+  const correctAnswersPrefix = _globals?._components?._textinput?.correctAnswersPrefix + ' ' || '';
+
   return (
     <div className="component__inner textinput__inner">
 
@@ -26,79 +31,107 @@ 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, _isCorrect }, 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-prefix`}
-                  htmlFor={`${_id}-${index}`}
-                  aria-label={prefix}
-                  dangerouslySetInnerHTML={{ __html: compile(prefix, props) }}
-                >
-                </label>
-              </div>
-            }
+        {_items.map(({
+          prefix,
+          _index,
+          input,
+          placeholder,
+          userAnswer,
+          suffix,
+          _correctAnswers,
+          _isCorrect
+        }, index) => {
+          const hasMultipleCorrectAnswers = _correctAnswers.length > 1;
 
-            <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-prefix ${_id}-${index}-aria-placeholder` : null}
-                aria-describedby={(suffix) ? `${_id}-${index}-aria-suffix` : null}
-                aria-label={placeholder}
-                defaultValue={userAnswer}
-                disabled={!_isEnabled}
-              />
+          return (
+            <div
+              key={index}
+              className='textinput-item__container'
+            >
               <div
-                className='textinput-item__placeholder aria-label'
-                id={`${_id}-${index}-aria-placeholder`}
-                aria-hidden='true'>
-                {placeholder}
-              </div>
-              <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"/>
+                className={classes([
+                  'textinput-item js-textinput-item',
+                  _shouldShowMarking && _isCorrect && 'is-correct',
+                  _shouldShowMarking && !_isCorrect && 'is-incorrect'
+                ])}
+              >
+                {prefix &&
+                <div className="textinput-item__prefix-container">
+                  <label
+                    className="textinput-item__prefix"
+                    id={`${_id}-${index}-aria-prefix`}
+                    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-adapt-index={_index}
+                    id={`${_id}-${index}`}
+                    aria-labelledby={(prefix) ? `${_id}-${index}-aria-prefix ${_id}-${index}-aria-placeholder` : null}
+                    aria-describedby={(suffix) ? `${_id}-${index}-aria-suffix` : null}
+                    aria-label={placeholder}
+                    defaultValue={userAnswer}
+                    disabled={!_isEnabled}
+                  />
+                  <div
+                    className='textinput-item__placeholder aria-label'
+                    id={`${_id}-${index}-aria-placeholder`}
+                    aria-hidden='true'>
+                    {placeholder}
+                  </div>
+                  <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>
+
+                {suffix &&
+                <div className="textinput-item__suffix-container">
+                  <label
+                    className="textinput-item__suffix"
+                    id={`${_id}-${index}-aria-suffix`}
+                    htmlFor={`${_id}-${index}`}
+                    aria-label={suffix}
+                    dangerouslySetInnerHTML={{ __html: compile(suffix, props) }}
+                  >
+                  </label>
+                </div>
+                }
               </div>
-            </div>
 
-            {suffix &&
-              <div className="textinput-item__suffix-container">
-                <label
-                  className="textinput-item__suffix"
-                  id={`${_id}-${index}-aria-suffix`}
-                  htmlFor={`${_id}-${index}`}
-                  aria-label={suffix}
-                  dangerouslySetInnerHTML={{ __html: compile(suffix, props) }}
-                >
-                </label>
+              {_canShowCorrectness &&
+              <div
+                className="textinput-item__answer-container"
+                dangerouslySetInnerHTML={{
+                  __html: (_isInteractionComplete && (hasMultipleCorrectAnswers ? correctAnswersPrefix : correctAnswerPrefix) + (hasMultipleCorrectAnswers ? _correctAnswers.join(', ') : _correctAnswers)) || '&nbsp;'
+                }}>
               </div>
-            }
+              }
+
+            </div>
+          );
 
-          </div>
-        )}
+        })}
 
       </div>
       <div className="btn__container" />