Merge pull request #1328 from amy21206/master

Adding block-based feedback and syntax highlighting for horizontal Parsons problems

Author: bnmnetp

runestone/hparsons/css/hljs-xcode.css

@@ -46,12 +46,13 @@ def setup(app):
 TEMPLATE_END = """
 </div>
 <div class='hparsons'></div>
-<textarea data-lang="%(language)s" 
+<textarea
+    %(language)s
     %(optional)s
     %(dburl)s
-    %(textentry)s
     %(reuse)s
     %(randomize)s
+    %(blockanswer)s
     style="visibility: hidden;">
 %(initialsetting)s
 </textarea>
@@ -91,25 +92,21 @@ def depart_hp_html(self, node):
 
 
 class HParsonsDirective(RunestoneIdDirective):
-    # only keep: language, autograde, dburl
     """
     .. hparsons:: uniqueid
-       :language: sql, regex
+       :language: python, java, javscript, sql, html: only for highlighting purpose.
        :dburl: only for sql -- url to load database
        :randomize: randomize the order of horizontal parsons
-       TODO: fix textentry
        :reuse: only for parsons -- make the blocks reusable
-       :textentry: if you will use text entry instead of horizontal parsons
+       :blockanswer: 0 1 2 3 # Provide answer for block-based feedback. Please note that the number of block start from 0. If not provided, will use execution based feedback.
 
         Here is the problem description. It must ends with the tildes.
         Make sure you use the correct delimitier for each section below.
         ~~~~
         --blocks--
         block 1
         block 2
-        --explanations--
-        explanations for block 1
-        explanations for block 2
+        block 3
         --unittest--
         assert 1,1 == world
         assert 0,1 == hello
@@ -124,9 +121,9 @@ class HParsonsDirective(RunestoneIdDirective):
         {
             "dburl": directives.unchanged,
             "language": directives.unchanged,
-            "textentry": directives.flag,
             "reuse": directives.flag,
             "randomize": directives.flag,
+            "blockanswer": directives.unchanged,
         }
     )
 
@@ -135,10 +132,10 @@ def run(self):
 
         env = self.state.document.settings.env
 
-        if "textentry" in self.options:
-            self.options['textentry'] = ' data-textentry="true"'
+        if "language" in self.options:
+            self.options["language"] = "data-language='{}'".format(self.options["language"])
         else:
-            self.options['textentry'] = ''
+            self.options["language"] = ""
 
         if "reuse" in self.options:
             self.options['reuse'] = ' data-reuse="true"'
@@ -150,6 +147,11 @@ def run(self):
         else:
             self.options['randomize'] = ''
 
+        if "blockanswer" in self.options:
+            self.options["blockanswer"] = "data-blockanswer='{}'".format(self.options["blockanswer"])
+        else:
+            self.options['blockanswer'] = ''
+
         explain_text = None
         if self.content:
             if "~~~~" in self.content:
@@ -165,10 +167,6 @@ def run(self):
 
         self.options["initialsetting"] = source
 
-        # TODO: change this
-        if "language" not in self.options:
-            self.options["language"] = "python"
-
         # SQL Options
         if "dburl" in self.options:
             self.options["dburl"] = "data-dburl='{}'".format(self.options["dburl"])

runestone/hparsons/hparsons.py

@@ -0,0 +1,128 @@
+import HParsonsFeedback from "./hparsonsFeedback";
+import BlockBasedGrader from "./blockGrader.js";
+import "../../parsons/js/parsons-i18n.en.js";
+import "../../parsons/js/parsons-i18n.pt-br.js";
+
+export default class BlockFeedback extends HParsonsFeedback {
+    createOutput() {
+        // Block based grading output
+        this.messageDiv = document.createElement("div");
+        this.hparsons.outerDiv.appendChild(this.messageDiv);
+    }
+    customizeUI() {
+        $(this.hparsons.runButton).text('Check Me');
+    }
+
+    init() {
+        this.checkCount = 0;
+        this.solved = false;
+        // TODO: not sure what is the best way to do this
+        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.solution = solutionBlocks;
+        this.grader.solution = solutionBlocks;
+        this.answerArea = this.hparsons.hparsonsInput.querySelector('.drop-area');
+    }
+
+    // Called when check button clicked (block-based Feedback)
+    async runButtonHandler() {
+        this.checkCurrentAnswer();
+        this.renderFeedback();
+    }
+
+    // Used for block-based feedback
+    checkCurrentAnswer() {
+        if (!this.solved) {
+            this.checkCount++;
+            this.clearFeedback();
+            this.grader.answer = this.hparsons.hparsonsInput.getParsonsTextArray();
+            this.grade = this.grader.grade();
+            if (this.grade == "correct") {
+                $(this.hparsons.runButton).prop("disabled", true);
+                this.solved = true;
+            }
+        }
+    }
+
+    renderFeedback() {
+        this.grade = this.grader.graderState;
+        var feedbackArea;
+        var answerArea = $(this.answerArea);
+        feedbackArea = $(this.messageDiv);
+
+        if (this.grade === "correct") {
+            answerArea.addClass("correct");
+            feedbackArea.fadeIn(100);
+            feedbackArea.attr("class", "alert alert-info");
+            if (this.checkCount > 1) {
+                feedbackArea.html(
+                    $.i18n("msg_parson_correct", this.checkCount)
+                );
+            } else {
+                feedbackArea.html($.i18n("msg_parson_correct_first_try"));
+            }
+            this.checkCount = 0;
+        }
+
+        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.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.solution.indexOf(block.textContent);
+                if (index == -1) {
+                    notInSolution.push(block);
+                } else {
+                    inSolution.push(block);
+                    inSolutionIndexes.push(index);
+                }
+            }
+            var lisIndexes = this.grader.inverseLISIndices(inSolutionIndexes);
+            for (let i = 0; i < lisIndexes.length; i++) {
+                notInSolution.push(inSolution[lisIndexes[i]]);
+            }
+            answerArea.addClass("incorrect");
+            feedbackArea.fadeIn(500);
+            feedbackArea.attr("class", "alert alert-danger");
+            for (let i = 0; i < notInSolution.length; i++) {
+                $(notInSolution[i]).addClass("incorrectPosition");
+            }
+            feedbackArea.html($.i18n("msg_parson_wrong_order"));
+        }
+    }
+
+    // Feedback UI for Block-based Feedback
+    clearFeedback() {
+        $(this.answerArea).removeClass("incorrect correct");
+        var children = this.answerArea.childNodes;
+        for (var i = 0; i < children.length; i++) {
+            $(children[i]).removeClass(
+                "correctPosition incorrectPosition"
+            );
+        }
+        $(this.messageDiv).hide();
+    }
+
+    reset() {
+        if (this.solved) {
+            this.checkCount = 0;
+            $(this.hparsons.runButton).prop("disabled", false);
+            this.solved = false;
+        }
+        this.clearFeedback();
+    }
+
+}