Difference between revisions of "DynamicImages"
(added historical tag and gave updated problem link) |
|||
(26 intermediate revisions by 7 users not shown) | |||
Line 1: | Line 1: | ||
− | <h2>Dynamically Generated Graphs: PG Code Snippet</h2> |
||
+ | {{historical}} |
||
+ | |||
+ | <p style="font-size: 120%;font-weight:bold">This problem has been replaced with [https://openwebwork.github.io/pg-docs/sample-problems/Algebra/DynamicGraph.html a newer version of this problem]</p> |
||
+ | ==Dynamically Generated Graphs: PG Code Snippet== |
||
<p style="background-color:#eeeeee;border:black solid 1px;padding:3px;"> |
<p style="background-color:#eeeeee;border:black solid 1px;padding:3px;"> |
||
− | <em>This code snippet shows the essential PG code to include dynamically generated graphs in a problem. Note that these are <b>insertions</b>, not a complete PG file. This code will have to be incorporated into the problem file on which you are working. |
+ | <em>This code snippet shows the essential PG code to include dynamically generated graphs in a problem. Note that these are <b>insertions</b>, not a complete PG file. This code will have to be incorporated into the problem file on which you are working. |
+ | <br /> |
||
+ | <br /> |
||
+ | For some examples of dynamically generated graphs in tables, see [http://webwork.maa.org/wiki/GraphsInTables GraphsInTables] |
||
+ | </em> |
||
</p> |
</p> |
||
Line 26: | Line 29: | ||
<td style="background-color:#ccffcc;padding:7px;"> |
<td style="background-color:#ccffcc;padding:7px;"> |
||
<p> |
<p> |
||
− | In the initialization section of the file we need to load <code>PGgraphmacros.pl</code>. This should generally be loaded before the <code>PGcourse.pl</code> file. |
||
+ | <b>Initialization:</b> |
||
+ | We need to load <code>PGgraphmacros.pl</code>. This should generally be loaded before the <code>PGcourse.pl</code> file. |
||
</p> |
</p> |
||
</td> |
</td> |
||
Line 33: | Line 37: | ||
<td style="background-color:#ffffdd;border:black 1px dashed;"> |
<td style="background-color:#ffffdd;border:black 1px dashed;"> |
||
<pre> |
<pre> |
||
− | + | $gr = init_graph(-1,-1,4,4, |
|
+ | axes=>[0,0], |
||
+ | grid=>[5,5], |
||
+ | size=>[400,400] |
||
+ | ); |
||
− | + | add_functions($gr, "x^2/4 for x in <-1,4>" . |
|
− | " |
+ | " using color:blue and weight:2"); |
</pre> |
</pre> |
||
</td> |
</td> |
||
<td style="background-color:#ffffcc;padding:7px;"> |
<td style="background-color:#ffffcc;padding:7px;"> |
||
<p> |
<p> |
||
− | Then, in the problem set-up section of the file, we create a graph object by calling <code>init_graph</code>. Arguments for <code>init_graph</code> are <code>xmin,ymin,xmax,ymax</code>, and then options to modify the characteristics of the graph. In this case the only option that we have specified is to put axes centered on the point (0,0) (the origin) on the graph. |
||
+ | <b>Setup:</b> |
||
+ | We create a graph object by calling <code>init_graph</code>. Arguments for <code>init_graph</code> are <code>xmin,ymin,xmax,ymax</code>, and then options to modify the characteristics of the graph. The options are, of course, optional. In this case specified options put axes centered on the point (0,0) on the graph, specify that a grid of 5 boxes in both of the x and y directions should be displayed, and give the size, in pixels, of the created image. |
||
</p> |
</p> |
||
<p> |
<p> |
||
− | We add functions |
+ | We add functions the graph with <code>add_functions</code>, which takes as arguments the graph and a list of text strings that give the functions to graph. In this case we only add one function, so there's only one string after the graph object. In every case the text string has the same form: |
</p> |
</p> |
||
<pre> |
<pre> |
||
<i>function</i> for x in <i>range</i> |
<i>function</i> for x in <i>range</i> |
||
− | using color:<i>colorname</i> and |
+ | using color:<i>colorname</i> and |
+ | weight:<i>numericalweight</i> |
||
</pre> |
</pre> |
||
<p> |
<p> |
||
Line 57: | Line 62: | ||
</p> |
</p> |
||
<p> |
<p> |
||
− | Finally, <i>colorname</i> and <i>numericalweight</i> are what we would expect: the name of the color to graph the function, and the weight of the curve used. The default weight is two, and the default color is black. |
+ | Finally, <i>colorname</i> and <i>numericalweight</i> are what we would expect: the name of the color to graph the function, and the weight of the curve used. The default weight is two, and the default color is black. Other good values for colorname include blue, green, red, gray, and orange. |
+ | </p> |
||
+ | <p> |
||
+ | We can specify that images in the web browser's cache not be used by inserting <code>$refreshCachedImages=1;</code> It may be advantageous to use <code>$gr->gifName($gr->gifName()."-$newProblemSeed");</code> to give graphics files names unique to each problem seed. |
||
+ | </p> |
||
+ | <p> |
||
+ | If you want to increase the number of points plotted, you can access the first function added to the graph and set the number of points to 200 using <code>($gr->fn)[0]->steps(200);</code> |
||
</p> |
</p> |
||
</td> |
</td> |
||
Line 64: | Line 69: | ||
<td style="background-color:#ffdddd;border:black 1px dashed;"> |
<td style="background-color:#ffdddd;border:black 1px dashed;"> |
||
<pre> |
<pre> |
||
− | + | BEGIN_TEXT |
|
− | + | $BCENTER |
|
− | + | \{ image( insertGraph($gr), |
|
+ | width=>200,height=>200,tex_size=>800 ) \} |
||
+ | $BR |
||
+ | (Click on graph to enlarge) |
||
+ | $ECENTER |
||
+ | END_TEXT |
||
</pre> |
</pre> |
||
<td style="background-color:#ffcccc;padding:7px;"> |
<td style="background-color:#ffcccc;padding:7px;"> |
||
<p> |
<p> |
||
− | Images are included in the text section of the problem with the <code>image</code> command, and <code>insertGraph</code> inserts the dynamically generated graph. |
||
+ | <b>Main Text:</b> |
||
+ | [[StaticImages|Images]] are included in the text section of the problem with the <code>image</code> command, and <code>insertGraph</code> inserts the dynamically generated graph. The <code>width</code> and <code>height</code> options specify the width and height of the image as it is to be displayed on the web page. They may be omitted to give the default sizes. If they (or the defaults) specify a size smaller than that specified in the <code>init_graph</code> command, it's a good idea to include a note that clicking on the graph will produce a larger version. The <code>tex_size</code> option specifies a scalar multiplier that will be applied to the graph size (as a percent times 10) when the graph is typeset in a hardcopy. Thus <code>tex_size=>800</code> specifies that the graph will be included at 80 percent of its full size in the hardcopy. |
||
+ | </p> |
||
+ | <p> |
||
+ | To help people who use screen readers, it is helpful to include alternate text for images. For instance, you could use <code>image(..., extra_html_tags=>'alt="graph of an upward opening parabola with vertex x = $x0."')</code>. |
||
</p> |
</p> |
||
</td> |
</td> |
||
Line 109: | Line 118: | ||
add_functions($gr2, |
add_functions($gr2, |
||
− | "2*x for x |
+ | "2*x for x in <-1,4> using color:green and weight:2", |
"-x for x in <-1,4> using color:red and weight:2"); |
"-x for x in <-1,4> using color:red and weight:2"); |
||
</pre> |
</pre> |
||
Line 138: | Line 147: | ||
$BR |
$BR |
||
\{ image( insertGraph($gr2), tex_size=>250, |
\{ image( insertGraph($gr2), tex_size=>250, |
||
− | + | width=>150, height=>150, |
|
extra_html_tags=>'alt="graph of a green ' . |
extra_html_tags=>'alt="graph of a green ' . |
||
'line through the origin into the first and ' . |
'line through the origin into the first and ' . |
||
Line 169: | Line 178: | ||
$a . 'x)"' |
$a . 'x)"' |
||
</pre> |
</pre> |
||
+ | <p> |
||
+ | It is possible to prohibit the use of cached images by setting |
||
+ | <code>$refreshCachedImages=1;</code> |
||
+ | </p> |
||
</td> |
</td> |
||
</tr> |
</tr> |
||
</table> |
</table> |
||
+ | |||
+ | == References== |
||
<p style="text-align:center;"> |
<p style="text-align:center;"> |
||
[[IndexOfProblemTechniques|Problem Techniques Index]] |
[[IndexOfProblemTechniques|Problem Techniques Index]] |
||
</p> |
</p> |
||
+ | |||
+ | |||
+ | <ul> |
||
+ | <li>POD documentation: [http://webwork.maa.org/pod/pg/macros/PGgraphmacros.html PGgraphmacros.pl]</li> |
||
+ | <li>PG macro: [https://github.com/openwebwork/pg/blob/master/macros/PGgraphmacros.pl]</li> |
||
+ | </ul> |
||
+ | |||
+ | |||
+ | <ul> |
||
+ | <li>POD documentation: [http://webwork.maa.org/pod/pg/lib/WWPlot.html WWPlot.pm]</li> |
||
+ | <li>PG library file: [https://github.com/openwebwork/pg/blob/master/lib/WWPlot.pm]</li> |
||
+ | </ul> |
||
+ | |||
[[Category:Problem Techniques]] |
[[Category:Problem Techniques]] |
Latest revision as of 09:29, 29 June 2023
This problem has been replaced with a newer version of this problem
Dynamically Generated Graphs: PG Code Snippet
This code snippet shows the essential PG code to include dynamically generated graphs in a problem. Note that these are insertions, not a complete PG file. This code will have to be incorporated into the problem file on which you are working.
For some examples of dynamically generated graphs in tables, see GraphsInTables
Note that in the following we consider first a very simple example that shows the basics of including a dynamically generated graph, and then, below that, a couple of more complicated examples that demonstrate some of the additional features of the graph macros.
PG problem file | Explanation |
---|---|
loadMacros("PGgraphmacros.pl"); |
Initialization:
We need to load |
$gr = init_graph(-1,-1,4,4, axes=>[0,0], grid=>[5,5], size=>[400,400] ); add_functions($gr, "x^2/4 for x in <-1,4>" . " using color:blue and weight:2"); |
Setup:
We create a graph object by calling
We add functions the graph with <i>function</i> for x in <i>range</i> using color:<i>colorname</i> and weight:<i>numericalweight</i>
The function should be given as a function of x, and should be written with
The range specified is given as a mathematical interval: that is, specifying a square bracket ( Finally, colorname and numericalweight are what we would expect: the name of the color to graph the function, and the weight of the curve used. The default weight is two, and the default color is black. Other good values for colorname include blue, green, red, gray, and orange.
We can specify that images in the web browser's cache not be used by inserting
If you want to increase the number of points plotted, you can access the first function added to the graph and set the number of points to 200 using |
BEGIN_TEXT $BCENTER \{ image( insertGraph($gr), width=>200,height=>200,tex_size=>800 ) \} $BR (Click on graph to enlarge) $ECENTER END_TEXT |
Main Text:
Images are included in the text section of the problem with the
To help people who use screen readers, it is helpful to include alternate text for images. For instance, you could use |
In addition to this basic graph insertion, we can do more interesting things as well: for example, we can specify the size of the image in the hardcopy that a student can print out, the size of the image when viewed on screen, and extra HTML tags to use when displaying the image on the screen. In addition, there are cases where we want to leave off the default graph labeling, which is also easily done. We can decorate images with labels, lines and points as well.
PG problem file | Explanation |
---|---|
loadMacros("PGgraphmacros.pl"); |
We include |
$gr1 = init_graph(-1,-1,4,4,axes=>[0,0],grid=>[5,5]); $gr2 = init_graph(-1,-1,4,4,axes=>[0,0],size=>[150,150]); $gr2->lb('reset'); add_functions($gr1, "sin(x) for x in <-1,4> using color:black and weight:2"); add_functions($gr2, "2*x for x in <-1,4> using color:green and weight:2", "-x for x in <-1,4> using color:red and weight:2"); |
To illustrate a couple of different features of dynamically generated graphs, we create two new graph objects in the problem set-up section of the file:
For the graph object
Then, for the graph object
Next, we remove all of the default labels and tick marks from the graph object
And we add functions to all three graphs with |
BEGIN_TEXT \{ image( insertGraph($gr1), tex_size=>250 ) \} $BR \{ image( insertGraph($gr2), tex_size=>250, width=>150, height=>150, extra_html_tags=>'alt="graph of a green ' . 'line through the origin into the first and ' . 'third quadrants and a red line through the ' . 'origin extending into the second and fourth ' . 'quadrants."' ) \} END_TEXT |
Then, in the text section of the file, we have made a couple of additional changes. The first is the inclusion of the
When inserting graph object
Finally, for the It's worth making one more note about this option, which has been broken over a couple of lines to avoid having one very long line on this help page. The short version of the option would be: extra_html_tags=>'alt="alternate text"'
To break the text over multiple lines in this example, we have used the Perl concatenation operator extra_html_tags=>'alt="graph of sin(' . $a . 'x)"'
It is possible to prohibit the use of cached images by setting
|
References
- POD documentation: PGgraphmacros.pl
- PG macro: [1]