Difference between revisions of "DynamicImages2"

From WeBWorK_wiki
Jump to navigation Jump to search
(New page: <h2>Adding Labels, Lines and Points to Dynamic Graphs: PG Code Snippet</h2> <p style="background-color:#eeeeee;border:black solid 1px;padding:3px;"> <em>This code snippet shows the essent...)
 
 
(25 intermediate revisions by 8 users not shown)
Line 1: Line 1:
  +
{{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>
 
<h2>Adding Labels, Lines and Points to Dynamic Graphs: PG Code Snippet</h2>
  
<h2>Adding Labels, Lines and Points to Dynamic Graphs: PG Code Snippet</h2>
   
Line 7: Line 10:
 
[[IndexOfProblemTechniques|Problem Techniques Index]]
  
[[IndexOfProblemTechniques|Problem Techniques Index]]
 
</p>
  
</p>
  +
   
 
<table cellspacing="0" cellpadding="2" border="0">
  
<table cellspacing="0" cellpadding="2" border="0">
Line 28: Line 32:
 
<td style="background-color:#ffffdd;border:black 1px dashed;">
  
<td style="background-color:#ffffdd;border:black 1px dashed;">
 
<pre>
  
<pre>
−
# a graph object
 +
# a graph object
−
$gr = init_graph(-1,4,-1,4,axes=&gt;~[0,0],grid=&gt;[5,5]);
 +
$gr = init_graph(-1,-1,4,4,
−
# plot a function
 +
axes=&gt;[0,0],
−
add_functions($gr,
 +
size=&gt;[400,400]); # or pixels=&gt;[400,400]
−
"4-3*e^(-x) for x in <-1,4> using color:blue and weight:2");
  
   
−
# add a label
  
  +
# specify the grid manually
−
$gr->lb( new Label(0.25,3.25,'(0,3)',
 +
$gr->h_grid("gray",1.5,3);
−
'black','center','center'));
 +
$gr->v_grid("gray",1,2,3);
   
−
# a line
  
  +
# or specify tickmarks
−
$gr->moveTo(-1,1);
  
  +
# x-axis ticks entered as y-value, color, list of x-values
−
$gr->lineTo(4,1,'black');
 +
# $gr->h_ticks(0,"black",1,2,3);
  +
# y-axis ticks entered as x-value, color, list of y-values
  +
# $gr->v_ticks(0,"black",1.5,3);
  +
  +
# plot a function
  +
add_functions($gr, "4-3*e^(-x) for x in <-1,4> " .
  +
"using color:blue and weight:2");
  +
  +
# add a label
  +
$gr->lb( new Label(0.25,3.25,'(0,3)',
  +
'black','center','middle'));
  +
  +
# a line
  +
$gr->moveTo(-1,1);
  +
$gr->lineTo(4,1,'black');
  +
  +
# a thicker, blue line
  +
# (only works for WeBWorK > 2.4)
  +
$gr->lineTo(4,-1,'blue',2);
  +
  +
# a dashed blue line
  +
# (only works for WeBWorK > 2.4)
  +
$gr->lineTo(4,-1,'blue',1,'dashed');
  +
  +
# a thicker red arrow from (0,0) to (4,1)
  +
# (only works for WeBWorK > 2.4;
  +
# also supports the 'dashed' option)
  +
$gr->moveTo(0,0);
  +
$gr->arrowTo(4,1,'red',2);
  +
  +
# and a point
  +
$gr->stamps( closed_circle(0,3,'blue') );
   
−
# and a point
  
−
$gr->stamps( closed_circle(0,3,'blue') );
  
 
</pre>
  
</pre>
 
</td>
  
</td>
 
<td style="background-color:#ffffcc;padding:7px;">
  
<td style="background-color:#ffffcc;padding:7px;">
 
<p>
  
<p>
−
In the initialization part of the file, we define a [dynamically generated graph|DynamicImages]. Then we can add labels, lines and points to the graph.
 +
In the initialization part of the file, we define a
  +
[[DynamicImages|dynamically generated graph]].
  +
Then we can add labels, lines and points to the graph.
 
</p>
  
</p>
 
<p>
  
<p>
−
To add labels, we use the <code>lb</code> method of the graph object. The argument is a new <code>Label</code> object, defined by an x-coordinate, y-coordinate, label text, color, and justification. The justification can be <i>left</i>, <i>center</i> or <i>right</i> for the left-to-right justification, and <i>top</i>, <i>center</i> or <i>bottom</i> for the top-to-bottom justification.
 +
To add labels, we use the <code>lb</code> method of the graph object. The argument is a new <code>Label</code> object, defined by an x-coordinate, y-coordinate, label text, color, and justification. The justification can be <i>left</i>, <i>center</i> or <i>right</i> for the left-to-right justification, and <i>top</i>, <i>middle</i> or <i>bottom</i> for the top-to-bottom justification.
 
</p>
  
</p>
 
<p>
  
<p>
−
Lines are added by moving the graph "cursor" to a point and then drawing a line to a new point.
 +
Lines are added by moving the graph "cursor" to a point and then drawing a line to a new point. Note that the "cursor" remains at the endpoint of the line after drawing is completed, so that any line drawn thereafter without an additional <code>moveTo</code> method call will start at that endpoint.
 
</p>
  
</p>
 
<p>
  
<p>
−
And we add points by using the <code>stamps</code> method of the graph object. We've added a closed circle here; as might expect, <code>open_circle</code>s are also supported.
 +
And we add points by using the <code>stamps</code> method of the graph object. We've added a closed circle here (<code>open_circle</code> is also supported).
  +
</p>
  +
<p>
  +
For alignment of labels, we have
  +
<ul>
  +
<li><code>'left', 'center', 'right'</code> for horizontal alignment</li>
  +
<li><code>'bottom', 'middle', 'top'</code> for vertical alignment</li>
  +
</ul>
  +
For example, specifying <code>'left','bottom'</code> will put the bottom left corner of the text at the specified point.
 
</p>
  
</p>
 
</td>
  
</td>
Line 63: Line 65:
 
<td style="background-color:#ffdddd;border:black 1px dashed;">
  
<td style="background-color:#ffdddd;border:black 1px dashed;">
 
<pre>
  
<pre>
−
BEGIN_TEXT
 +
BEGIN_TEXT
−
\{ image( insertGraph($gr) ) \}
 +
$BCENTER
−
END_TEXT
 +
\{ image( insertGraph($gr), width=>400,
  +
height=>400, tex_size=>800 ) \}
  +
$ECENTER
  +
END_TEXT
 
</pre>
  
</pre>
 
<td style="background-color:#ffcccc;padding:7px;">
  
<td style="background-color:#ffcccc;padding:7px;">
 
<p>
  
<p>
−
And the graph is inserted in the text portion of the problem as we'd expect any [[StaticImages|static]] or [[DynamicImages|dynamic]] image to be.
 +
And the graph is inserted in the text portion of the problem as we'd expect any [[StaticImages|static]] or [[DynamicImages|dynamic]] image to be. (Note that if
  +
we insert a graph with a smaller size than the size specified in <code>init_graph</code>
  +
we may want to include a note indicating that clicking on the graph will display a
  +
larger version.)
 
</p>
  
</p>
 
</td>
  
</td>
Line 77: Line 79:
 
[[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]]

Latest revision as of 15:44, 20 June 2023

This article has been retained as a historical document. It is not up-to-date and the formatting may be lacking. Use the information herein with caution.

This problem has been replaced with a newer version of this problem

Adding Labels, Lines and Points to Dynamic Graphs: PG Code Snippet

This code snippet shows the essential PG code to add labels, lines and points to dynamically generated graphs. 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.

Problem Techniques Index


PG problem file Explanation 
  loadMacros("PGgraphmacros.pl");

We have no required additions to the tagging and description section of the file, and we obviously need to include PGgraphmacros.pl to do dynamic graphs. 

# a graph object
$gr = init_graph(-1,-1,4,4,
axes=>[0,0],
size=>[400,400]); # or pixels=>[400,400]

# specify the grid manually
$gr->h_grid("gray",1.5,3);
$gr->v_grid("gray",1,2,3);

# or specify tickmarks
# x-axis ticks entered as y-value, color, list of x-values
# $gr->h_ticks(0,"black",1,2,3);
# y-axis ticks entered as x-value, color, list of y-values
# $gr->v_ticks(0,"black",1.5,3);

# plot a function
add_functions($gr, "4-3*e^(-x) for x in <-1,4> " .
    "using color:blue and weight:2");

# add a label
$gr->lb( new Label(0.25,3.25,'(0,3)',
    'black','center','middle'));

# a line
$gr->moveTo(-1,1);
$gr->lineTo(4,1,'black');

# a thicker, blue line
#    (only works for WeBWorK > 2.4)
$gr->lineTo(4,-1,'blue',2);

# a dashed blue line
#    (only works for WeBWorK > 2.4)
$gr->lineTo(4,-1,'blue',1,'dashed');

# a thicker red arrow from (0,0) to (4,1)
#    (only works for WeBWorK > 2.4;
#    also supports the 'dashed' option)
$gr->moveTo(0,0);
$gr->arrowTo(4,1,'red',2);

# and a point
$gr->stamps( closed_circle(0,3,'blue') );

In the initialization part of the file, we define a dynamically generated graph. Then we can add labels, lines and points to the graph.

To add labels, we use the lb method of the graph object. The argument is a new Label object, defined by an x-coordinate, y-coordinate, label text, color, and justification. The justification can be left, center or right for the left-to-right justification, and top, middle or bottom for the top-to-bottom justification.

Lines are added by moving the graph "cursor" to a point and then drawing a line to a new point. Note that the "cursor" remains at the endpoint of the line after drawing is completed, so that any line drawn thereafter without an additional moveTo method call will start at that endpoint.

And we add points by using the stamps method of the graph object. We've added a closed circle here (open_circle is also supported).

For alignment of labels, we have

  • 'left', 'center', 'right' for horizontal alignment
  • 'bottom', 'middle', 'top' for vertical alignment

For example, specifying 'left','bottom' will put the bottom left corner of the text at the specified point. 

BEGIN_TEXT
$BCENTER
\{ image( insertGraph($gr), width=>400, 
    height=>400, tex_size=>800 ) \}
$ECENTER
END_TEXT

And the graph is inserted in the text portion of the problem as we'd expect any static or dynamic image to be. (Note that if we insert a graph with a smaller size than the size specified in init_graph we may want to include a note indicating that clicking on the graph will display a larger version.)

Problem Techniques Index



Retrieved from "https://webwork.maa.org/mediawiki_new/index.php?title=DynamicImages2&oldid=23632"