I recently got a gig writing python courses. They want it in a gamification style similar to something like www.codingame.com/. I'm quite inexperienced with HTML and JS so I wasn't really able to discern how their platform works.
To illustrate what I'm trying to do, I'll give a very simple example. Embedded in the web page, there will be a section where there will be a python editor on the left, and a graphics output on the right. The students will be given some code like StartCarRace(7,10). When this code is run, the graphics window on the right will show two cars racing, one at a speed of 7, and one at a speed of 10. The students will then be encouraged to try changing the values.
Its all pretty standard stuff I've taught before, but I've never had to embed it in a webpage before. There are a few considerations I've come up with:
I've looked at a few options like trinket.io/, but they seem to be too heavy weight for my purposes. I'd also have to define all the code inside the IDE. As for the library that generates the python graphics, I think that is a trivial problem that I'll solve later.
Here is my current theorized solution: use an editorconfig to allow the students to write their code with python syntax highlighting. When the student presses the "run" button, the JS running the page takes that code as a string, runs that code and any accompanying python code as a python script, and outputs the result to the graphics window. I did some preliminary research and it seems easy enough to run python from node.js, but I'm unsure how I can output the animation of the python function generates. That would be my main question, but if you think there are any alternative approaches I'd appreciate hearing them.