** Using WeBWorK **

Does anyone know how I can make a javascript variable play nicely with a pg array?

You are not going to be able to do that. The PG code is running on the server, and the JavaScript is running int he browser, so the array and the index are not even the same machines.

You may not realize how the two languages interact. The "here document" that is the string between the line

TEXT( MODES(TeX=>'', HTML=><
and its corresponding END_SRIPT is being processed by PG with variable substitution.  So all the occurrences of things like $edgeStart[0] and $numEdges are being substituted into the string at the time the PG problem is processed.  That means that the HTML page doesn't include a reference to $edgeStart[0] but rather its value.  If you look at the page source in your browser, you will see the actual letters for the vertices, not the array names and indices.

So in your lines

for (var index = 0; index < $numEdges; index++) {
    applet.evalCommand("v_" + index+1 +
        " = Segment(" + $edgesStart[index] + ',' + $edgesEnd[index] + ")");
}

the Perl interpreter tries to insert the value of $edgesStart[index] into the string at this point. But in Perl (i.e., in PG), index is not a variable, and so it is treated as the string "index", and Perl tries to substitute $edgesStart["index"]. Since @edgesStart is an array, not a hash, there is no element with name "index" (you can only access an array by using a number), you get the error about that. You didn't give the actual error message you receive (you should, by the way), but I suspect it will have been a Perl error during the processing of the problem (i.e., the problem will not have produced output), not a javascript error in the browser console. That tells you that you need to look at the Perl code, not the javascript code, for the problem.

Because the @edgesStart array is only on the server, not the browser, you can not access it from your javascript code. One possible solution would be to output the perl array into code that produces the corresponding javascript array on the browser, and then reference that.

Alternatively, you could use a Perl loop to generate a string of applet.evalCommand() calls dynamically and insert that string into the javascript string in place of your javascript loop.

In any case, you will need to handle the separation between the Perl and JavaScript languages more carefully, and be aware of how the Perl values are being substituted into the javascript.

Does anyone know how I can make a javascript variable play nicely with a pg array?

You are not going to be able to do that. The PG code is running on the server, and the JavaScript is running int he browser, so the array and the index are not even the same machines.

You may not realize how the two languages interact. The "here document" that is the string between the line

TEXT( MODES(TeX=>'', HTML=><<END_SCRIPT ) );

and its corresponding END_SRIPT is being processed by PG with variable substitution. So all the occurrences of things like $edgeStart[0] and $numEdges are being substituted into the string at the time the PG problem is processed. That means that the HTML page doesn't include a reference to $edgeStart[0] but rather its value. If you look at the page source in your browser, you will see the actual letters for the vertices, not the array names and indices.

So in your lines

for (var index = 0; index < $numEdges; index++) {
    applet.evalCommand("v_" + index+1 +
        " = Segment(" + $edgesStart[index] + ',' + $edgesEnd[index] + ")");
}

the Perl interpreter tries to insert the value of $edgesStart[index] into the string at this point. But in Perl (i.e., in PG), index is not a variable, and so it is treated as the string "index", and Perl tries to substitute $edgesStart["index"]. Since @edgesStart is an array, not a hash, there is no element with name "index" (you can only access an array by using a number), you get the error about that. You didn't give the actual error message you received (you should, by the way), but I suspect it will have been a Perl error during the processing of the problem (i.e., the problem will not have produced output), not a javascript error in the browser console. That tells you that you need to look at the Perl code, not the javascript code, for the problem.

Because the @edgesStart array is only on the server, not the browser, you can not access it from your javascript code. One possible solution would be to output the perl array into code that produces the corresponding javascript array on the browser, and then reference that. A little awkward, but it would work.

Alternatively, you could use a Perl loop to generate a string of applet.evalCommand() calls dynamically and insert that string into the javascript string in place of your javascript loop. That is, you would produce the 10 original lines (using a loop in perl) and insert those lines into the javascript program, so the final output is the same as it was originally (no javascript loop).

In any case, you will need to handle the separation between the Perl and JavaScript languages more carefully, and be aware of how the Perl values are being substituted into the javascript.