add support for custom keys in question variables and fix linkage to …

…input
maths · Nov 6, 2023 · ff99a64 · ff99a64
1 parent 1bbf787
commit ff99a64
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 11 deletions.
diff --git a/corsscripts/stacksortable.js b/corsscripts/stacksortable.js
@@ -7,14 +7,16 @@
 
 export const stack_sortable = class {
 
-    constructor(state, availableId, inputId = null, options = null) {
+    constructor(state, availableId, usedId, inputId = null, options = null) {
         this.state = state;
         this.inputId = inputId;
         if (inputId != null) {
             this.input = document.getElementById(this.inputId);
         };
         this.availableId = availableId;
         this.available = document.getElementById(this.availableId);
+        this.usedId = usedId;
+        this.used = document.getElementById(this.usedId);
         // TODO : additional default options?
         this.defaultOptions = {animation: 50};
         if (options == null) {
@@ -34,9 +36,15 @@ export const stack_sortable = class {
             li.className = "list-group-item";
             this.available.append(li);
         };
-        if (this.inputId != null) {
-            this.input.value = JSON.stringify(this.state);
-            this.input.dispatchEvent(new Event("change"));
+    }
+
+    generate_used(proofSteps) {
+        for (const key in this.state.used) {
+            let li = document.createElement("li");
+            li.innerText = proofSteps[this.state.used[key]];
+            li.setAttribute("data-id", this.state.used[key]);
+            li.className = "list-group-item";
+            this.used.append(li);
         };
     }
 

diff --git a/corsscripts/stacksortable.min.js b/corsscripts/stacksortable.min.js
diff --git a/stack/cas/castext2/blocks/parsons.block.php b/stack/cas/castext2/blocks/parsons.block.php
@@ -173,11 +173,11 @@ public function compile($format, $options):  ? MP_Node {
 
         // parse steps and options separately if they exist
         $code = 'var userOpts;' . "\n";
-        $code .= 'if (typeof proofSteps === "string") {proofSteps = JSON.parse(proofSteps);}' . "\n";
+        $code .= 'if (typeof proofSteps === "string") {proofSteps = Object.fromEntries(new Map(Object.values(JSON.parse(proofSteps))));}' . "\n";
         $code .= 'if (JSON.stringify(Object.keys(proofSteps)) === JSON.stringify([ "steps", "options" ])) {' . "\n";
         $code .= 'userOpts = proofSteps["options"];' . "\n";
         $code .= 'proofSteps = proofSteps["steps"];' . "\n";
-        $code .= 'if (typeof proofSteps === "string") {proofSteps = JSON.parse(proofSteps);}' . "\n";
+        $code .= 'if (typeof proofSteps === "string") {proofSteps = Object.fromEntries(new Map(Object.values(JSON.parse(proofSteps))));}' . "\n";
         $code .= '}' . "\n";
 
         // Link up to STACK inputs
@@ -188,12 +188,20 @@ public function compile($format, $options):  ? MP_Node {
             $code .= 'var id;' . "\n";
         };
 
-        // Generate initial state
+        // Generate state
         $code .= 'var state;' . "\n";
-        $code .= 'state = {used: [], available: [...Object.keys(proofSteps)]};' . "\n";
+        // If we already have a stored state in the statestringinput input, then we use this state
+        $code .= 'let stateStore = document.getElementById(id);' . "\n";
+        $code .= 'if (stateStore.value && stateStore.value != ""){' . "\n";
+        $code .= 'state = JSON.parse(stateStore.value);}' . "\n";
+
+        // otherwise we generate the initial state based on the contents of the block
+        $code .= 'else {' . "\n";
+        $code .= 'state = {used: [], available: [...Object.keys(proofSteps)]};}' . "\n";
 
         // Create the sortable objects by filling in the container div
-        $code .= 'const sortable = new stack_sortable(state, "availableList", id, userOpts);' . "\n";
+        $code .= 'const sortable = new stack_sortable(state, "availableList", "usedList", id, userOpts);' . "\n";
+        $code .= 'sortable.generate_used(proofSteps);' . "\n";
         $code .= 'sortable.generate_available(proofSteps);' . "\n";
         if (count($inputs) > 0) {
             $code .= 'MathJax.typesetPromise();' . "\n";