UsingWW: geogebra javascript tutorial

I'm trying to modify the example in

https://demo.webwork.rochester.edu/webwork2/2017_UR_WW_workshop/geogebra/6/?effectiveUser=practice1&user=practice1

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

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();

loadMacros(

"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

######################################

# 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 => '', # 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

# to 2 to add alerts detailing progression

# through the applet

onInit => 'ggbOnInit',

type => 'geogebraweb',

submitActionScript => qq{ getQE('answerBox').value = getAppletValues() },

selfLoading => 1,

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.

HEADER_TEXT(

qq!

function ggbOnInit(param) {

if (param == "$appletName") {

applet_loaded(param,1); // report that applet is ready.

ww_applet_list[param].safe_applet_initialize(2);

}

</script>

!);

#######################################################

# For setting initial values in GeoGebra from WeBWorK

# Uses JavaScript interface to GeoGebra.

TEXT( MODES(TeX=>'', HTML=><<END_SCRIPT ) );

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 ) );

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

# a hidden AnswerBox

###################################

TEXT($PAR, MODES(TeX=>'geogebraweb code',

HTML=>$applet->insertAll(

debug =>0,

reinitialize_button => 1,

includeAnswerBox=>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

$PAR

$PAR

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",

showMenuBar=>"false" ,

showToolBar=>"false",

showAlgebraInput=>"false",

useBrowserForJS=>"true",

allowRescaling=>"false",

enableShiftDragZoom=>"false",

#geogebra work sheet link https://ggbm.at/stSsYPfV

ggbbase64=>"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"};

$result;

}

ENDDOCUMENT();

Using WeBWorK

WeBWorK Main Forum

geogebra javascript tutorial

geogebra javascript tutorial