♻️ Further refactoring to move variables into feedback handlers

Author: zihan21206

runestone/hparsons/js/BlockFeedback.js

@@ -4,26 +4,25 @@ import BlockBasedGrader from "./blockGrader.js";
 export default class BlockFeedback extends HParsonsFeedback {
     createOutput() {
         // Block based grading output
-        this.hparsons.messageDiv = document.createElement("div");
-        this.hparsons.outerDiv.appendChild(this.hparsons.messageDiv);
+        this.messageDiv = document.createElement("div");
+        this.hparsons.outerDiv.appendChild(this.messageDiv);
     }
     customizeUI() {
         $(this.hparsons.runButton).text('Check Me');
     }
 
     init() {
-        this.hparsons.blockIndex = 0;
-        this.hparsons.checkCount = 0;
-        this.hparsons.numDistinct = 0;
-        this.hparsons.hasSolved = false;
+        this.checkCount = 0;
+        this.solved = false;
         // TODO: not sure what is the best way to do this
-        this.hparsons.grader = new BlockBasedGrader();
+        this.grader = new BlockBasedGrader();
         let solutionBlocks = [];
         for (let i = 0; i < this.hparsons.blockAnswer.length; ++i) {
             solutionBlocks.push(this.hparsons.originalBlocks[this.hparsons.blockAnswer[i]]);
         }
-        this.hparsons.solution = solutionBlocks;
-        this.hparsons.grader.solution = solutionBlocks;
+        this.solution = solutionBlocks;
+        this.grader.solution = solutionBlocks;
+        this.answerArea = this.hparsons.hparsonsInput.shadowRoot.querySelector('.drop-area');
     }
 
     // Called when check button clicked (block-based Feedback)
@@ -34,62 +33,62 @@ export default class BlockFeedback extends HParsonsFeedback {
 
     // Used for block-based feedback
     checkCurrentAnswer() {
-        if (!this.hparsons.hasSolved) {
-            this.hparsons.checkCount++;
+        if (!this.solved) {
+            this.checkCount++;
             this.clearFeedback();
-            this.hparsons.grader.answer = this.hparsons.hparsonsInput.getParsonsTextArray();
-            this.hparsons.grade = this.hparsons.grader.grade();
-            if (this.hparsons.grade == "correct") {
-                this.hparsons.hasSolved = true;
-                this.hparsons.correct = true;
+            this.grader.answer = this.hparsons.hparsonsInput.getParsonsTextArray();
+            this.grade = this.grader.grade();
+            if (this.grade == "correct") {
+                this.solved = true;
                 $(this.hparsons.runButton).prop("disabled", true);
             }
         }
     }
 
     renderFeedback() {
-        this.hparsons.grade = this.hparsons.grader.graderState;
+        this.grade = this.grader.graderState;
         var feedbackArea;
-        var answerArea = $(this.hparsons.answerArea);
-        feedbackArea = $(this.hparsons.messageDiv);
+        var answerArea = $(this.answerArea);
+        feedbackArea = $(this.messageDiv);
 
-        if (this.hparsons.grade === "correct") {
+        if (this.grade === "correct") {
             answerArea.addClass("correct");
             feedbackArea.fadeIn(100);
             feedbackArea.attr("class", "alert alert-info");
-            if (this.hparsons.checkCount > 1) {
+            if (this.checkCount > 1) {
                 feedbackArea.html(
-                    $.i18n("msg_parson_correct", this.hparsons.checkCount)
+                    $.i18n("msg_parson_correct", this.checkCount)
                 );
             } else {
                 feedbackArea.html($.i18n("msg_parson_correct_first_try"));
             }
+            this.checkCount = 0;
         }
 
-        if (this.hparsons.grade === "incorrectTooShort") {
+        if (this.grade === "incorrectTooShort") {
             // too little code
             answerArea.addClass("incorrect");
             feedbackArea.fadeIn(500);
             feedbackArea.attr("class", "alert alert-danger");
             feedbackArea.html($.i18n("msg_parson_too_short"));
         }
 
-        if (this.hparsons.grade === "incorrectMoveBlocks") {
-            var answerBlocks = this.hparsons.answerArea.children;
+        if (this.grade === "incorrectMoveBlocks") {
+            var answerBlocks = this.answerArea.children;
             var inSolution = [];
             var inSolutionIndexes = [];
             var notInSolution = [];
             for (let i = 0; i < answerBlocks.length; i++) {
                 var block = answerBlocks[i];
-                var index = this.hparsons.solution.indexOf(block.textContent);
+                var index = this.solution.indexOf(block.textContent);
                 if (index == -1) {
                     notInSolution.push(block);
                 } else {
                     inSolution.push(block);
                     inSolutionIndexes.push(index);
                 }
             }
-            var lisIndexes = this.hparsons.grader.inverseLISIndices(inSolutionIndexes);
+            var lisIndexes = this.grader.inverseLISIndices(inSolutionIndexes);
             for (let i = 0; i < lisIndexes.length; i++) {
                 notInSolution.push(inSolution[lisIndexes[i]]);
             }
@@ -105,19 +104,19 @@ export default class BlockFeedback extends HParsonsFeedback {
 
     // Feedback UI for Block-based Feedback
     clearFeedback() {
-        $(this.hparsons.answerArea).removeClass("incorrect correct");
-        var children = this.hparsons.answerArea.childNodes;
+        $(this.answerArea).removeClass("incorrect correct");
+        var children = this.answerArea.childNodes;
         for (var i = 0; i < children.length; i++) {
             $(children[i]).removeClass(
                 "correctPosition incorrectPosition"
             );
         }
-        $(this.hparsons.messageDiv).hide();
+        $(this.messageDiv).hide();
 
         // TODO: might need to change this
-        $(this.runButton).prop("disabled", false);
-        this.checkCount = 0;
-        this.hasSolved = false;
+        $(this.hparsons.runButton).prop("disabled", false);
+        // this.checkCount = 0;
+        this.solved = false;
     }
 
 }