RunestoneInteractive / RunestoneComponents

Packaging of the Runestone tools for publishing educational materials using github pages
http://runestoneinteractive.org
Other
101 stars 225 forks source link

Brython as a Python 3 interpreter for activecode for advanced exercises #1208

Open AngelaRemolina opened 3 years ago

AngelaRemolina commented 3 years ago

I created an optional argument for activecode blocks called python3_interpreter. It can be used writing something like this:

.. activecode::
    :language: python3
    :python3_interpreter: brython

    print("You can see this print on the browser console")
    from browser import document, alert, html
    def hello(ev):
        alert("Hello world! I'm using Brython now")

    document <= html.BUTTON("My button", id="button_alert")
    document["button_alert"].bind("click", hello)

I am working on a project called PyZombis. PyZombis is an spanish course to learn how to code in Python and it is being built using Runestone. We had issues making some advance exercises of the course that involves:

  1. GUI (http://pyar.github.io/PyZombis/master/lectures/TWP50.html) / MVC (http://pyar.github.io/PyZombis/master/lectures/TWP52.html) (buttons, textbox, images)
  2. APIs (http://pyar.github.io/PyZombis/master/lectures/TWP45.html): Facebook, twitter, etc.
  3. Databases (http://pyar.github.io/PyZombis/master/lectures/TWP42.html) (sqlite queries from python)

The third one might be solved using the SQL activecode option, but the first two could not be done with any of the Runestone's tool.

This PR gives a graphic alternative for runestone. The output shows an iframe in which you can append things with the browser module that Brython offers. Note: The print() function show its output on the browser console. If there is any syntax error, it is also shown in this browser console. It would be a good idea to add a console as well for students to see their prints or mistakes in the same screen (https://github.com/angelasofiaremolinagutierrez/RunestoneComponents/issues/8)

I have also created a PR on the PyZombis project, to use Runestone with this new implementation (see here). You can try out one exercise I did trying out this activecode block with Brython here: http://pyar.github.io/PyZombis/102/lectures/TWP45.html and here is also a gif of how it works (on an exercises that works with the Facebook API showing public profile photos):

fb-exercise

AngelaRemolina commented 3 years ago

In the last commit I have added support for the brython stdlib. Also I created a console to show the errors and prints on the same output. I tried using the JOBE server but as we are running Brython not Python, the JOBE server does not support when imports from the Brython stdlib are done. (e.g. from browser import document returns a module not found error).

by default, print() will output to the web browser console and so are the error messages. sys.stderr and sys.stdout can be assigned to an object with a write() method, and this allows for the redirection of output to go to a window or text area, for example.

This can be found in the Brython documentation page And that is exactly what I did:

  1. First I redirect the sys.stderr and sys.stdout to a <code> tag I have on the html.
  2. Then inside a try except I run the code received in the textarea with exec() if there is no problem the result is shown on screen. And if there is an Exception I format the traceback received by sys.exc_info() and print in on screen.
  3. The <code> tag is highlighted with highlight.js when there is an error.

Here is a gif of how it's looking:

console-highlight-exec