Talk:Custom Point Labeler Applet

About the Custom Point Labeler Applet for WeBWorK

This applet and WeBWorK problem are based upon work supported by the National Science Foundation under Grant Number DUE-0941388.

Click here to see a problem like this in action (you may login as a guest): Example WeBWorK problem

Where to find more problems like this

The Custom Point Labeler Flash applet provides a graphical user interface which allows students to answer questions by clicking on a graph to label points on the graph. Using the buttons on the interface, students can place points with different text labels on the graph, and once points are added to the graph they can be moved or deleted. The applet has been designed to be easily repurposed for a variety of problems, by editing only the PG file for the WeBWorK problem.

As an example, a WeBWorK problem can be written where the graph of a function is displayed, and the student is asked to label local and absolute extrema.

To be as versatile as possible, the applet is designed only as a user interface tool. It does not do any computation of derivatives or other properties. Instead, the author must decide what function to display and what types of points should be labeled, as well as explicitly set the coordinates for the points which constitute a correct answer.

The applet is only capable of plotting graphs of functions, but several functions with different domains can be plotted, allowing for other types of curves to be created.

Including the Flash applet in the WeBWorK problem is done in a way similar to other problems documented on this Wiki. For example see SolidsWW_Flash_Applet_Sample_Problem_1

Customizing the WeBWorK problem

For the sake of completeness, we include at the bottom of this page the full working PG code for a problem implementing this applet, but here we will only comment on the problem setup section of the code. This section contains all of the parameters that can be altered to suit your needs as you author new WeBWorK problems using this applet.

The parameters for customizing the problem are set in XML format. No XML code needs to be written from scratch. Instead, the author simply needs to adjust the parameters within the example XML code, or follow a similar format to create new types of point labels.

After the tagging, description, and initialization sections of the problem, the problem is set up in a section following the comment line:

############# Problem configuration XML #############

Below is an explanation of the configuration XML for an example problem, where the student is asked to label different types of points on a function graph. To customize the problem, follow the same basic pattern. In XML terminology: some parameters are set as XML elements, others are set as attributes for empty-element XML tags.

The XML object is set as one long string variable in PG code. Instead of quotes, the string is enclosed in the equivalent brackets qq{ and }. After the opening <XML><.code> tag, the customization parameters are set as follows.

Plot window, labels, and grid

The plot window, label and grid spacing parameters are defined

Set up the plot window by adjusting the minimum and maximum x and y coordinates within the following tag:

<window xMin="-1.5" xMax="4.5" yMin="-4" yMax="3"/>

The spacing of numerical labels along the axes: <labelSpaceX>1</labelSpaceX> <labelSpaceY>1</labelSpaceY>

The spacing of grid lines: <gridSpaceX>1</gridSpaceX> <gridSpaceY>1</gridSpaceY>

The width and height of the graphing board within the applet, in pixels: <boardWidth>400</boardWidth> <boardHeight>300</boardHeight>

The functions to plot

You can plot more than one function within the graphing board. Define each by first specifying, using XML elements and attributes, the algebraic function followed by the domain for that function. For example, a piecewise function can be defined as follows:

<func>x^2</func> <domain xMin="-1" xMax="1"/> <func>(x^4-4*x^3+8)/5</func> <domain xMin="1" xMax="4"/>

Similarly, you could draw a circle by specifying the separate functions defining its top and bottom halves, with the same domain.

The types of labels and their correct placements

The student will be asked to label points of various types. The number of buttons, what the buttons say, and the text for the labels is all determined by the XML. The buttons will be stacked in the order in which they are defined in the XML. All the data for each label type is set within a separate labeltype XML element. For multiple types of labels, simply define several label types in succession. For example, to require students to label critical points on the graph, we create a new label type. We must specify several things:

1. The abbreviated text that will appear on the label, for example "crit. pt."
,
2. The longer text that will appear on the associated button, for example "label critical points"
,
3. The name of the type of point, for use in sentences in the grading feedback, for example "critical point"
,
4. The plural of this name (which must be explicitly entered, due to irregular ways of pluralizing English words), for example "critical points",
5. A list of the correct points that the student should label, specified in individual correctPoint XML elements, and
6. the error tolerance, in pixels, to allow in the placement of points.

All of this information is combined in one labelType XML element. For example, in the example problem, the student must label critical points, whose correct placement are at the points (0,1.6) and (3,-3.8). The XML which sets this up is as follows:

<labelType pointLabelString="crit. pt." buttonString="label critical points" name="critical point" plural="critical points"> <correctPoint x="0" y="1.6"/> <correctPoint x="3" y="-3.8"/> <pixelTolerance>12</pixelTolerance> </labelType>

Look at the full PG source code below to see how repeated XML elements in this format define several types of points that must be labeled in a single problem.

Full PG source code

Below is the full PG source code for an example problem, where the student is asked to shade the portion of a graph where the derivative is positive.

1. 1. DESCRIPTION
   2. Integration with substitution
   3. ENDDESCRIPTION

1. 1. KEYWORDS('critical points', 'critical', 'extrema', 'Flash applets','NSF-0941388')

1. 1. DBsubject('Calculus')
   2. DBchapter('Differentiation')
   3. DBsection('Curve Sketching')
   4. Date('8/27/2011')
   5. Author('Dan Gries')
   6. Institution('Hopkins School')
   7. TitleText1()
   8. EditionText1('2012')
   9. AuthorText1()
   10. Section1()
   11. Problem1()

DOCUMENT();

loadMacros(

 "PGstandard.pl",
 "MathObjects.pl",
 "AppletObjects.pl"

);

TEXT(beginproblem()); $showPartialCorrectAnswers = 1; Context("Numeric");

$ans = Compute("1");

$success = 1;

1. 1. 1. 1. 1. 1. 1. 1. 1. 1. 1. 1. 1. Problem configuration XML #######################

$configXML = qq{ <XML>

 <window xMin="-1.5" xMax="4.5" yMin="-4" yMax="3"/>
 <labelSpaceX>1</labelSpaceX>
 <labelSpaceY>1</labelSpaceY>
 <gridSpaceX>1</gridSpaceX>
 <gridSpaceY>1</gridSpaceY>
 <boardWidth>400</boardWidth>
 <boardHeight>300</boardHeight>
 <func>x^2</func>
 <domain xMin="-1" xMax="1"/>
 <func>(x^4-4*x^3+8)/5</func>
 <domain xMin="1" xMax="4"/>
 <labelType pointLabelString="crit. pt." buttonString="label critical points" name="critical point" plural="critical points">
   <correctPoint x="0" y="1.6"/>
   <correctPoint x="3" y="-3.8"/>
   <pixelTolerance>12</pixelTolerance>
 </labelType>
 <labelType pointLabelString="local min" buttonString="label local minima" name="local minimum" plural="local minima">
   <correctPoint x="3" y="-3.8"/>
   <pixelTolerance>12</pixelTolerance>
 </labelType>
 <labelType pointLabelString="local max" buttonString="label local maxima" name="local maximum" plural="local maxima">
   <pixelTolerance>12</pixelTolerance>
 </labelType>
 <labelType pointLabelString="abs. max" buttonString="label absolute maximum" name="absolute maximum" plural="absolute maxima">
   <correctPoint x="-1" y="2.6"/>
   <pixelTolerance>12</pixelTolerance>
 </labelType>
 <labelType pointLabelString="abs. min" buttonString="label absolute minimum" name="absolute minimum" plural="absolute minima">
   <correctPoint x="3" y="-3.8"/>
   <pixelTolerance>12</pixelTolerance>
 </labelType>

</XML> };

   ###################################
   # Create  link to applet 
   ###################################
   $appletName = "LabelingPoints_custom10";
   $applet =  FlashApplet(
      codebase              => findAppletCodebase("$appletName.swf"),
      appletName            => $appletName,
      appletId              => $appletName,
      setStateAlias         => 'setXML',
      getStateAlias         => 'getXML',
      setConfigAlias        => 'setConfig',
      getConfigAlias        => 'getConfig',
      #initializeActionAlias => 'setXML',
      maxInitializationAttempts => 5,   # number of attempts to initialize applet
      #submitActionAlias     =>  'getXML',
      answerBoxAlias        => 'answerBox',
      height                => '460',
      width                 => '860',
      bgcolor               => '#ffffff',
      debugMode             =>  0,
      submitActionScript  =>  
 qq{getQE("answerBox").value=getApplet("$appletName").getAnswer() },
    );

   # Configure applet
   ###################################


   $applet->configuration($configXML);
   #passing empty XML for initial state:
   $applet->initialState(qq{<XML> </XML>});

TEXT( MODES(TeX=>'object code', HTML=>$applet->insertAll(

 debug=>0,
 includeAnswerBox=>1,

1. reinitialize_button=>$permissionLevel>=10,

  )));

BEGIN_TEXT

$BR

$BR

Use the buttons shown to label all of the points of each type on the graph of the function shown above (for some types, there may be no such points). Click the 'submit answers' button below when done.

END_TEXT Context()->normalStrings;

3. Answers
4. 1. answer evaluators

NAMED_ANS('answerBox'=>$ans->cmp());


ENDDOCUMENT();