New: Add option to disable popup and show error inline (fixes #12)

README.md

@@ -18,13 +18,19 @@ It provides core [*question components*](https://github.com/adaptlearning/adapt_
 
 ## Settings
 
-**\_instructionError** (object): The Instruction Error attributes group contains values for **\_isEnabled**, **title** and **body**.
+### *course.json*
 
->**\_isEnabled** (boolean):  Turns on and off the **Instruction Error** extension. Can only be set in *course.json*.
+The following attributes, set within *course.json*, configure the defaults for **Instruction Error**.
 
->**title** (boolean):  Set the notify title for the instruction error. Can only be set in *course.json*.
+**\_instructionError** (object): The Instruction Error attributes group contains values for **\_isEnabled**, **\_showAsPopup**, **title** and **body**.
 
->**body** (boolean):  Set the notify body for the instruction error, defaults to the question instruction text. Can only be set in *course.json*.
+>**\_isEnabled** (boolean): Turns on and off the **Instruction Error** extension.
+
+>**\_showAsPopup** (boolean): When set to `true`, the **Instruction Error** will display the error in a notify popup. The default is `false`.
+
+>**title** (boolean): When using the `_showAsPopup` option, this is the notify title for the instruction error. Otherwise, this is not used.
+
+>**body** (boolean): When using the `_showAsPopup` option, this is the notify body for the instruction error. Otherwise, this replaces the existing `.component__instruction` text. Defaults to the question instruction text. If instruction text is not set, a generic message is used.
 
 ## Limitations
 

example.json

@@ -1,6 +1,7 @@
 // Add to course.json
 "_instructionError": {
     "_isEnabled": true,
+    "_showAsPopup": false,
     "title": "Instructions",
     "body": "{{#if instruction}}{{{instruction}}}{{else}}Please complete the question and then select Submit.{{/if}}"
 }

js/adapt-contrib-instructionError.js

@@ -1,4 +1,5 @@
 import Adapt from 'core/js/adapt';
+import a11y from 'core/js/a11y';
 import data from 'core/js/data';
 import QuestionModel from 'core/js/models/questionModel';
 import notify from 'core/js/notify';
@@ -10,17 +11,27 @@ class InstructionError extends Backbone.Controller {
   }
 
   onDataReady() {
-    this.config = Adapt.course.get('_instructionError');
     if (!this.config?._isEnabled) return;
 
     this.listenTo(Adapt, 'questionView:showInstructionError', this.onInstructionError);
     data.forEach(model => {
       if (!(model instanceof QuestionModel)) return;
       model.set('_canSubmit', true, { pluginName: 'InstructionError' });
+      model.set('instructionInitial', model.get('instruction'));
+      model.on('change:_isSubmitted', this.resetInstruction.bind(this));
     });
   }
 
   onInstructionError({ model }) {
+    if (this.config._showAsPopup) {
+      this.showPopup(model);
+      return;
+    }
+
+    this.showInlineError(model);
+  }
+
+  showPopup(model) {
     const data = model.toJSON();
     const notifyObject = Object.assign({}, this.config, {
       title: Handlebars.compile(this.config.title)(data),
@@ -29,6 +40,28 @@ class InstructionError extends Backbone.Controller {
     notify.popup(notifyObject);
   }
 
+  showInlineError(model) {
+    const data = model.toJSON();
+    model.toggleClass('has-error', true);
+
+    // Update instruction text
+    const dataWithInitial = Object.assign(data, { instruction: model.get('instructionInitial') });
+    const instruction = Handlebars.compile(this.config.body)(dataWithInitial);
+    model.set('instruction', instruction);
+
+    // Focus on instruction text element
+    const $instruction = $(`[data-adapt-id=${data._id}]`).find('.component__instruction').first();
+    a11y.focusFirst($instruction, { defer: true });
+  }
+
+  resetInstruction(model) {
+    model.toggleClass('has-error', false);
+    model.set('instruction', model.get('instructionInitial'));
+  }
+
+  get config() {
+    return Adapt.course.get('_instructionError');
+  }
 }
 
 export default new InstructionError();

less/instructionError.less

@@ -0,0 +1,10 @@
+.component.has-error:not(.is-complete) .component__instruction {
+  display: flex;
+  color: @validation-error;
+  font-weight: bold;
+
+  .icon {
+    .icon-warning;
+    margin-right: @icon-padding / 4;
+  }
+}

properties.schema

@@ -21,11 +21,20 @@
                   "inputType": "Checkbox",
                   "validators": []
                 },
+                "_showAsPopup": {
+                  "type": "boolean",
+                  "required": false,
+                  "default": false,
+                  "title": "Show as popup",
+                  "help": "When set to `true`, the instruction error is shown in a notify popup. The default is `false`.",
+                  "inputType": "Checkbox",
+                  "validators": []
+                },
                 "title": {
                   "type": "string",
                   "required": false,
                   "default": "Instructions",
-                  "title": "Notify Title",
+                  "title": "Title",
                   "inputType": "Text",
                   "validators": [],
                   "help": "Set the notify title for the instruction error"
@@ -34,10 +43,10 @@
                   "type": "string",
                   "required": false,
                   "default": "{{#if instruction}}{{{instruction}}}{{else}}Please complete the question and then click Submit.{{/if}}",
-                  "title": "Notify Body",
+                  "title": "Body",
                   "inputType": "Text",
                   "validators": [],
-                  "help": "Set the notify body for the instruction error, defaults to the question instruction text"
+                  "help": "When using the 'show as popup' option, this is the notify body for the instruction error. Otherwise, this replaces the existing instruction text. Defaults to the question instruction text. If instruction text is not set, a generic message is used."
                 }
               }
             }