Making GeoGebra applets for use with LON-CAPA
The first thing to do is watch the video tutorials on this subject from LON-CAPA's website:
http://www.lon-capa.org/geogebraTutorial.html
Each video is about two minutes long and covers most of the basics for making the applets. Unfortunately, some things have changed since the videos were made. In particular, you can no longer export as a webpage. This option is still in the menu, but it will just make you upload it to GeoGebraTube
One way to proceed is to upload the GeoGebra worksheet to GeoGebraTube (tube.geogebra.org) and tell LON-CAPA where to find the worksheet. To upload your worksheet to GeoGebraTube, just have your worksheet open and go to File>Share. This will take you to a webpage to finish uploading the worksheet, such as entering a title. To edit the worksheet, click the pencil (hover over the worksheet to get the pencil button), click advanced settings, and you can do things like uncheck Enable Pan & Zoom (if you want this turned off). Show toolbar should probably be checked so that students have access to the tools you picked for them. Most of these things can also be turned on or off through html code in LON-CAPA.
Once the worksheet is uploaded to GeoGebraTube, to embed the applet in LON-CAPA, do the following steps:
1) View the worksheet on geogebra.org and download the .ggb file of the worksheet.
2) Save the .ggb file to your computer and rename it to .zip file.
3) Upload the .zip file into LON-CAPA to the /priv/purdue/purdue_math/ggb-files/ sub-directory.
4) Publish the .zip file so that it can be referenced when you configure the applet in the problem.
5) Note the target path when you publish the .zip file that will be the filename value that is used when you configure the applet. It should look like "/res/purdue/purdue_math/ggb-files/place_points.zip".
The following link explains Applet Embedding from GeoGebra's viewpoint: https://www.geogebra.org/manual/en/Reference:Applet_Embedding
This is an example of how GeoGebra embedded an applet using javascript: http://archive.geogebra.org/source/program/applet/geogebra_applet_javascript_test.htm. Once the page loads, right click, and select "View page source" from the menu to see the source HTML of how it can be done.
1) The javascript library deployggb.js needs to be included in the problem with the following code snippet. This references a locally hosted version of the depolyggb.js library file.
<script src="/geogebra/deployggb.js" type="text/javascript"></script>
2) Create elements in which the applet should be embedded.
<div id="applet_container"></div>
3) Configure and insert the applet.
<script type="text/javascript">
var applet = new GGBApplet({filename: "/res/purdue/purdue_math/ggb-files/place_points.zip", "showtoolbar":true}, true);
window.addEventListener("load", function() {
applet.inject('applet_container');
applet.setHTML5Codebase('/geogebra/HTML5/5.0/web3d/');
}
</script>
Any additional parameters to be passed for the applet will follow the filename (the accepted parameters can be found here: http://www.geogebra.org/manual/en/Reference:Applet_Parameters). For example, since the applet doesn't seem to stay inside of its "box", to make the border white, use
var applet = new GGBApplet({filename: "/res/purdue/purdue_math/ggb-files/place_points.zip", "showtoolbar":true, borderColor: "#FFFFFF"}, true);
instead. This is where you can turn on or off the toolbar, reset icon, etc.
var applet = new GGBApplet({filename: "/res/purdue/purdue_math/ggb-files/place_points.zip", "showtoolbar":true, borderColor: "#FFFFFF"}, true);
This will take care of getting the applet embedded in LON-CAPA. For coding the behavior, the basics were covered in the videos above. The reference for the methods used to interact with the applet is at http://www.geogebra.org/manual/en/Reference:JavaScript. In addition to the many methods for talking to the applet and getting information about the applet, there are the GeoGebraApplet to Javascript Communication methods for monitoring when changes are made. In particular, registerUpdateListener and registerAddListener. registerUpdateListener was covered in the video, but registerAddListener is also useful when allowing students to use the point or line tool to add points and lines to the applet.
One piece of advice is that it can be useful to check the type of the object added or updated (getObjectType) when deciding what action to take. For example, if the AddListener will draw a line once two points have been added to the applet, make sure the AddListener only draws the line if a POINT is added. Otherwise, drawing the line will cause the AddListener to be called again because a line was added, which will draw a line, which will cause the AddListener to be called, and the applet will be stuck in an infinite loop.
Another piece of advice is for saving the state of the applet when a student clicks submit. All of the data from the applet needs to be set as the answer to the problem, probably delimited in some way (such as with ;). In particular, if the student is graded based on the slope and y-intercept of a line between two points, do not calculate the slope and y-intercept in Javascript and pass these back to LON-CAPA. Instead, pass back the coordinates of the points so that LON-CAPA can reset the applet after submission, and use these coordinates to calculate the slope and y-intercept using a customresponse.
A little annoyance is that the applet won't load after clicking "Save and View", so either click "New Randomization" or "Reset Submissions" or refresh the browser window by pressing the F5 key or go back to the directory and then come back into the problem to get it to load.
Some examples can be found at
/priv/purdue/purdue_math/math15300/Graphs_Lines/Rectangular Coordinate Systems/Problems/Graphs/
or for a more complicated example,
/priv/purdue/purdue_math/math15300/Graphs_Lines/Lines/Problems/Graphs_Of_Lines/