9.6 Using JavaScript in Questions

9.6.1 Using JavaScript alone

It is possible to include JavaScript in WebAssign questions, using the HTML standard tag, <Script Language= "JavaScript">. JavaScript also can be written to interact with a Java Applet. One important difference from writing JavaScript for other applications is that a WebAssign tag, <EQN $numAnim>, should be included in the name of every function and object created by the JavaScript. When WebAssign processes a question to be sent to the user, this will be replaced by a number. This mechanism ensures that different problems or different instances of the same problem do not address the same functions or objects. The very first time this tag is used in a problem, it should be incremented to get a new number for the particular question by using <EQN ++$numAnim>. Here is an example of a question that uses JavaScript to provide a hint:

<Script Language = "JavaScript">
var hintnumber_<EQN ++$numAnim> = 0;

function GiveHint_<EQN $numAnim>(){
          if(++hintnumber_<EQN $numAnim> == 1){
                      alert("Hint: Think outside the box.");
          }
          else{if(hintnumber_<EQN $numAnim> == 2){
                      alert("Hint: Does a side have to be a straight line?")
                      }
                      else{
                      alert("Enough hints already!")
                      }
          }
}
</SCRIPT>

The Sphinx asks, "How many sides does a circle have?"<BR> <_> <BR>
<A HREF = "JavaScript:GiveHint_<EQN $numAnim>()">Hint</A>

This example pops-up an alert window that says “Hint: Think outside the box” the first time Hint is clicked, “Hint: Does a side have to be a straight line?” the second, and “Enough hints already” after this.

9.6.2 Using JavaScript with applets in WebAssign

Some WebAssign instructors are using Java applets in WebAssign questions. Here are the steps for putting an applet into a WebAssign question:

1. Find the applet that you want to copy. Right click somewhere on the page, and go to View Source. This will pop up a text box of code. This is the code you will need to use.

2. Copy the source into a text editor or even Microsoft Word. This is where you will do much of the preliminary editing of the code. Switch to a font such as Courier that will evenly space each character.

3. Delete the <html> and <body> tags at the beginning and the </html> and </body> tags at the end of the code. WebAssign takes care of formatting the page for you.

4. Delete the <head></head> tags and the text between except for the <script language = "JavaScript"> part.

Here is an example of code copied from Wolfgang Christian's Physlet® site*

http://webphysics.davidson.edu/physletprob/ch14_animator/default.html

The code to be deleted from steps 3 and 4 is highlighted.

5. Much of the code consists of lines such as

document.animator.setDefault();

6. These are JavaScript commands that tell the animator to do something. If you are using a different applet, the word will not be "animator", but the format of the script will be the same. You need to change the word "animator" in these lines to <EQN $animator>, where the word following the dollar sign is up to you, but the rest must have this exact format. Using Find and Replace to replace the word animator with <EQN $animator> every time it appears, but only between the <script language = "JavaScript"> and the </script> tags.

7. Next, you will need to change the codebase, name, and id within the <applet></applet> tags. Leave the code and archive assignments alone. Change the codebase to <EQN $PHYSLETPATH> if the applet is one of Wolfgang Christian’s applets. If not, use the URL of the original web site as the codebase (this may not be the same as the page from which you found the code). Change both the name and id to <EQN $animator>, or whatever name you used above. If a name and id are not both there, add the missing one. This is necessary so that your Physlet works in both Internet Explorer and Mozilla based browsers.

Your code should now resemble the following code, with the changes from steps 5 and 6 highlighted.

8. At the very beginning of the code, add a line such as the following:

This defines the name of the applet for WebAssign and allows WebAssign to recognize it. It also ensures that if you have more than one copy of this applet on a page, they won't interfere with each other. If you have more than one applet in a question, for instance, an animator and a datagraph, this first line will need to define a couple of names:

9. Change the names of the functions so that they include the name of the applet. This ensures that if you have more than one copy of these functions on a page, they won't interfere with each other. Usually we change the function name so that it has the form name_<EQN $appletname>.

10. Add a line of code after the applet that gives a way of beginning the applet.

<a href = JavaScript:initApplet_<EQN $animator>()>Click here to start.</a>

11. Add a line of code at the very beginning of your code that gives credit to the site where you found the applet. Put the credit in the form  where the surrounding brackets, dashes, and exclamation marks comment the credit out. For instance, your credits could be

Your code should resemble the following code with the changes in steps 7-10 highlighted.

12. Copy the code from your editor into the Question field of a new WebAssign question. At the end of the code you can add any questions you want to ask about the applet and fill in the Answer field as usual.

Be careful not to add line breaks and spaces to the applet code as you make the necessary changes. One extra space or line break can prevent the applet from working properly.

WebAssign has copies of the Physlets on our server. For the Physlets, you can use $PHYSLETPATH. That is

CODEBASE = '<EQN $PHYSLETPATH>'

The following table lists the applets available from our servers. If you would like us to include an applet, please contact us at support@webassign.net.

APPLET

CODEBASE and other information

Animator, Bar, BField, Blackbody, Circuit, DataGraph, DataTable, Doppler, Efield, EMWave, EnergyEignevalue, Faraday, Filters, Hydrogenic, Molecular, Optics, Pipes, Poisson, QTime, Reflection, Ripple, Slider, SPlotter, STools, Superposition

$PHYSLETPATH

http://webphysics.davidson.edu/applets/applets.html

JME

$APPLETPATH

Molecular Editor from Novartis AG

* Christian, Wolfgang and Belloni, Mario, Physlets: Teaching Physics with Interactive Curricular Material, (Prentice Hall, 2001).