WeBWorK Problems

Dynamic LaTeX labels on image of triangle?

Dynamic LaTeX labels on image of triangle?

by Paul Seeburger -
Number of replies: 6

Has anyone successfully generated dynamic LaTeX labels on image of triangle?

I guess I could just work to place the LaTeX labels around the image of a right triangle, but I'm curious if this has already been done.

Is there at least a way to have a right triangle image that is not set off in a white box so that I can draw almost on top of it?

It's for the solution for a Trig. Substitution problem, where I want to show a labeled right triangle for the student's version of the problem.

Thanks!

Paul

In reply to Paul Seeburger

Re: Dynamic LaTeX labels on image of triangle?

by Glenn Rice -

I am unclear as to what it is that you are asking for.  What sort of labels do you want?

What are you using in LaTeX to generate images?  TikZ, PSTricks, the TeX picture environment, etc?

It would be rather easy to generate the image of a triangle with labels using TikZ, but that may depend on what you want with the labels.

Are you posting this question in the right place?  This isn't a TeX forum.

In reply to Glenn Rice

Re: Dynamic LaTeX labels on image of triangle?

by Paul Seeburger -

Hi, Glenn!

I am a complete newbie to TikZ, and I was wondering if it was even possible to use it in WeBWorK.  I saw a couple posts about people wondering if it could be used, but these seemed to indicate it wasn't yet possible.

I saw how to use the PGgraphmacros.pl to create a triangle as a dynamic graph, but the labels cannot use LaTeX, and I really don't need the triangle to be dynamic.  I need the labels of the sides to adjust based on the problem, and I do need them to use LaTeX, being for example, 3, x, and \sqrt{x^2 + 9}, but using a variable to represent the 3, and often more complicated.  I'll also want to mark the inside angle of the right triangle with theta and orient the triangle so the right angle is on the bottom right side of the diagram.

You mentioned a TeX forum.  Do you mean on this site?  Or something outside of WeBWorK?  My question here is about what's possible in WeBWorK, so I would want to start here.

If TikZ can be used, do I need to load a particular macro file?

Thanks!

Paul

In reply to Paul Seeburger

Re: Dynamic LaTeX labels on image of triangle?

by Robin Cruz -

Hi, Paul,

I'm not sure this is what you had in mind, but PCC has problems with labeled dynamic triangles.  Look in the Library: Subject:"Trigonometry", Chapter:"Triangle trigonometry", Section:"Sine, cosine, and tangent of an angle in a right triangle".

We've done a few at the College of Idaho, but the angles have to be not too small. They are not yet in the OPL--perhaps this summer, I'll work on tagging.  Also, greek letters don't seem to be available. PCC uses the letters spelled out.  Here's the code for one of ours.

--rac

========================================

##DESCRIPTION

## Trigonometry: Law of Sines

##ENDDESCRIPTION


##KEYWORDS('trigonometry', 'law of sines')


## DBsubject('Trigonometry')

## DBchapter('')

## DBsection('')

## Date('01/2016')

## Author('RA Cruz')

## Institution('The College of Idaho')

## TitleText1('')

## EditionText1('')

## AuthorText1('')

## Section1('')

## Problem1('')


DOCUMENT();        # This should be the first executable line in the problem.


loadMacros(

   "PGstandard.pl",

   "MathObjects.pl",

   "PGchoicemacros.pl",

   "PGgraphmacros.pl",

   "alignedChoice.pl",

   "unionTables.pl",

);


######################################

# Set-up


$a = random(4,9,1); 

$A = random(25,40,5);

$C = random(70,85,5);

$B = 180 - $A - $C;

$c = $a*sin($C*pi/180)/sin($A*pi/180);

$b = $a*sin($B*pi/180)/sin($A*pi/180);


$xc = $b*cos($A*pi/180); #C is at the top of the triangle

$yc = $b*sin($A*pi/180);


$Hmin = -2;

$Hmax = $c + 2;

$Vmin = -2;

$Vmax = $yc + 2;

$picW = 15*($Hmax-$Hmin+2);

$picH = 15*($Vmax-$Vmin+2);


$refreshCachedImages=1;


$graph = init_graph($Hmin,$Vmin,$Hmax,$Vmax,size=>[$picW,$picH]);

$graph->moveTo(0,0);       #A is at the origin

$graph->lineTo($xc,$yc,1);  #Draw to C

$graph->lineTo($c,0,1); #Draw to B to the right

$graph->lineTo(0,0,1);

#$graph->fillRegion([2,1,'yellow']);


$lab_a = new Label($xc+0.7*($c-$xc),0.5*$yc+0.2,"$a",'black','center','bottom');

$lab_a->font(GD::Font->Giant);

$graph->lb($lab_a);


$lab_b = new Label(0.5*$xc,0.5*$yc+0.2,"b",'red','center','bottom');

$lab_b->font(GD::Font->Giant);

$graph->lb($lab_b);


$lab_c = new Label(0.5*$c,-0.3,"c",'red','center','center');

$lab_c->font(GD::Font->Giant);

$graph->lb($lab_c);


$labA=new Label(-0.5,0.5,'A','black','center','center');

$labA->font(GD::Font->Giant);

$graph->lb($labA);


$labAdeg=new Label(0.2*$c,1,"$A",'black','center','center');

$labAdeg->font(GD::Font->Giant);

$graph->lb($labAdeg);


$labB=new Label($c+0.5, 0.5,'B','red','center','center');

$labB->font(GD::Font->Giant);

$graph->lb($labB);


$labC=new Label($xc,$yc+1,'C','black','center','center');

$labC->font(GD::Font->Giant);

$graph->lb($labC);


$labCdeg=new Label($xc-.1,0.85*$yc,"$C",'black','center','center');

$labCdeg->font(GD::Font->Giant);

$graph->lb($labCdeg);


######################################

# Main text


TEXT(beginproblem());


#TEXT("a = $a, b = $b, c =$c, B = $B $BR"); #For checking


BEGIN_TEXT

Solve for the unknown sides and angles of the triangle shown below.

Give the angle(s) in degrees.

$BR $BR

\{

ColumnTable(

"\(b = \) ".ans_rule(6).

"$BR $BR".

"\(c = \) ".ans_rule(6).

"$BR $BR".

"\(\angle B = \) ".ans_rule(6)."\(^\circ\)",

$BCENTER.

image(insertGraph($graph), width=>$picW, height=>$picH, tex_size=>500 ).

$BR.

$ECENTER,

indent => 0, separation => 30, valign => "TOP"

)

\}

$BR

$BITALIC

Note: If no such triangle exists, type ${BBOLD}No triangle$EBOLD for each answer. 

$EITALIC

END_TEXT


######################################

# Answer


Context("Numeric");

Context()->strings->add("No triangle"=>{},None=>{alias=>"No triangle"});


$ans1 = Compute("$b");

ANS($ans1->cmp(showTypeWarnings=>0));


$ans2 = Compute("$c");

ANS($ans2->cmp(showTypeWarnings=>0));


$ans3 = Compute("$B");

ANS($ans3->cmp(showTypeWarnings=>0));

$showPartialCorrectAnswers = 1;

#####################################

# Solution

BEGIN_SOLUTION

$PAR Solution: $BR $BR

We need the angle at \(B:\) 

\(\angle B = 180^{\circ} - $A^{\circ} - $C^{\circ} = $ans3^{\circ}\)

$BR $BR

Use the Law of Sines to find \(a\) and \(c\):

$BR $BR

First we find \(a\):

\(\dfrac{a}{\sin($A^{\circ})} = \dfrac{$b}{\sin($B^{\circ})} \\) 

$BR

\(a = \dfrac{$b\sin($A^{\circ})}{\sin($B^{\circ})} \approx $ans1\) 

$BR $BR

Similarily, find \(c\):

\(\dfrac{c}{\sin($C^{\circ})} = \dfrac{$b}{\sin($B^{\circ})} \\) 

$BR

\(c = \dfrac{$b\sin($C^{\circ})}{\sin($B^{\circ})} \approx $ans2\) 

END_SOLUTION

ENDDOCUMENT();
In reply to Robin Cruz

Re: Dynamic LaTeX labels on image of triangle?

by Paul Seeburger -

Thanks so much, Robin!

These examples will be useful as I continue to create new problems.

For the application I was developing here, I found a nice-looking solution that uses CSS along with a transparent PNG image of a right triangle.

I used the following code to set the CSS up:

TEXT( MODES(
  HTML=>"
    <style>
      .triangleGroup {
        display: inline-block;
        vertical-align: middle; 
      }
      .triangleLeftLabel {
        display:inline-block;
        position: relative;
        left: 100px;
      }
      .triangleBottomLabel {
        display:inline-block;
        position: relative;
        left: 150px;
      }
   </style>",
    TeX=>""
));

And the following code in my problem to set up the right triangle itself with its labels:

Representing this relationship in a right triangle, we get:
\{ openSpan({class=>"triangleGroup"})\}
\{ openSpan({class=>"triangleLeftLabel"})\}
\(\quad x + $d\)
\{ closeSpan()\}
\{image( "rightTriangle_theta.png", width=>225,height=>127,tex_size=>400)\}
\(b\)$BR
\{ openSpan({class=>"triangleBottomLabel"})\}
\(\sqrt{$a}\)
\{ closeSpan()\}
\{ closeSpan()\}

I checked it on my phone and it rendered well there as well.  I'm not sure how to make this also look nice in TeX though.  I attached the triangle PNG below.

Paul
Attachment rightTriangle_theta.png
In reply to Paul Seeburger

Re: Dynamic LaTeX labels on image of triangle?

by Glenn Rice -

As of the next release of WeBWorK you will be able to use LaTeX with the TikZ package to generate images for problems.  However, it is not just a macro.  In order for it to work you need the underlying Perl module.  So it will not work with WeBWorK 2.15 or before.

You could use the JSXGraph javascript library to accomplish this, but that takes some work to set up.  You can use MathJax for the text in JSXGraph.

In reply to Glenn Rice

Re: Dynamic LaTeX labels on image of triangle?

by Paul Seeburger -

Wow, thanks for this information, Glenn!

The availability of TikZ in WeBWorK should allow for new innovative and nice-looking problems.

For the time-being, I was able to represent my problem to my satisfaction using the approach I posted earlier this evening in this thread.