|
|
| (11 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
|
| |
|
| [[Category:Flash Applets]]
| |
|
| |
| <h2>About the Custom Point Labeler Applet for WeBWorK</h2>
| |
|
| |
| <p style="background-color:#93BED2;border:black solid 1px;padding:3px;">This applet and WeBWorK problem are based
| |
|
| |
| upon work supported by the National Science Foundation under Grant Number DUE-0941388.</p>
| |
| <p style="background-color:#ffccff;border:black solid 1px;padding:3px;">Click here to see a problem like this in
| |
|
| |
| action (you may login as a guest):
| |
| [https://testcourses.webwork.maa.org/webwork2/FlashAppletDemos/variousAppletProblems/28/ | Example WeBWorK
| |
|
| |
| problem]</p>
| |
|
| |
| [[where to find WeBWorK problems like this | Where to find more problems like this]]
| |
|
| |
| <p>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.</p>
| |
|
| |
| <p>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.</p>
| |
|
| |
| <!-- (screencap) -->
| |
| <div style="text-align:center;">
| |
| [[File:CustomPointLabeler.jpg]]
| |
| </div>
| |
|
| |
| <p>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.</p>
| |
|
| |
| 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.
| |
|
| |
| <p>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]]</p>
| |
|
| |
| <h2>Customizing the WeBWorK problem</h2>
| |
|
| |
| <p>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. </p>
| |
|
| |
| The parameters for customizing the problem are set in [http://en.wikipedia.org/wiki/XML 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:
| |
|
| |
| <br />
| |
| <code>############# Problem configuration XML #############</code>
| |
| <br />
| |
|
| |
| 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 <code>qq{</code> and <code>}</code>. After the opening <code><XML><.code> tag, the
| |
|
| |
| customization parameters are set as follows.
| |
|
| |
| <h3>Plot window, labels, and grid</h3>
| |
| 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:
| |
|
| |
| <code><window xMin="-1.5" xMax="4.5" yMin="-4" yMax="3"/>
| |
|
| |
| The spacing of numerical labels along the axes:
| |
| <code>
| |
| <labelSpaceX>1</labelSpaceX>
| |
| <labelSpaceY>1</labelSpaceY>
| |
| </code>
| |
|
| |
| The spacing of grid lines:
| |
| <code>
| |
| <gridSpaceX>1</gridSpaceX>
| |
| <gridSpaceY>1</gridSpaceY>
| |
| </code>
| |
|
| |
| The width and height of the graphing board within the applet, in pixels:
| |
| <code>
| |
| <boardWidth>400</boardWidth>
| |
| <boardHeight>300</boardHeight>
| |
| </code>
| |
|
| |
| <h3>The functions to plot</h3>
| |
|
| |
| 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:
| |
|
| |
| <code>
| |
| <func>x^2</func>
| |
| <domain xMin="-1" xMax="1"/>
| |
| <func>(x^4-4*x^3+8)/5</func>
| |
| <domain xMin="1" xMax="4"/>
| |
| </code>
| |
|
| |
| Similarly, you could draw a circle by specifying the separate functions defining its top and bottom halves, with
| |
|
| |
| the same domain.
| |
|
| |
| <h3>The types of labels and their correct placements</h3>
| |
|
| |
| 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 <code>labeltype</code> 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:
| |
| <ol>
| |
| <li>The abbreviated text that will appear on the label, for example <span style="color:#008800">"crit.
| |
|
| |
| pt."</span></li>,
| |
| <li>The longer text that will appear on the associated button, for example <span style="color:#008800">"label
| |
|
| |
| critical points"</span></li>,
| |
| <li>The name of the type of point, for use in sentences in the grading feedback, for example <span
| |
|
| |
| style="color:#008800">"critical point"</span></li>,
| |
| <li>The plural of this name (which must be explicitly entered, due to irregular ways of pluralizing English
| |
|
| |
| words), for example <span style="color:#008800">"critical points"</span>,
| |
| <li>A list of the correct points that the student should label, specified in individual <code>correctPoint</code>
| |
|
| |
| XML elements, and</li>
| |
| <li>the error tolerance, in pixels, to allow in the placement of points.</li>
| |
| </ol>
| |
|
| |
| All of this information is combined in one <code>labelType</code> 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:
| |
|
| |
| <code>
| |
| <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>
| |
| </code>
| |
|
| |
| 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.
| |
|
| |
| <h2>Full PG source code</h2>
| |
|
| |
|
| |
| 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.
| |
|
| |
| <!-- include full source --->
| |
|
| |
| <code>
| |
| ##DESCRIPTION
| |
| ## Integration with substitution
| |
| ##ENDDESCRIPTION
| |
|
| |
| ##KEYWORDS('critical points', 'critical', 'extrema', 'Flash applets','NSF-0941388')
| |
|
| |
| ## DBsubject('Calculus')
| |
| ## DBchapter('Differentiation')
| |
| ## DBsection('Curve Sketching')
| |
| ## Date('8/27/2011')
| |
| ## Author('Dan Gries')
| |
| ## Institution('Hopkins School')
| |
| ## TitleText1('')
| |
| ## EditionText1('2012')
| |
| ## AuthorText1('')
| |
| ## Section1('')
| |
| ## Problem1('')
| |
|
| |
| ########################################################################
| |
|
| |
| DOCUMENT();
| |
|
| |
|
| |
| loadMacros(
| |
| "PGstandard.pl",
| |
| "MathObjects.pl",
| |
| "AppletObjects.pl"
| |
| );
| |
|
| |
| TEXT(beginproblem());
| |
| $showPartialCorrectAnswers = 1;
| |
| Context("Numeric");
| |
|
| |
| $ans = Compute("1");
| |
|
| |
| $success = 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,
| |
| # 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;
| |
|
| |
| ##############################################################
| |
| #
| |
| # Answers
| |
| #
| |
| ## answer evaluators
| |
|
| |
| NAMED_ANS('answerBox'=>$ans->cmp());
| |
|
| |
|
| |
| ENDDOCUMENT();
| |
| </code>
| |