Difference between revisions of "Flash Applets Tutorial"

From WeBWorK_wiki
Jump to navigation Jump to search
Line 13: Line 13:
 
* [https://addons.mozilla.org/en-US/firefox/addon/firebug/ Firebug] and [https://addons.mozilla.org/en-us/firefox/addon/flashbug/ Flashbug] are [http://www.mozilla.com/en-US/firefox/new/ Firefox] plugins for debugging JavaScript and ActionScript. Flashbug allows, among other things, to see the output of the <code>trace()</code> function.
 
* [https://addons.mozilla.org/en-US/firefox/addon/firebug/ Firebug] and [https://addons.mozilla.org/en-us/firefox/addon/flashbug/ Flashbug] are [http://www.mozilla.com/en-US/firefox/new/ Firefox] plugins for debugging JavaScript and ActionScript. Flashbug allows, among other things, to see the output of the <code>trace()</code> function.
 
* The debug version of the Flash player is required to use Firebug/Flashbug. It can be [http://www.mozilla.com/en-US/firefox/new/ downloaded here].
 
* The debug version of the Flash player is required to use Firebug/Flashbug. It can be [http://www.mozilla.com/en-US/firefox/new/ downloaded here].
* <code>DebugBox</code>, an ActionScript class that displays a box where debug messages can be displayed. ''''(Add downloading site)''''.
+
* <code>DebugBox</code>, an ActionScript class that displays a box where debug messages can be displayed. '''''(Add downloading site)'''''.
* A <nowiki>"local tester"</nowiki> for the interface. This allows testing the interface whithout having to upload the applet to WeBWork. ''''(Add downloading site)'''
+
* A <nowiki>"local tester"</nowiki> for the interface. This allows testing the interface whithout having to upload the applet to WeBWork. '''''(Add downloading site)'''''

Revision as of 17:02, 28 June 2011

Flash Applets Tutorial

In this tutorial it is discussed how to create a Flash applet with the interface necessary for inclusion in a WeBWork problem, as well as the construction of the corresponding PG file. We pay special attention to the problem of setting up the functions that define the interface between the applet and the WeBWork page that displays the problem.

This interface relies on communication between ActionScript and JavaScript. Applet developers are responsible for writing the ActionScript code for the interface, while the JavaScript is provided by WeBWork, and is of no concern for problem authors. The JavaScript code, however, defines an interface that the applet is required to follow.

Applets included in WeBWork problems can come in several flavors: the applet may simply display a graph, perhaps with some interactivity, to aid students in visualizing the solution for a problem. It could be used to guide students in the process of finding a solution (in which case it has to "remember" the stage the student is in). Or, in more complex examples, it might require an answer to be entered in the applet, for example by typing it or by manipulating a graphic in certain way.

The complexity of the interface will depend on the purpose and complexity of the applet. In this tutorial, we will start with a very simple example that requires students to enter the answer in a simple problem. We will then proceed to more complex examples.

Debugging

Debugging is one of the most challenging aspects of developing Flash applets for WeBWork. The following tools are recommended:

  • Firebug and Flashbug are Firefox plugins for debugging JavaScript and ActionScript. Flashbug allows, among other things, to see the output of the trace() function.
  • The debug version of the Flash player is required to use Firebug/Flashbug. It can be downloaded here.
  • DebugBox, an ActionScript class that displays a box where debug messages can be displayed. (Add downloading site).
  • A "local tester" for the interface. This allows testing the interface whithout having to upload the applet to WeBWork. (Add downloading site)