Concept Map Component: We now show the auto feedback in a modal dialog.

WISE-Community · Sep 17, 2016 · 9970204 · 9970204
1 parent d54fc2a
commit 9970204
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 7 deletions.
diff --git a/src/main/webapp/wise5/components/conceptMap/conceptMapController.es6 b/src/main/webapp/wise5/components/conceptMap/conceptMapController.es6
@@ -181,6 +181,9 @@ class ConceptMapController {
             }
         ];
 
+        // the auto feedback string
+        this.autoFeedbackString = '';
+
         if (this.componentContent != null) {
 
             // get the component id
@@ -3819,15 +3822,47 @@ class ConceptMapController {
         if (thisResult.feedback != null) {
             if (resultString != "") {
                 // add a new line if the result string is not empty
-                resultString += "\n";
+                resultString += "<br/>";
             }
 
             // display the feedback
             resultString += "Feedback: " + thisResult.feedback;
         }
 
         // show the result to the student
-        alert(resultString);
+        //alert(resultString);
+
+        // remember the feedback string
+        this.autoFeedbackString = resultString;
+
+        // show the auto feedback in a modal dialog
+        this.$mdDialog.show(
+            this.$mdDialog.alert()
+            .parent(angular.element(document.querySelector('#feedbackDiv')))
+            .clickOutsideToClose(true)
+            .title('Feedback')
+            .htmlContent(resultString)
+            .ariaLabel('Feedback')
+            .ok('Close')
+        );
+    }
+
+    /**
+     * Show the auto feedback that was generated when the student previously
+     * clicked "Check Answer".
+     */
+    showAutoFeedback() {
+
+        // show the auto feedback in a modal dialog
+        this.$mdDialog.show(
+            this.$mdDialog.alert()
+            .parent(angular.element(document.querySelector('#feedbackDiv')))
+            .clickOutsideToClose(true)
+            .title('Feedback')
+            .htmlContent(this.autoFeedbackString)
+            .ariaLabel('Feedback')
+            .ok('Close')
+        );
     }
 };
 

diff --git a/src/main/webapp/wise5/components/conceptMap/conceptMapController.js b/src/main/webapp/wise5/components/conceptMap/conceptMapController.js
diff --git a/src/main/webapp/wise5/components/conceptMap/conceptMapController.js.map b/src/main/webapp/wise5/components/conceptMap/conceptMapController.js.map
diff --git a/src/main/webapp/wise5/components/conceptMap/index.html b/src/main/webapp/wise5/components/conceptMap/index.html
@@ -198,6 +198,10 @@
                     </div>
                     <button ng-click="conceptMapController.resetConceptMap()">Reset</button>
                     <button ng-click="conceptMapController.checkAnswer()">Check Answer</button>
+                    <button ng-click="conceptMapController.showAutoFeedback()"
+                            ng-show="conceptMapController.autoFeedbackString != null && conceptMapController.autoFeedbackString != ''">
+                            Show Feedback
+                    </button>
                     <div id="conceptMapContainer" style="display: flex">
                         <div id="selectNodeBar" style="flex: 10; border: 1px solid black">
                             <div ng-repeat="availableNode in conceptMapController.availableNodes"
@@ -251,7 +255,7 @@
                             </div>
                         </div>
                     </div>
-
+                    <div id="feedbackDiv"></div>
                     <md-button class="input--textarea__action input--textarea__action--revision md-icon-button"
                                ng-click='nodeController.showRevisions($event, component.id, conceptMapController.isDisabled)'
                                ng-if="nodeController.getRevisions(component.id).length > 1">