Support undocumented use of enableCheckButton

otacke · Jul 30, 2021 · c1ad2e4 · c1ad2e4
1 parent 2505f3d
commit c1ad2e4
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 3 deletions.
diff --git a/scripts/essay.js b/scripts/essay.js
@@ -39,6 +39,7 @@ H5P.Essay = function ($, Question) {
         behaviour: {
           minimumLength: 0,
           inputFieldSize: 10,
+          enableCheckButton: true,
           enableRetry: true,
           ignoreScoring: false,
           pointsHost: 1
@@ -65,7 +66,6 @@ H5P.Essay = function ($, Question) {
     this.languageTag = Essay.formatLanguageCode(defaultLanguage);
 
     this.score = 0;
-    this.isAnswered = false;
     this.internalShowSolutionsCall = false;
 
     // Sanitize HTML encoding
@@ -76,6 +76,7 @@ H5P.Essay = function ($, Question) {
       this.previousState = contentData.previousState;
     }
 
+    this.isAnswered = this.previousState && this.previousState.inputField && this.previousState.inputField !== '';
     /*
      * this.params.behaviour.enableSolutionsButton and this.params.behaviour.enableRetry are used by
      * contract at {@link https://h5p.org/documentation/developers/contracts#guides-header-8} and
@@ -159,6 +160,9 @@ H5P.Essay = function ($, Question) {
     }, {
       onInteracted: (function () {
         that.handleInteracted();
+      }),
+      onInput: (function () {
+        that.handleInput();
       })
     });
 
@@ -212,7 +216,7 @@ H5P.Essay = function ($, Question) {
         that.showButton('show-solution');
       }
       that.hideButton('check-answer');
-    }, true, {
+    }, this.params.behaviour.enableCheckButton, {
       'aria-label': this.params.ariaCheck
     }, {});
 
@@ -242,6 +246,8 @@ H5P.Essay = function ($, Question) {
    * Handle user interacted.
    */
   Essay.prototype.handleInteracted = function () {
+    // Deliberately keeping the state once answered
+    this.isAnswered = this.isAnswered || this.inputField.getText().length > 0;
     this.triggerXAPI('interacted');
   };
 
@@ -317,7 +323,11 @@ H5P.Essay = function ($, Question) {
 
     this.hideButton('show-solution');
     this.hideButton('try-again');
-    this.showButton('check-answer');
+
+    // QuestionSet can control check button despite not in Question Type contract
+    if (this.params.behaviour.enableCheckButton) {
+      this.showButton('check-answer');
+    }
 
     this.inputField.enable();
     this.inputField.focus();

diff --git a/scripts/inputfield.js b/scripts/inputfield.js
@@ -54,6 +54,8 @@ var H5P = H5P || {};
     this.setText(this.previousState);
     this.oldValue = this.previousState;
 
+    this.containsText = this.oldValue.length > 0;
+
     // Interacted listener
     this.inputField.addEventListener('blur', function () {
       if (that.oldValue !== that.getText()) {
@@ -63,6 +65,20 @@ var H5P = H5P || {};
       that.oldValue = that.getText();
     });
 
+    /*
+     * Extra listener required to be used in QuestionSet properly
+     */
+    this.inputField.addEventListener('input', function () {
+      if (
+        that.containsText && that.getText().length === 0 ||
+        !that.containsText && that.getText().length > 0
+      ) {
+        that.callbacks.onInteracted();
+      }
+
+      that.containsText = that.getText().length > 0;
+    });
+
     this.content = document.createElement('div');
     this.content.appendChild(this.inputField);