✨ Add block-based feedback to horizontal parsons problems

Author: zihan21206

runestone/hparsons/hparsons.py

@@ -52,6 +52,7 @@ def setup(app):
     %(textentry)s
     %(reuse)s
     %(randomize)s
+    %(blockanswer)s
     style="visibility: hidden;">
 %(initialsetting)s
 </textarea>
@@ -100,13 +101,15 @@ class HParsonsDirective(RunestoneIdDirective):
        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
+        block 3
         --explanations--
         explanations for block 1
         explanations for block 2
@@ -127,6 +130,7 @@ class HParsonsDirective(RunestoneIdDirective):
             "textentry": directives.flag,
             "reuse": directives.flag,
             "randomize": directives.flag,
+            "blockanswer": directives.unchanged,
         }
     )
 
@@ -150,6 +154,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:

runestone/hparsons/js/blockGrader.js

@@ -0,0 +1,110 @@
+// This file is adapted from lineGrader in parsons directive.
+// We could have fit our data structure to use the original LineBasedGrader directly,
+// but that would result in changes in parsons directive affecting this, so we created a copy
+// instead.
+
+export default class BlockBasedGrader {
+    constructor(problem) {
+        this.problem = problem;
+    }
+    // Use a LIS (Longest Increasing Subsequence) algorithm to return the indexes
+    // that are not part of that subsequence.
+    inverseLISIndices(arr) {
+        // Get all subsequences
+        var allSubsequences = [];
+        for (var i = 0; i < arr.length; i++) {
+            var subsequenceForCurrent = [arr[i]],
+                current = arr[i],
+                lastElementAdded = -1;
+            for (var j = i; j < arr.length; j++) {
+                var subsequent = arr[j];
+                if (subsequent > current && lastElementAdded < subsequent) {
+                    subsequenceForCurrent.push(subsequent);
+                    lastElementAdded = subsequent;
+                }
+            }
+            allSubsequences.push(subsequenceForCurrent);
+        }
+        // Figure out the longest one
+        var longestSubsequenceLength = -1;
+        var longestSubsequence;
+        for (let i in allSubsequences) {
+            var subs = allSubsequences[i];
+            if (subs.length > longestSubsequenceLength) {
+                longestSubsequenceLength = subs.length;
+                longestSubsequence = subs;
+            }
+        }
+        // Create the inverse indexes
+        var indexes = [];
+        var lIndex = 0;
+        for (let i = 0; i < arr.length; i++) {
+            if (lIndex > longestSubsequence.length) {
+                indexes.push(i);
+            } else {
+                if (arr[i] == longestSubsequence[lIndex]) {
+                    lIndex += 1;
+                } else {
+                    indexes.push(i);
+                }
+            }
+        }
+        return indexes;
+    }
+    // grade that element, returning the state
+    grade() {
+        this.correctLines = 0;
+        this.percentLines = 0;
+        var solutionLines = this.solution;
+        var answerLines = this.answer;
+        var i;
+        var state;
+        this.percentLines =
+            Math.min(answerLines.length, solutionLines.length) /
+            Math.max(answerLines.length, solutionLines.length);
+        if (answerLines.length < solutionLines.length) {
+            state = "incorrectTooShort";
+            this.correctLength = false;
+        } else if (answerLines.length == solutionLines.length) {
+            this.correctLength = true;
+        } else {
+            this.correctLength = false;
+        }
+
+        // Determine whether the code **that is there** is in the correct order
+        // If there is too much or too little code this only matters for
+        // calculating a percentage score.
+        let isCorrectOrder = true;
+        this.correctLines = 0;
+        this.solutionLength = solutionLines.length;
+        let loopLimit = Math.min(solutionLines.length, answerLines.length);
+        for (i = 0; i < loopLimit; i++) {
+            if (answerLines[i] !== solutionLines[i]) {
+                isCorrectOrder = false;
+            } else {
+                this.correctLines += 1;
+            }
+        }
+
+        if (
+            isCorrectOrder &&
+            this.correctLength
+        ) {
+            // Perfect
+            state = "correct";
+        } else if (!isCorrectOrder && state != "incorrectTooShort") {
+            state = "incorrectMoveBlocks";
+        }
+        this.calculatePercent();
+        this.graderState = state;
+        return state;
+    }
+
+    calculatePercent() {
+        let numLines = this.percentLines * 0.2;
+        let lines = this.answer.length;
+        let numCorrectBlocks = (this.correctLines / lines) * 0.8;
+
+        this.percent = numLines + numCorrectBlocks;
+    }
+}

runestone/hparsons/js/horizontal-parsons.js

@@ -15513,8 +15513,11 @@ class HParsonsElement extends HTMLElement {
         sheet.innerHTML += '.hparsons-input {padding: 15px;}\n';
         sheet.innerHTML += '.hparsons-tip { font-style: italic; }\n';
         sheet.innerHTML += '.parsons-block {display: inline-block; font-family: monospace; border-color:gray; margin: 0 1px; position: relative; border-radius: 10px; background-color: #efefef; border: 1px solid #d3d3d3; padding: 5px 10px; margin-top: 5px;}\n';
+        sheet.innerHTML += '.parsons-block.incorrectPosition {background-color: #ffbaba; border: 1px solid red;}\n';
         sheet.innerHTML += '.parsons-block:hover, .parsons-block:focus { border-color: black;}\n';
         sheet.innerHTML += '.drop-area { background-color: #ffa; padding: 0 5px; height: 42px; margin: 2px 0;}\n';
+        sheet.innerHTML += '.drop-area.incorrect { background-color: #f2dede; border-color: #f2b6b6}\n';
+        sheet.innerHTML += '.drop-area.correct { background-color: #dff0d8; border-color: #ade595}\n';
         // TODO:(UI) move the tooltip to the top of the line
         sheet.innerHTML += '.parsons-block .tooltip { visibility: hidden; width: 200px;  background-color: black; color: #fff; text-align: center; padding: 5px 0; border-radius: 6px;  position: absolute; z-index: 1; margin: 0 10px; bottom: 120%; margin-left: -100px;}\n';
         sheet.innerHTML += '.parsons-block .tooltip::after {content: " ";position: absolute; top: 100%;left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: black transparent transparent transparent;}\n';