From f5600d8cb2058373eb952ab2e6b2a489d8851cf0 Mon Sep 17 00:00:00 2001
From: Glenn Rice <grice1@missouriwestern.edu>
Date: Wed, 31 Mar 2021 19:59:16 -0500
Subject: [PATCH] Add a third optional argument to ADD_JS_FILES.  This argument
 is a hash reference of attribute value pairs.  These attributes will be added
 to the script tag that is added to the page.  This is added in a
 corresponding pull request to webwork2.

The usage of this argument is documented in the POD for the method.  It
usage is also demonstrated in the paserGraphTool.pl macro (see below).

Defer loading of the jsxgraphcore.js and graphtool.min.js javascript
files.
---
 macros/PG.pl              |  9 +++++++--
 macros/parserGraphTool.pl | 41 +++++++++++++++++----------------------
 2 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/macros/PG.pl b/macros/PG.pl
index 613e2e4008..59fa4d875d 100644
--- a/macros/PG.pl
+++ b/macros/PG.pl
@@ -203,16 +203,21 @@ =head4 ADD_JS_FILE
 
 If external is 1, it is assumed the full url is provided.  If external is 0 or
 not given, then file name will be prefixed with the webwork2/htdocs/ directory.
+
+Addtional attributes can be passed as a hash reference in the optional third
+argument.  These attributes will be added as attributes to the script tag.
+
 For example:
 
 	ADD_JS_FILE("js/apps/Base64/Base64.js");
 	ADD_JS_FILE("//web.geogebra.org/4.4/web/web.nocache.js", 1);
+	ADD_JS_FILE("js/apps/GraphTool/graphtool.min.js", 0, { id => "gt_script", defer => undef });
 
 =cut
 
 sub ADD_JS_FILE {
-	my ($file, $external) = @_;
-	push(@{$PG->{flags}{extra_js_files}}, { file => $file, external => $external });
+	my ($file, $external, $attributes) = @_;
+	push(@{$PG->{flags}{extra_js_files}}, { file => $file, external => $external, attributes => $attributes });
 }
 
 sub AskSage {
diff --git a/macros/parserGraphTool.pl b/macros/parserGraphTool.pl
index 268db0f426..1703311883 100644
--- a/macros/parserGraphTool.pl
+++ b/macros/parserGraphTool.pl
@@ -176,15 +176,11 @@ =head1 OPTIONS
 =cut
 
 sub _parserGraphTool_init {
-	if ($main::displayMode ne 'TeX' && $main::displayMode ne 'PTX' && !$main::GraphToolHeaderSet) {
-		main::TEXT(
-			'<link rel="stylesheet" type="text/css" href="/webwork2_files/js/vendor/jsxgraph/jsxgraph.css">' .
-			'<link rel="stylesheet" type="text/css" href="/webwork2_files/js/apps/GraphTool/graphtool.css">' .
-			'<script type="text/javascript" src="/webwork2_files/js/vendor/jsxgraph/jsxgraphcore.js"></script>' .
-			'<script type="text/javascript" src="/webwork2_files/js/apps/GraphTool/graphtool.min.js"></script>'
-		);
-		$main::GraphToolHeaderSet = 1;
-	}
+	ADD_CSS_FILE("js/vendor/jsxgraph/jsxgraph.css");
+	ADD_CSS_FILE("js/apps/GraphTool/graphtool.css");
+	ADD_JS_FILE("js/vendor/jsxgraph/jsxgraphcore.js", 0, { defer => undef });
+	ADD_JS_FILE("js/apps/GraphTool/graphtool.min.js", 0, { defer => undef });
+
 	main::PG_restricted_eval('sub GraphTool { parser::GraphTool->new(@_) }');
 }
 
@@ -355,16 +351,14 @@ sub constructJSXGraphOptions
 {
 	my $self = shift;
 	return if defined($self->{JSXGraphOptions});
-	$self->{JSXGraphOptions} = <<END_OPTS;
-{
-	boundingBox: [${\join(",", @{$self->{bBox}})}],
-	defaultAxes: {
-		x: { ticks: { ticksDistance: $self->{ticksDistanceX}, minorTicks: $self->{minorTicksX}} },
-		y: { ticks: { ticksDistance: $self->{ticksDistanceY}, minorTicks: $self->{minorTicksY}} }
-	},
-	grid: { gridX: $self->{gridX}, gridY: $self->{gridY} }
-}
-END_OPTS
+	$self->{JSXGraphOptions} = JSON->new->encode({
+			boundingBox => $self->{bBox},
+			defaultAxes => {
+				x => { ticks => { ticksDistance => $self->{ticksDistanceX}, minorTicks => $self->{minorTicksX}} },
+				y => { ticks => { ticksDistance => $self->{ticksDistanceY}, minorTicks => $self->{minorTicksY}} }
+			},
+			grid => { gridX => $self->{gridX}, gridY => $self->{gridY} }
+		});
 }
 
 # Produce a hidden answer rule to contain the JavaScript result and insert the graphbox div and
@@ -497,7 +491,8 @@ sub ans_rule {
 		$self->constructJSXGraphOptions;
 		my $ans_name = $self->ANS_NAME;
 		$out .= "<div id='${ans_name}_graphbox' class='graphtool-container'></div>" .
-			"<script>graphTool('${ans_name}_graphbox', { " .
+			"<script>window.addEventListener('DOMContentLoaded', function() {
+			graphTool('${ans_name}_graphbox', { " .
 			"htmlInputId: '${ans_name}', " .
 			"staticObjects: '" . join(',', @{$self->{staticObjects}}) . "'," .
 			"snapSizeX: $self->{snapSizeX}," .
@@ -506,7 +501,7 @@ sub ans_rule {
 			"customTools: {$customTools}," .
 			"availableTools: ['" . join("','", @{$self->{availableTools}}) . "']," .
 			"JSXGraphOptions: $self->{JSXGraphOptions}," .
-			"});</script>";
+			"});});</script>";
 	}
 
 	return $out;
@@ -526,7 +521,7 @@ sub cmp_preprocess {
 		$ans->{preview_latex_string} = <<"END_ANS";
 <div id='${ans_name}_student_ans_graphbox' class='graphtool-answer-container'></div>
 <script>
-jQuery(function() {
+window.addEventListener("DOMContentLoaded", function() {
 	graphTool("${ans_name}_student_ans_graphbox", {
 		staticObjects: "$graphObjs",
 		isStatic: true,
@@ -558,7 +553,7 @@ sub cmp {
 		$cmp->{rh_ans}{correct_ans_latex_string} = << "END_ANS";
 <div id='${ans_name}_correct_ans_graphbox' class='graphtool-answer-container'></div>
 <script>
-jQuery(function() {
+window.addEventListener("DOMContentLoaded", function() {
 	graphTool("${ans_name}_correct_ans_graphbox", {
 		staticObjects: "$graphObjs",
 		isStatic: true,