General update

.gitignore

@@ -48,7 +48,7 @@ bower_componenets/
 runestone/*/test/build_info
 **/sphinx_settings.json
 build_info
-dist/
+/dist
 
 # IDEs
 .vscode/
@@ -57,7 +57,6 @@ dist/
 # Mac stuff
 .DS_Store
 node_modules
-runestone/dist
 runestone/.DS_Store
 runestone/assess/.DS_Store
 runestone/.DS_Store

runestone/activecode/activecode.py

@@ -71,7 +71,7 @@ def setup(app):
     %(hidecode)s %(include)s %(timelimit)s %(coach)s %(codelens)s %(enabledownload)s %(chatcodes)s %(optional)s
     data-audio='%(ctext)s' %(sourcefile)s %(datafile)s %(stdin)s %(tie)s %(dburl)s %(nopair)s
     %(cargs)s %(largs)s %(rargs)s %(iargs)s %(gradebutton)s %(caption)s %(hidehistory)s %(wasmuri)s
-    %(showlastsql)s style="visibility: hidden;">
+    %(showlastsql)s %(python3_interpreter)s style="visibility: hidden;">
 %(initialcode)s
 </textarea>
 </div>
@@ -162,6 +162,7 @@ class ActiveCode(RunestoneIdDirective):
        :nopair: -- disable pair programming features
        :dburl: url to load database for sql mode
        :showlastsql: -- Only show the last sql result in output
+       :python3_interpreter: brython (uses brython as interpreter of python3)
 
         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
@@ -217,6 +218,7 @@ class ActiveCode(RunestoneIdDirective):
             "nopair": directives.flag,
             "dburl": directives.unchanged,
             "showlastsql": directives.flag,
+            "python3_interpreter": directives.unchanged
         }
     )
 
@@ -266,6 +268,11 @@ def run(self):
         self.options["ctext"] = newcomplete
         self.options["no_of_buttons"] = no_of_buttons
 
+        if ("python3_interpreter" in self.options) and (self.options["language"]=="python3") :
+            self.options["python3_interpreter"] = "data-python3_interpreter='%s'" % self.options["python3_interpreter"]
+        else:
+            self.options["python3_interpreter"] = ""
+
         if "caption" not in self.options:
             self.options["caption"] = ""
         else:

runestone/activecode/js/acfactory.js

@@ -2,13 +2,15 @@ import { ActiveCode } from "./activecode.js";
 import JSActiveCode from "./activecode_js.js";
 import HTMLActiveCode from "./activecode_html.js";
 import SQLActiveCode from "./activecode_sql.js";
+import BrythonActiveCode from "./activecode_brython.js";
 import LiveCode from "./livecode.js";
 import {
     TimedActiveCode,
     TimedLiveCode,
     TimedJSActiveCode,
     TimedHTMLActiveCode,
     TimedSQLActiveCode,
+    TimedBrythonActiveCode,
 } from "./timed_activecode";
 import "../../common/js/jquery.highlight.js";
 
@@ -30,7 +32,12 @@ export default class ACFactory {
         if (lang === undefined) {
             lang = $(opts.orig).find("[data-lang]").data("lang");
         }
+        var text_area = $(opts.orig).find("textarea")[0]
+        var python3_interpreter = $(text_area).attr("data-python3_interpreter");
         if (opts.timed == true) {
+            if(python3_interpreter==="brython"){
+                return new TimedBrythonActiveCode(opts);   
+            }
             if (lang === "python") {
                 return new TimedActiveCode(opts);
             } else if (
@@ -50,7 +57,10 @@ export default class ACFactory {
                 return new TimedActiveCode(opts);
             }
         } else {
-            if (lang === "javascript") {
+            if ((lang ==="python3") && (python3_interpreter === "brython")){
+                return new BrythonActiveCode(opts);   
+            }
+            else if (lang === "javascript") {
                 return new JSActiveCode(opts);
             } else if (lang === "htmlmixed") {
                 return new HTMLActiveCode(opts);

runestone/activecode/js/activecode.js

@@ -66,6 +66,7 @@ export class ActiveCode extends RunestoneBase {
         this.question = $(opts.orig).find(`#${this.divid}_question`)[0];
         this.tie = $(orig).data("tie");
         this.dburl = $(orig).data("dburl");
+        this.python3_interpreter = $(orig).data("python3_interpreter");
         this.runButton = null;
         this.enabledownload = $(orig).data("enabledownload");
         this.downloadButton = null;

runestone/activecode/js/activecode_brython.js

@@ -0,0 +1,137 @@
+import { ActiveCode } from "./activecode.js";
+
+export default class BrythonActiveCode extends ActiveCode {
+    constructor(opts) {
+        super(opts);
+        opts.alignVertical = true;
+        this.python3_interpreter = $(orig).data("python3_interpreter");
+        $(this.runButton).text("Render");
+        this.editor.setValue(this.code);
+    }
+
+    async runProg() {
+        var prog = await this.buildProg(true);
+        let saveCode = "True";
+        this.saveCode = await this.manage_scrubber(saveCode);
+        $(this.output).text("");
+        if (!this.alignVertical) {
+            $(this.codeDiv).switchClass("col-md-12", "col-md-6", {
+                duration: 500,
+                queue: false,
+            });
+        }
+        $(this.outDiv).show({ duration: 700, queue: false });
+        prog = `
+        <html>
+        <head>
+            <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/brython.min.js"></script>
+            <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/brython_stdlib.min.js"></script>
+            <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/styles/default.min.css">
+            <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/highlight.min.js"></script>
+            <style>
+                html, body{
+                    height: max-content; width: 100%;
+                }
+                .container-pre{
+                    background: white; font-size: 13px; line-height: 1.42857143; border: 1px solid #ccc; border-radius: 4px; visibility: hidden;
+                    position: fixed; bottom: 0px; width: 94%; max-width: 96%; max-height: 200px; overflow: auto; clear: both; resize: both; transform: scale(1, -1);
+                }
+                pre {
+                    position: sticky; padding: 12px; transform: scale(1, -1);
+                }
+                code{
+                    border: 1px solid #ccc; border-radius: 4px;
+                }
+            </style>
+        </head>
+        <body onload='brython()'>
+            <script type='text/python'>
+import sys
+from browser import document, html
+import traceback
+preElem = html.PRE()
+logger = html.CODE()
+container = html.DIV()
+container.classList.add("container-pre")
+preElem <= logger
+container <= preElem
+class NewOut:
+    def write(self, data):
+        logger.innerHTML += str(data)
+        container.style.visibility = "visible"
+sys.stderr = sys.stdout = NewOut()
+def my_exec(code):
+    try:
+        exec(code, locals())
+        out_header = document.createElement("text")
+        out_header.innerHTML = "Output"
+        out_header.style.font = "24px 'Arial'"
+        logger.classList.add("plaintext")
+        preElem.prepend(document.createElement("br"))
+        preElem.prepend(document.createElement("br"))
+        preElem.prepend(out_header)
+        document <= container
+    except SyntaxError as err:
+        error_class = err.__class__.__name__
+        detail = err.args[0]
+        line_number = f"at line {err.lineno}"
+    except BaseException as err:
+        error_class = err.__class__.__name__
+        detail = err.args[0]
+        cl, exc, tb = sys.exc_info()
+        # When errors don't specify a line
+        try:
+            line_number = f"at line {traceback.extract_tb(tb)[-1][1]}"
+        except:
+            line_number = ""
+    else:
+        return
+    
+    # This is only done if an Exception was catched
+    result = f"'{error_class}': {detail} {line_number}"
+    print(result)
+    # Styling the pre element for error
+    error_header = document.createElement("h3")
+    error_header.innerHTML = "Error"
+    error_header.style.font = "24px 'Arial'"
+    preElem.prepend(error_header)
+    container.style.backgroundColor = "#f2dede"
+    container.style.border = "1px solid #ebccd1"
+    logger.classList.add("plaintext")
+    document <= container
+my_prog = ${JSON.stringify(prog)}
+my_exec(my_prog)
+document <= html.SCRIPT("hljs.highlightAll();")
+document <= html.SCRIPT("let container = document.querySelector('.container-pre'); let height = container.offsetHeight; document.body.style.paddingBottom = String(height)+'px';")
+            </script>
+        </body>
+        </html>
+        `;
+        this.output.srcdoc = prog;
+    }
+
+    createOutput() {
+        this.alignVertical = true;
+        var outDiv = document.createElement("div");
+        $(outDiv).addClass("ac_output");
+        if (this.alignVertical) {
+            $(outDiv).addClass("col-md-12");
+        } else {
+            $(outDiv).addClass("col-md-5");
+        }
+        this.outDiv = outDiv;
+        this.output = document.createElement("iframe");
+        $(this.output).css("background-color", "white");
+        $(this.output).css("position", "relative");
+        $(this.output).css("height", "400px");
+        $(this.output).css("width", "100%");
+        outDiv.appendChild(this.output);
+        this.outerDiv.appendChild(outDiv);
+        var clearDiv = document.createElement("div");
+        $(clearDiv).css("clear", "both"); // needed to make parent div resize properly
+        this.outerDiv.appendChild(clearDiv);
+    }
+    enableSaveLoad() {
+        $(this.runButton).text($.i18n("msg_activecode_render"));
+    }
+}

runestone/activecode/js/timed_activecode.js

@@ -8,6 +8,7 @@ import { ActiveCode } from "./activecode";
 import JSActiveCode from "./activecode_js";
 import HTMLActiveCode from "./activecode_html";
 import SQLActiveCode from "./activecode_sql";
+import BrythonActiveCode from "./activecode_brython.js";
 
 var TimedActiveCodeMixin = {
     timedInit: async function (opts) {
@@ -145,3 +146,11 @@ export class TimedSQLActiveCode extends SQLActiveCode {
     }
 }
 Object.assign(TimedSQLActiveCode.prototype, TimedActiveCodeMixin);
+
+export class TimedBrythonActiveCode extends BrythonActiveCode {
+    constructor(opts) {
+        super(opts);
+        this.timedInit(opts);
+    }
+}
+Object.assign(TimedBrythonActiveCode.prototype, TimedActiveCodeMixin);

runestone/activecode/test/_sources/T1.rst

@@ -0,0 +1 @@
+holaaaaaaaaaaaaaaa

runestone/activecode/test/_sources/T2.rst

@@ -0,0 +1 @@
+que maaaaaaaaaaaas

runestone/activecode/test/_sources/index.rst

@@ -2,6 +2,15 @@
 
 ActiveCode Test
 ===============
+
+.. toctree::
+   :caption: Contenido
+   :maxdepth: 1
+
+   T1.rst
+   T2.rst
+
+
 Note: an existing server-side test is named ``test_activecode_1``. So, we start numbering here at 2.
 
 .. activecode:: test_activecode_2
@@ -2834,3 +2843,20 @@ Support for SQL in the browser ?  Yes!
         }
 
       } // end of World class
+
+
+Trying Brython as Python 3 interpreter
+--------------------------------------
+.. activecode:: test_activecode_python3
+   :language: python3
+   :python3_interpreter: brython 
+
+   print("You can see this print inside the iframe console")
+   from browser import document, alert, html
+
+   def hello(ev):
+       alert("Hello! I'm using Brython :D")
+
+   document <= html.BUTTON("My button", id="button_alert")
+   document["button_alert"].bind("click", hello)
+