Add alt text to histograms on stats page.

This adds a long-text `<desc>` tag the histogram images on the stats which fixes the issue mentioned in #2598. In addition this fixes some issues I found with the stats page. * Links on the problem bars weren't working so forced them to be a string, along with wrapping the jitar status bar inside the anchor tag to the corresponding problem. * JitarSets - The adjusted status bars were reversed and didn't need to be and the adjusted scores were multiplet by 100 and didn't need to be.
openwebwork · Nov 23, 2024 · d630574 · d630574
1 parent d9791a8
commit d630574
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 8 deletions.
diff --git a/lib/WeBWorK/ContentGenerator/Instructor/Stats.pm b/lib/WeBWorK/ContentGenerator/Instructor/Stats.pm
@@ -550,6 +550,7 @@ sub build_bar_chart ($c, $data, %options) {
 		mainTitle    => 'ERROR: This must be set',
 		xTitle       => '',
 		yTitle       => '',
+		descText     => '',
 		barWidth     => 22,
 		barSep       => 4,
 		barFill      => 'rgb(0,153,198)',
@@ -585,6 +586,7 @@ sub build_bar_chart ($c, $data, %options) {
 	);
 
 	# Main graph setup.
+	$svg->desc()->cdata($opts{descText});
 	$svg->rect(
 		id               => "bar_graph_window_$id",
 		x                => 0,
@@ -711,9 +713,11 @@ sub build_bar_chart ($c, $data, %options) {
 	for (0 .. $n) {
 		my $xPos    = $opts{leftMargin} + $_ * $barWidth + $opts{barSep};
 		my $yHeight = int($opts{plotHeight} * $data->[$_] / $opts{yMax} + 0.5);
+		my $tag     = @{ $opts{barLinks} } ? $svg->anchor(-href => "$opts{barLinks}->[$_]") : $svg;
+
 		if ($opts{isJitarSet} && $opts{jitarBars}->[$_] > 0) {
 			my $jHeight = int($opts{plotHeight} * $opts{jitarBars}->[$_] / $opts{yMax} + 0.5);
-			$svg->rect(
+			$tag->rect(
 				x                => $xPos,
 				y                => $opts{topMargin} + $opts{plotHeight} - $jHeight,
 				width            => $opts{barWidth} + $opts{barSep},
@@ -724,7 +728,6 @@ sub build_bar_chart ($c, $data, %options) {
 				class            => 'bar_graph_bar',
 			);
 		}
-		my $tag = @{ $opts{barLinks} } ? $svg->anchor(-href => $opts{barLinks}->[$_]) : $svg;
 		$tag->rect(
 			x                => $xPos,
 			y                => $opts{topMargin} + $opts{plotHeight} - $yHeight,

diff --git a/templates/ContentGenerator/Instructor/Stats/problem_stats.html.ep b/templates/ContentGenerator/Instructor/Stats/problem_stats.html.ep
@@ -11,20 +11,36 @@
 </div>
 %
 % # Histogram of total scores.
+% my $bucketLabels = [ '90-100', '80-89', '70-79', '60-69', '50-59', '40-49', '30-39', '20-29', '10-19', '0-9' ];
 <%= $c->build_bar_chart(
-	[ @$buckets ],
-	xAxisLabels => [ '90-100', '80-89', '70-79', '60-69', '50-59', '40-49', '30-39', '20-29', '10-19', '0-9' ],
+	$buckets,
+	xAxisLabels => $bucketLabels,
 	yMax        => 5 * $maxCount,
 	yAxisLabels => [ map { $_ * $maxCount } 0 .. 5 ],
 	mainTitle   => maketext('Active Students Problem [_1] Grades', $c->{prettyID}),
 	xTitle      => maketext('Percent Ranges'),
 	yTitle      => maketext('Number of Students'),
+	descText    => $isJitarSet && $topLevelJitar
+		? maketext(
+			'Histogram showing the percent grade of active students for problem [_1] and the adjusted '
+				. 'percent grade with review. The number of students in each percent range is: [_2]. '
+				. 'The number of students in each percent range after review is: [_3].',
+			$c->{prettyID},
+			join(', ', map { "$bucketLabels->[$_]:$buckets->[$_]" } 0 .. scalar(@$buckets) - 1),
+			join(', ', map { "$bucketLabels->[$_]:$jitarBars->[$_]" } 0 .. scalar(@$buckets) - 1)
+		)
+		: maketext(
+			'Histogram showing the grades of active students for problem [_1], where the number of '
+				. 'students in each percent range is: [_2]',
+			$c->{prettyID},
+			join(', ', map { "$bucketLabels->[$_]:$buckets->[$_]" } 0 .. scalar(@$buckets) - 1),
+		),
 	barWidth    => 35,
 	barSep      => 5,
 	isPercent   => 0,
 	leftMargin  => 40 + 5 * length(5 * $maxCount),
 	isJitarSet  => ($isJitarSet && $topLevelJitar),
-	jitarBars   => [ reverse(@$jitarBars) ],
+	jitarBars   => $jitarBars,
 ) =%>
 %
 % # Display overall statistics
@@ -64,7 +80,7 @@
 % my @tableData    = ($problemScores);
 % if ($isJitarSet && $topLevelJitar) {
 	% push(@tableHeaders, maketext('% Score with Review'));
-	% push(@tableData,    [ map { sprintf('%0.0f', 100 * $_) } @$adjustedScores ]);
+	% push(@tableData,    [ map { sprintf('%0.0f', $_) } @$adjustedScores ]);
 % }
 % my $successIndexHeader = begin
 	<%= maketext('Success Index') =%>

diff --git a/templates/ContentGenerator/Instructor/Stats/set_stats.html.ep b/templates/ContentGenerator/Instructor/Stats/set_stats.html.ep
@@ -84,14 +84,19 @@
 <h2><%= maketext('Overall Results') %></h2>
 %
 % # Histogram of total scores.
+% my $bucketLabels = [ '90-100', '80-89', '70-79', '60-69', '50-59', '40-49', '30-39', '20-29', '10-19', '0-9' ];
 <%= $c->build_bar_chart(
 	$buckets,
-	xAxisLabels => [ '90-100', '80-89', '70-79', '60-69', '50-59', '40-49', '30-39', '20-29', '10-19', '0-9' ],
+	xAxisLabels => $bucketLabels,
 	yMax        => 5 * $maxCount,
 	yAxisLabels => [ map { $_ * $maxCount } 0 .. 5 ],
 	mainTitle   => maketext('Overall Set Grades'),
 	xTitle      => maketext('Percent Ranges'),
 	yTitle      => maketext('Number of Students'),
+	descText    => maketext(
+		'Histogram showing the overall set grades, where the number of students in each percent range is: [_1].',
+		join(', ', map { "$bucketLabels->[$_]:$buckets->[$_]" } 0 .. scalar(@$buckets) - 1)
+	),
 	barWidth    => 35,
 	barSep      => 5,
 	isPercent   => 0,
@@ -146,6 +151,23 @@
 	xAxisLabels => $svgProblemLabels,
 	mainTitle   => maketext('Grade of Active Students'),
 	xTitle      => maketext('Problem Number'),
+	descText    => $isJitarSet
+		? maketext(
+			'Bar chart showing the average percent grade of active students for each problem and the adjusted '
+				. 'percent grade on top level problems with review. The average percent grade (as a decimal) for '
+				. 'each problem is: [_1]. The adjusted percent grade for top level problems with review is: [_2].',
+			join(', ', map { "$svgProblemLabels->[$_]:$svgProblemData->[$_]" } 0 .. scalar(@$svgProblemData) - 1),
+			join(
+				', ',
+				 map { $jitarBars->[$_] < 0 ? () : "$svgProblemLabels->[$_]:$jitarBars->[$_]" }
+					0 .. scalar(@$svgProblemData) - 1
+			)
+		)
+		: maketext(
+			'Bar chart showing the average percent grade of active students for each problem, '
+				. 'where the average percent grade (as a decimal) for each problem is: [_1].',
+			join(', ', map { "$svgProblemLabels->[$_]:$svgProblemData->[$_]" } 0 .. scalar(@$svgProblemData) - 1)
+		),
 	isJitarSet  => $isJitarSet,
 	jitarBars   => $isJitarSet ? $jitarBars : [],
 	barLinks    => [ map { $_->{statsLink} } @$problems ],

diff --git a/templates/ContentGenerator/ProblemSet/problem_list.html.ep b/templates/ContentGenerator/ProblemSet/problem_list.html.ep
@@ -23,7 +23,7 @@
 									bs_placement => 'top',
 									bs_toggle    => 'popover',
 									bs_content   => maketext(
-										q{The adjusted status of a problem is the larger of the problem's status and}
+										q{The adjusted status of a problem is the larger of the problem's status and }
 											. 'the weighted average of the status of those problems which count '
 											. 'toward the parent grade.'
 									)