## WeBWorK Main Forum

### geogebra javascript tutorial

by Joel Trussell -
Number of replies: 0
I'm trying to modify the example in
I"ve copied that to my server. I can create scripts in my desktop Geogebra Classic 6 as in the tutorial
https://wiki.geogebra.org/en/Tutorial:Introduction_to_GeoGebraScript
I'd like to transfer the script approach to webwork and alter the example problem to use the buttons to set variables in the geobebra window in webwork.
I can do some simply things like changing colors and point sizes. I want to have the values of a vector set by the user via input of magnitude and angle/phase. I can do this in the desktop geogebra - inpt the magnitude and phase, compute the (x,y) coordinates of the vector and execute the vector command with the right values.

If I leave the input box in the gbb64 code and copy it to the webwork problem, I can set the vector. BUT I don't want the input boxes in the graph. I want the input to be in the position of the buttons and boxes in the example problem 6 at UofR.

This presents a problem for me - I don't know if I can use inputbox in the script of the example. I have tried to use button and set the coordinates with something like

<input type="button" value="set coords of V1: " onclick="setCoords('V1', setXfield.value, setYfield.value);">
<input type="text" name="setXfield" id="V1x" size="5" value="">
<input type="text" name="setYfield" id="V1y" size="5" value="">

this doesn't work.

I have searched and can't find a tutorial for interfacing the script commands of geogebra with the javescript used in the example. can you point me in the right direction for instruction?

for the record: my code is below
thanks

## DBsubject(Algebra)
## DBchapter(Conic sections)
## DBsection(Circles)
DOCUMENT();
"PGstandard.pl",
"MathObjects.pl",
"PGinfo.pl",
"AppletObjects.pl",
#"source.pl",
"PGcourse.pl",
);
TEXT(beginproblem());

$showPartialCorrectAnswers = 1; Context("Complex"); Context()->flags->set( #tolerance => 0.15, #tolType => "relative", #zeroLevel=>10, #zeroLevelTol=>0.2 ); ################################# # Set up problem # Set parameters for a circle #################################$F= random(1,1.5,0.1);
$G = random(1,1.5,0.1);$V1a=-($F+$G*i);
$V2a=-($F+$G*i)**2;$V3a=-($F+$G*i)**3;
$V4a=-($F+$G*i)**4; #$V1vr=re($V1v);$V1ang=(arg($V1a)%(2*pi))/pi*180;$V2ang=(arg($V2a)%(2*pi))/pi*180;$V3ang=(arg($V3a)%(2*pi))/pi*180;$V4ang=(arg($V4a)%(2*pi))/pi*180;$V1abs=abs($V1a);$V2abs=abs($V2a);$V3abs=abs($V3a);$V4abs=abs($V4a);$xmax=ceil(1.25*(sqrt(2)*abs($V4a)));$xmin=-$xmax;$ymax=$xmax;$ymin=$xmin;$answer = Compute("($V1abs,$V1ang,$V2abs,$V2ang,$V3abs,$V3ang,$V4abs,$V4ang)");
@tol=(0.1,3); # Magnitude Tolerance 0.1, Angular Tolerance 3 degrees
@type=(0,1,0,1,0,1,0,1); #0 for magnitude value, 1 for angular value in degrees

######################################
###################################
# 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 => '', # default actionAlias
setStateAlias => 'setXML',
getStateAlias => 'getXML',
setConfigAlias => '',
getConfigAlias => '',
returnFieldName => '',
width => 700, # may want to modify width
height => 700, # may want to modify height
# mayscript => "true",
debugMode => 0, # set debugMode to 0 for no debug
# to 1 to make xml representation visible
# through the applet
onInit => 'ggbOnInit',
type => 'geogebraweb',
submitActionScript => qq{ getQE('answerBox').value = getAppletValues() },
params => GEOGEBRA_PARAMS(),# paste parameters in
);

##################################
# Setup GeogebraWebApplet --
###################################
###############################################
#
# For persistence of GeoGebra applet state
# when answers are submitted or page is refreshed.
# Uses JavaScript interface to GeoGebra.

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
applet.setValue("xmin", $xmin); applet.setValue("xmax",$xmax);
applet.setValue("ymin",$ymin); applet.setValue("ymax",$ymax);

} else {
setTimeout("setAppletCoefficients()", 1000);
}
} else {
setTimeout("setAppletCoefficients()",1000);
}
}
ww_applet_list["$appletName"].setConfig = function() {setAppletCoefficients()}; </script> END_SCRIPT HEADER_TEXT( MODES(TeX=>'', HTML=><<END_SCRIPT ) ); <script language="javascript"> function getAppletValues() { console.log("getAppletValues() entered"); // get a handle for the applet object var applet =$appletName;
var V1m = applet.getValue("V1m");
var V1ang= applet.getValue("V1ang");
var V2m = applet.getValue("V2m");
var V2ang= applet.getValue("V2ang");
var V3m = applet.getValue("V3m");
var V3ang= applet.getValue("V3ang");
var V4m = applet.getValue("V4m");
var V4ang= applet.getValue("V4ang");
return(V1m + ',' +V1ang +','+V2m + ',' +V2ang +','+ V3m + ',' +V3ang +','+V4m + ',' +V4ang);
}
</script>
END_SCRIPT
###################################
#insert applet into body -- this does not need to be changed
# except to adjust the insertion of the reinitialize_button or
###################################
TEXT($PAR, MODES(TeX=>'geogebraweb code', HTML=>$applet->insertAll(
debug =>0,
reinitialize_button => 1,
)));

#######################################
# TEXT
#######################################
Context()->texStrings;
BEGIN_TEXT
$test; Given $$y = -(F + G j) ^n$$,$BR
Plot the graph of this function in polar coordinates with n = 1, 2, 3, and 4
Please drag the four vectors to the correct positions in the figure below. The red, green, blue and magenta vectors correspond to the cases of n=1, 2, 3 and 4 respectively. Note: WeBWork and MATLAB adopt different conventions for the phase angles, namely $$[0^{\circ},360^{\circ})$$ and $$(-180,180]$$ respectively. However, this should not affect the geometry relationship between the vectors in your plot. Considering the difficulties in operating on the screen, your vector magnitude will be checked to $$\pm tol[0]$$ and your angle will be checked to $$\pm tol[1] ^{\circ}$$.
Click the submit answers button when you are done.
@{correct}

END_TEXT

#TEXT($PAR, "foostate |",$inputs_ref->{ "${appletName}_state"}, "|"); TEXT( "run SetConfig", q!<script language="javascript">setConfig()</script> !) if$inputs_ref->{ "${appletName}_state"} =~ "restart_applet"; TEXT(MODES( TeX => "GeoGebra Applet", HTML =><<"END_APPLET" ) ); # " " means interpolate variables <input type="button" value="Hide V1" onclick="getApplet('$appletName').setVisible('V1', false);">
<input type="button" value="Show V1" onclick="getApplet('$appletName').setVisible('V1', true);"> <input type="button" value="V1 red" onclick="getApplet('$appletName').setColor('V1', 255, 0, 0);">
<input type="button" value="V1 blue" onclick="getApplet('$appletName').setColor('V1', 0, 0, 255);"> <input type="button" value="Delete V1" onclick="getApplet('$appletName').deleteObject('V1');">
<input type="button" value="Reset" onclick="getApplet('$appletName').reset();">$PAR
<input type="button" value="get coords of V1: " onclick="getCoords('V1');">
<input type="text" name="getXfield" id="V1x" size="5">
<input type="text" name="getYfield" id="V1y" size="5">
$PAR <input type="button" value="set coords of V1: " onclick="setCoords('V1', setXfield.value, setYfield.value);"> <input type="text" name="setXfield" id="V1x" size="5" value=""> <input type="text" name="setYfield" id="V1y" size="5" value=""> END_APPLET ######################################### # ANSWER section ######################################### #$test=List('answerBox');
#NAMED_ANS( 'answerBox' => $answer->cmp(ordered=>1) ); NAMED_ANS( 'answerBox' =>$answer->
cmp(list_checker => sub {
my ($correct,$student,$ansHash,$value) = @_;
my $n = scalar(@$student); # number of student answers
my $score = 0; # number of correct student answers my @errors = (); # stores error messages my$i; # loop counters
#
# Loop though the student answers
##
for ($i = 0;$i < $n;$i++) {
my $err,$errt;
my $ith = Value::List->NameForNumber($i+1);
my $p =$student->[$i]; # i-th student answer my$a = $p->value; my$q = $correct->[$i]; # i-th student answer
my $b =$q->value;
if ($type[$i]==0){
$err=abs($a-$b) } if ($type[$i]==1){$errt=abs($a-$b);
$err=min($errt,360-$errt); } if ($err<$tol[$type[$i]] ) {$score++} else {
push(@errors,"Your $ith point is not correct") unless$ansHash->{isPreview}
}
}
return ($score,@errors); })); sub GEOGEBRA_PARAMS { my$result = {
showResetIcon=>"false" ,
enableRightClick=>"false" ,
enableLabelDrags=>"false",