Fixes #18

README.md

@@ -30,6 +30,14 @@ The attributes listed below are used in *components.json* to configure **Text En
 
 **placeholder** (string): This text appears in the text entry box before the user interacts with it.  
 
+**_characterLimit** (object):  This `_characterLimit` attributes group stores the properties for the maximum character length. It contains values for **_isEnabled**, **_max**, and **text**.  
+
+>**_isEnabled** (boolean): Setting this to `true` will set the maximum character length specified. The default is `false`.  
+
+>**_max** (number): This sets the character limit for the text entry box.  
+
+>**text** (string): This defines the text to prefix the number of characters remaining.  
+
 **_buttons** (object):  This `_buttons` attributes group stores the properties for the buttons. It contains values for **_submit**, **_reset**, **_showFeedback**, and **_closeFeedback**.  
 
 >**_submit** (object):  This `_submit` attributes group stores the properties for the Submit button. It contains values for **buttonText**, and **ariaLabel**.  
@@ -78,7 +86,7 @@ Several elements of **Text Entry** have been assigned a label using the [aria-la
 No known limitations.  
 
 ----------------------------
-**Version number:**  4.1.1     
+**Version number:**  4.2.0     
 **Framework versions supported:**  4+     
 **Author / maintainer:** DeltaNet with [contributors](https://github.com/deltanet/adapt-textEntry-audio/graphs/contributors)     
 **Accessibility support:** yes  

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "adapt-textEntry-audio",
-  "version": "4.1.1",
+  "version": "4.2.0",
   "framework": ">=4",
   "homepage": "https://github.com/deltanet/adapt-textEntry-audio",
   "issues": "https://github.com/deltanet/adapt-textEntry-audio/issues",

example.json

@@ -14,6 +14,11 @@
   "body":"Body text",
   "instruction":"Instruction text",
   "placeholder": "Enter your thoughts here",
+  "_characterLimit": {
+    "_isEnabled": true,
+    "_max": 255,
+    "text": "Characters remaining:"
+  },
   "_buttons": {
     "_submit": {
       "buttonText": "Submit",

js/textEntryAudioView.js

@@ -9,7 +9,8 @@ define([
         events: {
             'click .buttons-action': 'onBtnClicked',
             'click .buttons-action-fullwidth': 'onBtnClicked',
-            'click .buttons-feedback': 'openPopup'
+            'click .buttons-feedback': 'openPopup',
+            'keyup .textEntry-audio-item-textbox': 'onInputChanged'
         },
 
         initialize: function() {
@@ -29,6 +30,8 @@ define([
             if (this.model.get('_setCompletionOn') === 'inview') {
                 this.setupInviewCompletion();
             }
+
+            this.updateCounter();
         },
 
         onBtnClicked: function(event) {
@@ -120,6 +123,8 @@ define([
               this.$('.buttons-action-fullwidth').html(this.model.get("_buttons")._reset.buttonText);
               this.$('.buttons-action-fullwidth').attr('aria-label', this.model.get("_buttons")._reset.ariaLabel);
             }
+
+            this.updateCounter();
         },
 
         resetUserAnswer: function() {
@@ -129,6 +134,27 @@ define([
           this.$('.textEntry-audio-item-textbox').val('');
 
           this.$('.buttons-feedback').attr('disabled', true);
+
+          this.updateCounter();
+        },
+
+        onInputChanged: function(event) {
+          if (event) event.preventDefault();
+
+          this.updateCounter();
+        },
+
+        updateCounter: function() {
+          if (!this.model.get('_characterLimit')._isEnabled) return;
+
+          var length = this.$('.textEntry-audio-item-textbox').val().length;
+
+          var max = this.model.get('_characterLimit')._max;
+          var text = this.model.get('_characterLimit').text;
+
+          var output = text+" "+(max - length);
+
+          this.$('.textEntry-audio-counter').html(output);
         },
 
         isCorrect: function() {

less/textEntry-audio.less

@@ -14,6 +14,13 @@
     border: 1px solid @item-color;
     margin: 0;
   }
+
+  .textEntry-audio-counter {
+    color: @foreground-color;
+    background-color: @background-color;
+    padding: @component-padding;
+    font-weight: @font-weight-medium;
+  }
 }
 
 .textEntry-audio-popup {

properties.schema

@@ -78,6 +78,40 @@
       "validators": [],
       "translatable": true
     },
+    "_characterLimit": {
+      "type": "object",
+      "title": "Character Limit",
+      "required": false,
+      "properties": {
+        "_isEnabled": {
+          "type": "boolean",
+          "required": false,
+          "default": false,
+          "title": "Is Enabled",
+          "inputType": "Checkbox",
+          "validators": [],
+          "help": "Controls whether there is a character limit."
+        },
+        "_max": {
+          "type": "number",
+          "required": false,
+          "title": "Max Number",
+          "inputType": "Number",
+          "default": 255,
+          "validators": ["number"],
+          "help": "This sets the maximum character limit. If 'Record interaction' is enabled the maximum should be 255 to be SCORM 1.2 compliant."
+        },
+        "text": {
+          "type": "string",
+          "required": false,
+          "default": "",
+          "title": "Prefix Text",
+          "inputType": "Text",
+          "validators": [],
+          "translatable": true
+        }
+      }
+    },
     "_buttons": {
       "type":"object",
       "title": "Buttons",

templates/textEntry-audio.hbs

@@ -2,8 +2,11 @@
   {{> component this}}
   <div class="textEntry-audio-widget component-widget">
   	<div class="textEntry-audio-input">
-      <textarea placeholder="{{compile placeholder}}" class="textEntry-audio-item-textbox" cols="2" rows="10"></textarea>
+      <textarea placeholder="{{compile placeholder}}" class="textEntry-audio-item-textbox" cols="2" rows="10"{{#if _characterLimit._isEnabled}} maxlength={{_characterLimit._max}}{{/if}}></textarea>
   	</div>
+    {{#if _characterLimit._isEnabled}}
+      <div class="textEntry-audio-counter"></div>
+    {{/if}}
   </div>
   <div class="buttons">
     <div class="buttons-inner">