LiveGraphics and Javascript

Its been a while since I've posted, but that does not mean nothing is happening.  The just-in-type homework system is now in the pipeline to be merged into develop and should be available in the regular release in Fall 2015.  I've also been spending time rebuilding WeBWorK's default 3d grapher using javascript, webgl, and canvas.  This will eliminate the need for the current java applet and is much more portable.  Read more about it after the jump.

The best WeBWorK problems are those which have a feature or capability that would be impossible using traditional pen and paper homework.  Some of my favorites are the multivariable calculus WeBWorK problems which include an interactive 3d graph.   Students generally have a hard time visualizing 3d objects and including a manipulable 3d view of a surface is something that would be impossible without web based homework.  WeBWorK has a number of this type of problem and they were all written using a java applet called LiveJar.  This applet takes raw Mathematica code describing a graphical object, either generated by the problem pg code or included via a file, and renders a graph similar to what you would find in Mathematica.  Unfortunately java applets are increasingly difficult to get running and too many of my students ended up with problems which looked like:

Even using a properly signed applet wasn't good enough and after several student complaints I had to remove problems with manipulable 3d graphs from my multivariable calculus class last semester.

In an effort to save those problems I've put together a javascript program based on the webgl wrapper x3dom which mostly replicates the original LiveJar applet.  The system is has only just been completed, and has some rough edges.  However it does a passable job of plotting surfaces.  Instead of the previous image students will see the following, which is much better:

They can click on the graph and drag it to rotate, or use the mouse wheel to zoom.  Since javascript is so portable, I can even include an example of a manipulable graph in this blog.  Use the controls mentioned previously or those listed here to try it out.


(Note: If you are using https you will probably need to "allow insecure content" to see the graph.) For those of you who are interested, x3dom is a webgl interpreter that uses a regular html structure to define and manipulate the graphics objects in a canvas region.  For example, to render a blue sphere you just include the following html in a <x3d> html element:

<Shape render="true">
    <Appearance>
       <Material diffuseColor="0 0 1" shininess="0.2"/>
    </Appearance>
       <Sphere solid="true" radius="1"/>
</Shape>

Then the x3dom javascript does the rest using canvas, html5 and webgl.  (For those devices not webgl compatible it has a flash based fallback.)  The javascript replacement for LiveJar basically just parses the provided mathematica code and generates the correct x3dom html using jquery.  Some things to keep in mind about this js replacement.

• It is specifically a replacement for LiveJar and built to correctly render the ~50 problems in the OPL which use it.  New problems could certainly be made with this script, but there are other more fully featured javascript 3d graphers out there which allow you to skip the Mathematica entirely. 
• There is a hidden configuration option in defaults.config which can be used to turn the java applet back on. 
• These graphs will render in most phones and tablets, and can even be manipulated using a touch screen, but the performance can vary.