Difference between revisions of "GeoGebraWeb1"
Paultpearson (talk | contribs) (New GeoGebraWeb example) |
|||
(One intermediate revision by one other user not shown) | |||
Line 383: | Line 383: | ||
<li>Resize the GeoGebra window so that the drawing pad is as small as possible while still displaying the drawing well.</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 -> 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>From the menu bar at the top of GeoGebra, select <code>File -> Export -> Dynamic Worksheet as Webpage (html)</code>. -- or use Shift-Command-m to copy this to the clipboard</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>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>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> |
||
Line 396: | Line 396: | ||
<ul> |
<ul> |
||
− | <li>POD documentation: [http://webwork.maa.org/pod/ |
+ | <li>POD documentation: [http://webwork.maa.org/pod/pg/macros/AppletObjects.html AppletObjects.pl]</li> |
<li>PG macro: [http://webwork.maa.org/viewvc/system/trunk/pg/macros/AppletObjects.pl?view=log AppletObjects.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 16:37, 7 April 2021
GeoGebra Applets (JavaScript)
This PG code shows how to write WebWork questions with interactive GeoGebra applets that run using JavaScript (not Java).
- File location in OPL: FortLewis/Authoring/Templates/IntegralCalc/GeoGebraWeb1
PG problem file | Explanation |
---|---|
DOCUMENT(); loadMacros( "PGstandard.pl", "MathObjects.pl", "AppletObjects.pl", "unionTables.pl", "parserNumberWithUnits.pl", "PGcourse.pl", ); TEXT(beginproblem()); $showPartialCorrectAnswers = 1; |
Initialization:
We need to include the macro file |
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
We define the accumulation function (antiderivative) |
###################################### # Create link to applet: ################################### # You can name your applet (anything reasonable :-) ) # Adjust the height and width as desired # Paste the geogebra parameters in at the bottom of the page just above the # command end command # so that they don't get in the way ################################### $appletName = "ggbfoo"; $applet = GeogebraWebApplet( code => "geogebra.GeoGebraApplet", archive => "geogebra.jar", codebase => findAppletCodebase("geogebra.jar"), appletName => $appletName, appletId => $appletName, submitActionAlias => 'getAppletValues', # default actionAlias initializeActionAlias => 'configure', # default actionAlias setStateAlias => 'setXML', getStateAlias => 'getXML', setConfigAlias => '', getConfigAlias => '', returnFieldName => '', width => 497, # may want to modify width height => 361, # may want to modify height # mayscript => "true", debugMode => 0, # set debugMode to 0 for no debug # to 1 to make xml representation visible # to 2 to add alerts detailing progression # through the applet onInit => 'ggbOnInit', type => 'geogebraweb', #submitActionScript => qq{ getQE('answerBox').value = getAppletValues() }, submitActionScript => '', selfLoading => 1, params => GEOGEBRA_PARAMS(),# paste parameters in ); ############################################### # # PNG picture of GeoGebra applet for hardcopy $im = image( "AF7-c".$c."-d".$d.".png", width=>486, height=>335, tex_size=>900 ); ################################## # Setup GeogebraWebApplet -- ################################### ############################################### # # For persistence of GeoGebra applet state # when answers are submitted or page is refreshed. # Uses JavaScript interface to GeoGebra. 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> !); ####################################################### # # For setting initial values in GeoGebra from WeBWorK # Uses JavaScript interface to GeoGebra. 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 ################################### #insert applet into body -- this does not need to be changed # except to adjust the insertion of the reinitialize_button or # a hidden AnswerBox ################################### # TEXT($PAR, MODES(TeX=>'geogebraweb code', # HTML=>$applet->insertAll( # debug =>0, # reinitialize_button => 1, # #includeAnswerBox=>1, # ))); |
GeoGebra Applet Setup:
We use
Since the GeoGebra parameters can be very lengthy, at the end of the PG file we put a new
method called |
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. $BBOLD."Graph of velocity \( y = v(t) \)".$EBOLD.$PAR. MODES(HTML=>$applet->insertAll(debug=>0, reinitialize_button=>1, includeAnswerBox=>0,), TeX=>$im). $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 |
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 { my $result = { showResetIcon=>"false" , enableRightClick=>"false" , enableLabelDrags=>"false", showMenuBar=>"false" , showToolBar=>"false", showAlgebraInput=>"false", useBrowserForJS=>"true", ggbbase64=>"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" }; $result; } COMMENT('Uses GeoGebraWeb (JavaScript), so it should work on computers and tablets.'); 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 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:
|
- POD documentation: AppletObjects.pl
- PG macro: AppletObjects.pl