🎉 A working version of the tool!

Author: zihan21206

runestone/hparsons/hparsons.py

@@ -91,10 +91,10 @@ class HParsonsDirective(Assessment):
 
     """
 
-    required_arguments = 0  # the div id
-    optional_arguments = 0
+    required_arguments = 1  # the div id
+    optional_arguments = 0 
     final_argument_whitespace = True
-    has_content = False
+    has_content = True 
     option_spec = Assessment.option_spec.copy()
     # seem to be defining the type of the options
     # option_spec.update({"mathjax": directives.flag})

runestone/hparsons/js/hparsons.js

@@ -22,34 +22,26 @@ if (hpList === undefined) hpList = {};
 export default class HParsons extends RunestoneBase {
     constructor(opts) {
         super(opts);
-        console.log('hparsons')
         if (opts) {
             // TODO: what is orig?
             var orig = opts.orig; // entire <pre> element that will be replaced by new HTML
             this.containerDiv = orig;
-            this.origElem = $(orig).find("pre.parsonsblocks")[0];
+            this.origElem = $(orig).find(".hparsons")[0];
+            console.log('hparsons')
             console.log(orig)
+            console.log(this.origElem)
             this.useRunestoneServices =
                 opts.useRunestoneServices || eBookConfig.useRunestoneServices;
             this.divid = orig.id;
 
             // The element that is going to be replaced
-            // this.elem = $(orig).find(".hparsons")[0];
             // Find the question text and store it in .question
             this.question = $(orig).find(`.hparsons_question`)[0];
             // TODO: idk what this is with shortanswer
-            // this.question = this.origElem.innerHTML;
-            // this.optional = false;
-            // if ($(this.origElem).is("[data-optional]")) {
-            //     this.optional = true;
-            // }
-            // if ($(this.origElem).is("[data-mathjax]")) {
-            //     this.mathjax = true;
-            // }
             this.renderHTML();
             this.caption = "hparsons";
-            // this.addCaption("runestone");
-            // this.checkServer("hparsons", true);
+            this.addCaption("runestone");
+            this.checkServer("hparsons", true);
 
             // Set the storageId (key for storing data)
             var storageId = super.localStorageKey();
@@ -63,13 +55,15 @@ export default class HParsons extends RunestoneBase {
 
     renderHTML() {
         console.log('renderhtml');
-        const div = document.createElement('regex-element');
-        div.setAttribute('input-type', 'parsons')
-        div.id = 'abcd';
-        $(this.origElem).replaceWith(div);
+        // const div = document.createElement('regex-element');
+        // div.setAttribute('input-type', 'parsons')
+        // div.id = 'abcd';
+        // console.log(this.origElem)
+        $(this.origElem).html('<regex-element id="tool-area"></regex-element>');
+        // console.log(this.origElem)
         // $(this.origElem).replaceWith(document.createElement('regex-element'));
         // $(this.elem).innerHTML = `<regex-element input-type='parsons' id="abcd"></regex-element>`;
-        console.log(div)
+        // console.log(div)
     }
 
     checkCurrentAnswer() { }

runestone/hparsons/test/_sources/index.rst

@@ -50,7 +50,7 @@ ActiveCode
 
 .. hparsons:: codeexample1
 
-   content content content
+    content content content
 
 
 

runestone/mchoice/js/mchoice.js

@@ -21,9 +21,10 @@ window.mcList = {}; // Multiple Choice dictionary
 export default class MultipleChoice extends RunestoneBase {
     constructor(opts) {
         super(opts);
-        console.log('mchoice')
         opts = opts || {};
         var orig = opts.orig; // entire <ul> element
+        console.log('mchoice')
+        console.log(orig)
         this.origElem = orig;
         this.useRunestoneServices = opts.useRunestoneServices;
         this.multipleanswers = false;

test.sh

@@ -0,0 +1,6 @@
+#!/bin/bash
+npm run build
+pip install .
+cd runestone/hparsons/test
+runestone build
+runestone serve