I've double checked this on mobile and desktop with various browsers (Safari, Chrome, Brave), and all results are similar. Can anyone confirm this behavior? (WW-2.13, PG-2.13)
I'll attach a sample GGB problem as a response to this post.
Attached is the source code for the screenshot-ed problem.
First comment:
I can duplicate this behavior on my laptop using ww-2.12 and pg-2.12
as well as ww-2.13 pg-2.13 and various develop branches.
This happens with most of the Geogebra applets but not all of them.
The "integration" geogebra applet that Paul Pearson wrote displays without
any overlap.
I'm pretty sure there is a conflict in the javaScript being emitted by the various objects displayed within a problem -- this brings the box containing the submit button and other information at the bottom of the screen up higher. I haven't tracked down why this is occurring yet.
I can duplicate this behavior on my laptop using ww-2.12 and pg-2.12
as well as ww-2.13 pg-2.13 and various develop branches.
This happens with most of the Geogebra applets but not all of them.
The "integration" geogebra applet that Paul Pearson wrote displays without
any overlap.
I'm pretty sure there is a conflict in the javaScript being emitted by the various objects displayed within a problem -- this brings the box containing the submit button and other information at the bottom of the screen up higher. I haven't tracked down why this is occurring yet.
We have a sample problem written by Nicole Wilson and her summer student last year (attached) that avoids this issue by using the unionTables.pl macro to arrange things in two columns, with the GeoGebra applet on the right.
Perhaps this approach provides a workaround?
Perhaps this approach provides a workaround?
Thanks for this, Sean. I'll take a look, though it'd be a fair amount of work to go back and reformat all the GeoGebra problems that we've constructed at this point...
I don't think you'll have to do that. I'm pretty sure that this is a change caused by something in the geogebra script. (We certainly didn't have this trouble when I was demonstrating geogebra at BMCC -- and you built many problems after that that worked fine. I've verified that those problems no longer work with webwork 2.12 and 2.11 -- I didn't go back further than that.
By using the browser's web console/inspector tools I can see that
1. the page loads
2. when the geogebra app finally loads it defines height and width values that are appropriate to the size of the applet not on the enclosing div but on the div enclosing the enclosing div. If that div also contains other html content then the size values assigned by the geogebra applet are not correct for the outer-outer div.
I'm not sure geogebra should be doing this -- but one can work around it by putting dummy <div>'s around the embedding of the geogebra applet.
This is the change in Applet.pm that works for me now. I'll issue a hotfix
if it continues to test ok.
By using the browser's web console/inspector tools I can see that
1. the page loads
2. when the geogebra app finally loads it defines height and width values that are appropriate to the size of the applet not on the enclosing div but on the div enclosing the enclosing div. If that div also contains other html content then the size values assigned by the geogebra applet are not correct for the outer-outer div.
I'm not sure geogebra should be doing this -- but one can work around it by putting dummy <div>'s around the embedding of the geogebra applet.
This is the change in Applet.pm that works for me now. I'll issue a hotfix
if it continues to test ok.
# Some changes in the way geogebra javaScript works make it important # That the object and the script that calls it are contained in some <div> # (otherwise geogebra adds height and width values to the second enclosing <div> # (i.e. the div enclosing the enclosing div) and # if the div contains more than just the geogebra applet this size will be incorrect. ) # (This behavior is probably a bug in geogebra -- # but I don't have a precise statement of the API.) # The <div class="enclose_geogebra_object> and <div class="geogebra_object" do nothing for now # but perhaps they might have a use later. style="height:306 ptx,width: 486 ptx" is inserted in # the class="enclose_geogebra_object" div by the geogebra applet. use constant GEOGEBRAWEB_OBJECT_TEXT =><<'END_OBJECT_TEXT'; <div class="enclose_geogebra_object"> <div class="geogebra_object"> <script language="javascript">ww_applet_list["$appletName"].visible = 1; // don't submit things if not visible </script> <script type="text/javascript" language="javascript" src="//web.geogebra.org/4.4/web/web.nocache.js"></script> $webgeogebraParameters </div> </div> END_OBJECT_TEXT
I have submitted the hotfix pull request #354 to the master branch of pg on github.com/openwebwork to fix this display problem.
-- Mike
-- Mike
This assessment makes sense, because I noticed some unexpected behavior on mobile devices when investigating this issue. The explicitly stated dimensions of the applet were not being observed when the applet rendered... causing issues with objects that I had set to "snap-to-grid" because the grid was adjusted due to rendering in a different size than was expected.
If this change to the GeoGebra applet remains, I will have to reconsider how I construct these problems - because we frequently use our WeBWorK/GeoGebra problems on tablets in the classroom. I'd like to be confident that they will render the same way on all devices...
Andrew,
Can you test the pull request (either pull the request into your own setup or manually change the few lines in pg/lib/Applet.pm). I think that it should behave the same on tablets as it does on a computer. The explicitly stated dimensions of the applet should now be observed. If not we can do further tweaking on the presentation of the geogebra applet in Applet.pm so that you don't have to make continuing adjustments to the problems themselves.
-- Mike
Can you test the pull request (either pull the request into your own setup or manually change the few lines in pg/lib/Applet.pm). I think that it should behave the same on tablets as it does on a computer. The explicitly stated dimensions of the applet should now be observed. If not we can do further tweaking on the presentation of the geogebra applet in Applet.pm so that you don't have to make continuing adjustments to the problems themselves.
-- Mike
The addition of the extra divs has fixed the text collision issue on both mobile and laptop. However, I'm still getting different behavior for the applet when rendering on mobile. Perhaps you can confirm what I'm seeing by using the attached problem? (The grid renders differently on mobile vs. laptop)
Hi Andrew,
I put the problem up at
https://demo.webwork.rochester.edu/webwork2/gage_debug/debug_geogebra_display/5/
the behavior looks the same to me on a macbook pro, an ipad2 and
my nexus 5x (android)
What is different about the behavior of the
grid in the applet?
I put the problem up at
https://demo.webwork.rochester.edu/webwork2/gage_debug/debug_geogebra_display/5/
the behavior looks the same to me on a macbook pro, an ipad2 and
my nexus 5x (android)
What is different about the behavior of the
grid in the applet?
On my iPhone, the applet loads with only even values on the x-axis, while desktop and laptop load with all integers -4 through 8...
I see this behavior too on my iphone 4s using either safari or firefox. I don't see it on my ipad or on the android nexus 5x. I haven't figured out how to inspect javaScript on a mobile device so I don't know if the change in horizontal spacing is coming from "within" the geogebra applet or from external javascript. I suspect the former. It seems likely it is in response to the width of the screen on the small phones.
In any case it is a different issue than the one I fixed involving the text boxes.
Have you tried putting the geogebra applet on an html page and viewing it in the mobile browser? Does it behave the same way?
In any case it is a different issue than the one I fixed involving the text boxes.
Have you tried putting the geogebra applet on an html page and viewing it in the mobile browser? Does it behave the same way?
I know this is an old thread but I am hoping to revise it since I am having the same issue originally posted here.
I am using one of your Geogebra problems, Andrew, that you provided us at JMM this year and when I transfer the problem to my WW (WW 2.12) I am having the same display issue. Is there a place I need to manually add in the dummy divs and if so where? I tried a few different places with no success so I am not sure if I am missing something.
Thanks,
*Brittni
I think you can use the following snippet to inject your GeoGebra applet into the problem (assuming that an update to your version of WW is not currently in the cards).
TEXT($PAR, MODES(TeX=>'geogebraweb code',
HTML=>"<div class='enclose_ggb_obj'>".$applet->insertAll(
debug =>0,
reinitialize_button => 1,
includeAnswerBox=>1 )."</div>"
));
If you have access to the command line and can modify files on the server so that you don't have to modify each problem.
The hotfix #354 which takes care of the geogebra "bug" for later versions of webwork is this patch applied to the file webwork2/pg/lib/Applet.pm
| |
| # Some changes in the way geogebra javaScript works make it important |
| # That the object and the script that calls it are contained in some <div> |
| # (otherwise geogebra adds height and width values to the second enclosing <div> |
| # (i.e. the div enclosing the enclosing div) and |
| # if the div contains more than just the geogebra applet this size will be incorrect. ) |
| # (This behavior is probably a bug in geogebra -- |
| # but I don't have a precise statement of the API.) |
| # The <div class="enclose_geogebra_object> and <div class="geogebra_object" do nothing for now |
| # but perhaps they might have a use later. style="height:306 ptx,width: 486 ptx" is inserted in |
| # the class="enclose_geogebra_object" div by the geogebra applet. |
| |
| use constant GEOGEBRAWEB_OBJECT_TEXT =><<'END_OBJECT_TEXT'; |
| <div class="enclose_geogebra_object"> |
| <div class="geogebra_object"> |
| <script language="javascript">ww_applet_list["$appletName"].visible = 1; // don't submit things if not visible |
| </script> |
| <script type="text/javascript" language="javascript" src="//web.geogebra.org/4.4/web/web.nocache.js"></script> |
| |
| $webgeogebraParameters |
| |
| </div> |
| </div> |
| END_OBJECT_TEXT |
| END_HEADER_SCRIPT |
We are updating our WW very soon, so I can just wait until then to have the fix.
Now I am a bit curious about the problem level fix though (it certainly isn't a high priority though).
I did try including that snippet to inject the GeoGebra applet into the problem and it didn't seem to work. Below is the code with the change bold. Before the change, that bold snippet was:
TEXT($PAR, MODES(TeX=>$im,
HTML=>$applet->insertAll(
debug =>0,
reinitialize_button => 0,
includeAnswerBox=>1,
)));
########################################################################
DOCUMENT();
loadMacros(
"PGstandard.pl", # Standard macros for PG language
"MathObjects.pl",
"PGgraphmacros.pl",
"AppletObjects.pl",
"parserImplicitEquation.pl",
"source.pl",
);
# Print problem number and point value (weight) for the problem
TEXT(beginproblem());
# Show which answers are correct and which ones are incorrect
$showPartialCorrectAnswers = 1;
##############################################################
#
# Setup
#
#
Context("ImplicitEquation");
Context()->variables->are(x=>["Real", limits=>[-8,8]], y=>["Real", limits=>[-8,8]]);
Context()->noreduce('(-x)-y');
$a = non_zero_random(-3,7,1);
do{ $b = non_zero_random(-5,5,1); } until ( $a != 1 || $b != 1 );
$c = $a*$b;
$f = Formula("$b x+$a y")->reduce;
$answer = ImplicitEquation("$f = $c");
######################################
# 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 => 400, # may want to modify width
height => 400, # 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 = init_graph(-8,-8,8,8,
size=>[400,400],
grid=>[16,16],
axes=>[0,0]
);
##################################
# 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
// Setup the grid, then establish values, points, then the line
applet.setPerspective("G");
applet.setPointCapture(1,2);
applet.setCoordSystem(-8,8,-8,8);
applet.setAxisSteps(1,1,1);
applet.setGridVisible('true');
applet.evalCommand("a = 1");
applet.evalCommand("b = 1");
applet.evalCommand("A = (a,0)");
applet.evalCommand("B = (0,b)");
applet.evalCommand("l = Line[A,B]");
//applet.setColor('A',228,27,23);
//applet.setColor('B',228,27,23);
//applet.setColor('l',228,27,23);
} else {
setTimeout("setAppletCoefficients()", 1000);
}
} else {
setTimeout("setAppletCoefficients()",1000);
}
}
ww_applet_list["$appletName"].setConfig = function() {setAppletCoefficients()};
</script>
END_SCRIPT
#######################################################
#
# For retrieving values from GeoGebra into WeBWorK
#
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 l = applet.getLaTeXString("l");
return( l );
}
</script>
END_SCRIPT
##############################################################
#
# Text
#
#
Context()->texStrings;
BEGIN_TEXT
Graph the line, and submit your answer.
\[$f = $c\]
END_TEXT
Context()->normalStrings;
###################################
# 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=>"<div class='enclose_ggb_obj'>".$applet->insertAll(
debug =>0,
reinitialize_button => 1,
includeAnswerBox=>1 )."</div>"
));
##############################################################
#
# Answers
#
#
NAMED_ANS( 'answerBox' => $answer->cmp() );
sub GEOGEBRA_PARAMS {
my $result = {
appName=>"classic", # instead of using ggbbase64
enableShiftDragZoom=>"false",
showResetIcon=>"false" ,
enableRightClick=>"false" ,
enableLabelDrags=>"false",
showMenuBar=>"false" ,
showToolBar=>"false",
showAlgebraInput=>"false",
useBrowserForJS=>"true",
#ggbbase64=>''
};
$result;
}
ENDDOCUMENT();