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

@@ -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 {

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,