✨ A working version with multiple instances of hparsons

Author: zihan21206

runestone/hparsons/js/regex-element.js

@@ -3043,9 +3043,10 @@ class ParsonsInput {
     _dragSortable;
     parentElement;
     _prevPosition;
-    constructor() {
+    constructor(parentElement) {
         this.el = document.createElement('div');
-        this.el.id = 'parsons-input';
+        this.parentElement = parentElement;
+        this.el.id = 'regextool-' + this.parentElement.toolNumber + '-parsons-input';
         this.el.append('Drag or click to select from the symbols below to form your regex');
         this._dragArea = document.createElement('div');
         this.el.appendChild(this._dragArea);
@@ -3077,7 +3078,6 @@ class ParsonsInput {
             animation: 150
         });
         this._initSortable();
-        this.parentElement = null;
     }
     getText = () => {
         let ret = '';
@@ -15506,20 +15506,18 @@ class TextInput {
     groups;
     parentElement;
     droppedText;
-    constructor() {
+    constructor(parentElement) {
+        this.parentElement = parentElement;
         this.el = document.createElement('div');
-        this.el.id = 'regex-input';
+        this.el.id = 'regextool-' + this.parentElement.toolNumber + '-regex-input';
         this.el.classList.add('regex-input');
         this.quill = null;
         this.groups = new Array();
-        // this.el.classList.add('regex-textbox')
-        // this.el.setAttribute("rows", "1");
-        this.parentElement = null;
         this.droppedText = false;
     }
     initQuill = () => {
         // initializing quill
-        this.quill = new Quill('#regex-input', {
+        this.quill = new Quill('#regextool-' + this.parentElement.toolNumber + '-regex-input', {
             modules: {
                 toolbar: false
             },
@@ -15654,20 +15652,20 @@ class TestStringInput {
     parentElement;
     slotName;
     highlightMode;
-    constructor(slotName) {
+    constructor(slotName, parentElement) {
+        this.parentElement = parentElement;
         this.el = document.createElement('div');
         this.slotName = slotName;
-        this.el.id = 'test-string-input' + slotName;
+        this.el.id = 'regextool-' + this.parentElement.toolNumber + '-test-string-input' + slotName;
         this.el.classList.add('regex-test-string');
         this.quill = null;
         // console.log(Quill);
         this.droppedText = false;
-        this.parentElement = null;
         this.highlightMode = 're.finditer';
     }
     initQuill = () => {
         // initializing quill
-        this.quill = new Quill('#test-string-input' + this.slotName, {
+        this.quill = new Quill('#regextool-' + this.parentElement.toolNumber + '-test-string-input' + this.slotName, {
             modules: {
                 toolbar: false
             },
@@ -15799,35 +15797,29 @@ class StatusOutput {
     // The input element
     el;
     text;
-    constructor() {
+    parentElement;
+    constructor(parentElement) {
+        this.parentElement = parentElement;
         this.el = document.createElement('div');
         this.text = document.createElement('textarea');
         this.el.appendChild(this.text);
-        this.text.id = 'status-output';
+        this.text.id = 'regextool-' + this.parentElement.toolNumber + '-status-output';
         this.el.classList.add('regex-textbox');
         // this.text.setAttribute("rows", "10");
         this.text.value = 'initializing...\n';
     }
 }
 
-class TestButton {
-    // The input element
-    el;
-    constructor() {
-        this.el = document.createElement('button');
-        this.el.id = 'test-button';
-        this.el.innerText = 'match!';
-    }
-}
-
 class RegexOptions {
     el;
     triggerButton;
     containerDiv;
     flags;
     buttons;
     selectedFlags;
-    constructor() {
+    parentElement;
+    constructor(parentElement) {
+        this.parentElement = parentElement;
         this.el = document.createElement('div');
         this.el.classList.add('regex-options-dropdown');
         this.triggerButton = document.createElement('button');
@@ -15910,14 +15902,16 @@ class UnitTestTable {
     // TODO: refactor this into strictgroup.
     noGroupsAllowed;
     latestResults;
+    latestStatus;
     columnsEnabled;
     parentElement;
     // for saving current index
     testcaseIndex;
-    constructor() {
+    constructor(parentElement) {
+        this.parentElement = parentElement;
         // init the element in HTML 
         this.el = document.createElement('div');
-        this.el.id = 'unittest-table';
+        this.el.id = 'regextool-' + this.parentElement.toolNumber + '-unittest-table';
         this.el.classList.add('regex-unittest');
         // the element is hidden initially.
         this.el.classList.add('collapse');
@@ -15937,13 +15931,13 @@ class UnitTestTable {
         this.testCaseCount = 0;
         this.hintRevealed = [];
         this.latestResults = [];
+        this.latestStatus = '';
         // not matching groups strictly by default
         this.strictGroup = false;
         // using strict match by default
         this.strictMatch = true;
         // allow groups by default
         this.noGroupsAllowed = false;
-        this.parentElement = null;
         this.testcaseIndex = 0;
     }
     // not used: Return value: 'Pass' if all pass, 'Error' if one error, 'Fail' if no error but at least one fail
@@ -15985,7 +15979,7 @@ class UnitTestTable {
             }
         }
         const result = { success: true, match: matches, errorMessage: null };
-        this._createRow(index, testCase, result);
+        this.latestStatus = this._createRow(index, testCase, result);
     };
     builtinRead(x) {
         if (window.Sk.builtinFiles === undefined || window.Sk.builtinFiles["files"][x] === undefined)
@@ -16011,7 +16005,7 @@ class UnitTestTable {
             read: this.builtinRead
         });
         window.Sk.importMainWithBody("<stdin>", false, pyCode, true);
-        return 'Pass';
+        return this.latestStatus;
     };
     // returns: 'Pass' if pass, 'Fail' if fail, 'Error' if error
     _createRow = (index, testCase, result) => {
@@ -16021,6 +16015,7 @@ class UnitTestTable {
         // creating the status(the first) column
         const row = document.createElement('tr');
         let status = result.success ? (JSON.stringify(result.match) === JSON.stringify(testCase.expect) ? 'Pass' : 'Fail') : 'Error';
+        console.log(status);
         // if (status == 'Pass' && JSON.stringify(testCase.expect) != '[]' && this.noGroupsAllowed && window.pyodide.globals.unit_match_group_cnt != 1) {
         //     status = 'Fail'
         //     // fail because no group is allowed
@@ -16115,7 +16110,9 @@ class RegexStatusTag {
     // The input element
     el;
     status;
-    constructor() {
+    parentElement;
+    constructor(parentElement) {
+        this.parentElement = parentElement;
         this.el = document.createElement('span');
         this.el.classList.add('regex-status');
         this.status = '';
@@ -16167,8 +16164,6 @@ class RegexElement extends HTMLElement {
     negativePrevText;
     // Python output
     statusOutput;
-    // The button to trigger matching
-    testButton;
     // *temporary: The checkbox to enable always check (will be integrated in options later)
     checkWhileTyping;
     positiveMatchResult;
@@ -16187,9 +16182,11 @@ class RegexElement extends HTMLElement {
     _testStatusDiv;
     // highlights the result using findall. used for study 1 and 2.
     matchFindall;
+    static toolCount = 0;
+    toolNumber;
     outf(text) {
-        console.log('sk output');
-        console.log(text);
+        // console.log('sk output')
+        // console.log(text)
     }
     builtinRead(x) {
         if (window.Sk.builtinFiles === undefined || window.Sk.builtinFiles["files"][x] === undefined)
@@ -16261,6 +16258,9 @@ class RegexElement extends HTMLElement {
     };
     constructor() {
         super();
+        RegexElement.toolCount += 1;
+        console.log(RegexElement.toolCount);
+        this.toolNumber = RegexElement.toolCount;
         this.root = this.attachShadow({ mode: 'open' });
         window.Sk.configure({
             output: this.outf,
@@ -16275,26 +16275,6 @@ class RegexElement extends HTMLElement {
         // unitTestButton.innerText = 'Run Unit Test';
         // this.root.appendChild(unitTestButton);
         // unitTestButton.onclick = () => this.unitTestTable.check(this.regexInput.getText());
-        // init elements: button for match
-        // TODO: disabled the button for study 0 and 1.
-        // this.root.appendChild(document.createElement('br'));
-        this.testButton = new TestButton();
-        // this.root.appendChild(this.testButton.el);
-        // this.testButton.el.onclick = this.match;
-        // init elements: checkbox
-        // TODO[feature]: replace this with an option module 
-        // const checkbox = document.createElement('input');
-        // checkbox.setAttribute('type', 'checkbox');
-        // checkbox.checked = false;
-        // this.root.appendChild(checkbox);
-        // this.root.append('always check on input');
-        // this.checkWhileTyping = false;
-        // checkbox.addEventListener('change', () => {
-        //     this.checkWhileTyping = checkbox.checked;
-        //     if (this.checkWhileTyping) {
-        //         this.match();
-        //     }
-        // })
         // TODO: make this an option; for now always enabled the 'always check' for study 0 and 1.
         this.checkWhileTyping = true;
         // a div wrapping the input and the test case status
@@ -16305,12 +16285,12 @@ class RegexElement extends HTMLElement {
         const inputDiv = document.createElement('div');
         inputAndTestStatusDiv.appendChild(inputDiv);
         inputDiv.classList.add('regex-input-div');
-        this.regexOptions = new RegexOptions();
+        this.regexOptions = new RegexOptions(this);
         this.patternValidFlag = true;
         this._parsonsData = new Array();
         this.parsonsExplanation = null;
-        this.regexStatus = new RegexStatusTag();
-        this.regexInput = new ParsonsInput();
+        this.regexStatus = new RegexStatusTag(this);
+        this.regexInput = new ParsonsInput(this);
         this.inputType = 'parsons';
         // this.regexErrorMessage = document.createElement('div');
         // this.regexErrorPosition = -1;
@@ -16340,13 +16320,12 @@ class RegexElement extends HTMLElement {
         positiveTestStringDiv.appendChild(resetPositiveTestStringButton);
         resetPositiveTestStringButton.innerText = 'Reset';
         resetPositiveTestStringButton.onclick = this.resetPositiveTestString;
-        this.positiveTestStringInput = new TestStringInput('positive');
+        this.positiveTestStringInput = new TestStringInput('positive', this);
         this.positiveTestStringInput.slotName = 'positive';
         this.appendChild(this.positiveTestStringInput.el);
         this.positiveTestStringInput.el.slot = 'positive-test-string-input';
         this.positiveTestStringInput.initQuill();
         this.positivePrevText = this.positiveTestStringInput.getText();
-        this.positiveTestStringInput.parentElement = this;
         this.positiveTestStringInput.quill?.on('text-change', (delta, _, source) => {
             if (source == 'user') {
                 const testStringInputEvent = {
@@ -16384,13 +16363,12 @@ class RegexElement extends HTMLElement {
         negativeTestStringDiv.appendChild(resetNegativeTestStringButton);
         resetNegativeTestStringButton.innerText = 'Reset';
         resetNegativeTestStringButton.onclick = this.resetNegativeTestString;
-        this.negativeTestStringInput = new TestStringInput('negative');
+        this.negativeTestStringInput = new TestStringInput('negative', this);
         this.negativeTestStringInput.slotName = 'negative';
         this.appendChild(this.negativeTestStringInput.el);
         this.negativeTestStringInput.el.slot = 'negative-test-string-input';
         this.negativeTestStringInput.initQuill();
         this.negativePrevText = this.negativeTestStringInput.getText();
-        this.negativeTestStringInput.parentElement = this;
         this.negativeTestStringInput.quill?.on('text-change', (delta, _, source) => {
             if (source == 'user') {
                 const testStringInputEvent = {
@@ -16417,11 +16395,10 @@ class RegexElement extends HTMLElement {
             }
         });
         // init element: unit test table
-        this.unitTestTable = new UnitTestTable();
-        this.unitTestTable.parentElement = this;
+        this.unitTestTable = new UnitTestTable(this);
         this.root.appendChild(this.unitTestTable.el);
         // init element: python output
-        this.statusOutput = new StatusOutput();
+        this.statusOutput = new StatusOutput(this);
         this.root.appendChild(this.statusOutput.el);
         // initialize the match result array
         this.positiveMatchResult = new Array();
@@ -16857,13 +16834,13 @@ class RegexElement extends HTMLElement {
         this._parsonsData = new Array();
         this.parsonsExplanation = null;
         inputDiv.append('Your regular expression:');
-        this.regexStatus = new RegexStatusTag();
+        this.regexStatus = new RegexStatusTag(this);
         inputDiv.appendChild(this.regexStatus.el);
         inputDiv.appendChild(document.createElement('br'));
         // todo:(UI) fix the css for the input
         if (this.inputType == 'parsons') {
             // init elements: parsons regex input
-            this.regexInput = new ParsonsInput();
+            this.regexInput = new ParsonsInput(this);
             inputDiv.appendChild(this.regexInput.el);
             this.regexInput.el.addEventListener('regexChanged', () => {
                 this.regexInput.removeFormat();
@@ -16923,7 +16900,7 @@ class RegexElement extends HTMLElement {
             regex_slot.name = 'regex-input';
             inputDiv.appendChild(regex_slot);
             // TODO: (refactor) rename RegexInput
-            this.regexInput = new TextInput();
+            this.regexInput = new TextInput(this);
             this.appendChild(this.regexInput.el);
             this.regexInput.el.slot = 'regex-input';
             this.regexInput.initQuill();
@@ -16985,13 +16962,12 @@ class RegexElement extends HTMLElement {
                 }
             });
         }
-        this.regexInput.parentElement = this;
         // this.regexErrorMessage = document.createElement('div');
         // this.regexErrorMessage.classList.add('regex-error-message');
         // inputDiv.appendChild(this.regexErrorMessage);
         // this.regexErrorPosition = -1;
         // init elements: regex options dropdown
-        this.regexOptions = new RegexOptions();
+        this.regexOptions = new RegexOptions(this);
         // inputDiv.appendChild(this.regexOptions.el);
     }
     resetTool() {

runestone/hparsons/test/_sources/index.rst

@@ -53,6 +53,10 @@ ActiveCode
     content content content
 
 
+.. hparsons:: codeexample2
+
+    content content content
+
 
 Multiple Choice
 ---------------

test.sh

@@ -1,4 +1,8 @@
 #!/bin/bash
+cd ~/code/regex
+npm run build
+cd ~/code/RunestoneComponents
+cp ~/code/regex/packages/regex-element/regex-element.js ~/code/RunestoneComponents/runestone/hparsons/js/regex-element.js
 npm run build
 pip install .
 cd runestone/hparsons/test