Add css files requested by problems to gateway quizzes

[drgrice1]

Add the method for adding css files passed from PG problems via ADD_CSS_FILE or via the extra_css_files key of the specialPGEnvironmentVars hash to gateway quizzes.

Also make it so that js and css files can be added that are not in the css or js sub-directories, but any subdirectory of htdocs on the server.

Generally clean up the coding of those methods.

[drgrice1]

@taniwallach: What is the comment in the release notes that is needed for this?

[pstaabp]

@drgrice1 From the code are you trying to do this as well with js files. I scoured the OPL and only found some js files that are loaded with sage cells--and getting errors with these--I'll investigate more.

I'm also not finding any problems that load a css file. I've found a bunch that embed css with the allcellcss property. What have you tested this with?

[drgrice1]

These are new methods that were recently added, and there are no problems in the OPL that use either of them except for applet problems that use the ADD_JS_FILE method indirectly via the AppletObjects.pl macro.

You could test the ADD_JS_FILE method using the problem Library/FortLewis/Authoring/Templates/IntegralCalc/GeoGebra1/GeoGebra1.pg. Make sure to also check out openwebwork/pg#549 or this won't work.

At this point nothing uses the ADD_CSS_FILE method, but you could test this by calling ADD_CSS_FILE from a problem and loading a css file.

[pstaabp]

A number of thing I just noticed:

1. I got the ADD_CSS_FILE working, however, I'd recommend changing the comments on like 177 of PG.pl from

# from the webwork2/htdocs/css/ directory.

to

# from the webwork2/htdocs/ directory.

since it appears that you need to specify the subdirectory now. I had to add css/ to the beginning of a filepath.

2. Probably the same needs to occur on line 184 of PG.pl as well.

3. And noticed another error. Trying

ADD_JS_FILE("node_modules/@fortawesome/fontawesome-free/js/brands.js");

doesn't work because of the string interpolation of the @.

4. Trying a path without an @, like:

ADD_JS_FILE("node_modules/jquery-ui-dist/jquery-ui.js");

has the following HTML:

<script src="node_modules/jquery-ui-dist/jquery-ui.js" type="text/javascript"></script>

and there is no /webwork2_files/ prepending it. I tested others as well. The css files did prepend it.

[taniwallach]

This works for me. I tested with

$pg{specialPGEnvironmentVars}{extra_css_files} = [ 'css/rtl.css' ];

set in a course.conf file which worked properly.

I also tested openwebwork/pg#549 together with this PR which makes use of ADD_JS_FILE and added the js header, and the relevant files load.

I also did a small test adding

ADD_CSS_FILE('css/fak1.css');
ADD_JS_FILE('js/fake2.js');

to a PG file asking for nonexistent files.

The nonexistent css file triggers a comment in the HTML output (as designed)

<!-- css/fake1.css is not available in htdocs/ on this server -->

so no load attempt is made of the non-existent file.

The nonexistent js file does get requested in the HTML file

<script src="js/fake2.js" type="text/javascript"></script>

but as it is not available, it fails to be loaded by the browser. In my case, I found in the browser developer tools console a report:

Loading failed for the <script> with source “http://localhost:8080/webwork2/Madar_devel/testEng/3/js/fake2.js”.

In any case - I think this almost ready to merge.
I think the correction I proposed in drgrice1/pg#1 fixes the documentation in the source code comments which @pstaabp reported.

---

When a nonexistent JS file is requested using the local switch, like:

ADD_JS_FILE('js/fake3.js',1);

it does produce a comment in the HTML code, ex:

<!-- js/fake3.js is not available in htdocs/ on this server -->

[taniwallach]

A number of thing I just noticed:

1. I got the ADD_CSS_FILE working, however, I'd recommend changing the comments on like 177 of PG.pl from

# from the webwork2/htdocs/css/ directory.

to

# from the webwork2/htdocs/ directory.

since it appears that you need to specify the subdirectory now. I had to add css/ to the beginning of a filepath.

1. Probably the same needs to occur on line 184 of PG.pl as well.

I made drgrice1/pg#1 to @drgrice1's branch to fix those 2 issues.
It is intended to get into PG via openwebwork/pg#549 where a related change is made.

2. And noticed another error. Trying

ADD_JS_FILE("node_modules/@fortawesome/fontawesome-free/js/brands.js");

doesn't work because of the string interpolation of the @.

1. Trying a path without an @, like:

ADD_JS_FILE("node_modules/jquery-ui-dist/jquery-ui.js");

has the following HTML:

<script src="node_modules/jquery-ui-dist/jquery-ui.js" type="text/javascript"></script>

and there is no /webwork2_files/ prepending it. I tested others as well. The css files did prepend it.

I think, based on the documentation, that you need to set the local flag to get the /webwork2_files/ prepended.

ADD_JS_FILE("node_modules/jquery-ui-dist/jquery-ui.js", 1);

[taniwallach]

2. And noticed another error. Trying

ADD_JS_FILE("node_modules/@fortawesome/fontawesome-free/js/brands.js");

doesn't work because of the string interpolation of the @.

I think you can use

ADD_JS_FILE('node_modules/@fortawesome/fontawesome-free/js/brands.js');

to avoid the @ from being interpolated.

[drgrice1]

@pstaabp: I think you were missing the second argument of the ADD_JS_FILE method. If that argument was 0 (or not given) it was assumed that the full url was given (a third party js file located on another server), and if that argument was 1 then it was assumed to be in the htdocs directory.

In my last commit I reversed the polarity of that second argument. So now if the argument is 0 (or not given) then it is assumed to be in the htdocs directory. Furthermore, I added that argument to the ADD_CSS_FILE method. This maintains the usage of the ADD_CSS_FILE method from before, and makes the ADD_JS_FILE usage consistent with that as you were expecting.

[taniwallach]

@taniwallach: What is the comment in the release notes that is needed for this?

That anyone who already made use of the new ADD_CSS_FILE or ADD_JS_FILE functions should be aware of the moved base directory.

[drgrice1]

@taniwallach: That doesn't make sense though as these methods were not in the previous release.

[taniwallach]

@taniwallach: That doesn't make sense though as these methods were not in the previous release.

ADD_CSS_FILE was in WW 2.15:

• Add an ADD_CSS_FILE() method pg#428
• openwebwork/pg@2a8a0e6
  But it is probably not well known yet.

[taniwallach]

In my last commit I reversed the polarity of that second argument. So now if the argument is 0 (or not given) then it is assumed to be in the htdocs directory. Furthermore, I added that argument to the ADD_CSS_FILE method. This maintains the usage of the ADD_CSS_FILE method from before, and makes the ADD_JS_FILE usage consistent with that as you were expecting.

I just tested quickly with the revised version of this and the changes to PG made in openwebwork/pg#549.

I think the revised default to assume additions come from htdocs is a good decision for both functions in PG. Thanks @drgrice1.

I think this is ready to merge.

[taniwallach]

@pstaabp - If you can test and it is OK - please merge this and openwebwork/pg#549.
Otherwise - I'll probably merge both tomorrow.

[drgrice1]

@taniwallach: That doesn't make sense though as these methods were not in the previous release.

ADD_CSS_FILE was in WW 2.15:

* [openwebwork/pg#428](https://github.com/openwebwork/pg/pull/428)

* [openwebwork/pg@2a8a0e6](https://github.com/openwebwork/pg/commit/2a8a0e6b42d004c9df5f85707effffd3566c1cce)
  But it is probably not well known yet.

You are correct. ADD_CSS_FILE was in WW 2.15. I am mistaken. Also, publicity for these methods would be good.

[taniwallach]

Also, publicity for these methods would be good.

Yes, but we all have limited time available... for now I made an issue at openwebwork/docs#14 and eventually, hopefully, it will be done.

[drgrice1]

I was just confirming the validity of the Put comment in release notes tag.

[pstaabp]

Again, I didn't read carefully the comment at the beginning of the line. Everything looks good now.

@drgrice1 thanks for adding the documentation and making ADD_CSS_FILE consistent with ADD_JS_FILE 👍