Difference between revisions of "GraphsInTables"

From WeBWorK_wiki
Jump to navigation Jump to search
(added historical tag and gave updated problem link)
 
(36 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
<h2>Putting Graphs into Tables</h2>
  
  +
{{historical}}
  +
  +
<p style="font-size: 120%;font-weight:bold">This problem has been replaced with [https://openwebwork.github.io/pg-docs/sample-problems/problem-techniques/GraphsInTables.html a newer version of this problem]</p>
  +
<h2>Putting Graphs Into Tables</h2>
   
 
<!-- Header for these sections -- no modification needed -->
 
<!-- Header for these sections -- no modification needed -->
Line 6: Line 9:
 
<em>This PG code shows how to put graphs into tables so that they will be displayed compactly and a proper size in both HTML and TeX modes.</em>
  
<em>This PG code shows how to put graphs into tables so that they will be displayed compactly and a proper size in both HTML and TeX modes.</em>
 
<ul type="square">
  
<ul type="square">
−
<li>Example 1: Putting a text block and graphics side-by-side using ColumnTable from unionTables.pl</li>
 +
<li>Example 1: A multiple choice problem in which we create an array of graphs with two columns (or three columns) that is below a text block (not side-by-side with text) using BeginTable from unionTables.pl.</li>
  +
<li>Example 2: A free response problem in which we put a long text block and a graph side-by-side using ColumnTable from unionTables.pl.</li>
  +
<li>Example 3: A matching problem in which we display a long, narrow text block and an array of graphs side-by-side using ColumnTable and BeginTable from unionTables.pl</li>
  +
<li>Example 4: (Not recommended) Using imageRow</li>
 
</ul>
  
</ul>
 
</p>
  
</p>
  +
   
   
 
<p style="background-color:#eeeeee;border:black solid 1px;padding:3px;">
  
<p style="background-color:#eeeeee;border:black solid 1px;padding:3px;">
−
<em><b>Example 1:</b> Putting a text block and graphics side-by-side using ColumnTable from unionTables.pl</em>
 +
<em><b>Example 1:</b> A multiple choice problem in which we create an array of graphs with two columns that is below a text block (not side-by-side with text) using BeginTable from unionTables.pl.</em>
  +
</p>
  +
  +
<p style="text-align:center;">
  +
[[IndexOfProblemTechniques|Problem Techniques Index]]
  +
</p>
  +
  +
<table cellspacing="0" cellpadding="2" border="0">
  +
  +
<tr valign="top">
  +
<th> PG problem file </th>
  +
<th> Explanation </th>
  +
</tr>
  +
  +
<!-- Load specialized macro files section -->
  +
  +
<tr valign="top">
  +
<td style="background-color:#ddffdd;border:black 1px dashed;">
  +
<pre>
  +
DOCUMENT();
  +
  +
loadMacros(
  +
"PGstandard.pl",
  +
"PGchoicemacros.pl",
  +
"PGgraphmacros.pl",
  +
"unionTables.pl",
  +
"parserPopUp.pl",
  +
);
  +
  +
TEXT(beginproblem());
  +
  +
$refreshCachedImages=1;
  +
</pre>
  +
</td>
  +
<td style="background-color:#ccffcc;padding:7px;">
  +
<p>
  +
<b>Initialization:</b>
  +
Be sure to load <code>unionTables.pl</code> (or <code>PGunion.pl</code> which will load it automatically). Set <code>$refreshCachedImages=1;</code> if you desire the graphics files to be refreshed each time.
  +
</p>
  +
</td>
  +
</tr>
  +
  +
<!-- Setup section -->
  +
  +
<tr valign="top">
  +
<td style="background-color:#ffffdd;border:black 1px dashed;">
  +
<pre>
  +
$f[0] = "-exp(x) for x in <-2.5,2.5> using color:red and weight:2";
  +
$gr[0] = init_graph(-2.5,-10,2.5,1,'axes'=>[0,0]);
  +
$gr[0]->lb('reset');
  +
$gr[0]->lb(new Label(2.25,0.25,'x','black','center','middle'));
  +
$gr[0]->lb(new Label(0.15,0.75,'y','black','center','middle'));
  +
  +
$f[1] = "exp(-x) for x in <-2.5,2.5> using color:red and weight:2";
  +
$gr[1] = init_graph(-2.5,-1,2.5,10,'axes'=>[0,0]);
  +
$gr[1]->lb('reset');
  +
$gr[1]->lb(new Label(2.25,-0.25,'x','black','center','middle'));
  +
$gr[1]->lb(new Label(0.15,9.75,'y','black','center','middle'));
  +
  +
$f[2] = "-exp(-x) for x in <-2.5,2.5> using color:red and weight:2";
  +
$gr[2] = init_graph(-2.5,-10,2.5,1,'axes'=>[0,0]);
  +
$gr[2]->lb('reset');
  +
$gr[2]->lb(new Label(2.25,0.25,'x','black','center','middle'));
  +
$gr[2]->lb(new Label(0.15,0.75,'y','black','center','middle'));
  +
  +
$f[3] = "exp(x) for x in <-2.5,2.5> using color:red and weight:2";
  +
$gr[3] = init_graph(-2.5,-1,2.5,10,'axes'=>[0,0]);
  +
$gr[3]->lb('reset');
  +
$gr[3]->lb(new Label(2.25,-0.25,'x','black','center','middle'));
  +
$gr[3]->lb(new Label(0.15,9.75,'y','black','center','middle'));
  +
  +
for $i (0..3) {
  +
plot_functions( $gr[$i], $f[$i]);
  +
$fig[$i]=image(insertGraph($gr[$i]),
  +
width=>200,height=>200,tex_size=>450);
  +
}
  +
  +
@eqn =("\( y = -e^{x} \)", "\( y = e^{-x} \)",
  +
"\( y = -e^{-x} \)", "\( y = e^{x} \)");
  +
  +
$k = random(0,3,1);
  +
  +
@perm = shuffle(4);
  +
@fig = @fig[@perm];
  +
@inv = invert(@perm);
  +
  +
@letter = ("A", "B", "C", "D");
  +
  +
$popup = PopUp(["?","A","B","C","D"], $letter[$inv[$k]]);
  +
</pre>
  +
</td>
  +
<td style="background-color:#ffffcc;padding:7px;">
  +
<p>
  +
<b>Setup:</b>
  +
Generate graphs to be included in the main text. Notice our choice for the size of each graph is <code>width=>200, height=>200, tex_size=>450</code> for an array of graphs that has two columns.
  +
</p>
  +
<p>
  +
Pick one equation and graph at random (using <code>$k</code>) to be the correct choice. Shuffle the graphs using a permutation, and use the inverse permutation to recall the correct answer in the answer evaluation section.
  +
</p>
  +
<p>
  +
If, instead, we had six graphs and desired a three-column array of graphs, we would want to change <code>tex_size=&gt;310</code> as in the following bit of code.
  +
<pre>
  +
for $i (0..5) {
  +
plot_functions( $gr[$i], $f[$i]);
  +
$gr[$i]=image(insertGraph($gr[$i]),
  +
width=>200,height=>200,tex_size=>310);
  +
}
  +
</pre>
  +
You are strongly discouraged from using more than three columns in an array of graphs because otherwise you have to scale the graphs down so much that they become unreadable (especially in TeX mode).
  +
</p>
  +
</td>
  +
</tr>
  +
  +
<!-- Question text section -->
  +
  +
<tr valign="top">
  +
<td style="background-color:#ffdddd;border:black 1px dashed;">
  +
<pre>
  +
BEGIN_TEXT
  +
Consider the exponential equation $eqn[$k].
  +
Without using a calculator, sketch a
  +
graph of this equation on paper.
  +
$BR
  +
$BR
  +
Which graph A-D below most closely matches
  +
the graph you drew?
  +
\{ $popup->menu() \}
  +
$BR
  +
$BR
  +
$BCENTER
  +
\{
  +
BeginTable().
  +
AlignedRow([$fig[0],$fig[1]]).
  +
TableSpace(5,0).
  +
AlignedRow(["A","B"]).
  +
TableSpace(25,6).
  +
AlignedRow([$fig[2],$fig[3]]).
  +
TableSpace(5,0).
  +
AlignedRow(["C","D"]).
  +
EndTable();
  +
\}
  +
$BR
  +
(Click on a graph to enlarge it.)
  +
$ECENTER
  +
END_TEXT
  +
</pre>
  +
<td style="background-color:#ffcccc;padding:7px;">
  +
<p>
  +
<b>Main Text:</b>
  +
Use commands such as <code>BeginTable()</code>, provided by <code>unionTables.pl</code> to nicely display the graphs.
  +
</p>
  +
<p>
  +
If, instead, we had six graphs we wanted to display in three columns, we would use the following code.
  +
<pre>
  +
\{
  +
BeginTable().
  +
AlignedRow([$fig[0],$fig[1],$fig[2]]).
  +
TableSpace(5,0).
  +
AlignedRow(["A","B","C"]).
  +
TableSpace(25,6).
  +
AlignedRow([$fig[3],$fig[4],$fig[5]]).
  +
TableSpace(5,0).
  +
AlignedRow(["D","E","F"]).
  +
EndTable().
  +
$BR.$BCENTER."(Click on a graph to enlarge it)".$ECENTER
  +
\}
  +
</pre>
  +
</p>
  +
</td>
  +
</tr>
  +
  +
<!-- Answer section -->
  +
  +
<tr valign="top">
  +
<td style="background-color:#eeddff;border:black 1px dashed;">
  +
<pre>
  +
install_problem_grader(~~&std_problem_grader);
  +
$showPartialCorrectAnswers = 0;
  +
  +
ANS( $popup->cmp() );
  +
  +
ENDDOCUMENT();
  +
</pre>
  +
<td style="background-color:#eeccff;padding:7px;">
  +
<p>
  +
<b>Answer Evaluation:</b>
  +
To prevent students from guessing, use the standard problem grader and withhold feedback.
  +
</p>
  +
</td>
  +
</tr>
  +
</table>
  +
  +
  +
  +
  +
  +
<p style="text-align:center;">
  +
[[IndexOfProblemTechniques|Problem Techniques Index]]
  +
</p>
  +
  +
  +
  +
  +
  +
  +
<p style="background-color:#eeeeee;border:black solid 1px;padding:3px;">
  +
<em><b>Example 2:</b> A free response problem in which we put a long text block and a graph side-by-side using ColumnTable from unionTables.pl.</em>
 
</p>
  
</p>
   
Line 60: Line 64:
 
Context("Numeric");
  
Context("Numeric");
   
−
$a = random(2,3,1); # left x-intercept
 +
$a = random(2,3,1); # -$a is the left x-intercept
−
$b = random(2,4,2); # right x-intercept
 +
$b = random(2,4,2); # $b is the right x-intercept
−
$c = random(-4,-1,1); # y-intercept
 +
$c = random(1,4,1); # -$c is the y-intercept
   
−
$k = -($c)/($a * $b);
 +
$k = $c/($a * $b);
   
 
$A = $k;
  
$A = $k;
 
$B = $k*($a - $b);
  
$B = $k*($a - $b);
−
$C = -($k * $a * $b);
 +
$C = -($c);
   
 
$gr = init_graph(-5,-5,5,5,axes=>[0,0],grid=>[10,10]);
  
$gr = init_graph(-5,-5,5,5,axes=>[0,0],grid=>[10,10]);
Line 81: Line 85:
 
<p>
  
<p>
 
<b>Setup:</b>
 
<b>Setup:</b>
−
Generate a graph to be included in the main text. This graph is a parabola opening down with roots <code>$a, $b</code> and y-intercept <code>$c</code>.
+
Generate a graph to be included in the main text. This graph is a parabola opening up with roots <code>-$a, $b</code> and y-intercept <code>-$c</code>.
 
</p>
  
</p>
 
</td>
  
</td>
Line 106: Line 110:
 
$BR.
  
$BR.
 
$BR.
  
$BR.
−
"(b) \( f \big( \) ".ans_rule(7)." \( \big) = 0 \). ", # comma!
 +
"(b) \( f \big( \) ".ans_rule(7)." \( \big) = 0 \). "
  +
,
  +
$BCENTER.
 
image(insertGraph($gr), width=>400, height=>400, tex_size=>700).
  
image(insertGraph($gr), width=>400, height=>400, tex_size=>700).
−
$BR.$BCENTER.
 +
$BR.
 
"(Click on graph to enlarge)".
  
"(Click on graph to enlarge)".
−
$ECENTER, # comma!
 +
$ECENTER
  +
,
 
indent => 0, separation => 30, valign => "TOP"
  
indent => 0, separation => 30, valign => "TOP"
 
)
  
)
Line 120: Line 124:
 
<p>
  
<p>
 
<b>Main Text:</b>
  
<b>Main Text:</b>
−
We use <code>ColumnTable( columnA, columnB, options )</code> to display the text and answer blanks in the left column, and the graph in the right column. Notice that within each column, every line except for the last ends with a period to join together things like strings, answer rules, etc. The last line in both columns ends with a comma, as noted in the commented out portions <code># comma!</code>.
+
We use <code>ColumnTable( columnA, columnB, options )</code> to display the text and answer blanks in the left column, and the graph in the right column. Notice that within each column, every line except for the last ends with a period to join together things like strings, answer rules, etc. The last line in both columns ends with a comma, and we have put these commas on their own lines so the divisions can be easily seen.
 
</p>
  
</p>
 
<p>
  
<p>
Line 127: Line 131:
 
<li>
  
<li>
 
Using a ColumnTable to put the graphics and text side-by-side is very useful when the text is long. If the graphic were below a long block of text, the student would have to scroll up and down frequently between the questions and the graphic, making it harder to use.</li>
  
Using a ColumnTable to put the graphics and text side-by-side is very useful when the text is long. If the graphic were below a long block of text, the student would have to scroll up and down frequently between the questions and the graphic, making it harder to use.</li>
−
<li>ColumnTable behaves well in TeX mode. The default in TeX mode is a two-column format for the printed page, which means that each column is very narrow. Using an ordinary table (instead of a ColumnTable) to put text and graphics side-by-side would likely mean that the graphics would spill over from the left column of the printed page to the right column of the printed page (causing text and graphics to overlap) or, worse yet, spill over from the right column of the printed page into oblivion. However, using a ColumnTable, the graphics will appear underneath the text, as desired.</li>
 +
<li>ColumnTable behaves well in TeX mode. The default in TeX mode is a two-column format for the printed page, which means that each column is very narrow. Using an ordinary table (instead of a ColumnTable) to put text and graphics side-by-side would likely mean that the graphics would spill over from the left column of the printed page to the right column of the printed page (causing text and graphics to overlap) or, worse yet, spill over from the right column of the printed page into oblivion. However, using a ColumnTable, the graphics will appear underneath the text in TeX mode, as desired.</li>
 
</ul>
  
</ul>
 
</p>
  
</p>
Line 140: Line 144:
 
$showPartialCorrectAnswers = 1;
  
$showPartialCorrectAnswers = 1;
   
−
ANS( List($c)->cmp() );
 +
ANS( List(-$c)->cmp() );
   
 
ANS( List(-$a,$b)->cmp() );
  
ANS( List(-$a,$b)->cmp() );
Line 154: Line 158:
 
</tr>
  
</tr>
 
</table>
  
</table>
  +
  +
  +
  +
  +
  +
<p style="text-align:center;">
  +
[[IndexOfProblemTechniques|Problem Techniques Index]]
  +
</p>
  +
  +
  +
  +
  +
<p style="background-color:#eeeeee;border:black solid 1px;padding:3px;">
  +
<em><b>Example 3:</b> A matching problem in which we display a long, narrow text block and an array of graphs side-by-side using ColumnTable and BeginTable from unionTables.pl.</em>
  +
</p>
  +
  +
  +
  +
<table cellspacing="0" cellpadding="2" border="0">
  +
  +
<tr valign="top">
  +
<th> PG problem file </th>
  +
<th> Explanation </th>
  +
</tr>
  +
  +
<!-- Load specialized macro files section -->
  +
  +
<tr valign="top">
  +
<td style="background-color:#ddffdd;border:black 1px dashed;">
  +
<pre>
  +
DOCUMENT();
  +
  +
loadMacros(
  +
"PGstandard.pl",
  +
"PGchoicemacros.pl",
  +
"PGgraphmacros.pl",
  +
"unionTables.pl",
  +
);
  +
  +
TEXT(beginproblem());
  +
  +
$refreshCachedImages=1;
  +
</pre>
  +
</td>
  +
<td style="background-color:#ccffcc;padding:7px;">
  +
<p>
  +
<b>Initialization:</b>
  +
Be sure to load <code>unionTables.pl</code> (or <code>PGunion.pl</code> which will load it automatically). Set <code>$refreshCachedImages=1;</code> if you desire the graphics files to be refreshed each time. We use <code>PGchoicemacros.pl</code> for commands to shuffle the images and thus randomize the answers.
  +
</p>
  +
</td>
  +
</tr>
  +
  +
<!-- Setup section -->
  +
  +
<tr valign="top">
  +
<td style="background-color:#ffffdd;border:black 1px dashed;">
  +
<pre>
  +
####################################
  +
# Create blank canvases with labels
  +
#
  +
foreach my $j (0..5) {
  +
  +
$graph[$j] = init_graph(-10,-10,10,10,'axes'=>[0,0],
  +
'ticks'=>[10,10],'size'=>[400,400]);
  +
$graph[$j]->lb('reset');
  +
  +
foreach my $i (1..4) {
  +
$graph[$j]->lb(new Label(2*$i,-.1,2*$i,'black','center','top'));
  +
$graph[$j]->lb(new Label(-2*$i,-.1,-2*$i,'black','center','top'));
  +
$graph[$j]->lb(new Label(-.1,2*$i,2*$i,'black','right','middle'));
  +
$graph[$j]->lb(new Label(-.1,-2*$i,-2*$i,'black','right','middle'));
  +
}
  +
  +
$graph[$j]->lb(new Label(9.8,-0.1,"x",'black','right','top'));
  +
$graph[$j]->lb(new Label(-.1,9.8,"y",'black','right','top'));
  +
  +
}
  +
  +
  +
  +
#########################################
  +
# Manually add functions to the canvases
  +
#
  +
  +
$f[0] = "\frac{-1}{x-5}-1";
  +
plot_functions($graph[0],
  +
"-1/(x-5)-1 for x in <-10,4.99> using color:blue and weight:2",
  +
"-1/(x-5)-1 for x in <5.01,10> using color:blue and weight:2",
  +
);
  +
# vertical asymptote
  +
$graph[0]->moveTo(5,-10);
  +
$graph[0]->lineTo(5,10,'black',1,'dashed');
  +
# horizontal asymptote
  +
$graph[0]->moveTo(-10,-1);
  +
$graph[0]->lineTo(10,-1,'black',1,'dashed');
  +
  +
  +
$f[1] = "\frac{x-2}{(x+1)(x-3)}";
  +
plot_functions($graph[1],
  +
"(x-2)/((x+1)*(x-3)) for x in <-10,-1.01> using color:blue and weight:2",
  +
"(x-2)/((x+1)*(x-3)) for x in <-0.99,2.99> using color:blue and weight:2",
  +
"(x-2)/((x+1)*(x-3)) for x in <3.01,10> using color:blue and weight:2",
  +
);
  +
# vertical asymptote
  +
$graph[1]->moveTo(-1,-10);
  +
$graph[1]->lineTo(-1,10,'black',1,'dashed');
  +
# vertical asymptote
  +
$graph[1]->moveTo(3,-10);
  +
$graph[1]->lineTo(3,10,'black',1,'dashed');
  +
  +
  +
$f[2] = "\frac{2x+4}{x-1}";
  +
plot_functions($graph[2],
  +
"(2x+4)/(x-1) for x in <-10,0.99> using color:blue and weight:2",
  +
"(2x+4)/(x-1) for x in <1.01,10> using color:blue and weight:2",
  +
);
  +
# vertical asymptote
  +
$graph[2]->moveTo(1,-10);
  +
$graph[2]->lineTo(1,10,'black',1,'dashed');
  +
# horizontal asymptote
  +
$graph[2]->moveTo(-10,2);
  +
$graph[2]->lineTo(10,2,'black',1,'dashed');
  +
  +
  +
$f[3] = "\frac{1}{x+1} + \frac{1}{x-3}";
  +
plot_functions($graph[3],
  +
"1/(x+1)+1/(x-3) for x in <-10,-1.01> using color:blue and weight:2",
  +
"1/(x+1)+1/(x-3) for x in <-0.99,2.99> using color:blue and weight:2",
  +
"1/(x+1)+1/(x-3) for x in <3.01,10> using color:blue and weight:2",
  +
);
  +
# vertical asymptote
  +
$graph[3]->moveTo(-1,-10);
  +
$graph[3]->lineTo(-1,10,'black',1,'dashed');
  +
# vertical asymptote
  +
$graph[3]->moveTo(3,-10);
  +
$graph[3]->lineTo(3,10,'black',1,'dashed');
  +
  +
  +
$f[4] = "\frac{1-x^2}{x-2}+3";
  +
plot_functions($graph[4],
  +
"(1-x^2)/(x-2)+3 for x in <-10,1.99> using color:blue and weight:2",
  +
"(1-x^2)/(x-2)+3 for x in <2.01,10> using color:blue and weight:2",
  +
);
  +
# vertical asymptote
  +
$graph[4]->moveTo(2,-10);
  +
$graph[4]->lineTo(2,10,'black',1,'dashed');
  +
  +
  +
$f[5] = "\frac{1-4x}{2x+2}";
  +
plot_functions($graph[5],
  +
"(1-4x)/(2x+2) for x in <-10,-1.01> using color:blue and weight:2",
  +
"(1-4x)/(2x+2) for x in <-0.99,10> using color:blue and weight:2",
  +
);
  +
# vertical asymptote
  +
$graph[5]->moveTo(-1,-10);
  +
$graph[5]->lineTo(-1,10,'black',1,'dashed');
  +
# horizontal asymptote
  +
$graph[5]->moveTo(-10,-2);
  +
$graph[5]->lineTo(10,-2,'black',1,'dashed');
  +
  +
  +
  +
###############################################
  +
# Create figures that can be inserted directly
  +
#
  +
foreach $j (0..5) {
  +
$fig[$j] = image(insertGraph($graph[$j]),
  +
width => 200, height => 200, tex_size => 310);
  +
}
  +
  +
  +
###############################################
  +
# Shuffle the figures
  +
#
  +
@perm = shuffle(6);
  +
@inv = invert(@perm);
  +
@fig = @fig[@perm];
  +
@letter = ("A","B","C","D","E","F");
  +
</pre>
  +
</td>
  +
<td style="background-color:#ffffcc;padding:7px;">
  +
<p>
  +
<b>Setup:</b>
  +
Generate a number of graphs to be included in the main text. Then, near the bottom, shuffle the graphs.
  +
</p>
  +
</td>
  +
</tr>
  +
  +
<!-- Question text section -->
  +
  +
<tr valign="top">
  +
<td style="background-color:#ffdddd;border:black 1px dashed;">
  +
<pre>
  +
BEGIN_TEXT
  +
\{
  +
ColumnTable(
  +
"Without a calculator, match each function with its graph A-F ".
  +
"by finding the zeros, asymptotes, and end behavior for each function.".
  +
$BR.$BR.pop_up_list(["?",@letter]).$SPACE."\( \displaystyle y = $f[0] \)".
  +
$BR.$BR.pop_up_list(["?",@letter]).$SPACE."\( \displaystyle y = $f[1] \)".
  +
$BR.$BR.pop_up_list(["?",@letter]).$SPACE."\( \displaystyle y = $f[2] \)".
  +
$BR.$BR.pop_up_list(["?",@letter]).$SPACE."\( \displaystyle y = $f[3] \)".
  +
$BR.$BR.pop_up_list(["?",@letter]).$SPACE."\( \displaystyle y = $f[4] \)".
  +
$BR.$BR.pop_up_list(["?",@letter]).$SPACE."\( \displaystyle y = $f[5] \)",# comma!
  +
$BCENTER.
  +
BeginTable().
  +
AlignedRow([$fig[0],$fig[1],$fig[2]]).
  +
TableSpace(5,0).
  +
AlignedRow(["A","B","C"]).
  +
TableSpace(25,6).
  +
AlignedRow([$fig[3],$fig[4],$fig[5]]).
  +
TableSpace(5,0).
  +
AlignedRow(["D","E","F"]).
  +
EndTable().
  +
$BR."(Click on a graph to enlarge it)".$ECENTER, # comma!
  +
indent => 0, separation => 10, valign => "TOP"
  +
)
  +
\}
  +
END_TEXT
  +
</pre>
  +
<td style="background-color:#ffcccc;padding:7px;">
  +
<p>
  +
<b>Main Text:</b>
  +
We use <code>ColumnTable( columnA, columnB, options )</code> to display the text and answer blanks in the left column, and the graphs in the right column. Notice that within each column, every line except for the last ends with a period to join together things like strings, answer rules, etc. The last line in both columns ends with a comma, as noted in the commented out portions <code># comma!</code>.
  +
</p>
  +
</td>
  +
</tr>
  +
  +
<!-- Answer section -->
  +
  +
<tr valign="top">
  +
<td style="background-color:#eeddff;border:black 1px dashed;">
  +
<pre>
  +
install_problem_grader(~~&std_problem_grader);
  +
$showPartialCorrectAnswers = 0;
  +
  +
foreach $j (0..5) {
  +
ANS( str_cmp($letter[$inv[$j]]) );
  +
}
  +
  +
ENDDOCUMENT();
  +
</pre>
  +
<td style="background-color:#eeccff;padding:7px;">
  +
<p>
  +
<b>Answer Evaluation:</b>
  +
To keep students from guessing, we use the all-or-nothing grader <code>std_problem_grader</code> and set <code>$showPartialCorrectAnswers = 0;
  +
</code> to withhold feedback.
  +
</p>
  +
</td>
  +
</tr>
  +
</table>
  +
  +
  +
  +
  +
  +
  +
<p style="background-color:#eeeeee;border:black solid 1px;padding:3px;">
  +
<em><b>Example 4:</b> (Not recommended) Using imageRow</em>
  +
</p>
  +
  +
<table cellspacing="0" cellpadding="2" border="0">
  +
  +
<tr valign="top">
  +
<th> PG problem file </th>
  +
<th> Explanation </th>
  +
</tr>
  +
  +
<!-- Load specialized macro files section -->
  +
  +
<tr valign="top">
  +
<td style="background-color:#ddffdd;border:black 1px dashed;">
  +
<pre>
  +
BEGIN_TEXT
  +
\{ imageRow( ["graph1.png","graph2.png"],
  +
["A","B"], width=>250, height=>250, tex_size=>450 ) \}
  +
  +
\{ imageRow( ["g1.png","g2.png","g3.png"],
  +
["A","B","C"], width=>200, height=>200, tex_size=>310 ) \}
  +
END_TEXT
  +
</pre>
  +
</td>
  +
<td style="background-color:#ccffcc;padding:7px;">
  +
<p>
  +
The <code>imageRow</code> function displays multiple images in a row, although it often shrinks down graphics so that they become unusable, especially in the pdf hardcopy. For legacy support, we have included it here. Its first argument is a list of image files and its second argument <code>["A","B"]</code> is a list of caption names. You are strongly recommended not to put four or more images in the same imageRow. Instead, use multiple imageRows. The double quotes in caption names are necessary, for example, to prevent the string "E" from being interpreted as E = 2.718...
  +
</p>
  +
</td>
  +
</tr>
  +
</table>
  +
  +
   
 
<p style="text-align:center;">
  
<p style="text-align:center;">

Latest revision as of 09:47, 29 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

Putting Graphs Into Tables


This PG code shows how to put graphs into tables so that they will be displayed compactly and a proper size in both HTML and TeX modes.

  • Example 1: A multiple choice problem in which we create an array of graphs with two columns (or three columns) that is below a text block (not side-by-side with text) using BeginTable from unionTables.pl.
  • Example 2: A free response problem in which we put a long text block and a graph side-by-side using ColumnTable from unionTables.pl.
  • Example 3: A matching problem in which we display a long, narrow text block and an array of graphs side-by-side using ColumnTable and BeginTable from unionTables.pl
  • Example 4: (Not recommended) Using imageRow


Example 1: A multiple choice problem in which we create an array of graphs with two columns that is below a text block (not side-by-side with text) using BeginTable from unionTables.pl.

Problem Techniques Index

PG problem file Explanation 
DOCUMENT();       

loadMacros(
"PGstandard.pl",
"PGchoicemacros.pl",
"PGgraphmacros.pl",
"unionTables.pl",
"parserPopUp.pl",
);
       
TEXT(beginproblem());

$refreshCachedImages=1;

Initialization: Be sure to load unionTables.pl (or PGunion.pl which will load it automatically). Set $refreshCachedImages=1; if you desire the graphics files to be refreshed each time. 

$f[0] = "-exp(x) for x in <-2.5,2.5> using color:red and weight:2";
$gr[0] = init_graph(-2.5,-10,2.5,1,'axes'=>[0,0]);
$gr[0]->lb('reset');
$gr[0]->lb(new Label(2.25,0.25,'x','black','center','middle'));
$gr[0]->lb(new Label(0.15,0.75,'y','black','center','middle'));

$f[1] = "exp(-x) for x in <-2.5,2.5> using color:red and weight:2";
$gr[1] = init_graph(-2.5,-1,2.5,10,'axes'=>[0,0]);
$gr[1]->lb('reset');
$gr[1]->lb(new Label(2.25,-0.25,'x','black','center','middle'));
$gr[1]->lb(new Label(0.15,9.75,'y','black','center','middle'));

$f[2] = "-exp(-x) for x in <-2.5,2.5> using color:red and weight:2";
$gr[2] = init_graph(-2.5,-10,2.5,1,'axes'=>[0,0]);
$gr[2]->lb('reset');
$gr[2]->lb(new Label(2.25,0.25,'x','black','center','middle'));
$gr[2]->lb(new Label(0.15,0.75,'y','black','center','middle'));

$f[3] = "exp(x) for x in <-2.5,2.5> using color:red and weight:2";
$gr[3] = init_graph(-2.5,-1,2.5,10,'axes'=>[0,0]);
$gr[3]->lb('reset');
$gr[3]->lb(new Label(2.25,-0.25,'x','black','center','middle'));
$gr[3]->lb(new Label(0.15,9.75,'y','black','center','middle'));

for $i (0..3) {
  plot_functions( $gr[$i], $f[$i]); 
  $fig[$i]=image(insertGraph($gr[$i]),
  width=>200,height=>200,tex_size=>450);
}

@eqn =("\( y = -e^{x} \)",  "\( y = e^{-x} \)", 
       "\( y = -e^{-x} \)", "\( y = e^{x} \)");

$k = random(0,3,1);

@perm = shuffle(4);
@fig = @fig[@perm];
@inv = invert(@perm);

@letter = ("A", "B", "C", "D");

$popup = PopUp(["?","A","B","C","D"], $letter[$inv[$k]]);

Setup: Generate graphs to be included in the main text. Notice our choice for the size of each graph is width=>200, height=>200, tex_size=>450 for an array of graphs that has two columns.

Pick one equation and graph at random (using $k) to be the correct choice. Shuffle the graphs using a permutation, and use the inverse permutation to recall the correct answer in the answer evaluation section.

If, instead, we had six graphs and desired a three-column array of graphs, we would want to change tex_size=>310 as in the following bit of code. 

for $i (0..5) {
  plot_functions( $gr[$i], $f[$i]); 
  $gr[$i]=image(insertGraph($gr[$i]),
  width=>200,height=>200,tex_size=>310);
}

You are strongly discouraged from using more than three columns in an array of graphs because otherwise you have to scale the graphs down so much that they become unreadable (especially in TeX mode). 

BEGIN_TEXT
Consider the exponential equation $eqn[$k].
Without using a calculator, sketch a 
graph of this equation on paper.  
$BR
$BR
Which graph A-D below most closely matches 
the graph you drew?  
\{ $popup->menu() \}
$BR
$BR
$BCENTER
\{
BeginTable().
  AlignedRow([$fig[0],$fig[1]]).
  TableSpace(5,0).
  AlignedRow(["A","B"]).
  TableSpace(25,6).
  AlignedRow([$fig[2],$fig[3]]).
  TableSpace(5,0).
  AlignedRow(["C","D"]).
EndTable();
\}
$BR
(Click on a graph to enlarge it.)
$ECENTER
END_TEXT

Main Text: Use commands such as BeginTable(), provided by unionTables.pl to nicely display the graphs.

If, instead, we had six graphs we wanted to display in three columns, we would use the following code. 

\{
BeginTable().
  AlignedRow([$fig[0],$fig[1],$fig[2]]).
  TableSpace(5,0).
  AlignedRow(["A","B","C"]).
  TableSpace(25,6).
  AlignedRow([$fig[3],$fig[4],$fig[5]]).
  TableSpace(5,0).
  AlignedRow(["D","E","F"]).
EndTable().
$BR.$BCENTER."(Click on a graph to enlarge it)".$ECENTER
\}


install_problem_grader(~~&std_problem_grader);
$showPartialCorrectAnswers = 0;

ANS( $popup->cmp() );

ENDDOCUMENT();

Answer Evaluation: To prevent students from guessing, use the standard problem grader and withhold feedback.



Problem Techniques Index




Example 2: A free response problem in which we put a long text block and a graph side-by-side using ColumnTable from unionTables.pl.

Problem Techniques Index

PG problem file Explanation 
DOCUMENT();

loadMacros(
"PGstandard.pl",
"PGgraphmacros.pl",
"MathObjects.pl",
"unionTables.pl", # or "PGunion.pl",
);

TEXT(beginproblem());

$refreshCachedImages=1;

Initialization: Be sure to load unionTables.pl (or PGunion.pl which will load it automatically). Set $refreshCachedImages=1; if you desire the graphics files to be refreshed each time. 

Context("Numeric");

$a = random(2,3,1); # -$a is the left x-intercept
$b = random(2,4,2); #  $b is the right x-intercept
$c = random(1,4,1); # -$c is the y-intercept

$k = $c/($a * $b);

$A = $k;
$B = $k*($a - $b);
$C = -($c);

$gr = init_graph(-5,-5,5,5,axes=>[0,0],grid=>[10,10]);

add_functions($gr, "$A*x**2+$B*x+$C for x in <-5,5> using color:blue and weight:2");
$gr -> lb(new Label ( 4.5,0,'x','black','left','bottom'));
$gr -> lb(new Label ( 0.25,8.5,'y','black','left','bottom'));
$gr -> lb(new Label ( 0.25,$c,'y = f(x)','black','left','bottom'));

Setup: Generate a graph to be included in the main text. This graph is a parabola opening up with roots -$a, $b and y-intercept -$c. 

Context()->texStrings;
BEGIN_TEXT
\{
ColumnTable(
"Use the graph to find the missing values.  
There may be more than one correct answer, 
in which case you should enter your answers
as a comma separated list.  If there are no
correct answers, enter ${BITALIC}NONE.${EITALIC}".
$BR.
$BR.
"(a) \( f(0) = \) ". 
ans_rule(7).
$BR.
$BR.
"(b) \( f \big( \) ".ans_rule(7)." \( \big) = 0 \). "
,
$BCENTER.
image(insertGraph($gr), width=>400, height=>400, tex_size=>700).
$BR.
"(Click on graph to enlarge)".
$ECENTER
,
indent => 0, separation => 30, valign => "TOP"
)
\}
END_TEXT
Context()->normalStrings;

Main Text: We use ColumnTable( columnA, columnB, options ) to display the text and answer blanks in the left column, and the graph in the right column. Notice that within each column, every line except for the last ends with a period to join together things like strings, answer rules, etc. The last line in both columns ends with a comma, and we have put these commas on their own lines so the divisions can be easily seen.

Using ColumnTable has two main advantages.

  • Using a ColumnTable to put the graphics and text side-by-side is very useful when the text is long. If the graphic were below a long block of text, the student would have to scroll up and down frequently between the questions and the graphic, making it harder to use.
  • ColumnTable behaves well in TeX mode. The default in TeX mode is a two-column format for the printed page, which means that each column is very narrow. Using an ordinary table (instead of a ColumnTable) to put text and graphics side-by-side would likely mean that the graphics would spill over from the left column of the printed page to the right column of the printed page (causing text and graphics to overlap) or, worse yet, spill over from the right column of the printed page into oblivion. However, using a ColumnTable, the graphics will appear underneath the text in TeX mode, as desired.

 
$showPartialCorrectAnswers = 1;

ANS( List(-$c)->cmp() );

ANS( List(-$a,$b)->cmp() );

ENDDOCUMENT();

Answer Evaluation: Since there may be multiple answers, we use List(), even when there is only one answer (to avoid error messages if a student enters multiple answers when there is only one correct answer).



Problem Techniques Index



Example 3: A matching problem in which we display a long, narrow text block and an array of graphs side-by-side using ColumnTable and BeginTable from unionTables.pl.


PG problem file Explanation 
DOCUMENT();

loadMacros(
"PGstandard.pl",
"PGchoicemacros.pl",
"PGgraphmacros.pl",
"unionTables.pl",
);
       
TEXT(beginproblem());

$refreshCachedImages=1;

Initialization: Be sure to load unionTables.pl (or PGunion.pl which will load it automatically). Set $refreshCachedImages=1; if you desire the graphics files to be refreshed each time. We use PGchoicemacros.pl for commands to shuffle the images and thus randomize the answers. 

####################################
#  Create blank canvases with labels
#
foreach my $j (0..5) {

 $graph[$j] = init_graph(-10,-10,10,10,'axes'=>[0,0],
              'ticks'=>[10,10],'size'=>[400,400]);
 $graph[$j]->lb('reset');

   foreach my $i (1..4) {
     $graph[$j]->lb(new Label(2*$i,-.1,2*$i,'black','center','top'));
     $graph[$j]->lb(new Label(-2*$i,-.1,-2*$i,'black','center','top'));
     $graph[$j]->lb(new Label(-.1,2*$i,2*$i,'black','right','middle'));
     $graph[$j]->lb(new Label(-.1,-2*$i,-2*$i,'black','right','middle'));
   }

 $graph[$j]->lb(new Label(9.8,-0.1,"x",'black','right','top'));
 $graph[$j]->lb(new Label(-.1,9.8,"y",'black','right','top'));

}



#########################################
#  Manually add functions to the canvases
#

$f[0] = "\frac{-1}{x-5}-1";
plot_functions($graph[0],
"-1/(x-5)-1 for x in <-10,4.99> using color:blue and weight:2",
"-1/(x-5)-1 for x in <5.01,10>  using color:blue and weight:2",
);
#  vertical asymptote
$graph[0]->moveTo(5,-10);
$graph[0]->lineTo(5,10,'black',1,'dashed');
#  horizontal asymptote
$graph[0]->moveTo(-10,-1);
$graph[0]->lineTo(10,-1,'black',1,'dashed');


$f[1] = "\frac{x-2}{(x+1)(x-3)}";
plot_functions($graph[1],
"(x-2)/((x+1)*(x-3)) for x in <-10,-1.01>  using color:blue and weight:2",
"(x-2)/((x+1)*(x-3)) for x in <-0.99,2.99> using color:blue and weight:2",
"(x-2)/((x+1)*(x-3)) for x in <3.01,10>    using color:blue and weight:2",
);
#  vertical asymptote
$graph[1]->moveTo(-1,-10);
$graph[1]->lineTo(-1,10,'black',1,'dashed');
#  vertical asymptote
$graph[1]->moveTo(3,-10);
$graph[1]->lineTo(3,10,'black',1,'dashed');


$f[2] = "\frac{2x+4}{x-1}";
plot_functions($graph[2],
"(2x+4)/(x-1) for x in <-10,0.99> using color:blue and weight:2",
"(2x+4)/(x-1) for x in <1.01,10>  using color:blue and weight:2",
);
#  vertical asymptote
$graph[2]->moveTo(1,-10);
$graph[2]->lineTo(1,10,'black',1,'dashed');
#  horizontal asymptote
$graph[2]->moveTo(-10,2);
$graph[2]->lineTo(10,2,'black',1,'dashed');


$f[3] = "\frac{1}{x+1} + \frac{1}{x-3}";
plot_functions($graph[3],
"1/(x+1)+1/(x-3) for x in <-10,-1.01>  using color:blue and weight:2",
"1/(x+1)+1/(x-3) for x in <-0.99,2.99> using color:blue and weight:2",
"1/(x+1)+1/(x-3) for x in <3.01,10>    using color:blue and weight:2",
);
#  vertical asymptote
$graph[3]->moveTo(-1,-10);
$graph[3]->lineTo(-1,10,'black',1,'dashed');
#  vertical asymptote
$graph[3]->moveTo(3,-10);
$graph[3]->lineTo(3,10,'black',1,'dashed');


$f[4] = "\frac{1-x^2}{x-2}+3";
plot_functions($graph[4],
"(1-x^2)/(x-2)+3 for x in <-10,1.99> using color:blue and weight:2",
"(1-x^2)/(x-2)+3 for x in <2.01,10>  using color:blue and weight:2",
);
#  vertical asymptote
$graph[4]->moveTo(2,-10);
$graph[4]->lineTo(2,10,'black',1,'dashed');


$f[5] = "\frac{1-4x}{2x+2}";
plot_functions($graph[5],
"(1-4x)/(2x+2) for x in <-10,-1.01> using color:blue and weight:2",
"(1-4x)/(2x+2) for x in <-0.99,10>  using color:blue and weight:2",
);
#  vertical asymptote
$graph[5]->moveTo(-1,-10);
$graph[5]->lineTo(-1,10,'black',1,'dashed');
#  horizontal asymptote
$graph[5]->moveTo(-10,-2);
$graph[5]->lineTo(10,-2,'black',1,'dashed');



###############################################
#  Create figures that can be inserted directly
#
foreach $j (0..5) {
  $fig[$j] = image(insertGraph($graph[$j]), 
  width => 200, height => 200, tex_size => 310);
}


###############################################
#  Shuffle the figures
#
@perm = shuffle(6);
@inv = invert(@perm);
@fig = @fig[@perm];
@letter = ("A","B","C","D","E","F");

Setup: Generate a number of graphs to be included in the main text. Then, near the bottom, shuffle the graphs. 

BEGIN_TEXT
\{
ColumnTable(
"Without a calculator, match each function with its graph A-F ".
"by finding the zeros, asymptotes, and end behavior for each function.".
$BR.$BR.pop_up_list(["?",@letter]).$SPACE."\( \displaystyle y = $f[0] \)".
$BR.$BR.pop_up_list(["?",@letter]).$SPACE."\( \displaystyle y = $f[1] \)".
$BR.$BR.pop_up_list(["?",@letter]).$SPACE."\( \displaystyle y = $f[2] \)".
$BR.$BR.pop_up_list(["?",@letter]).$SPACE."\( \displaystyle y = $f[3] \)".
$BR.$BR.pop_up_list(["?",@letter]).$SPACE."\( \displaystyle y = $f[4] \)".
$BR.$BR.pop_up_list(["?",@letter]).$SPACE."\( \displaystyle y = $f[5] \)",# comma!
$BCENTER.
BeginTable().
  AlignedRow([$fig[0],$fig[1],$fig[2]]).
  TableSpace(5,0).
  AlignedRow(["A","B","C"]).
  TableSpace(25,6).
  AlignedRow([$fig[3],$fig[4],$fig[5]]).
  TableSpace(5,0).
  AlignedRow(["D","E","F"]).
EndTable().
$BR."(Click on a graph to enlarge it)".$ECENTER, # comma!
indent => 0, separation => 10, valign => "TOP"
)
\}
END_TEXT

Main Text: We use ColumnTable( columnA, columnB, options ) to display the text and answer blanks in the left column, and the graphs in the right column. Notice that within each column, every line except for the last ends with a period to join together things like strings, answer rules, etc. The last line in both columns ends with a comma, as noted in the commented out portions # comma!. 

install_problem_grader(~~&std_problem_grader);
$showPartialCorrectAnswers = 0;

foreach $j (0..5) {
ANS( str_cmp($letter[$inv[$j]]) );
}
      
ENDDOCUMENT();

Answer Evaluation: To keep students from guessing, we use the all-or-nothing grader std_problem_grader and set $showPartialCorrectAnswers = 0; to withhold feedback.




Example 4: (Not recommended) Using imageRow

PG problem file Explanation 
BEGIN_TEXT
\{ imageRow( ["graph1.png","graph2.png"], 
["A","B"], width=>250, height=>250, tex_size=>450 ) \}

\{ imageRow( ["g1.png","g2.png","g3.png"], 
["A","B","C"], width=>200, height=>200, tex_size=>310 ) \}
END_TEXT

The imageRow function displays multiple images in a row, although it often shrinks down graphics so that they become unusable, especially in the pdf hardcopy. For legacy support, we have included it here. Its first argument is a list of image files and its second argument ["A","B"] is a list of caption names. You are strongly recommended not to put four or more images in the same imageRow. Instead, use multiple imageRows. The double quotes in caption names are necessary, for example, to prevent the string "E" from being interpreted as E = 2.718...


Problem Techniques Index

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