Console output to text_area

Anvil Q&A
1

I am trying to make a front end code editor similar to something like replit. com. I am using the example project from this post code-mirror to be able to write formatted code. I am using exec() to execute the formatted code. This works fine, but it gives me the access to the variables from the code, but I want the output from the code. It is not much more than the code-mirror project.

Here is a link to what I have so far. Clone of DEMO - CodeMirror

Any help would be appreciated.

2

Welcome to the forum!

You might find the duck coding example instructional: Toy educational Python IDE It shows how to integrate your own version of print to capture the output to a text area in the exec’d code. Ignore all the bits that deal with the canvas, and focus on the setup of the globals for the exec’d code in the run_code function.

3

@jshaffstall Thanks. Can you share the link that lets me clone your project?

4

If you follow the link I posted, it goes to the original forum post, which has a clone link in it.

5

@jshaffstall Thanks. That is a neat app. It gives me some ideas for another project that I have been thinking about, but unless, I am missing something it does not help with my current problem.

I have a textbook where the user can enter code. I want to take the output of the code and display it in a text_area. Given the code below, I would like to display “The sum of numbers from 1 to 5 is 15.” I am able to take the code that the user enter and run it with exec, but I am not able to get the output from the user’s code.

sum = 0
n = 5
for i in range(n+1):
    sum += i
print(f"The sum of numbers from 1 to {n} is {sum}.")
6

You are missing something.

The app does exactly what you want to do, capture the output from print statements to a text area. It does way more than that, too, don’t let the other bits get in the way of looking at the part I directed you to above. Setting up the globals for the exec is what you need to look at.

7

Thanks that was very helpful. I have not had much time to work on it recently. I am working on making a platform to allow students take programming tests.

This is the draft of what I have so far.

I am able to have multiple code editors on a page, but the outputs do not line up with the inputs.

It seems that when I programmatically add the label, I can’t figure out how to associate the labels with the code editors.

I am sure that the issue is javascript related. Any help would really be appreciated! Also the dragger is not working. I am sure that it is related to the same issue.

8

could you share a clone link rather than a link to the live app?

9

Thanks. Anvil | Login

10

The issue is this code

    def form_show(self, **event_args):
        if not self.start:
            return
        self.call_js("changediv", self.id)

When you have two components, you have 2 html div elements with id=editor
and so the javascript function is always capturing the second code editor element

I would get rid of the self.call_js and just move this to the init method
(and remove those script tags in the html)

from anvil.js import get_dom_node

class codeEditor(codeEditorTemplate):
    def __init__(self, **properties):
        ...
        self.start = True
        self.dom_node = get_dom_node(self)
        self.editor_node = self.dom_node.querySelector(".editor")
        self.editor_node.id = f"editor-{self.id}"
        # repeat for dragbar,

(Note I would change the elements to be <div class="editor" ...> to make the above work)

Now you have references to the elements in python you can get rid of lines like

        dragbar = js.window.document.getElementById('dragbar'+self.id)
        dragbar.onmousedown = self.dragbar_mousedown

and replace with

        self.dragbar.onmousedown = self.dragbar_mousedown

So you probably don’t actually need ids at all