UsingWW: Using alt tex for images within PGML Data Tables

Greetings,

I am trying to add some alternate text (for accessibility) for images that are within a Data Table. I am using the [@ DataTable(...); @]*** form and the emphasis on the use double quotes within this data table is causing problems when I try the traditional format of alternating single and double quotes for alt text of:

image( "imagename.png", width=>150, height=>150, tex_size=>700, extra_html_tags=>'alt="Graph of a function."' )

And yet two sets of double quotes are also causing problems for alt text.

Could you please let me know what the syntax is for adding alt text to images that are placed within DataTables of the form [@ DataTable(...); @]*** ??

Thank you for any direction on this I want to provide for screen readers as much as possible.

Sincerely, Tim

Here is a code block in which the issue occurred:

# DESCRIPTION

# Binomial probability

# WeBWorK problem written by TimPayer <tsp1@humboldt.edu>

# ENDDESCRIPTION

## DBsubject(Statistics)

## DBchapter(Exploratory data analysis/descriptive statistics)

## DBsection(Summary statistics)

## Institution(Humboldt State University)

## Author(Tim Payer)

## KEYWORDS(summations, mean, sd)

DOCUMENT();

loadMacros(

"PGstandard.pl",

"niceTables.pl",

"unionTables.pl",

"PGunion.pl",

"MathObjects.pl",

"PGML.pl",

"parserPopUp.pl",

"weightedGrader.pl",

"answerHints.pl",

);

TEXT(beginproblem());

install_weighted_grader();

Context("Numeric");

#install_weighted_grader();

#install_problem_grader(~~&std_problem_grader);

$showPartialCorrectAnswers = 1;

Context()->flags->set(

tolerance => 0.0001,

tolType => "absolute",

);

$spotn = random(2,7,1);

do { $nospotn = random(1, 6); } until (($nospotn != $spotn) and (gcd($nospotn,$spotn) == 1));

#$spot = list_random('two', 'three', 'four', 'five', 'six', 'seven');

if($spotn == 2 )

{

$spot ='two';

} elsif ($spotn == 3)

{

$spot ='three';

} elsif ($spotn == 4)

{

$spot ='four';

} elsif ($spotn == 5)

{

$spot ='five';

} elsif ($spotn == 6)

{

$spot ='six';

} else

{

$spot ='seven';

}

if($nospotn == 1 )

{

$nospot ='one';

} elsif ($nospotn == 2)

{

$nospot ='two';

} elsif ($nospotn == 3)

{

$nospot ='three';

} elsif ($nospotn == 4)

{

$nospot ='four';

} elsif ($nospotn == 5)

{

$nospot ='five';

} else

{

$nospot ='six';

}

$p = Compute($spotn/($spotn + $nospotn));

$mean = 4*$p;

$sd = sqrt(4*$p*(1-$p));

$lb = $mean -$sd;

$ub = $mean +$sd;

$ans1 = 4*$p**3*(1-$p);

$ans2 = $p**4;

$ans3 = $p**4+(1-$p)**4;

$pop1 = PopUp(["choose", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l"],"c");

$pop2 = PopUp(["choose", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l"],"h");

$pop3 = PopUp(["choose", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l"],"l");

#$pop1 = "c";

#$pop2 = "h";

#$pop3 = "l";

#################### Begin Problem Display

BEGIN_PGML

*Drawn From Lecture Notes: Week 4 Day 2.*

DataTable(

[

[["$BBOLD 6.1) $EBOLD The body of the Pacific banana slug, $BITALIC Ariolimax columbianus, $EITALIC comes in a variety of color and spot displays. Unlike its bright yellow relative, the California banana slug, the Pacific banana slug can be seen with yellow, green, black, brown, or even white bodies. Dark spots often, but not always, cover much of its skin. The coloration and spots are thought to be dependent upon the slugs diet and local micro-climate. $BR $BR

$BBOLD 6.1a) $EBOLD Given that there are $spot spotted Pacific banana slugs for every $nospot non spotted Pacific banana slug(s) in Arcata's community forest, let \$x\$ represent the probability of drawing a single spotted Pacific banana slug from a single draw of both varieties of spotted and non spotted slugs. $BR $BR

Find the probability: \$P(x) = \$".$p->ans_rule(5)." $BR $BR

$BBOLD 6.1b - 6.1e) $EBOLD Use the following declared variable within probability notation to answer the following questions about random draws of the Pacific banana slug from the community forest: $BR $BR

Let \$Y\$ = The number of spotted Pacific banana slugs in a random draw of four slugs. $BR $BR

$BBOLD 6.1b) $EBOLD Find the probability that three slugs are spotted and one is not from four random draws of the Pacific banana slug. Use a letter from the table below to indicate the correct probability notation for the left side of the equation and then enter the correct probability with accuracy to the fourth decimal. $BR $BR

Use a notation letter first then the numeric answer: $BR

".$pop1->menu." = ".$ans1->ans_rule(5)." $BR $BR

$BBOLD 6.1c) $EBOLD Find the probability that all four slugs are spotted from four random draws of the Pacific banana slug. Use the letter from the table below to indicate the correct probability notation for the left side of the equation and then enter the correct probability with accuracy to the fourth decimal. $BR $BR

Use a notation letter first then the numeric answer: $BR

".$pop2->menu." = ".$ans2->ans_rule(5)." $BR $BR

$BBOLD 6.1d) $EBOLD Find the probability that all four slugs are all the same type. That is all four are spotted or all four are not spotted from four random draws of the Pacific banana slug. Use the letter from the table below to indicate the correct probability notation for the left side of the equation and then enter the correct probability with accuracy to the fourth decimal. $BR $BR

Use a notation letter first then the numeric answer: $BR

".$pop3->menu." = ".$ans3->ans_rule(5)." $BR $BR

$BBOLD 6.1e) $EBOLD Find the typical range for the number of spotted slugs drawn from a four slug draw of the Pacific banana slug. Express this range as a first standard deviation window. $BR $BR

Lower sd window bound = ".$lb->ans_rule(5)." $BR

Upper sd window bound = ".$ub->ans_rule(5)." "],"The Pacific banana slug, $BR $BITALIC Ariolimax_columbianus $EITALIC " .image("P_slug_Stephanie_Marsh.png", width=>373, height=>497, tex_size=>700)."$BR photo by Stephanie Marsh ".$BR.image("P_slug_Kelly_Fretwell.png", width=>396, height=>429, tex_size=>700).$BR."photo by Kelly Fretwell".$BR.image("P_slug_dhelling.png", width=>736, height=>555, tex_size=>700).$BR."photo by dhelling".$BR.image("P_slug_Wmedia.png", width=>800, height=>494, tex_size=>700).$BR."photo by Wikimedia Commons $BR $BR $BR"],

caption => "6.1) The Pacific Banana Slug Displays a Wide Variety of Colors and Spotted Forms: ",

midrules => 0,

align => "p{4.9in}p{3.1in}",

);

@]***

DataTable(

[

[["a.) P(Y < 3)"], "e.) P(Y \$\\ge\$ 3)", "i.) P(Y \$\\le\$ 4)"],

[["b.) P(Y > 3)"], "f.) P(Y < 4) ", "j.) P(Y \$\\ge\$ 4)"],

[["c.) P(Y = 3)"], "g.) P(Y > 4)", "k.) P(Y = 4) \$\\cap\$ P(Y = 0)"],

[["d.) P(Y \$\\le\$ 3)"], "h.) P(Y = 4)","l.) P(Y = 4) \$\\cup\$ P(Y = 0)"],

caption => "Use the Lower case Letters a-l to Indicate the Correct $BR Probability Notation for Problems 6.1a) -6.1c).",

midrules => 1,

align => "|p{1in}|p{1in}|p{1.6in}|",

);

@]***

END_PGML

################ Weighted Answers ######

WEIGHTED_ANS( ($p)->cmp, 2 );

WEIGHTED_ANS( ($pop1)->cmp, 2 );

WEIGHTED_ANS( ($ans1)->cmp, 10 );

WEIGHTED_ANS( ($pop2)->cmp, 2 );

WEIGHTED_ANS( ($ans2)->cmp, 10 );

WEIGHTED_ANS( ($pop3)->cmp, 2 );

WEIGHTED_ANS( ($ans3)->cmp, 10 );

WEIGHTED_ANS( ($lb)->cmp, 10 );

WEIGHTED_ANS( ($ub)->cmp, 10 );

BEGIN_PGML_SOLUTION

*SOLUTION*

Solution coming in 2017...

END_PGML_SOLUTION

ENDDOCUMENT();

Re: Using alt tex for images within PGML Data Tables

by Davide Cervone - Friday, 7 July 2017, 7:17 PM

The code you provide does not include any extra_html_tags specifications, so I can't tell what you are doing wrong. When I use

image("P_slug_Stephanie_Marsh.png", width=>373, height=>497, tex_size=>700, extra_html_tags=>'alt="Photo of Pacific Banana Slug"')

within your table, it works for me. Can you be more specific about the problem you are having?

Note that you only need to use double quotes in situations where you need variable substitution within the double quotes. In this case, since the all attribute is constant (i.e., includes no variables), you can use single quotes for the outside and double for the inside.

If you needed variable substitution into the alt attribute, you could use

extra_html_tags=>"alt=>~~"Graph with vertex at ($x,$y)~~""

to escape the inner quotations, or (better)

extra_html_tags=>"alt=>'Graph with vertex at ($x,$y)'"

since HTML allows single quotes or double quotes for attribute values, if I recall correctly.

Re: Using alt tex for images within PGML Data Tables

by tim Payer - Saturday, 8 July 2017, 12:01 PM

Thank you Davide,

I am sorry that I sent you the wrong version of my problem without the alt tex, but you anticipated my question and gave me a very thorough explanation of the use of alt tex and escape characters, and variable substitution.

I really appreciate the extensive detail you give in your explanations.

Thanks, Tim

Re: Using alt tex for images within PGML Data Tables

by Alex Jordan - Friday, 7 July 2017, 8:17 PM

As Davide says,

extra_html_tags=>'alt="Graph of a function."'

should work. And he explains options for what to do if there are any substitutions.

Occasionally, I've needed an apostrophe in alt text. There are several ways to make that happen. Escaping is one, as Davide notes. But you have to know about the special PG escape "character" ~~. A method that I like is to define the alt text ahead of time. Here is an example with substitution and an apostrophe:

$alt = "graph of f(x)=$f, with f's domain highlighted";

# Then later in the image call...

extra_html_tags=>"alt='$alt'"

Re: Using alt tex for images within PGML Data Tables

by tim Payer - Saturday, 8 July 2017, 12:02 PM

Thanks Alex,

I like the variable substitution explanation you have explained regarding alt tex.

Thanks for giving the extra example it really helps,

Tim

Using WeBWorK

WeBWorK Problems

Using alt tex for images within PGML Data Tables

Using alt tex for images within PGML Data Tables

Re: Using alt tex for images within PGML Data Tables

Re: Using alt tex for images within PGML Data Tables

Re: Using alt tex for images within PGML Data Tables

Re: Using alt tex for images within PGML Data Tables