Difference between revisions of "GeoGebraApplets"

From WeBWorK_wiki
Jump to navigation Jump to search
(Created page with '<h2>Your title here: PG Code Snippet</h2> <!-- Header for these sections -- no modification needed --> <p style="background-color:#eeeeee;border:black solid 1px;padding:3px;…')
 
 
(30 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
<h2>Your title here: PG Code Snippet</h2>
  
  +
{{Warning}} This example has been deprecated. See the [http://webwork.maa.org/wiki/GeoGebraWeb1 GeoGebraWeb] JavaScript example instead. {{historical}}
  +
  +
<h2>Deprecated: GeoGebra Applets</h2>
   
 
<!-- Header for these sections -- no modification needed -->
 
<!-- Header for these sections -- no modification needed -->
   
 
<p style="background-color:#eeeeee;border:black solid 1px;padding:3px;">
  
<p style="background-color:#eeeeee;border:black solid 1px;padding:3px;">
−
<em>This PG code shows how to write WebWork questions with interactive GeoGebra applets.</em>
  
  +
<em>This PG code shows how to write WebWork questions with interactive [http://www.geogebra.org/ GeoGebra] applets. Instructions for how to create the interactive applet in GeoGebra that is used in this example are given at the bottom of the page.</em> This example is deprecated because it uses Java instead of JavaScript. See the [http://webwork.maa.org/wiki/GeoGebraWeb1 GeoGebraWeb] JavaScript example instead.
 
</p>
  
</p>
   
Line 30: Line 32:
 
"unionTables.pl",
  
"unionTables.pl",
 
"AppletObjects.pl",
  
"AppletObjects.pl",
  +
"parserNumberWithUnits.pl",
 
"PGcourse.pl",
  
"PGcourse.pl",
 
);
  
);
Line 60: Line 63:
   
 
# $f = Formula("$c / (1+(t-2)^2) + $d / (1+(t-4)^2)");
  
# $f = Formula("$c / (1+(t-2)^2) + $d / (1+(t-4)^2)");
−
$F = Formula("$c * arctan(t-2) + $d * arctan(t-4) - $c * arctan(-2) - $d * arctan(-4)");
 +
$F = Formula("$c * arctan(t-2) + $d * arctan(t-4)
  +
- $c * arctan(-2) - $d * arctan(-4)");
   
 
$Fa = $F->eval(t=>$a);
  
$Fa = $F->eval(t=>$a);
Line 73: Line 76:
 
</p>
  
</p>
 
<p>
  
<p>
−
We define the accumulation function <code>$F</code> use it to generate the answers.
 +
We define the accumulation function (antiderivative) <code>$F</code> use it to generate the answers.
 
</p>
  
</p>
 
</td>
  
</td>
Line 101: Line 104:
 
height => 306,
  
height => 306,
 
mayscript => "true",
  
mayscript => "true",
−
debugMode => 0, # 0 = no debug, 1 = xml visible, 2 = add alerts thru applet
 +
# 0 = no debug, 1 = xml visible, 2 = add alerts thru applet
  +
debugMode => 0,
 
onInit => 'ggbOnInit',
  
onInit => 'ggbOnInit',
 
type => 'geogebra',
  
type => 'geogebra',
−
parameter_string => GEOGEBRA_PARAMS(), # paste parameters in section at the bottom
 +
# paste parameters in section at the bottom
  +
parameter_string => GEOGEBRA_PARAMS(),
 
);
  
);
 
</pre>
  
</pre>
Line 132: Line 135:
 
<td style="background-color:#ffffdd;border:black 1px dashed;">
  
<td style="background-color:#ffffdd;border:black 1px dashed;">
 
<pre>
  
<pre>
−
$im = image( "graph-c".$c."-d".$d.".png", width=>486, height=>306, tex_size=>900 );
 +
$im = image( "graph-c".$c."-d".$d.".png",
  +
width=>486, height=>306, tex_size=>900 );
 
</pre>
  
</pre>
 
</td>
  
</td>
Line 155: Line 158:
 
qq!
 
qq!
 
<script language="javascript">
  
<script language="javascript">
−
function ggbOnInit(param) {
 +
function ggbOnInit(param) {
−
if (param == "$appletName") {
 +
if (param == "$appletName") {
−
applet_loaded(param,1); // report that applet is ready.
+
applet_loaded(param,1); // report that applet is ready.
−
ww_applet_list[param].safe_applet_initialize(2);
 +
ww_applet_list[param].safe_applet_initialize(2);
−
}
 +
}
−
}
+
}
 
</script>
  
</script>
 
<noscript>For this question to work properly,
 
<noscript>For this question to work properly,
Line 189: Line 192:
 
<script language="javascript">
  
<script language="javascript">
 
function setAppletCoefficients() {
  
function setAppletCoefficients() {
−
var applet=getApplet("$appletName"); // alert("Updating coefficients");
 +
var applet=getApplet("$appletName"); // alert("Updating coefficients");
 
if (typeof(applet)!="undefined") {
  
if (typeof(applet)!="undefined") {
 
if (typeof(applet.setValue)!="undefined") {
  
if (typeof(applet.setValue)!="undefined") {
Line 196: Line 199:
 
// List the values of the parameters to be set in the applet here
  
// List the values of the parameters to be set in the applet here
 
 
−
// Set variables "c" and "d" in GeoGebra to values $c and $d from WebWork
 +
// Set variables "c" and "d" in GeoGebra to values $c and $d from WebWork
−
applet.setValue("c", $c);
+
applet.setValue("c", $c);
−
applet.setValue("d", $d);
+
applet.setValue("d", $d);
   
 
} else {
  
} else {
Line 234: Line 237:
 
\{
  
\{
 
ColumnTable(
  
ColumnTable(
−
"The figure shows an interactive graph of velocity \( v(t) \). You can
+
"The figure shows an interactive graph of velocity \( v(t) \), in
  +
meters per second, where time \( t \) is measured in seconds. You can
 
change the value of \( t \) in the graph by clicking and dragging
  
change the value of \( t \) in the graph by clicking and dragging
 
the red dot along the horizontal \( t \)-axis.
  
the red dot along the horizontal \( t \)-axis.
 
$BR
  
$BR
 
$BR
  
$BR
−
(a) What is the displacement of the object between \( t = 0 \)
+
(a) What is the displacement between \( t = 0 \) seconds
−
and \( t = $a \)?
 +
and \( t = $a \) seconds?
 
$BR".
  
$BR".
 
ans_rule(20).
  
ans_rule(20).
−
"$BR
  
  +
" (include ".helpLink('units').")
 
$BR
  
$BR
−
(b) What is the displacement of the object between \( t = 0 \)
  
  +
$BR
−
and \( t = $b \)?
  
  +
(b) What is the displacement between \( t = 0 \) seconds
  +
and \( t = $b \) seconds?
 
$BR".
  
$BR".
 
ans_rule(20).
  
ans_rule(20).
−
"$BR
  
  +
" (include ".helpLink('units').")
 
$BR
  
$BR
−
(c) What is the displacement of the object between \( t = $a \)
  
  +
$BR
−
and \( t = $b \)?
  
  +
(c) What is the displacement between \( t = $a \) seconds
  +
and \( t = $b \) seconds?
 
$BR".
  
$BR".
−
ans_rule(20)
 +
ans_rule(20).
  +
" (include ".helpLink('units').")"
 
,
  
,
 
$BCENTER.
  
$BCENTER.
−
MODES(HTML=>$applet->insertAll(debug=>0, reinitialize_button=>0, includeAnswerBox=>0,), TeX=>$im).
 +
MODES(HTML=>$applet->insertAll(debug=>0, reinitialize_button=>0,
  +
includeAnswerBox=>0,), TeX=>$im).
 
$PAR.
  
$PAR.
 
"Graph of velocity \( y = v(t) \)".
  
"Graph of velocity \( y = v(t) \)".
Line 287: Line 292:
 
<td style="background-color:#eeddff;border:black 1px dashed;">
  
<td style="background-color:#eeddff;border:black 1px dashed;">
 
<pre>
  
<pre>
−
ANS( Real($Fa) ->cmp(tolerance=>0.11, tolType=>'absolute') );
  
  +
ANS( NumberWithUnits("$Fa","m")
−
ANS( Real($Fb) ->cmp(tolerance=>0.11, tolType=>'absolute') );
 +
->cmp(tolerance=>0.11, tolType=>'absolute') );
−
ANS( Real($disp)->cmp(tolerance=>0.21, tolType=>'absolute') );
 +
ANS( NumberWithUnits("$Fb","m")
  +
->cmp(tolerance=>0.11, tolType=>'absolute') );
  +
ANS( NumberWithUnits("$disp","m")
  +
->cmp(tolerance=>0.21, tolType=>'absolute') );
 
</pre>
  
</pre>
 
<td style="background-color:#eeccff;padding:7px;">
  
<td style="background-color:#eeccff;padding:7px;">
Line 308: Line 313:
   
 
# For persistence of applet state when answers are submitted
  
# For persistence of applet state when answers are submitted
−
<param name="ggbOnInitParam" value="$appletName"/>
 +
<param name="ggbOnInitParam" value="$appletName"/>
   
−
# The GeoGebra "source code" from GeoGebra -> File -> Export -> Dynamic worksheet as Webpage (html)
  
  +
−
<param name="ggbBase64" value="UEsDBBQACAAIAGKtZj0AAAAAAAAAAAAAAAAMAAAAZ2VvZ2VicmEueG1s3Vdtb9s2EP68/gqCAwobQ2xKll1ntVJk2QYE6NYA2YpgHwbQ0tnmIokeSTlyfv2OpCTLypIm64C9+INlHk/Hu+c5PqQX76o8IztQWsgipsGIUQJFIlNRrGNamtXJnL47e7VYg1zDUnGykirnJqaTUUitvRRnr75Y6I28IzxzLh8F3MV0xTMNlOitAp7qDYA5svOyEpngav9h+RskRh8mfJDLYlviKkaVaEvy9L3QzXDsFtxmwnwrdiIFRTKZxHQ2xdTx10dQRiQ8i2nEvCWMadibRNPEzm6kEveyMNb9EDzjS8gQgGuzz4CQnZ0N/dQKnQnR4h4QLGdbjB0GCyiTTKSCF7ZOlyI6EXInUrPBXOYzXA3EemOxY5GPlkip0uu9NpCT6hdQEoPOLAV7PwhDR4jGjHG9KXNT3ZGLArtrMAbz1YRXoBvU1kqk3d+X+huZpS3QWykKc8G3plSOa1abXNFuqGy258U6g9oWIBUbSG6Xsrr2CEx86J/2W/eKS2e5vpCZVERZ2KfoUD+X/ul8bJ6tF3M+zHnUMWzQdj44DZ2Hey790/MkCp9aXXfQFB2wZhmhiTVYELFFGzgcwTGlpCyEed8MsDNuD5Va/x/LfIlbo9sbbcjgbwq5GPc6Z3ELqoDM90eBvJay1L4JPXUujxQSkePQTwR1cpasnzEBb01hraDJ2+8rD5ebZd0e7JkX4yYJm4PGXBODAoH1GFvLeZKUeZlxZ/u+LPzk4LuK51uM82ZoN7jBzRXTK15m5Aq40rKgJOUGX7fCARnkgHvJuNYpyhyUSFoYE2pTw3zKOquwaXanNNKJRtvK9UsddNDhkfZCgdluOP4aBc1m36OEdBFx4X6QKfSwRbxdnbhdtz4AyhtAWsumqTcB2WJIt6XahJBjX+4nC0/7hU/+N4UnMs95kZKC5+jedI2rV1i1J5wh8WRMBhiVfEUGFTkhyPvw14H9HqIp7c1Gh1msL4jpSeA0kodWAxrkZGma8CufVJ3KAzZWTVItsvRYZ8wGN3QBWtsDoS38IT9HmvBCetgz6WF9EXw0ucdZuLKK36OgOkeJe4DczdPIuaOjrfiGPo3IQU67gDSnxUsh+bBaaTCksvS/wQPSnvx/ilj4+Q1d66W2q6Fv6JZzPXfvX3Y+/iC1579bd/o0CZeFQaHmWY+H1aCqu7rt6WpwM3zADH+amb7C8L7CsNEpY2waTcJoPg/nUzb7rIYOppP2rD8wOHmZ5rywqaHCa6a2V9i2w6AyyCpOxPT176U0by8Px5j++vWXAXt7kWFoYnlIFV/jSkAU4EAirpksvOVwQyTmxB7+Ix/OpXCMtF2THifwTwrDSlRYze74auvurxobYnW4orurHIKrm4uKp99wZZw+kLrZp6fdz9zvtBGbse5n2t0Jn+YoPOLoWqwLzJnjfwYSE29DreeUPAPt8D+EdtSizR5DOzyC1QvNSTCKor79JXBHR3DvEeTdwAyf39HRXxL2fyXE0xHzLRyMZtFjKI67t1/3X6/+H3z2B1BLBwh3r/gKdQQAADkPAABQSwECFAAUAAgACABirWY9d6/4CnUEAAA5DwAADAAAAAAAAAAAAAAAAAAAAAAAZ2VvZ2VicmEueG1sUEsFBgAAAAABAAEAOgAAAK8EAAAAAA=="/>
  
  +
# The GeoGebra "source code" from GeoGebra ->
−
<param name="image" value="http://www.geogebra.org/webstart/loading.gif" />
  
  +
# File -> Export -> Dynamic worksheet as Webpage (html)
−
<param name="boxborder" value="false" />
 +
<param name="ggbBase64" value="UEsDBBQ....stuff omitted..."/>
−
<param name="centerimage" value="true" />
 +
<param name="image"
−
<param name="java_arguments" value="-Xmx512m" />
 +
value="http://www.geogebra.org/webstart/loading.gif" />
−
<param name="cache_archive" value="geogebra.jar, geogebra_main.jar, geogebra_gui.jar, geogebra_cas.jar, geogebra_export.jar, geogebra_properties.jar" />
 +
<param name="boxborder" value="false" />
−
<param name="cache_version" value="3.2.41.0, 3.2.41.0, 3.2.41.0, 3.2.41.0, 3.2.41.0, 3.2.41.0" />
 +
<param name="centerimage" value="true" />
−
<param name="framePossible" value="false" />
 +
<param name="java_arguments" value="-Xmx512m" />
−
<param name="showResetIcon" value="false" />
 +
<param name="cache_archive" value="geogebra.jar,
−
<param name="showAnimationButton" value="true" />
 +
geogebra_main.jar, geogebra_gui.jar, geogebra_cas.jar,
−
<param name="enableRightClick" value="false" />
 +
geogebra_export.jar, geogebra_properties.jar" />
−
<param name="errorDialogsActive" value="true" />
 +
<param name="cache_version" value="3.2.41.0, 3.2.41.0,
−
<param name="enableLabelDrags" value="false" />
 +
3.2.41.0, 3.2.41.0, 3.2.41.0, 3.2.41.0" />
−
<param name="showMenuBar" value="false" />
 +
<param name="framePossible" value="false" />
−
<param name="showToolBar" value="false" />
 +
<param name="showResetIcon" value="false" />
−
<param name="showToolBarHelp" value="false" />
 +
<param name="showAnimationButton" value="true" />
−
<param name="showAlgebraInput" value="false" />
 +
<param name="enableRightClick" value="false" />
−
<param name="allowRescaling" value="true" />
 +
<param name="errorDialogsActive" value="true" />
  +
<param name="enableLabelDrags" value="false" />
  +
<param name="showMenuBar" value="false" />
  +
<param name="showToolBar" value="false" />
  +
<param name="showToolBarHelp" value="false" />
  +
<param name="showAlgebraInput" value="false" />
  +
<param name="allowRescaling" value="true" />
   
 
};
  
};
Line 341: Line 346:
 
<p>
  
<p>
 
<b>GeoGebra Applet Parameters:</b>
  
<b>GeoGebra Applet Parameters:</b>
−
When you export your GeoGebra drawing pad via File -&gt; Export ->&gt; Dynamic worksheet as Webpage (html), you get an html file with source code you can paste directly in here below the commented line <code># The GeoGebra "source code" ...</code>. The parameter named <code>ggbBase64</code> is actually the source code for the GeoGebra worksheet. Although it is possible to use an applet parameter to include your <code>filename.ggb</code> file directly, this is a bad idea for security reasons and should be avoided entirely.
 +
When you export your GeoGebra drawing pad via File -&gt; Export -&gt; Dynamic worksheet as Webpage (html), you get an html file with source code you can paste directly in here below the commented lines <code># The GeoGebra "source code" ...</code>. The parameter named <code>ggbBase64</code> is actually the source code for the GeoGebra worksheet, and it was so long that we couldn't include it right here and have the source code and comments both visible at the same time (the <code>ggbBase64</code> parameter is given in full near the bottom of the page). Using an applet parameter to include your <code>filename.ggb</code> file directly is a bad idea for security reasons and has been prohibited in WeBWorK.
 
</p>
  
</p>
 
</td>
  
</td>
Line 353: Line 358:
   
 
[[Category:Problem Techniques]]
  
[[Category:Problem Techniques]]
  +
  +
  +
  +
  +
<table>
  +
<tr>
  +
<td style="background-color:#ddffdd;border:black 1px dashed;">
  +
<h3><u>The really long parameter ggbBase64</u></h3>
  +
<param name="ggbBase64" value="UEsDBBQACAAIAGKtZj0AAAAAAAAAAAAAAAAMAAAAZ2VvZ2VicmEueG1s3Vdtb9s2EP68/gqCAwobQ2xKll1ntVJk2QYE6NYA2YpgHwbQ0tnmIokeSTlyfv2OpCTLypIm64C9+INlHk/Hu+c5PqQX76o8IztQWsgipsGIUQJFIlNRrGNamtXJnL47e7VYg1zDUnGykirnJqaTUUitvRRnr75Y6I28IzxzLh8F3MV0xTMNlOitAp7qDYA5svOyEpngav9h+RskRh8mfJDLYlviKkaVaEvy9L3QzXDsFtxmwnwrdiIFRTKZxHQ2xdTx10dQRiQ8i2nEvCWMadibRNPEzm6kEveyMNb9EDzjS8gQgGuzz4CQnZ0N/dQKnQnR4h4QLGdbjB0GCyiTTKSCF7ZOlyI6EXInUrPBXOYzXA3EemOxY5GPlkip0uu9NpCT6hdQEoPOLAV7PwhDR4jGjHG9KXNT3ZGLArtrMAbz1YRXoBvU1kqk3d+X+huZpS3QWykKc8G3plSOa1abXNFuqGy258U6g9oWIBUbSG6Xsrr2CEx86J/2W/eKS2e5vpCZVERZ2KfoUD+X/ul8bJ6tF3M+zHnUMWzQdj44DZ2Hey790/MkCp9aXXfQFB2wZhmhiTVYELFFGzgcwTGlpCyEed8MsDNuD5Va/x/LfIlbo9sbbcjgbwq5GPc6Z3ELqoDM90eBvJay1L4JPXUujxQSkePQTwR1cpasnzEBb01hraDJ2+8rD5ebZd0e7JkX4yYJm4PGXBODAoH1GFvLeZKUeZlxZ/u+LPzk4LuK51uM82ZoN7jBzRXTK15m5Aq40rKgJOUGX7fCARnkgHvJuNYpyhyUSFoYE2pTw3zKOquwaXanNNKJRtvK9UsddNDhkfZCgdluOP4aBc1m36OEdBFx4X6QKfSwRbxdnbhdtz4AyhtAWsumqTcB2WJIt6XahJBjX+4nC0/7hU/+N4UnMs95kZKC5+jedI2rV1i1J5wh8WRMBhiVfEUGFTkhyPvw14H9HqIp7c1Gh1msL4jpSeA0kodWAxrkZGma8CufVJ3KAzZWTVItsvRYZ8wGN3QBWtsDoS38IT9HmvBCetgz6WF9EXw0ucdZuLKK36OgOkeJe4DczdPIuaOjrfiGPo3IQU67gDSnxUsh+bBaaTCksvS/wQPSnvx/ilj4+Q1d66W2q6Fv6JZzPXfvX3Y+/iC1579bd/o0CZeFQaHmWY+H1aCqu7rt6WpwM3zADH+amb7C8L7CsNEpY2waTcJoPg/nUzb7rIYOppP2rD8wOHmZ5rywqaHCa6a2V9i2w6AyyCpOxPT176U0by8Px5j++vWXAXt7kWFoYnlIFV/jSkAU4EAirpksvOVwQyTmxB7+Ix/OpXCMtF2THifwTwrDSlRYze74auvurxobYnW4orurHIKrm4uKp99wZZw+kLrZp6fdz9zvtBGbse5n2t0Jn+YoPOLoWqwLzJnjfwYSE29DreeUPAPt8D+EdtSizR5DOzyC1QvNSTCKor79JXBHR3DvEeTdwAyf39HRXxL2fyXE0xHzLRyMZtFjKI67t1/3X6/+H3z2B1BLBwh3r/gKdQQAADkPAABQSwECFAAUAAgACABirWY9d6/4CnUEAAA5DwAADAAAAAAAAAAAAAAAAAAAAAAAZ2VvZ2VicmEueG1sUEsFBgAAAAABAAEAOgAAAK8EAAAAAA=="/>
  +
</td>
  +
</tr>
  +
</table>
  +
  +
  +
  +
  +
<table>
  +
<tr>
  +
<td style="background-color:#eeddff;border:black 1px dashed;">
  +
<h3><u>Steps to construct the GeoGebra applet:</u></h3>
  +
<ol>
  +
<li>Download [http://www.geogebra.org/cms/en/download GeoGebra], install it, and run it.</li>
  +
<li>From the menu bar at the top of GeoGebra, select <code>View -> Grid</code></li>
  +
<li>In the Input textbox at the bottom of GeoGebra, type <code>c=1 (Enter)</code> and <code>d=3 (Enter)</code> to create Free Objects</li>
  +
<li>In the Input textbox at the bottom of GeoGebra, type <code>f=Function[c/(1+(x-2)^2)+d/(1+(x-4)^2),-10,10]</code> to create a Dependent Object</li>
  +
<li>From the graphical tool bar near the top of GeoGebra, click the New Point tool (it has a point and the letter A on it and is second from the left)</li>
  +
<li>Put the pointer over the x-axis and click. You should see a new Dependent Object <code>A = (?,0)</code> listed in the Algebra View</li>
  +
<li>From the menu bar at the top of GeoGebra, select <code>Options -> Point Capturing -> Off</code></li>
  +
<li>In the algebra view in the left column of GeoGebra, right-click on the point you created and select Object Properties. Set the color and style as you like, then from the Basic tab select Show Label and Value</li>
  +
<li>In the Input textbox at the bottom of GeoGebra, type <code>a = Integral[f(x),0,x(A)]</code> to create a dependent object. You will see a shaded region representing the area under the curve. The syntax <code>x(A)</code> gets the value of the x-coordinate of the point A.</li>
  +
<li>In the algebra view in the left column of GeoGebra, right-click on the integral you created and select Object Properties. Set the color and style as you like.</li>
  +
<li>From the graphical toolbar near the top of GeoGebra, choose the Insert Text tool by clicking (it is labeled ABC and is obtained by clicking and holding on the icon that is second from the right until a drop down menu appears).</li>
  +
<li>Click the mouse somewhere on the drawing pad and a new window with a text box will appear. Type <code>"Signed area = " + a</code> in the text box and click OK.</li>
  +
<li>From the graphical toolbar near the top of GeoGebra, choose the Move tool (it has a mouse pointer on it and is the leftmost icon)</li>
  +
<li>Click and drag the "Signed area = ..." text to a desired location.</li>
  +
<li>Right-click on the "Signed area = ..." text and select Object Properties. Change the color and font size as desired, then from the Basic tab select Fix Object</li>
  +
<li>As before, use the Insert Text tool to write instructions, etc.</li>
  +
<li>Close the algebra view by going to the menu bar at the top of GeoGebra and selecting <code>View -> Algebra View</code></li>
  +
<li>From the graphical toolbar near the top of GeoGebra, choose the Move Drawing Pad tool (it has perpendicular two-headed arrows and is the rightmost icon).</li>
  +
<li>Click and drag on the drawing pad to move your picture up the the top left corner.</li>
  +
<li>Resize the GeoGebra window so that the drawing pad is as small as possible while still displaying the drawing well.</li>
  +
<li>From the menu bar at the top of GeoGebra, select <code>File -> Save</code>.</li>
  +
<li>From the menu bar at the top of GeoGebra, select <code>File -> Export -> Dynamic Worksheet as Webpage (html)</code>.</li>
  +
<li>View the html source code by opening the html file in a text editor. Copy the parameter <code><param name="ggbBase64" value="UEsD...stuff omitted..."></code> and paste it into your WebWork PG file near the bottom where it says <code>GEOGEBRA_PARAMS</code>. Also, get the width and height of the applet from the html source code and put those numbers in your WebWork PG file within the <code>JavaApplet()</code> method.</li>
  +
<li>From the menu bar at the top of GeoGebra, select <code>File -> Export -> Graphics View as Picture (png, eps)</code> and save it as a PNG file. Change the values of the parameters c and d and repeat this process until you have generated one picture for every possible value of c and d you will use in your WebWork question.</li>
  +
<li>Upload your PNG picture files to the same directory as your WebWork PG file on the WebWork server.</li>
  +
</ol>
  +
</td>
  +
</tr>
  +
</table>
  +
  +
   
   
 
<ul>
  
<ul>
−
<li>POD documentation: [http://webwork.maa.org/doc/cvs/pg_CURRENT/ nameOfMacro.pl.html]</li>
 +
<li>POD documentation: [http://webwork.maa.org/pod/pg/macros/AppletObjects.html AppletObjects.pl]</li>
−
<li>PG macro: [http://cvs.webwork.rochester.edu/viewcvs.cgi/pg/macros/#dirlist nameOfMacro.pl]</li>
 +
<li>PG macro: [http://webwork.maa.org/viewvc/system/trunk/pg/macros/AppletObjects.pl?view=log AppletObjects.pl]</li>
 
</ul>
  
</ul>

Latest revision as of 17:13, 15 June 2021

Warning : This example has been deprecated. See the GeoGebraWeb JavaScript example instead.

This article has been retained as a historical document. It is not up-to-date and the formatting may be lacking. Use the information herein with caution.

Deprecated: GeoGebra Applets


This PG code shows how to write WebWork questions with interactive GeoGebra applets. Instructions for how to create the interactive applet in GeoGebra that is used in this example are given at the bottom of the page. This example is deprecated because it uses Java instead of JavaScript. See the GeoGebraWeb JavaScript example instead.

Problem Techniques Index

PG problem file Explanation 
DOCUMENT();

loadMacros(
"PGstandard.pl",
"MathObjects.pl",
"unionTables.pl",
"AppletObjects.pl",
"parserNumberWithUnits.pl",
"PGcourse.pl",
);
 
$showPartialCorrectAnswers = 1;

TEXT(beginproblem());

Initialization: We need to include the macro file AppletObjects.pl. 

Context("Numeric")->variables->are(t=>"Real");

$a = random(2,4,1);
$b = random(5,8,1);
$c = random(1,3,1);
$d = random(1,3,1);
while ($c == $d) { $d = random(1,3,1); }

# $f = Formula("$c / (1+(t-2)^2) + $d / (1+(t-4)^2)");
$F = Formula("$c * arctan(t-2) + $d * arctan(t-4) 
- $c * arctan(-2) - $d * arctan(-4)");

$Fa = $F->eval(t=>$a);
$Fb = $F->eval(t=>$b);
$disp = $Fb-$Fa;

Setup: The GeoGebra applet displays a graph of $f and an accumulation function that is the integral of $f from 0 to a movable point x on the horizontal axis, and it also shades the region under the graph of $f and gives the area of this region rounded to one decimal place. We will pass the values $c and $d to the GeoGebra applet later.

We define the accumulation function (antiderivative) $F use it to generate the answers. 

$appletName = "ggbApplet";

$applet =  JavaApplet(
code                  => "geogebra.GeoGebraApplet",
archive               => "geogebra.jar",
codebase              => findAppletCodebase("geogebra.jar"),                           
appletName            => $appletName,
appletId              => $appletName,
submitActionAlias     => 'getXML',  # default getXML
initializeActionAlias => 'setXML',  # default setXML
setStateAlias         => 'setXML',
getStateAlias         => 'getXML',
setConfigAlias        => '',
getConfigAlias        => '',
returnFieldName       => '',
width                 => 486,
height                => 306,
mayscript             => "true",
# 0 = no debug, 1 = xml visible, 2 = add alerts thru applet
debugMode             => 0, 
onInit                => 'ggbOnInit',
type                  => 'geogebra',
# paste parameters in section at the bottom
parameter_string      => GEOGEBRA_PARAMS(), 
);

GeoGebra Applet Setup: We use JavaApplet(); from AppletObjects.pl to configure the applet. The value of $appletName can be anything reasonable. We chose the default value ggbApplet for applets generated by html export from GeoGebra. You will want to change the values of width and height to be the same as the values in the <applet ... width="486" height="306" ...> tag in the html file generated by html export in GeoGebra.

Since the GeoGebra parameters can be very lengthy, at the end of the PG file we put a new method called GEOGEBRA_PARAMS() that returns all of the GeoGebra applet parameters. 

$im = image( "graph-c".$c."-d".$d.".png", 
width=>486, height=>306, tex_size=>900 );

PNG Picture Setup: For each of the six ordered pairs ($c,$d) = (1,2), (1,3), (2,1), (2,3), (3,1), (3,2) we exported a PNG picture from GeoGebra named, for example, graph-c1-d2.png. These PNG pictures will be used when a student generates a PDF hardcopy of their homework. It is important to do this step! 

HEADER_TEXT(
qq! 
<script language="javascript">
  function ggbOnInit(param) {
    if (param == "$appletName") {
      applet_loaded(param,1);  // report that applet is ready. 
      ww_applet_list[param].safe_applet_initialize(2);
    }
  } 
</script>
<noscript>For this question to work properly, 
you must enable JavaScript, or use another browser 
(or computer) on which JavaScript works.</noscript>
!);

JavaScript Setup for Persistence of State: For the state of the GeoGebra applet to remain the same when answers are submitted or the page is refreshed, we need a little JavaScript. GeoGebra can interact with other things, like WebWork, by using its JavaScript methods GeoGebra_JavaScript_Methods. 

TEXT( MODES(TeX=>'', HTML=><<END_SCRIPT ) );
<script language="javascript">
function setAppletCoefficients() {
   var applet=getApplet("$appletName"); // alert("Updating coefficients");
   if (typeof(applet)!="undefined") {
     if (typeof(applet.setValue)!="undefined") {
     
     ////////////////////////////////////////////////////////////////
     //  List the values of the parameters to be set in the applet here
     
     // Set variables "c" and "d" in GeoGebra to values $c and $d from WebWork
     applet.setValue("c", $c); 
     applet.setValue("d", $d);    

     } else {
          setTimeout("setAppletCoefficients()", 1000);
     }
   } else {
      setTimeout("setAppletCoefficients()",1000);
   }
}
ww_applet_list["$appletName"].setConfig = function() {setAppletCoefficients()};
</script>
END_SCRIPT

JavaScript Setup for Initial State: We use JavaScript methods to set the values of the variables c and d defined as "Free Objects" in the GeoGebra applet to the random values $c and $d generated by WebWork. 

Context()->texStrings;
BEGIN_TEXT
\{
ColumnTable(
"The figure shows an interactive graph of velocity \( v(t) \), in 
meters per second, where time \( t \) is measured in seconds.  You can 
change the value of \( t \) in the graph by clicking and dragging
the red dot along the horizontal \( t \)-axis.
$BR
$BR
(a) What is the displacement between \( t = 0 \) seconds
and \( t = $a \) seconds?
$BR".
ans_rule(20).
" (include ".helpLink('units').")
$BR
$BR
(b) What is the displacement between \( t = 0 \) seconds
and \( t = $b \) seconds?
$BR".
ans_rule(20).
" (include ".helpLink('units').")
$BR
$BR
(c) What is the displacement between \( t = $a \) seconds
and \( t = $b \) seconds?
$BR".
ans_rule(20).
" (include ".helpLink('units').")"
,
$BCENTER.
MODES(HTML=>$applet->insertAll(debug=>0, reinitialize_button=>0, 
includeAnswerBox=>0,), TeX=>$im).
$PAR.
"Graph of velocity \( y = v(t) \)".
$ECENTER
,
indent => 0, separation => 30, valign => "TOP"
);
\}
END_TEXT
Context()->normalStrings;

Main Text: The problem text section of the file is mostly as we'd expect. We make use of a ColumnTable() and the string concatenation operator . a lot. The code that is special here is MODES(HTML=>$applet->insertAll(debug=>0, reinitialize_button=>0, includeAnswerBox=>0,), TeX=>$im) which says to display the $applet in HTML mode and the PNG picture file defined by $im in TeX mode. 

ANS( NumberWithUnits("$Fa","m")  
->cmp(tolerance=>0.11, tolType=>'absolute') );
ANS( NumberWithUnits("$Fb","m")  
->cmp(tolerance=>0.11, tolType=>'absolute') );
ANS( NumberWithUnits("$disp","m")
->cmp(tolerance=>0.21, tolType=>'absolute') );

Answer Evaluation: Standard. 

sub GEOGEBRA_PARAMS {
$result = qq{

# For persistence of applet state when answers are submitted
<param name="ggbOnInitParam" value="$appletName"/>


# The GeoGebra "source code" from GeoGebra -> 
# File -> Export -> Dynamic worksheet as Webpage (html)
<param name="ggbBase64" value="UEsDBBQ....stuff omitted..."/>
<param name="image" 
value="http://www.geogebra.org/webstart/loading.gif"  />
<param name="boxborder" value="false"  />
<param name="centerimage" value="true"  />
<param name="java_arguments" value="-Xmx512m" />
<param name="cache_archive" value="geogebra.jar, 
geogebra_main.jar, geogebra_gui.jar, geogebra_cas.jar, 
geogebra_export.jar, geogebra_properties.jar" />
<param name="cache_version" value="3.2.41.0, 3.2.41.0, 
3.2.41.0, 3.2.41.0, 3.2.41.0, 3.2.41.0" />
<param name="framePossible" value="false" />
<param name="showResetIcon" value="false" />
<param name="showAnimationButton" value="true" />
<param name="enableRightClick" value="false" />
<param name="errorDialogsActive" value="true" />
<param name="enableLabelDrags" value="false" />
<param name="showMenuBar" value="false" />
<param name="showToolBar" value="false" />
<param name="showToolBarHelp" value="false" />
<param name="showAlgebraInput" value="false" />
<param name="allowRescaling" value="true" />

};
}


COMMENT('MathObject version.  Uses GeoGebra applet.');

ENDDOCUMENT();

GeoGebra Applet Parameters: When you export your GeoGebra drawing pad via File -> Export -> Dynamic worksheet as Webpage (html), you get an html file with source code you can paste directly in here below the commented lines # The GeoGebra "source code" .... The parameter named ggbBase64 is actually the source code for the GeoGebra worksheet, and it was so long that we couldn't include it right here and have the source code and comments both visible at the same time (the ggbBase64 parameter is given in full near the bottom of the page). Using an applet parameter to include your filename.ggb file directly is a bad idea for security reasons and has been prohibited in WeBWorK.

Problem Techniques Index



The really long parameter ggbBase64

<param name="ggbBase64" value="UEsDBBQACAAIAGKtZj0AAAAAAAAAAAAAAAAMAAAAZ2VvZ2VicmEueG1s3Vdtb9s2EP68/gqCAwobQ2xKll1ntVJk2QYE6NYA2YpgHwbQ0tnmIokeSTlyfv2OpCTLypIm64C9+INlHk/Hu+c5PqQX76o8IztQWsgipsGIUQJFIlNRrGNamtXJnL47e7VYg1zDUnGykirnJqaTUUitvRRnr75Y6I28IzxzLh8F3MV0xTMNlOitAp7qDYA5svOyEpngav9h+RskRh8mfJDLYlviKkaVaEvy9L3QzXDsFtxmwnwrdiIFRTKZxHQ2xdTx10dQRiQ8i2nEvCWMadibRNPEzm6kEveyMNb9EDzjS8gQgGuzz4CQnZ0N/dQKnQnR4h4QLGdbjB0GCyiTTKSCF7ZOlyI6EXInUrPBXOYzXA3EemOxY5GPlkip0uu9NpCT6hdQEoPOLAV7PwhDR4jGjHG9KXNT3ZGLArtrMAbz1YRXoBvU1kqk3d+X+huZpS3QWykKc8G3plSOa1abXNFuqGy258U6g9oWIBUbSG6Xsrr2CEx86J/2W/eKS2e5vpCZVERZ2KfoUD+X/ul8bJ6tF3M+zHnUMWzQdj44DZ2Hey790/MkCp9aXXfQFB2wZhmhiTVYELFFGzgcwTGlpCyEed8MsDNuD5Va/x/LfIlbo9sbbcjgbwq5GPc6Z3ELqoDM90eBvJay1L4JPXUujxQSkePQTwR1cpasnzEBb01hraDJ2+8rD5ebZd0e7JkX4yYJm4PGXBODAoH1GFvLeZKUeZlxZ/u+LPzk4LuK51uM82ZoN7jBzRXTK15m5Aq40rKgJOUGX7fCARnkgHvJuNYpyhyUSFoYE2pTw3zKOquwaXanNNKJRtvK9UsddNDhkfZCgdluOP4aBc1m36OEdBFx4X6QKfSwRbxdnbhdtz4AyhtAWsumqTcB2WJIt6XahJBjX+4nC0/7hU/+N4UnMs95kZKC5+jedI2rV1i1J5wh8WRMBhiVfEUGFTkhyPvw14H9HqIp7c1Gh1msL4jpSeA0kodWAxrkZGma8CufVJ3KAzZWTVItsvRYZ8wGN3QBWtsDoS38IT9HmvBCetgz6WF9EXw0ucdZuLKK36OgOkeJe4DczdPIuaOjrfiGPo3IQU67gDSnxUsh+bBaaTCksvS/wQPSnvx/ilj4+Q1d66W2q6Fv6JZzPXfvX3Y+/iC1579bd/o0CZeFQaHmWY+H1aCqu7rt6WpwM3zADH+amb7C8L7CsNEpY2waTcJoPg/nUzb7rIYOppP2rD8wOHmZ5rywqaHCa6a2V9i2w6AyyCpOxPT176U0by8Px5j++vWXAXt7kWFoYnlIFV/jSkAU4EAirpksvOVwQyTmxB7+Ix/OpXCMtF2THifwTwrDSlRYze74auvurxobYnW4orurHIKrm4uKp99wZZw+kLrZp6fdz9zvtBGbse5n2t0Jn+YoPOLoWqwLzJnjfwYSE29DreeUPAPt8D+EdtSizR5DOzyC1QvNSTCKor79JXBHR3DvEeTdwAyf39HRXxL2fyXE0xHzLRyMZtFjKI67t1/3X6/+H3z2B1BLBwh3r/gKdQQAADkPAABQSwECFAAUAAgACABirWY9d6/4CnUEAAA5DwAADAAAAAAAAAAAAAAAAAAAAAAAZ2VvZ2VicmEueG1sUEsFBgAAAAABAAEAOgAAAK8EAAAAAA=="/>



Steps to construct the GeoGebra applet:

  1. Download GeoGebra, install it, and run it.
  2. From the menu bar at the top of GeoGebra, select View -> Grid
  3. In the Input textbox at the bottom of GeoGebra, type c=1 (Enter) and d=3 (Enter) to create Free Objects
  4. In the Input textbox at the bottom of GeoGebra, type f=Function[c/(1+(x-2)^2)+d/(1+(x-4)^2),-10,10] to create a Dependent Object
  5. From the graphical tool bar near the top of GeoGebra, click the New Point tool (it has a point and the letter A on it and is second from the left)
  6. Put the pointer over the x-axis and click. You should see a new Dependent Object A = (?,0) listed in the Algebra View
  7. From the menu bar at the top of GeoGebra, select Options -> Point Capturing -> Off
  8. In the algebra view in the left column of GeoGebra, right-click on the point you created and select Object Properties. Set the color and style as you like, then from the Basic tab select Show Label and Value
  9. In the Input textbox at the bottom of GeoGebra, type a = Integral[f(x),0,x(A)] to create a dependent object. You will see a shaded region representing the area under the curve. The syntax x(A) gets the value of the x-coordinate of the point A.
  10. In the algebra view in the left column of GeoGebra, right-click on the integral you created and select Object Properties. Set the color and style as you like.
  11. From the graphical toolbar near the top of GeoGebra, choose the Insert Text tool by clicking (it is labeled ABC and is obtained by clicking and holding on the icon that is second from the right until a drop down menu appears).
  12. Click the mouse somewhere on the drawing pad and a new window with a text box will appear. Type "Signed area = " + a in the text box and click OK.
  13. From the graphical toolbar near the top of GeoGebra, choose the Move tool (it has a mouse pointer on it and is the leftmost icon)
  14. Click and drag the "Signed area = ..." text to a desired location.
  15. Right-click on the "Signed area = ..." text and select Object Properties. Change the color and font size as desired, then from the Basic tab select Fix Object
  16. As before, use the Insert Text tool to write instructions, etc.
  17. Close the algebra view by going to the menu bar at the top of GeoGebra and selecting View -> Algebra View
  18. From the graphical toolbar near the top of GeoGebra, choose the Move Drawing Pad tool (it has perpendicular two-headed arrows and is the rightmost icon).
  19. Click and drag on the drawing pad to move your picture up the the top left corner.
  20. Resize the GeoGebra window so that the drawing pad is as small as possible while still displaying the drawing well.
  21. From the menu bar at the top of GeoGebra, select File -> Save.
  22. From the menu bar at the top of GeoGebra, select File -> Export -> Dynamic Worksheet as Webpage (html).
  23. View the html source code by opening the html file in a text editor. Copy the parameter <param name="ggbBase64" value="UEsD...stuff omitted..."> and paste it into your WebWork PG file near the bottom where it says GEOGEBRA_PARAMS. Also, get the width and height of the applet from the html source code and put those numbers in your WebWork PG file within the JavaApplet() method.
  24. From the menu bar at the top of GeoGebra, select File -> Export -> Graphics View as Picture (png, eps) and save it as a PNG file. Change the values of the parameters c and d and repeat this process until you have generated one picture for every possible value of c and d you will use in your WebWork question.
  25. Upload your PNG picture files to the same directory as your WebWork PG file on the WebWork server.



Retrieved from "https://webwork.maa.org/mediawiki_new/index.php?title=GeoGebraApplets&oldid=21184"