✨ Allow adding blocks from ReST

Author: zihan21206

runestone/hparsons/css/hparsons.css

@@ -10,4 +10,10 @@
     max-width: 500pt;
     margin-left: auto;
     margin-right: auto;
-}
+}
+
+.hp_question {
+    padding-left: 10px;
+    padding-top: 10px;
+    margin: 5px;
+}

runestone/hparsons/hparsons.py

@@ -16,8 +16,6 @@
 # You should have received a copy of the GNU General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 #
-from __future__ import print_function
-
 __author__ = "bmiller"
 
 from docutils import nodes
@@ -34,31 +32,26 @@
     RunestoneIdNode,
 )
 
-try:
-    from html import escape  # py3
-except ImportError:
-    from cgi import escape  # py2
-
-
 def setup(app):
     app.add_directive("hparsons", HParsonsDirective)
-    app.add_node(HParsonsNode, html=(visit_ac_node, depart_ac_node))
+    app.add_node(HParsonsNode, html=(visit_hp_node, depart_hp_node))
 
 
 TEMPLATE_START = """
 <div>
-<div data-component="hparsons" id=%(divid)s data-question_label="%(question_label)s">
-<div id=%(divid)s_question class="ac_question col-md-12">
+<div data-component="hparsons" id=%(divid)s data-question_label="%(question_label)s" class="alert alert-warning hparsons_section">
+<div class="hp_question col-md-12">
 """
 
 TEMPLATE_END = """
 </div>
 <div class='hparsons'></div>
-<textarea data-lang="%(language)s" id="%(divid)s_editor" 
+<textarea data-lang="%(language)s" 
     %(optional)s
     %(dburl)s
+    %(textentry)s
     style="visibility: hidden;">
-%(initialcode)s
+%(initialsetting)s
 </textarea>
 </div>
 </div>
@@ -74,10 +67,7 @@ def __init__(self, options, **kwargs):
 # self for these functions is an instance of the writer class.  For example
 # in html, self is sphinx.writers.html.SmartyPantsHTMLTranslator
 # The node that is passed as a parameter is an instance of our node class.
-def visit_ac_node(self, node):
-    # print self.settings.env.activecodecounter
-
-    # todo:  handle above in node.runestone_options
+def visit_hp_node(self, node):
 
     node.delimiter = "_start__{}_".format(node.runestone_options["divid"])
 
@@ -87,11 +77,7 @@ def visit_ac_node(self, node):
     self.body.append(res)
 
 
-def depart_ac_node(self, node):
-    """This is called at the start of processing an activecode node.  If activecode had recursive nodes
-    etc and did not want to do all of the processing in visit_ac_node any finishing touches could be
-    added here.
-    """
+def depart_hp_node(self, node):
     res = TEMPLATE_END % node.runestone_options
     self.body.append(res)
 
@@ -104,37 +90,28 @@ def depart_ac_node(self, node):
     self.body.remove(node.delimiter)
 
 
-def process_activcode_nodes(app, env, docname):
-    pass
-
-
-def purge_activecodes(app, env, docname):
-    pass
-
-
 class HParsonsDirective(RunestoneIdDirective):
     # only keep: language, autograde, dburl
     """
-    .. activecode:: uniqueid
-       :autograde: unittest
-       :language: python, html, javascript, java, python2, python3
-       :dburl: url to load database for sql mode
-       :showlastsql: -- Only show the last sql result in output
-
-        If this is a homework problem instead of an example in the text
-        then the assignment text should go here.  The assignment text ends with
-        the line containing four tilde ~
-        ~~~~
-        print("Hidden code before students code - good for scaffolding")
-        ^^^^
-        print("hello world")
-        ====
-        print("Hidden code, such as unit tests come after the four = signs")
+    .. hparsons:: uniqueid
+       :language: sql, regex
+       :dburl: only for sql -- url to load database
 
-    config values (conf.py):
+       :textentry: if you will use text entry instead of horizontal parsons
 
-    - activecode_div_class - custom CSS class of the component's outermost div
-    - activecode_hide_load_history - if True, hide the load history button
+        Here is the problem description. It must ends with the tildes.
+        Make sure you use the correct delimitier for each section below.
+        ~~~~
+        --blocks--
+        block 1
+        block 2
+        --explanations--
+        explanations for block 1
+        explanations for block 2
+        --unittest--
+        assert 1,1 == world
+        assert 0,1 == hello
+        assert 2,1 == 42
     """
 
     required_arguments = 1
@@ -143,22 +120,21 @@ class HParsonsDirective(RunestoneIdDirective):
     option_spec = RunestoneIdDirective.option_spec.copy()
     option_spec.update(
         {
-            "language": directives.unchanged,
             "dburl": directives.unchanged,
-            "showlastsql": directives.flag,
+            "language": directives.unchanged,
+            "textentry": directives.flag,
         }
     )
 
     def run(self):
         super(HParsonsDirective, self).run()
 
         env = self.state.document.settings.env
-        # keep track of how many activecodes we have....
-        # could be used to automatically make a unique id for them.
-        if not hasattr(env, "activecodecounter"):
-            env.activecodecounter = 0
-        env.activecodecounter += 1
-        self.options["name"] = self.arguments[0].strip()
+
+        if "textentry" in self.options:
+            self.options['textentry'] = ' data-textentry="true"'
+        else:
+            self.options['textentry'] = ''
 
         explain_text = None
         if self.content:
@@ -173,14 +149,9 @@ def run(self):
         self.explain_text = explain_text or ["Not an Exercise"]
         addQuestionToDB(self)
 
-        self.options["initialcode"] = source
-        str = source.replace("\n", "*nline*")
-        str0 = str.replace('"', "*doubleq*")
-        str1 = str0.replace("(", "*open*")
-        str2 = str1.replace(")", "*close*")
-        str3 = str2.replace("'", "*singleq*")
-        self.options["argu"] = str3
+        self.options["initialsetting"] = source
 
+        # TODO: change this
         if "language" not in self.options:
             self.options["language"] = "python"
 
@@ -234,6 +205,7 @@ def run(self):
 
         maybeAddToAssignment(self)
         if explain_text:
+            self.updateContent()
             self.state.nested_parse(explain_text, self.content_offset, acnode)
 
         return [acnode]

runestone/hparsons/js/horizontal-parsons.js

@@ -15723,12 +15723,12 @@ class HParsonsElement extends HTMLElement {
         sheet.innerHTML += '.hparsons-tip { font-style: italic; }\n';
         sheet.innerHTML += '.parsons-block {display: inline-block; font-family: monospace; border-color:gray; margin: 0 1px; position: relative; border-radius: 10px; background-color: #efefef; border: 1px solid #d3d3d3; padding: 5px 10px; margin-top: 5px;}\n';
         sheet.innerHTML += '.parsons-block:hover, .parsons-block:focus { border-color: black;}\n';
-        sheet.innerHTML += '.drop-area { background-color: #ffa; padding: 0 5px; height: 42px; }\n';
+        sheet.innerHTML += '.drop-area { background-color: #ffa; padding: 0 5px; height: 42px; margin: 2px 0;}\n';
         // TODO:(UI) move the tooltip to the top of the line
         sheet.innerHTML += '.parsons-block .tooltip { visibility: hidden; width: 200px;  background-color: black; color: #fff; text-align: center; padding: 5px 0; border-radius: 6px;  position: absolute; z-index: 1; margin: 0 10px; bottom: 120%; margin-left: -100px;}\n';
         sheet.innerHTML += '.parsons-block .tooltip::after {content: " ";position: absolute; top: 100%;left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: black transparent transparent transparent;}\n';
         sheet.innerHTML += '.drag-area .parsons-block:hover .tooltip { visibility: visible;}\n';
-        sheet.innerHTML += '.drag-area { background-color: #efefff; padding: 0 5px; height: 42px; }\n';
+        sheet.innerHTML += '.drag-area { background-color: #efefff; padding: 0 5px; height: 42px; margin: 2px 0; }\n';
         // unittest
         this.root.appendChild(sheet);
         const global_sheet = document.createElement('style');

runestone/hparsons/js/hparsons-sql.js

@@ -2,6 +2,7 @@ import Handsontable from "handsontable";
 // import 'handsontable/dist/handsontable.full.css';
 import initSqlJs from "sql.js/dist/sql-wasm.js";
 import RunestoneBase from "../../common/js/runestonebase.js";
+import "../css/hparsons.css";
 
 var allDburls = {};
 
@@ -24,7 +25,6 @@ export default class SQLHParons extends RunestoneBase {
         this.origElem = orig;
         this.origText = this.origElem.textContent;
         this.code = $(orig).text() || "\n\n\n\n\n";
-        this.question = $(opts.orig).find(`#${this.divid}_question`)[0];
         this.dburl = $(orig).data("dburl");
         this.runButton = null;
         this.saveButton = null;
@@ -38,7 +38,7 @@ export default class SQLHParons extends RunestoneBase {
             this.prefix = this.code.substring(0, prefixEnd);
             this.code = this.code.substring(prefixEnd + 5);
         }
-        suffStart = this.code.indexOf("====");
+        suffStart = this.code.indexOf("--unittest--");
         if (suffStart > -1) {
             this.suffix = this.code.substring(suffStart + 5);
             this.code = this.code.substring(0, suffStart);
@@ -139,11 +139,19 @@ export default class SQLHParons extends RunestoneBase {
     // copied from activecode, already modified to add parsons
     createEditor() {
         this.outerDiv = document.createElement("div");
-        $(this.outerDiv).addClass("hparsons_section alert alert-warning");
         $(this.origElem).replaceWith(this.outerDiv);
         this.outerDiv.innerHTML = `<horizontal-parsons input-type='parsons' id='${this.divid}-hparsons'>`;
+        console.log(this.code);
+        let blocks = [];
+        let blockIndex = this.code.indexOf('--blocks--');
+        if (blockIndex > -1) {
+            let blocksString = this.code.substring(blockIndex + 10);
+            let endIndex = blocksString.indexOf('\n--');
+            blocksString = endIndex > -1 ? blocksString.substring(0, endIndex) : blocksString;
+            blocks = blocksString.split('\n');
+        }
         this.hparsons = $(this.outerDiv).find("horizontal-parsons")[0];
-        this.hparsons.parsonsData = ['select', '*', 'from', 'test', ';'];
+        this.hparsons.parsonsData = blocks.slice(1, -1);
     }
 
     // copied from activecode
@@ -184,13 +192,6 @@ export default class SQLHParons extends RunestoneBase {
 
         // TODO: maybe remove the question part
         $(this.outerDiv).prepend(ctrlDiv);
-        if (this.question) {
-            if ($(this.question).html().match(/^\s+$/)) {
-                $(this.question).remove();
-            } else {
-                $(this.outerDiv).prepend(this.question);
-            }
-        }
         this.controlDiv = ctrlDiv;
     }
 

runestone/hparsons/test/_sources/index.rst

@@ -4,16 +4,21 @@ Horizontal Parsons Test
 
 .. Testing horizontal Parsons problems.
 
-Horizontal Parsons + SQL  aaa
+Horizontal Parsons + SQL
 --------------------------------------
 .. hparsons:: test_activecode_6
     :language: sql
-    :autograde: unittest
     :dburl: /_static/test.db
 
-    select * from test;
 
-    =====
+    this is a cute horizontal parsons problem!
+    ~~~~
+    --blocks--
+    select
+    *
+    from
+    test
+    --unittest--
     assert 1,1 == world
     assert 0,1 == hello
     assert 2,1 == 42