Difference between revisions of "Talk:Custom Point Labeler Applet"
Jump to navigation
Jump to search
(Blanked the page) |
|||
| (10 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> |
||
