I would like to know if there is a solution for the overlapping text that occurs for WeBWorK problems that use GeoGebra applets with Javascript.
I am also writing on behalf of the folks at ECE dept at North Carolina who are experiencing the same problem with their WeBWorK problems that use GeoGebra applets with Javascript.
Below is the Source Code from Michael Gage's workshop (at webwork/2017/_ur_ww_workshop/geogebra/4) that has the same problem:
Is this something in the code or our browsers that would cause this overlapping?
## 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("Numeric"); ################################# # Set up problem # Set parameters for a circle ################################# ($a0, $b0) = (2,2); #( random(-5,5,1), random(-5,5,1) ); $r0 = random(2,5,1); $top0 = $b0 + $r0; ($a1, $b1) = (4,4); #( random(-5,5,1), random(-5,5,1) ); $r1 = random(2,5,1); $top1 = $b1 + $r1; $r2 = $r1**2; $answer = Compute("($a1, $b1, $r2)"); ###################################### # 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 => 526, # may want to modify width height => 552, # 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 -- ################################### HEADER_TEXT( MODES(TeX=>'', HTML=><<END_SCRIPT ) ); <script language="javascript"> function ggbOnInit(param) { var applet = document.$appletName; if (param == "$appletName") { applet_loaded(param,1); // report that applet is ready. ww_applet_list[param].safe_applet_initialize(2); ww_applet_list[param].object = param; console.log("ggbOnInit: ww_applet_list["+param+"].object = ", ww_applet_list[param].object ); } } </script> END_SCRIPT HEADER_TEXT( MODES(TeX=>'', HTML=><<END_SCRIPT ) ); <script language="javascript"> function setConfig() { var appletState = getQE('${appletName}_state').value; //console.log("appletState =" + appletState); //console.log( "foobar " +ww_applet_list['$appletName'].object); if (ww_applet_list['$appletName'].object == undefined ) { setTimeout("setConfig()", 5000); console.log("waiting"); } else { //console.log("run setConfig"); //console.log("object is " +ww_applet_list['ggbfoo'].object); var applet=$appletName; applet.evalCommand("A = ($a0,$b0)"); applet.setCoords('B',$a1,$b1) ; } } </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 Ax = applet.getXcoord("A"); var Ay = applet.getYcoord("A"); var Bx = applet.getXcoord("B"); var By = applet.getYcoord("B"); var r2 = Math.pow( (Ax-Bx),2) + Math.pow( (Ay -By),2); return( Ax + ',' + Ay + ',' + r2); } </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 Graph the circle with equation \[(x - $a1)^2 + (y - $b1)^2 = $r2 \] by clicking and dragging points \( A \) and \( B \) in the interactive figure below. Click the submit answers button when you are done. $PAR $PAR 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"; ######################################### # ANSWER section ######################################### NAMED_ANS( 'answerBox' => $answer->cmp ); 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; } ENDDOCUMENT();
Thanks, tim