** Using WeBWorK **

Hi Jan,

This is a great question. I have a partial answer for you here, and hopefully we can get a bit further with further thought or consideration.

First, the $(document).ready() call relies on having access to the jQuery library, which I suspect isn't available in WeBWorK problems. That said, it might be worth just trying to see if it works by adding another script call at the top of your inclusion:

    <script type="text/javascript" src="/webwork2_files/js/vendor/jquery/jquery.js"></script>

(jQuery is available in the WeBWorK html tree.) If that doesn't work, we'll need to play some more to see how best to make things work.

Gavin

Turns out the problem was caused by loading d3 and d3plus using https. Apparently the default sites do not support that. When loading from a CDN, namely cdnjs.com, that supports https, it works fine. Spacing must be adjusted a bit, it may be tricky to make that work on mobile devices well, but it works.

Ideally the files should be local, but I do not know where to put them. Just placing them directly in the directory where the .pg file is clearly does not work.

The following is a working version (well, it does not yet do anything as a problem, but the javascript works):

# DESCRIPTION
# Test of d3plus plot
# written by Jan Hlavacek (jhlavace@svsu.edu)
# ENDDESCRIPTION

## DBsubject('')
## DBchapter('')
## DBsection('')
## KEYWORDS('')
## TitleText1('')
## EditionText1('')
## AuthorText1('')
## Section1('')
## Problem1('')
## Author('Jan Hlavacek')
## Institution('SVSU')

DOCUMENT();
HEADER_TEXT(<<'EOF');
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3plus/1.7.3/d3plus.js"></script>
<script language="javascript" type="text/javascript">
 <!-- //
 var data = [
 {"year": 1991, "name":"alpha", "value": 15},
 {"year": 1992, "name":"alpha", "value": 34},
 {"year": 1991, "name":"alpha2", "value": 17},
 {"year": 1992, "name":"alpha2", "value": 65},
 {"year": 1991, "name":"beta", "value": 10},
 {"year": 1992, "name":"beta", "value": 10},
 {"year": 1991, "name":"beta2", "value": 40},
 {"year": 1992, "name":"beta2", "value": 38},
 {"year": 1991, "name":"gamma", "value": 5},
 {"year": 1992, "name":"gamma", "value": 10},
 {"year": 1991, "name":"gamma2", "value": 20},
 {"year": 1992, "name":"gamma2", "value": 34},
 {"year": 1991, "name":"delta", "value": 50},
 {"year": 1992, "name":"delta", "value": 43},
 {"year": 1991, "name":"delta2", "value": 17},
 {"year": 1992, "name":"delta2", "value": 35}
 ]
 document.addEventListener('DOMContentLoaded', function(){
 var visualization = d3plus.viz()
 .container("#viz")
 .data(data)
 .type("box")
 .id("name")
 .x("year")
 .y("value")
 .time("year")
 .ui([{
 "label": "Visualization Type",
 "method": "type",
 "value": ["scatter","box"]
 }])
 .draw();
});
 // -->
</script>
EOF

loadMacros(
"PGstandard.pl",
"MathObjects.pl",
"PGML.pl",
"PGcourse.pl",
);
Context("Numeric");

# Define variables here:

# Actual problem goes here:
TEXT(beginproblem());
TEXT( MODES(TeX=>'', HTML=><<END_SCRIPT ) );
<div id="viz" style="height:300pt; padding=10pt;"></div>

END_SCRIPT
BEGIN_PGML
blah blah
END_PGML

# Solution:
BEGIN_PGML_SOLUTION
*SOLUTION*

hkjhkj
END_PGML_SOLUTION

ENDDOCUMENT();

One thing to keep in mind as you begin to include your own javascript libraries is that your problem will need to be displayed not only one screen but also in hardcopy. If the data you are presenting using javascript is important to the problem, you might want to provide a means of including it in hardcopy.

WeBWorK does have graphics-creation macros, though they are pretty primitive, and badly need to be modernized. They do work in both screen and hardcopy mode, however, and that is an important advantage.

As WeBWorK moves into a much more javascript-oriented web environment, we may need to look into hooking the webwork back end into javascript tools like node.js that can run the same code on the server as in the browser. But that functionality isn't currently available.