VPython and MyOpenMath

[Mark Somers]

As I have written in previous questions, I am trying to integrate VPython into MyOpenMath questions.  A typical MyOpenMath question includes a html portal where the text of the question in placed.  JavaScript script tags can be placed in this portal to run Javascript simulations.  

I have written a JavaScript VPython simulation and successfully placed it inside of the MyOpenMath html portal.  It runs well when questions are run one at a time.  A problem arises when several such questions are combined and run on the same web page.  In that case, the VPython simulation from each question is instead inserted into a different question.  Some questions have multiple VPython simulations.  Other questions have none.

I'll describe the simulation in this paragraph so you have a bit more context on what I am trying to achieve.  The VPython simulation I wrote shows a right hand.  Students are able to click buttons that reorient the hand and bend the fingers in order to demonstrate the right hand cross product rule.  A typical question includes a 3D diagram of a pair of vectors.  Students are then required to manipulate/reorient  the hand in the simulation to demonstrate use of the right hand rule.  As I mentioned above, when this is run one question at a time, it works well.  When I create an 'assessment' with several such questions, however, the hand simulation from one question appears in the wrong question.

Each VPython simulation is wrapped with a number of script tags.  One of these script tags contains the command

window.__context = { glowscript_container: $("#glowscript").removeAttr("id") }

 

This command appears to associate a particular VPython script with the div with a particular id (i.e., id="glowscipt').  I have discovered that I can change the name of the id in this line as long as I make the same change in the id of the div.  I used this to create unique ids for all of the divs on the multi-question html page.  However, this didn't work.  I suspect the problem is that when the window.__context command from one script runs, it replaces the same command that had previously run prior to another script.  Unfortunately, I am not familiar with this command and how the VPython libraries use it to designate where a simulation is to be placed.  I am hoping to modify the command so that VPython correctly associates each simulation with its intended div on a page that contains multiple scripts and multiple divs.  As I mentioned, I am able to give each such div a unique id.

By the way, though the VPython scripts appear in the wrong places, they all still run perfectly.  I just need to figure out how to place them properly.  I hope my description above is sufficient for you to understand the problem.  Any help would be greatly appreciated.  

Mark

[John]

You can try placing each vpython simulation in its own iframe in your web page.

<iframe src="test.html" width="320" height="340"></iframe>

The other way to handle it is to create a canvas object for each vpython simulation scene and give it a unique name  instead of using the default scene name, like in this example.

https://glowscript.org/#/user/johncoady/folder/Demo/program/Multi-Scenes

scene1 = canvas()

scene2 = canvas()

Then when you create objects for a vpython scene you specify which scene it is for with the canvas argument.

giant = sphere(canvas=scene1, pos=vector(-1e11,0,0), radius=2e10, color=color.red,
                make_trail=True, trail_type='points', interval=10, retain=50)

arrow(canvas=scene2, pos=vector(0, 4, 0), axis=vector(0, 1, 0), color=color.red)

See the canvas parameter in the vpython documentation for 3D Objects.

https://www.glowscript.org/docs/VPythonDocs/box.html

It might be easiest to use the iframe option and continue to use the default scene but you can also use the canvas parameter and keep track of which scenes the vpython objects belong to when you have multiple scenes in a webpage.

John

[John]

Also check out the canvas documentation for additional information.

https://www.glowscript.org/docs/VPythonDocs/canvas.html

John