Integrating Physlets Into WebHW Problems

WebHW problems are ideally suited for use with physlets.  If you would like to learn more about Physlets,  go to the Physlet Site.   

Physlets are a bit unique in that their behavior can be controlled by embedded client-side JavaScript.  Remember that client-side scripts are run by the user's (i.e. student's) browser, instead of running on the Web server.  Also remember the sequence of events in processing a dot-asp page:

  1. The Web server picks up the Active Server Page (identified with a .asp extension).  It looks for any embedded server side scripts (contained between <% and %> tags or <%= and %>), processes the script, removes the script code, and sends the rest to the client browser.
  2. Client-side code is then processed by the client browser.

This suggests the interesting strategy: combine server-side and client side scripting to dynamically generate Physlets randomized to behave a bit differently for every student.  This in fact works very well. 

You can find thorough discussions on how to program and use Physlets on the Physlet Site, and in the Physlet Book


Each example used here is part of the WebHW Example Problem Set, and is available upon request.  You can also cut-and-paste the source code directly into a text or html editor.  See the WebHW Help files for details.

Problem 6 from the Intro Assignment, Semester 1

Source Code


  1. This is an introductory problem that is designed to acquaint the user with Physlet controls.  A blue block slides at constant speed across the applet window.  The student can manipulate the VCR-like controls to accurately determine (from the time read-out) exactly how long it takes for the applet to completely disappear from view.  
  2. The speed at which the block moves is randomized.  The line of code that does this is:    document.webhw.setTrajectory(id1, "<%= 20 + Session("R1") %>*t","0");.  Session("R1") is initialized to a integer value between 1 and 9 (see the WebHW help files), so the block speed is initialized to a value between 21 and 29 m/s (Physlet units).  If you view the source for this problem, and find the corresponding line on the client-side, you will find something like:  document.webhw.setTrajectory(id1, "23*t","0"); .  In this case, Session("R1") was initialized to 3.
  3. Now find the line that specifies the correct answer for this problem: <% Session("whw_N1_Answer") = 71.7 / (20 + Session("R1")) %>.  The number 71.7 depends on how big you make you applet window and the size of the block.  The best way to determine this number is to tinker a bit.
  4. A Physlet must be able to find it's class files.  In WebHW, this is easy.  Notice the line:   <applet codebase="<%= Session("VRoot")& "Physlet_classes" %>" .  The variable Session("VRoot") always holds the root of the FrontPage Web.  You have probably noticed this variable used to link the cascading style sheets at the top of every example problem.  Here, it is used to locate the Physlet class files, which are located in the subdirectory Physlet_classes. 

Try the problem out - but be very careful in your measurements.  I like to stress precision, so you need an answer correct to three digits in order for the problem to be graded as correct.  Pay attention to the pause and single frame controls. 

More Examples

The problem links below point to examples of WebHW problems that utilize Physlets.  The Assignment links point to the entire problem set that contains the Physlet examples.  The source links will display the problem source.  You can cut-and-paste into FrontPage HTML view provided you paste and re-cut into a text editor (eg. NotePad) first.

Intro Assignment of Semester 1

1D Motion Assignment of Semester 1

Electric Fields Assignment of Semester 2

These are just a few examples of what is possible by combining Physlet with WebHW problems.