Difference between revisions of "Graph Shader Flash Applet"
(17 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
− | == Graph Shader Flash Applet for WeBWorK Problems: How to Use == |
||
+ | [[Category:Flash Applets]] |
||
− | [[where to find WeBWorK problems like this]] |
||
+ | <h2>About the Graph Shader 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:#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: |
+ | <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/29/]</p> |
+ | [https://testcourses.webwork.maa.org/webwork2/FlashAppletDemos/variousAppletProblems/29/ Example WeBWorK problem]</p> |
+ | |||
+ | [[where to find WeBWorK problems like this | Where to find more problems like this]] |
||
<p>The graph shader Flash applet provides a graphical user interface which allows students to answer questions by shading a portion of a displayed graph. It has been designed to be easily repurposed for a variety of problems, by editing only the PG file for the WeBWorK problem.</p> |
<p>The graph shader Flash applet provides a graphical user interface which allows students to answer questions by shading a portion of a displayed graph. It has been designed to be easily repurposed for a variety of problems, by editing only the PG file for the WeBWorK problem.</p> |
||
Line 13: | Line 13: | ||
<!-- (screencap) --> |
<!-- (screencap) --> |
||
+ | <div style="text-align:center;"> |
||
+ | [[File:GraphShaderApplet_screencap.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, what question to ask, and what portions of the graph needed to be shaded in to constitue a correct answer.</p> |
<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, what question to ask, and what portions of the graph needed to be shaded in to constitue a correct answer.</p> |
||
− | <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> |
+ | <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 |
+ | <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> |
<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> |
||
Line 24: | Line 27: | ||
<p>After the tagging, description, and initialization sections of the problem, the problem is set up in a section following the comment line: |
<p>After the tagging, description, and initialization sections of the problem, the problem is set up in a section following the comment line: |
||
− | <pre><code>########### Problem parameters for customization here #######################</code></pre> |
||
+ | <br /> |
||
+ | <code>########### Problem parameters for customization here #######################</code> |
||
+ | <br /> |
||
− | + | Below are the values that are used in an example problem, where a student is asked to shade in the portion of the graph of a function where the first derivative is positive. To customize the problem, change the string values within the single quotes.</p> |
|
<h3>Function to plot</h3> |
<h3>Function to plot</h3> |
||
These variables define the function to plot, and plot window: |
These variables define the function to plot, and plot window: |
||
− | + | <ul> |
|
− | + | <li><code>$functionText = 'sin(x)';</code> – the function to plot, entered as a string.</li> |
|
− | + | </ul> |
|
− | + | This is followed by four variables defining the plot window: |
|
− | + | <ul> |
|
− | + | <li><code>$xMin = '-1';</code></li> |
|
− | + | <li><code>$xMax = '7';</code></li> |
|
− | + | <li><code>$yMin = '-1.2';</code></li> |
|
− | + | <li><code>$yMax = '1.2';</code></li> |
|
− | + | </ul> |
|
− | </ul> |
||
− | </li> |
||
<h3>Tick marks and numerical labels</h3> |
<h3>Tick marks and numerical labels</h3> |
||
These variables define whether or not to show tick marks and labels, and control how far apart they are spaced: |
These variables define whether or not to show tick marks and labels, and control how far apart they are spaced: |
||
Line 48: | Line 53: | ||
<li><code>$showLabels = 'true';</code> – whether to show numerical labels at the tick mark positions.</li> |
<li><code>$showLabels = 'true';</code> – whether to show numerical labels at the tick mark positions.</li> |
||
</ul> |
</ul> |
||
− | </li> |
||
<h3>Grid lines</h3> |
<h3>Grid lines</h3> |
||
Grid lines for the plot are controlled with the following variables: |
Grid lines for the plot are controlled with the following variables: |
||
Line 56: | Line 60: | ||
<li><code>$gridSpaceY = '0.5';</code> – spacing of grid lines in the y direction</li> |
<li><code>$gridSpaceY = '0.5';</code> – spacing of grid lines in the y direction</li> |
||
</ul> |
</ul> |
||
− | </li> |
||
<h3>The correct answer to the problem</h3> |
<h3>The correct answer to the problem</h3> |
||
A correct answer is defined by appropriate beginning and ending points for the intervals which should be shaded by the student (there is no distinction made in the applet between open and closed intervals). These endpoints should combined in one list, separated by commas. For example, setting |
A correct answer is defined by appropriate beginning and ending points for the intervals which should be shaded by the student (there is no distinction made in the applet between open and closed intervals). These endpoints should combined in one list, separated by commas. For example, setting |
||
− | <pre><code>$correctIntervalPoints = '-1, 1.5707963268, 4.71238898038, 7';</code></pre> |
||
+ | |||
+ | <code>$correctIntervalPoints = '-1, 1.5707963268, 4.71238898038, 7';</code> |
||
+ | |||
means that the correct intervals to be shaded are (-1, 1.5707963268) and (4.71238898038, 7). |
means that the correct intervals to be shaded are (-1, 1.5707963268) and (4.71238898038, 7). |
||
− | </li> |
||
<h3>Directions for the student</h3> |
<h3>Directions for the student</h3> |
||
The next string variable contains the text directions informing the student what to do. For example: |
The next string variable contains the text directions informing the student what to do. For example: |
||
− | <div class="codeBlock"> |
||
+ | |||
<code>$directions = 'Directions: Drag with your mouse to highlight the |
<code>$directions = 'Directions: Drag with your mouse to highlight the |
||
intervals where the shown function has a positive first derivative.';</code> |
intervals where the shown function has a positive first derivative.';</code> |
||
− | </div> |
||
+ | |||
− | </ol> |
||
− | </p> |
||
<h2>Full PG source code</h2> |
<h2>Full PG source code</h2> |
||
Line 77: | Line 79: | ||
<!-- include full source ---> |
<!-- include full source ---> |
||
− | <div id="fullSource"> |
||
<pre><code> |
<pre><code> |
||
##DESCRIPTION |
##DESCRIPTION |
Latest revision as of 12:26, 1 August 2013
Contents
About the Graph Shader 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 graph shader Flash applet provides a graphical user interface which allows students to answer questions by shading a portion of a displayed graph. It 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 shade the portion of the graph where the first derivative of the function is positive.
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, what question to ask, and what portions of the graph needed to be shaded in to constitue a correct answer.
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.
After the tagging, description, and initialization sections of the problem, the problem is set up in a section following the comment line:
########### Problem parameters for customization here #######################
Below are the values that are used in an example problem, where a student is asked to shade in the portion of the graph of a function where the first derivative is positive. To customize the problem, change the string values within the single quotes.
Function to plot
These variables define the function to plot, and plot window:
$functionText = 'sin(x)';
– the function to plot, entered as a string.
This is followed by four variables defining the plot window:
$xMin = '-1';
$xMax = '7';
$yMin = '-1.2';
$yMax = '1.2';
Tick marks and numerical labels
These variables define whether or not to show tick marks and labels, and control how far apart they are spaced:
$showTicks = 'true';
– enter true or false depending on whether you want to show tick marks on the axes.$labelSpaceX = '1';
– how far apart tick marks should be on the x-axis.$labelSpaceY = '1';
– how far apart tick marks should be on the y-axis.$showLabels = 'true';
– whether to show numerical labels at the tick mark positions.
Grid lines
Grid lines for the plot are controlled with the following variables:
$showGrid = 'true';
– whether to show grid lines$gridSpaceX = '0.5';
– spacing of grid lines in the x direction$gridSpaceY = '0.5';
– spacing of grid lines in the y direction
The correct answer to the problem
A correct answer is defined by appropriate beginning and ending points for the intervals which should be shaded by the student (there is no distinction made in the applet between open and closed intervals). These endpoints should combined in one list, separated by commas. For example, setting
$correctIntervalPoints = '-1, 1.5707963268, 4.71238898038, 7';
means that the correct intervals to be shaded are (-1, 1.5707963268) and (4.71238898038, 7).
Directions for the student
The next string variable contains the text directions informing the student what to do. For example:
$directions = 'Directions: Drag with your mouse to highlight the
intervals where the shown function has a positive first derivative.';
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.
<code> ##DESCRIPTION ## Graph shading - derivatives ##ENDDESCRIPTION ##KEYWORDS('graph shading', 'Flash applets','NSF-0941388') ## DBsubject('Calculus') ## DBchapter('Applications of Differentiation') ## DBsection('Curve sketching') ## Date('7/13/2012') ## Author('Dan Gries') ## Institution('Hopkins School') ## TitleText1('') ## EditionText1('2011') ## AuthorText1('') ## Section1('') ## Problem1('') ######################################################################## DOCUMENT(); loadMacros( "PGbasicmacros.pl", "extraAnswerEvaluators.pl", "AppletObjects.pl", ); TEXT(beginproblem()); $showPartialCorrectAnswers = 1; Context("Numeric"); ########### Problem parameters for customization here ################### # function to plot, and plot window $functionText = 'sin(x)'; $xMin = '-1'; $xMax = '7'; $yMin = '-1.2'; $yMax = '1.2'; #whether to show tick marks on the axes, spacing of ticks, and whether to show numeric labels $showTicks = 'true'; $labelSpaceX = '1'; $labelSpaceY = '1'; $showLabels = 'true'; #whether to show grid, and spacing of grid lines $showGrid = 'true'; $gridSpaceX = '0.5'; $gridSpaceY = '0.5'; $correctIntervalPoints = '-1, 1.5707963268, 4.71238898038, 7'; $directions = 'Directions: Drag with your mouse to highlight the intervals where the shown function has a positive first derivative.'; ################# End of problem customization #################### $ans = Compute("1"); ################################### # Create link to applet ################################### $appletName = "graph_shading_basic"; $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 => '520', bgcolor => '#ffffff', debugMode => 0, submitActionScript => qq{getQE("answerBox").value=getApplet("$appletName").getAnswer() }, ); ################################### # Configure applet ################################### $configXMLString = qq{<XML> <func>$functionText</func> <window xMin='$xMin' xMax='$xMax' yMin='$yMin' yMax='$yMax' /> <showGrid>$showGrid</showGrid> <showTicks>$showTicks</showTicks> <showLabels>$showLabels</showLabels> <labelSpaceX>$labelSpaceX</labelSpaceX> <labelSpaceY>$labelSpaceY</labelSpaceY> <gridSpaceX>$gridSpaceX</gridSpaceX> <gridSpaceY>$gridSpaceY</gridSpaceY> <answer> <intervalPoints>$correctIntervalPoints</intervalPoints> </answer> </XML>}; $applet->configuration($configXMLString); $applet->initialState(qq{<XML> </XML>}); TEXT( MODES(TeX=>'object code', HTML=>$applet->insertAll( debug=>0, includeAnswerBox=>1, ))); BEGIN_TEXT $BR $BR $directions END_TEXT Context()->normalStrings; ############################################################## # Answers ## answer evaluators NAMED_ANS('answerBox'=>$ans->cmp()); ENDDOCUMENT(); </code>