Merge branch 'hparson-math-mode-fix-1'

Author: bnmnetp

bases/rsptx/interactives/package-lock.json

@@ -43,7 +43,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.6/micro-parsons-0.1.6.tgz",
+        "micro-parsons": "https://github.com/RunestoneInteractive/micro-parsons-element/releases/download/v0.1.7/micro-parsons-0.1.7.tgz",
         "select2": "^4.1.0-rc.0",
         "sql.js": "1.5.0",
         "vega-embed": "3.14.0",

bases/rsptx/interactives/package.json

@@ -9,6 +9,7 @@ export default class BlockFeedback extends HParsonsFeedback {
         this.messageDiv = document.createElement("div");
         this.hparsons.outerDiv.appendChild(this.messageDiv);
     }
+    
     customizeUI() {
         this.hparsons.runButton.textContent = "Check Me";
     }
@@ -18,12 +19,9 @@ export default class BlockFeedback extends HParsonsFeedback {
         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;
+        const solutionIndices = this.hparsons.blockAnswer.map(Number);
+        this.solution = solutionIndices;
+        this.grader.solution = solutionIndices;
         this.answerArea = this.hparsons.hparsonsInput.querySelector('.drop-area');
     }
 
@@ -38,7 +36,7 @@ export default class BlockFeedback extends HParsonsFeedback {
         let act = {
             scheme: "block",
             correct: this.grader.graderState == 'correct' ? "T" : "F",
-            answer: this.hparsons.hparsonsInput.getParsonsTextArray(),
+            answer: this.hparsons.hparsonsInput.getBlockIndices(),
             percent: this.grader.percent
         }
         let logData = {
@@ -57,7 +55,7 @@ export default class BlockFeedback extends HParsonsFeedback {
         if (!this.solved) {
             this.checkCount++;
             this.clearFeedback();
-            this.grader.answer = this.hparsons.hparsonsInput.getParsonsTextArray();
+            this.grader.answer = this.hparsons.hparsonsInput.getBlockIndices();
             this.grade = this.grader.grade();
             if (this.grade == "correct") {
                 this.hparsons.runButton.disabled = true;
@@ -100,7 +98,7 @@ export default class BlockFeedback extends HParsonsFeedback {
             var notInSolution = [];
             for (let i = 0; i < answerBlocks.length; i++) {
                 var block = answerBlocks[i];
-                var index = this.solution.indexOf(block.textContent);
+                var index = this.solution.indexOf(Number(block.dataset.index));
                 if (index == -1) {
                     notInSolution.push(block);
                 } else {

bases/rsptx/interactives/runestone/hparsons/js/BlockFeedback.js

@@ -27,7 +27,7 @@ export default class HParsons extends RunestoneBase {
         this.isBlockGrading = this.parseBooleanAttribute(orig, "data-blockanswer");
         this.language = orig.getAttribute("data-language");
         // Detect math mode
-        if (this.language === undefined && orig.textContent.includes('span class="process-math"')) {
+        if ((this.language == null) && orig.textContent.includes('span class="process-math"')) {
             this.language = "math";
         }
         if (this.isBlockGrading) {
@@ -54,9 +54,6 @@ export default class HParsons extends RunestoneBase {
         this.controlDiv = null;
         this.processContent(this.code);
 
-        this.microParsonToRaw = new Map();
-        this.simulatedSolution = [];
-
         // Change to factory when more execution based feedback is included
         if (this.isBlockGrading) {
             this.feedbackController = new BlockFeedback(this);
@@ -131,7 +128,7 @@ export default class HParsons extends RunestoneBase {
         this.hparsonsInput = this.outerDiv.querySelector("micro-parsons");
         this.renderMathInBlocks();
         // Change "code" to "answer" in parsons direction for non-code languages
-        if (this.language === undefined || this.language === "math") {
+        if (this.language == null || this.language === "math") {
             this.outerDiv.querySelectorAll(".hparsons-tip").forEach(el => {
                 if (el.textContent.includes("our code")) {
                     el.textContent = el.textContent.replace("our code", "our answer");
@@ -192,54 +189,9 @@ export default class HParsons extends RunestoneBase {
             const blocks = document.querySelectorAll(`#${this.divid}-container .parsons-block`);
             blocks.forEach(block => {
                 block.innerHTML = this.decodeHTMLEntities(block.innerHTML);
+                this.queueMathJax(block);
             });
-
-            if (window.MathJax && MathJax.typesetPromise) {
-                MathJax.typesetPromise().then(() => this.simulateSolution());
-            }
-        }, 0);
-    }
-
-    /*
-        This function performs a simulated "correct answer" ordering using the
-        correct block indices specified in `this.blockAnswer`. It looks ahead 
-        at the rendered content from the MicroParsons widget to build:
-        - this.simulatedSolution: an array of correctly ordered rendered strings
-        - this.microParsonToRaw: a Map that links rendered HTML (from MicroParsons) 
-          to their original raw `<m>` source strings from PreTeXt
-
-        This is called after MathJax renders the math blocks to ensure the mapping
-        is built from the final, visible DOM state. It is needed for grading 
-        math-mode Parsons problems, where rendered symbols (e.g., “\(\alpha\)”) must
-        be matched against author-defined symbolic content.
-    */
-    simulateSolution() {
-        if (
-            this.simulatedSolution.length > 0 &&
-            this.microParsonToRaw instanceof Map &&
-            this.microParsonToRaw.size > 0
-        ) { // Already initialized from local storage
-            this.feedbackController.solution = this.simulatedSolution;
-            this.feedbackController.grader.solution = this.simulatedSolution;
-            return; 
-        }
-
-        this.microParsonToRaw = new Map();
-
-        const allBlocks = Array.from(
-            this.outerDiv.querySelectorAll("micro-parsons .parsons-block")
-        );
-        if (!this.blockAnswer || allBlocks.length === 0) return;
-
-        const rendered = this.hparsonsInput.getParsonsTextArray();
-        const raw = this.originalBlocks;
-        const correctOrder = this.blockAnswer.map(Number);
-
-        this.simulatedSolution = correctOrder.map(i => rendered[i]);
-        rendered.forEach((r, i) => this.microParsonToRaw.set(r, raw[i].trim()));
-
-        this.feedbackController.solution = this.simulatedSolution;
-        this.feedbackController.grader.solution = this.simulatedSolution;
+        }, 10);
     }
 
     // Return previous answers in local storage
@@ -268,59 +220,95 @@ export default class HParsons extends RunestoneBase {
             }
         */
         if (serverData.answer) {
-            this.hparsonsInput.restoreAnswer(serverData.answer.blocks);
+            const blocks = serverData.answer.blocks ?? serverData.answer;
+
+            if (Array.isArray(blocks) && blocks.length > 0) {
+                const first = blocks[0];
+
+                // Prefer indices (numbers or numeric strings)
+                const looksNumeric = (typeof first === "number") || (/^\d+$/.test(String(first)));
+                if (looksNumeric && this.hparsonsInput.restoreAnswerByIndices) {
+                    this.hparsonsInput.restoreAnswerByIndices(blocks.map(Number));
+                } else {
+                    this.hparsonsInput.restoreAnswer(blocks);
+                }
+            }
         }
         if (serverData.count) {
             this.feedbackController.checkCount = serverData.count;
         }
     }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
     // RunestoneBase: Load what is in local storage
     checkLocalStorage() {
         if (this.graderactive) {
             // Zihan: I think this means the component is still loading?
             return;
         }
         let localData = this.localData();
-        if (localData.answer) {
+        if (localData.answerIndices && this.hparsonsInput.restoreAnswerByIndices) {
+            this.hparsonsInput.restoreAnswerByIndices(localData.answerIndices.map(Number));
+        } else if (localData.answer) {
+            // Legacy restore (string-based)
             this.hparsonsInput.restoreAnswer(localData.answer);
+
+            // Best-effort migration: persist indices after restoring
+            if (this.isBlockGrading) {
+                const migrated = this.hparsonsInput.getBlockIndices();
+                localData.answerIndices = migrated;
+                localStorage.setItem(this.storageId, JSON.stringify(localData));
+            }
         }
         if (localData.count) {
             this.feedbackController.checkCount = localData.count;
         }
-        if (localData.simulatedSolution) {
-            this.simulatedSolution = localData.simulatedSolution;
-        }
-        if (localData.microParsonToRaw) {
-            this.microParsonToRaw = new Map(Object.entries(localData.microParsonToRaw));
-        } else {
-            this.microParsonToRaw = new Map();
-        }
     }
     // RunestoneBase: Set the state of the problem in local storage
     setLocalStorage(data) {
         let currentState = {};
         if (data == undefined) {
-            let userAnswer = this.hparsonsInput.getParsonsTextArray();
-
-            // In math mode, convert microParsons to raw before caching 
-            // Additionally, save the solution and microParson ➜ Raw map.
-            if (this.language === "math") {
-                userAnswer = userAnswer.map(sym => this.microParsonToRaw.get(sym));
-                currentState = {
-                    answer: userAnswer,
-                    simulatedSolution: this.simulatedSolution,
-                    microParsonToRaw: Object.fromEntries(this.microParsonToRaw),
-                };
-            } else {
-                currentState = {
-                    answer: userAnswer,
-                };
-            }
-            
+
             if (this.isBlockGrading) {
-                // if this is block grading, add number of previous attempts too
+                const answerIndices = this.hparsonsInput.getBlockIndices();
+                currentState = { answerIndices: answerIndices };
                 currentState.count = this.feedbackController.checkCount;
+            } else {
+                const userAnswer = this.hparsonsInput.getParsonsTextArray();
+                currentState = { answer: userAnswer };
             }
+
         } else {
             currentState = data;
         }