Fixes #20

deltanet · Dec 22, 2021 · a8eb6da · a8eb6da
1 parent 8f0b234
commit a8eb6da
Show file tree

Hide file tree

Showing 6 changed files with 114 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -85,7 +85,7 @@ This sets the top and left position of the menu item relative to its container.
 ````
 
 ----------------------------
-**Version number:**  4.0.0   
+**Version number:**  4.1.0   
 **Framework versions:**  5+     
 **Author / maintainer:** City and Guilds Kineo [cgkineo/adapt-hotspot-menu](https://github.com/cgkineo/adapt-hotspot-menu) / DeltaNet     
 **RTL support:** yes  

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "adapt-hotspot-menu-audio",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "framework": ">=5",
   "homepage": "https://github.com/deltanet/adapt-hotspot-menu-audio",
   "displayName": "Hotspot Menu",

diff --git a/example.json b/example.json
@@ -37,6 +37,9 @@
           "src": "",
           "srcHover": "",
           "srcVisited": "",
+          "srcComplete": "",
+          "srcPassed": "",
+          "srcFailed": "",
           "locked": "",
           "alt": ""
         }

diff --git a/js/adapt-hotspot-hotspotItemView.js b/js/adapt-hotspot-hotspotItemView.js
@@ -17,9 +17,17 @@ define([
         'hotspotMenu:itemOpen': this.checkIfShouldClose
       });
 
+      this.checkAssessmentCompletionStatus();
+
       if (!this.model.get('_isVisited')) {
         this.setVisitedIfBlocksComplete();
       }
+
+      var isCompletedAssessment = (this.model.get('_assessment') && this.model.get('_assessment')._isComplete && !this.model.get('_isComplete'));
+      if (isCompletedAssessment) {
+        this.model.set('_isComplete', true);
+      }
+
       this.type = this.model.get('_hotspotMenuAudio')._hotspotMenuItem._type;
 
       if (this.type == 'graphic') {
@@ -61,6 +69,45 @@ define([
       }
     },
 
+    checkAssessmentCompletionStatus: function() {
+      var that = this;
+      var numPassed = 0;
+      var numAssessments = 0;
+      var numCompleted = 0;
+
+      var children = this.model.findDescendantModels('articles', {
+        where: {
+          _isAvailable: true,
+          _isOptional: false
+        }
+      });
+
+      children.forEach(function(article, index) {
+        if (article.get('_assessment')._isEnabled) {
+          that.model.set('_assessment', true);
+          numAssessments++;
+
+          if (article.get('_isAssessmentComplete')) {
+            numCompleted++;
+          }
+
+          if (article.get('_isPass')) {
+            numPassed++;
+          }
+        }
+      });
+
+      if (numCompleted !== numAssessments) return;
+
+      this.model.set('_assessmentCompleted', true);
+
+      if (numPassed == numAssessments) {
+        this.model.set('_assessmentPassed', true);
+      } else {
+        this.model.set('_assessmentPassed', false);
+      }
+    },
+
     showDetails: function(event) {
       if (event) event.preventDefault();
 

diff --git a/properties.schema b/properties.schema
@@ -183,6 +183,33 @@
                           "validators": [],
                           "help": "The image for the visited state"
                         },
+                        "srcComplete": {
+                          "type": "string",
+                          "required": false,
+                          "default": "",
+                          "title": "Complete Asset",
+                          "inputType": "Asset:image",
+                          "validators": [],
+                          "help": "The image for the complete state"
+                        },
+                        "srcPassed": {
+                          "type": "string",
+                          "required": false,
+                          "default": "",
+                          "title": "Passed Asset",
+                          "inputType": "Asset:image",
+                          "validators": [],
+                          "help": "The image for the passed state"
+                        },
+                        "srcFailed": {
+                          "type": "string",
+                          "required": false,
+                          "default": "",
+                          "title": "Failed Asset",
+                          "inputType": "Asset:image",
+                          "validators": [],
+                          "help": "The image for the failed state"
+                        },
                         "locked": {
                           "type": "string",
                           "required": false,

diff --git a/templates/hotspot-menu-item.hbs b/templates/hotspot-menu-item.hbs
@@ -5,12 +5,28 @@
 <button class="{{#if _graphicEnabled}}hotspotmenu-item__graphic-button{{#unless _isLocked}} graphic-button-states{{/unless}}{{else}}hotspotmenu-item__hotspot{{/if}}{{#if _isVisited}} is-visited{{/if}}{{#if _isComplete}} is-complete{{/if}}{{#if _isLocked}} is-disabled{{/if}} js-hotspotmenu-hotspot-btn" aria-label="{{#if _isVisited}}{{_globals._accessibility._ariaLabels.visited}}{{/if}} {{linkText}} {{displayTitle}}" data-id="{{_id}}"{{#if _isLocked}} disabled="disabled"{{/if}}>
 	{{_hotspotMenuAudio._hotspotMenuItem.title}}
 	{{#if _graphicEnabled}}
-		{{#if _isLocked}}
-			<img src="{{#if _hotspotMenuAudio._hotspotMenuItem._graphic.locked}}{{_hotspotMenuAudio._hotspotMenuItem._graphic.locked}}{{else}}{{_hotspotMenuAudio._hotspotMenuItem._graphic.src}}{{/if}}" aria-hidden="true" />
+		{{#if _isComplete}}
+			{{#if _assessment}}
+				{{#if _assessmentPassed}}
+					<img class="graphic-button-visited" src="{{#if _hotspotMenuAudio._hotspotMenuItem._graphic.srcPassed}}{{_hotspotMenuAudio._hotspotMenuItem._graphic.srcPassed}}{{else}}{{_hotspotMenuAudio._hotspotMenuItem._graphic.srcVisited}}{{/if}}" aria-hidden="true"/>
+				{{else}}
+					<img class="graphic-button-visited" src="{{#if _hotspotMenuAudio._hotspotMenuItem._graphic.srcFailed}}{{_hotspotMenuAudio._hotspotMenuItem._graphic.srcFailed}}{{else}}{{_hotspotMenuAudio._hotspotMenuItem._graphic.srcVisited}}{{/if}}" aria-hidden="true"/>
+				{{/if}}
+			{{else}}
+				<img class="graphic-button-visited" src="{{#if _hotspotMenuAudio._hotspotMenuItem._graphic.srcComplete}}{{_hotspotMenuAudio._hotspotMenuItem._graphic.srcComplete}}{{else}}{{_hotspotMenuAudio._hotspotMenuItem._graphic.srcVisited}}{{/if}}" aria-hidden="true"/>
+			{{/if}}
 		{{else}}
-			<img src="{{_hotspotMenuAudio._hotspotMenuItem._graphic.src}}"{{#if _hotspotMenuAudio._hotspotMenuItem._graphic.alt}} aria-label="{{_hotspotMenuAudio._hotspotMenuItem._graphic.alt}}"{{else}} aria-hidden="true"{{/if}} />
-			<img src="{{_hotspotMenuAudio._hotspotMenuItem._graphic.srcHover}}"{{#if _hotspotMenuAudio._hotspotMenuItem._graphic.alt}} aria-label="{{_hotspotMenuAudio._hotspotMenuItem._graphic.alt}}" class="graphic-button-hover"{{else}} class="graphic-button-hover" aria-hidden="true"{{/if}} />
-			<img src="{{_hotspotMenuAudio._hotspotMenuItem._graphic.srcVisited}}"{{#if _hotspotMenuAudio._hotspotMenuItem._graphic.alt}} aria-label="{{_hotspotMenuAudio._hotspotMenuItem._graphic.alt}}" class="graphic-button-visited" {{else}} class="graphic-button-visited" aria-hidden="true"{{/if}} />
+			{{#if _isVisited}}
+				<img class="graphic-button-visited" src="{{_hotspotMenuAudio._hotspotMenuItem._graphic.srcVisited}}"{{#if _hotspotMenuAudio._hotspotMenuItem._graphic.alt}} aria-label="{{_hotspotMenuAudio._hotspotMenuItem._graphic.alt}}"{{else}} aria-hidden="true"{{/if}} />
+			{{else}}
+				{{#if _isLocked}}
+					<img src="{{#if _hotspotMenuAudio._hotspotMenuItem._graphic.locked}}{{_hotspotMenuAudio._hotspotMenuItem._graphic.locked}}{{else}}{{_hotspotMenuAudio._hotspotMenuItem._graphic.src}}{{/if}}" aria-hidden="true" />
+				{{else}}
+				<img src="{{_hotspotMenuAudio._hotspotMenuItem._graphic.src}}"{{#if _hotspotMenuAudio._hotspotMenuItem._graphic.alt}} aria-label="{{_hotspotMenuAudio._hotspotMenuItem._graphic.alt}}"{{else}} aria-hidden="true"{{/if}} />
+				<img class="graphic-button-hover" src="{{_hotspotMenuAudio._hotspotMenuItem._graphic.srcHover}}"{{#if _hotspotMenuAudio._hotspotMenuItem._graphic.alt}} aria-label="{{_hotspotMenuAudio._hotspotMenuItem._graphic.alt}}"{{else}} aria-hidden="true"{{/if}} />
+				<img class="graphic-button-visited" src="{{_hotspotMenuAudio._hotspotMenuItem._graphic.srcVisited}}"{{#if _hotspotMenuAudio._hotspotMenuItem._graphic.alt}} aria-label="{{_hotspotMenuAudio._hotspotMenuItem._graphic.alt}}"{{else}} aria-hidden="true"{{/if}} />
+				{{/if}}
+			{{/if}}
 		{{/if}}
 	{{/if}}
 </button>
@@ -19,13 +35,25 @@
 
 	{{#if _hotspotMenuAudio._hotspotMenuItem._graphic.src}}
 	<div class="hotspotmenu-item__graphic">
-    {{#if _isLocked}}
-      <img src="{{#if _hotspotMenuAudio._hotspotMenuItem._graphic.locked}}{{_hotspotMenuAudio._hotspotMenuItem._graphic.locked}}{{else}}{{_hotspotMenuAudio._hotspotMenuItem._graphic.src}}{{/if}}" aria-hidden="true" />
+		{{#if _isComplete}}
+			{{#if _assessment}}
+				{{#if _assessmentPassed}}
+					<img src="{{#if _hotspotMenuAudio._hotspotMenuItem._graphic.srcPassed}}{{_hotspotMenuAudio._hotspotMenuItem._graphic.srcPassed}}{{else}}{{_hotspotMenuAudio._hotspotMenuItem._graphic.srcVisited}}{{/if}}"{{#if _hotspotMenuAudio._hotspotMenuItem._graphic.alt}} aria-label="{{_hotspotMenuAudio._hotspotMenuItem._graphic.alt}}"{{else}} aria-hidden="true"{{/if}} />
+				{{else}}
+					<img src="{{#if _hotspotMenuAudio._hotspotMenuItem._graphic.srcFailed}}{{_hotspotMenuAudio._hotspotMenuItem._graphic.srcFailed}}{{else}}{{_hotspotMenuAudio._hotspotMenuItem._graphic.srcVisited}}{{/if}}"{{#if _hotspotMenuAudio._hotspotMenuItem._graphic.alt}} aria-label="{{_hotspotMenuAudio._hotspotMenuItem._graphic.alt}}"{{else}} aria-hidden="true"{{/if}} />
+				{{/if}}
+			{{else}}
+				<img src="{{#if _hotspotMenuAudio._hotspotMenuItem._graphic.srcComplete}}{{_hotspotMenuAudio._hotspotMenuItem._graphic.srcComplete}}{{else}}{{_hotspotMenuAudio._hotspotMenuItem._graphic.srcVisited}}{{/if}}"{{#if _hotspotMenuAudio._hotspotMenuItem._graphic.alt}} aria-label="{{_hotspotMenuAudio._hotspotMenuItem._graphic.alt}}"{{else}} aria-hidden="true"{{/if}} />
+			{{/if}}
 		{{else}}
 			{{#if _isVisited}}
 				<img src="{{_hotspotMenuAudio._hotspotMenuItem._graphic.srcVisited}}"{{#if _hotspotMenuAudio._hotspotMenuItem._graphic.alt}} aria-label="{{_hotspotMenuAudio._hotspotMenuItem._graphic.alt}}"{{else}} aria-hidden="true"{{/if}} />
 			{{else}}
+				{{#if _isLocked}}
+					<img src="{{#if _hotspotMenuAudio._hotspotMenuItem._graphic.locked}}{{_hotspotMenuAudio._hotspotMenuItem._graphic.locked}}{{else}}{{_hotspotMenuAudio._hotspotMenuItem._graphic.src}}{{/if}}" aria-hidden="true" />
+				{{else}}
 				<img src="{{_hotspotMenuAudio._hotspotMenuItem._graphic.src}}"{{#if _hotspotMenuAudio._hotspotMenuItem._graphic.alt}} aria-label="{{_hotspotMenuAudio._hotspotMenuItem._graphic.alt}}"{{else}} aria-hidden="true"{{/if}} />
+				{{/if}}
 			{{/if}}
 		{{/if}}
   </div>