I’m doing a project which is about creating an environment in which teachers can use interactive simulations made with p5.js for teaching. Here is the prototype.
In this, it is only possible to load one simulation at a time. I’m trying to find a way to bring more than one simulations in a page. From what I’ve found by going through many discussions in the past, the best way (Please tell me if you are aware of any bettter methods) to implement this as far as I searched is Iframes (Without the difficulties of writing sketch in instance mode), an Iframe for each sketch. I’m also trying to combine my project with online p5 text editor. Since it has an option for exporting Iframes, teachers can design and develop simulations in online text editor and export the iframe to my app. But there are some challenges which are
Adjusting the size of the iframe according to the inner sketch.
I want the teachers to be able to use a library called quicksettings which has some basic ui (sliders, checkboxes) which can be used by the them for adjusting the parameters in the simulation. But quicksettings produces a modal box. I need to be able to bring the modal box out of the Iframe.
The first problem I’m planning to solve is by accepting the size of the simulation from the user to adjust the size of the iframe accordingly.
I don’t have any idea if the second problem is solvable.
I need some guidance in this. Thanks