Merge pull request #1381 from amy21206/grading

Add grading logs for horizontal Parsons (micro Parsons) problems.

Author: bnmnetp

package-lock.json

@@ -18,8 +18,8 @@
     "author": "",
     "license": "ISC",
     "devDependencies": {
-        "copy-webpack-plugin": "^9.0.0",
         "compression-webpack-plugin": "^9.0.0",
+        "copy-webpack-plugin": "^9.0.0",
         "css-loader": "^6.0.0",
         "css-minimizer-webpack-plugin": "^3.0.0",
         "html-loader": "^3.0.0",
@@ -36,6 +36,7 @@
         "handsontable": "7.2.2",
         "jexcel": "^3.9.1",
         "jquery-ui": "1.10.4",
+        "micro-parsons": "https://github.com/amy21206/micro-parsons-element/releases/download/v0.1.3/micro-parsons-0.1.3.tgz",
         "select2": "^4.1.0-rc.0",
         "sql.js": "1.5.0",
         "vega-embed": "3.14.0",

package.json

@@ -30,9 +30,25 @@ export default class BlockFeedback extends HParsonsFeedback {
     // Called when check button clicked (block-based Feedback)
     async runButtonHandler() {
         this.checkCurrentAnswer();
+        this.logCurrentAnswer();
         this.renderFeedback();
     }
 
+    async logCurrentAnswer() {
+        let act = {
+            scheme: "block",
+            correct: this.grader.graderState == 'correct' ? "T" : "F",
+            answer: this.hparsons.hparsonsInput.getParsonsTextArray(),
+            percent: this.grader.percent
+        }
+        let logData = {
+            event: "hparsonsAnswer",
+            div_id: this.hparsons.divid, 
+            act: act
+        }
+        await this.hparsons.logBookEvent(logData);
+    }
+
     // Used for block-based feedback
     checkCurrentAnswer() {
         if (!this.solved) {

runestone/hparsons/js/BlockFeedback.js

@@ -272,34 +272,20 @@ export default class SQLFeedback extends HParsonsFeedback {
     }
 
     // copied from activecode-sql
-    async logCurrentAnswer(sid) {
-        // commenting these out for now
-        // Not sure if we need to log run event in horizontal parsons
-        // let data = {
-        //     div_id: this.hparsons.divid,
-        //     code: this.hparsons.hparsonsInput.getParsonsTextArray(),
-        //     language: "sql",
-        //     // errinfo: this.results[this.results.length - 1].status,
-        //     to_save: this.hparsons.saveCode,
-        //     prefix: this.hparsons.pretext,
-        //     suffix: this.hparsons.suffix,
-        // }; // Log the run event
-        // if (typeof sid !== "undefined") {
-        //     data.sid = sid;
-        // }
-        // await this.hparsons.logRunEvent(data);
-
+    async logCurrentAnswer() {
         if (this.unit_results) {
-            let unitData = {
-                event: "unittest",
+            let act = {
+                scheme: "execution",
+                correct: (this.failed === 0 && this.percent != null) ? "T" : "F",
+                answer: this.hparsons.hparsonsInput.getParsonsTextArray(),
+                percent: this.percent // percent is null if there is execution error
+            }
+            let logData = {
+                event: "hparsonsAnswer",
                 div_id: this.hparsons.divid,
-                course: eBookConfig.course,
-                act: this.unit_results,
-            };
-            if (typeof sid !== "undefined") {
-                unitData.sid = sid;
+                act: act
             }
-            await this.hparsons.logBookEvent(unitData);
+            await this.hparsons.logBookEvent(logData);
         }
     }
 
@@ -332,6 +318,7 @@ export default class SQLFeedback extends HParsonsFeedback {
             result += "\n";
         }
         let pct = (100 * this.passed) / (this.passed + this.failed);
+        this.percent = pct;
         pct = pct.toLocaleString(undefined, { maximumFractionDigits: 2 });
         result += `You passed ${this.passed} out of ${this.passed + this.failed
             } tests for ${pct}%`;

runestone/hparsons/js/SQLFeedback.js

@@ -6,6 +6,7 @@
 export default class BlockBasedGrader {
     constructor(problem) {
         this.problem = problem;
+        this.percent = 0;
     }
     // Use a LIS (Longest Increasing Subsequence) algorithm to return the indexes
     // that are not part of that subsequence.

runestone/hparsons/js/blockGrader.js

@@ -1,20 +1,17 @@
-// import 'handsontable/dist/handsontable.full.css';
 import RunestoneBase from "../../common/js/runestonebase.js";
 import "../css/hparsons.css";
 import "../css/hljs-xcode.css";
 import BlockFeedback from "./BlockFeedback.js";
 import SQLFeedback from "./SQLFeedback.js";
+import {InitMicroParsons} from 'micro-parsons/micro-parsons/micro-parsons.js';
+import 'micro-parsons/micro-parsons/micro-parsons.css';
 
 export var hpList;
 // Dictionary that contains all instances of horizontal Parsons problem objects
 if (hpList === undefined) hpList = {};
 
-// The following js library is a custom element for micro parsons (horizontal parsons) input.
-// Currently it is not published as an npm package yet, and edits should be made through: https://github.com/amy21206/micro-parsons-element.
-// It will be replaced by importing the corresponding package in the future.
-import "./micro-parsons.js";
 
-export default class SQLHParsons extends RunestoneBase {
+export default class HParsons extends RunestoneBase {
     constructor(opts) {
         super(opts);
         // copied from activecode
@@ -67,7 +64,7 @@ export default class SQLHParsons extends RunestoneBase {
         if ($(orig).data("caption")) {
             this.caption = $(orig).data("caption");
         } else {
-            this.caption = "HorizontalParsons";
+            this.caption = "MicroParsons";
         }
         this.addCaption("runestone");
         this.indicate_component_ready();
@@ -78,22 +75,9 @@ export default class SQLHParsons extends RunestoneBase {
 
     // copied from activecode, already modified to add parsons
     createEditor() {
-        // console.log('test create editor hparsons')
         this.outerDiv = document.createElement("div");
         $(this.origElem).replaceWith(this.outerDiv);
-        let parsonsHTML = `<micro-parsons id='${this.divid}-hparsons'`;
-        parsonsHTML += ` input-type='parsons' `;
-        if (this.reuse) {
-            parsonsHTML += ` reuse-blocks="true"`;
-        }
-        if (this.randomize) {
-            parsonsHTML += ` randomize="true"`;
-        }
-        if (this.language) {
-            parsonsHTML += ` language="` + this.language + `"`;
-        }
-        parsonsHTML += `>`;
-        this.outerDiv.innerHTML = parsonsHTML;
+        this.outerDiv.id = `${this.divid}-container`;
         this.outerDiv.addEventListener("micro-parsons", (ev) => {
             this.logHorizontalParsonsEvent(ev.detail);
             this.feedbackController.clearFeedback();
@@ -109,9 +93,17 @@ export default class SQLHParsons extends RunestoneBase {
                     : blocksString;
             blocks = blocksString.split("\n");
         }
-        this.hparsonsInput = $(this.outerDiv).find("micro-parsons")[0];
         this.originalBlocks = blocks.slice(1, -1);
-        this.hparsonsInput.parsonsData = blocks.slice(1, -1);
+        const props = {
+            selector: `#${this.divid}-container`,
+            id: `${this.divid}-hparsons`,
+            reuse: this.reuse,
+            randomize: this.randomize,
+            parsonsBlocks: blocks.slice(1, -1),
+            language: this.language
+        }
+        InitMicroParsons(props);
+        this.hparsonsInput = $(this.outerDiv).find("micro-parsons")[0];
     }
 
     createOutput() {
@@ -152,8 +144,6 @@ export default class SQLHParsons extends RunestoneBase {
     }
 
     logHorizontalParsonsEvent(hparsonsEvent) {
-        // TODO: might need to find another way to change "act".
-        // The event string is probably too long.
         let ev = {
             event: "hparsons",
             div_id: this.divid,
@@ -173,7 +163,7 @@ $(document).on("runestone:login-complete", function () {
         if ($(this).closest("[data-component=timedAssessment]").length == 0) {
             // If this element exists within a timed component, don't render it here
             // try {
-            hpList[this.id] = new SQLHParsons({
+            hpList[this.id] = new HParsons({
                 orig: this,
                 useRunestoneServices: eBookConfig.useRunestoneServices,
             });
@@ -189,5 +179,5 @@ if (typeof window.component_factory === "undefined") {
     window.component_factory = {};
 }
 window.component_factory["hparsons"] = function (opts) {
-    return new SQLHParsons(opts);
+    return new HParsons(opts);
 };

runestone/hparsons/js/hparsons-sql.js runestone/hparsons/js/hparsons.jsrunestone/hparsons/js/hparsons-sql.js renamed to runestone/hparsons/js/hparsons.js

@@ -1,6 +1,7 @@
 export default class HParsonsFeedback {
     constructor(hparsons) {
         this.hparsons = hparsons;
+        this.percent = 0;
     }
     createOutput() {
         console.log('createOutput method not implemented in feedback!');

runestone/hparsons/js/hparsonsFeedback.js

@@ -38,7 +38,7 @@ def click_control(hp_question, button_name):
 def test_run_block(selenium_utils_get):
     div_id = "test_hparsons_block_1"
     hp_question = find_hp_question(selenium_utils_get, div_id)
-    hp = hp_question.find_element(By.CSS_SELECTOR, 'horizontal-parsons')
+    hp = hp_question.find_element(By.CSS_SELECTOR, 'micro-parsons')
     drag_area = hp.find_element(By.CSS_SELECTOR, '.drag-area')
     drop_area = hp.find_element(By.CSS_SELECTOR, '.drop-area')
     run_btn = hp_question.find_elements(By.TAG_NAME, 'button')[0]
@@ -106,7 +106,7 @@ def test_run_block(selenium_utils_get):
 def test_randomize_block(selenium_utils_get):
     div_id = "test_hparsons_sql_1"
     hp = find_hp_question(selenium_utils_get, div_id).find_element(
-        By.CSS_SELECTOR, 'horizontal-parsons')
+        By.CSS_SELECTOR, 'micro-parsons')
     original_sequence = ['SELECT', '*', 'FROM', 'test']
     randomized_sequence = []
     for block in hp.find_element(By.CSS_SELECTOR, '.drag-area').find_elements(By.CSS_SELECTOR, '.parsons-block'):
@@ -134,7 +134,7 @@ def test_randomize_block(selenium_utils_get):
 def test_add_and_remove_blocks(selenium_utils_get):
     div_id = "test_hparsons_sql_1"
     hp = find_hp_question(selenium_utils_get, div_id).find_element(
-        By.CSS_SELECTOR, 'horizontal-parsons')
+        By.CSS_SELECTOR, 'micro-parsons')
     drag_area = hp.find_element(By.CSS_SELECTOR, '.drag-area')
     drop_area = hp.find_element(By.CSS_SELECTOR, '.drop-area')
 
@@ -154,7 +154,7 @@ def test_add_and_remove_blocks(selenium_utils_get):
     # For reusable blocks
     div_id = "test_hparsons_sql_2"
     hp = find_hp_question(selenium_utils_get, div_id).find_element(
-        By.CSS_SELECTOR, 'horizontal-parsons')
+        By.CSS_SELECTOR, 'micro-parsons')
     drag_area = hp.find_element(By.CSS_SELECTOR, '.drag-area')
     drop_area = hp.find_element(By.CSS_SELECTOR, '.drop-area')
 
@@ -184,7 +184,7 @@ def test_run_SQL(selenium_utils_get):
     div_id = "test_hparsons_sql_2"
     hp_question = find_hp_question(selenium_utils_get, div_id)
     time.sleep(2)
-    hp = hp_question.find_element(By.CSS_SELECTOR, 'horizontal-parsons')
+    hp = hp_question.find_element(By.CSS_SELECTOR, 'micro-parsons')
     drag_area = hp.find_element(By.CSS_SELECTOR, '.drag-area')
     drop_area = hp.find_element(By.CSS_SELECTOR, '.drop-area')
 

runestone/hparsons/js/micro-parsons.js

@@ -70,7 +70,7 @@ const module_map = {
     khanex: () => import("./runestone/khanex/js/khanex.js"),
     lp_build: () => import("./runestone/lp/js/lp.js"),
     multiplechoice: () => import("./runestone/mchoice/js/timedmc.js"),
-    hparsons: () => import("./runestone/hparsons/js/hparsons-sql.js"),
+    hparsons: () => import("./runestone/hparsons/js/hparsons.js"),
     parsons: () => import("./runestone/parsons/js/timedparsons.js"),
     poll: () => import("./runestone/poll/js/poll.js"),
     quizly: () => import("./runestone/quizly/js/quizly.js"),