## WeBWorK Problems

### How to add inline HTML elements to a PG file? (div)

by Max Rietmann -
Number of replies: 2
Hello!

I am poking around with various ways to plot things for some of the problems I will be generating for my course in precalculus. Mostly I hope to plot various polynomials and ask questions about their roots, x and y intercepts.

The included plotting functionality makes pictures that don't seem like they will work well. It is very difficult to get the axis to be clear enough to ask questions about the roots of the polynomial.

I am planning on using a JavaScript plotting library (there are several), but I will need to include some javascript code on the page and a <div></div> with a special ID that will be changed by the javascript code. The javascript code can be included using the header alteration functionality described on the wiki, but I have not found anything to insert a <div> inline with the question.

I did look at the flash plugin stuff, but I'd prefer to keep it simple with just javascript and html. (also, our version of webworks doesn't seem to support the plugin stuff, and I do not administer our server)

My workaround for now will probably be to popup a window with the plotting functionality, and then tell that window to plot what I want. That seems like it will work great, but I'd rather have the <div> inline with the question.

Thanks!

### Re: How to add inline HTML elements to a PG file? (div)

by Gavin LaRose -
Hi Max,

This doesn't answer your actual question, but I'll pose it in case it's useful: I've found that by picking the image size of the plot that I generate I can get the existing PG plotting library to generate graphs that allow me to ask most questions I want. That said, it won't be as nice as a more sophisticated solution.

I don't know of any way to inline HTML in a PG problem file; I think using javascript to generate a popup may be your best bet.

Gavin

### Re: How to add inline HTML elements to a PG file? (div)

by Davide Cervone -
It is certainly possible to do this, but one of the things to keep in mind is what you want to appear in the hardcopy versions of the problem. If the graph is generated by javascript, that will not appear in the printed output, and many students (at least here) prefer to work off line and then enter their answers. While I certainly support doing innovative things on-line, it is important to keep in mind the other views of the problem that may be produced as well.

That being said, the way to do what you want is through the MODES() macro, which allows you to provide different text to be used in the various viewing modes. For example,

    TEXT(MODES(
HTML => "This is only on screen",
TeX  => "This is only in hardcopy",
));

will produce different output on screen from in hardcopy. So you can use something like
    TEXT(MODES(
HTML => '<div>...</div>',
TeX => '[ You need to log into WeBWorK to see the
graph for this problem ]',
));

would do what you want. You can do something like
    TEXT(MODES(
HTML => '<script ...>...</script>',
TeX => "",
));

to insert javascript into the page, though there are other methods as well (there is a macro that inserts javascript into the document <HEAD>, but I don't remember its name).

There are more possible choices for the modes (like HTML_dpng for image mode, HTML_tth for formatted text mode, and so on if you need to do something specific in one of these modes, but HTML will cover all of these. Hope that helps out.

Davide