Merge pull request #982 from drgrice1/correct-answer-reveal

Add an option to show the correct answer with a reveal button.

htdocs/js/Feedback/feedback.js

@@ -1,9 +1,15 @@
 (() => {
+	const feedbackPopovers = [];
+
 	const initializeFeedback = (feedbackBtn) => {
 		if (feedbackBtn.dataset.popoverInitialized) return;
 		feedbackBtn.dataset.popoverInitialized = 'true';
 
-		new bootstrap.Popover(feedbackBtn, { sanitize: false, container: feedbackBtn.parentElement });
+		const feedbackPopover = new bootstrap.Popover(feedbackBtn, {
+			sanitize: false,
+			container: feedbackBtn.parentElement
+		});
+		feedbackPopovers.push(feedbackPopover);
 
 		// Render MathJax previews.
 		if (window.MathJax) {
@@ -13,18 +19,52 @@
 		}
 
 		feedbackBtn.addEventListener('shown.bs.popover', () => {
-			const bsPopover = bootstrap.Popover.getInstance(feedbackBtn);
-
 			// Execute javascript in the answer preview.
-			bsPopover.tip?.querySelectorAll('script').forEach((origScript) => {
+			feedbackPopover.tip?.querySelectorAll('script').forEach((origScript) => {
 				const newScript = document.createElement('script');
 				Array.from(origScript.attributes).forEach((attr) => newScript.setAttribute(attr.name, attr.value));
 				newScript.appendChild(document.createTextNode(origScript.innerHTML));
 				origScript.parentNode.replaceChild(newScript, origScript);
+				setTimeout(() => feedbackPopover.update());
 			});
 
+			const moveToFront = () => {
+				if (feedbackPopover.tip) feedbackPopover.tip.style.zIndex = 18;
+				for (const popover of feedbackPopovers) {
+					if (popover === feedbackPopover) continue;
+					popover.tip?.style.setProperty('z-index', null);
+				}
+			};
+			feedbackPopover.tip?.addEventListener('click', moveToFront);
+			feedbackPopover.tip?.addEventListener('focusin', moveToFront);
+			moveToFront();
+
 			// Make a click on the popover header close the popover.
-			bsPopover.tip?.querySelector('.popover-header')?.addEventListener('click', () => bsPopover?.hide());
+			feedbackPopover.tip
+				?.querySelector('.popover-header')
+				?.addEventListener('click', () => feedbackPopover.hide());
+
+			const revealCorrectBtn = feedbackPopover.tip?.querySelector('.reveal-correct-btn');
+			if (revealCorrectBtn && feedbackPopover.correctRevealed) {
+				revealCorrectBtn.nextElementSibling?.classList.remove('d-none');
+				revealCorrectBtn.remove();
+			} else {
+				revealCorrectBtn?.addEventListener('click', () => {
+					feedbackPopover.correctRevealed = true;
+					revealCorrectBtn.classList.add('fade-out');
+					revealCorrectBtn.parentElement.classList.add('resize-transition');
+					revealCorrectBtn.parentElement.style.maxWidth = `${revealCorrectBtn.parentElement.offsetWidth}px`;
+					revealCorrectBtn.parentElement.style.maxHeight = `${revealCorrectBtn.parentElement.offsetHeight}px`;
+					revealCorrectBtn.addEventListener('animationend', () => {
+						revealCorrectBtn.nextElementSibling?.classList.remove('d-none');
+						revealCorrectBtn.nextElementSibling?.classList.add('fade-in');
+						revealCorrectBtn.parentElement.style.maxWidth = '1000px';
+						revealCorrectBtn.parentElement.style.maxHeight = '1000px';
+						revealCorrectBtn.remove();
+						feedbackPopover.update();
+					});
+				});
+			}
 		});
 	};
 

htdocs/js/GraphTool/graphtool.js

@@ -9,6 +9,7 @@ window.graphTool = (containerId, options) => {
 	const gt = {};
 
 	gt.graphContainer = document.getElementById(containerId);
+	if (!gt.graphContainer) return;
 	if (gt.graphContainer.offsetWidth === 0) {
 		setTimeout(() => window.graphTool(containerId, options), 100);
 		return;

htdocs/js/Problem/problem.scss

@@ -213,7 +213,7 @@
 	--bs-popover-body-padding-x: 0;
 	--bs-popover-body-padding-y: 0;
 	--bs-popover-max-width: 600px;
-	--bs-popover-zindex: 18;
+	--bs-popover-zindex: 17;
 	position: absolute;
 	min-width: 200px;
 
@@ -288,6 +288,39 @@
 						border-bottom-right-radius: var(--bs-card-inner-border-radius);
 					}
 				}
+
+				&.resize-transition {
+					overflow: clip;
+					transition: max-height 1s ease-in, max-width 1s ease-in;
+				}
+
+				.fade-out {
+					animation: fade-out 0.25s ease-in;
+
+					@keyframes fade-out {
+						0% {
+							opacity: 1;
+						}
+
+						100% {
+							opacity: 0;
+						}
+					}
+				}
+
+				.fade-in {
+					animation: fade-in 0.5s ease-in;
+
+					@keyframes fade-in {
+						0% {
+							opacity: 0;
+						}
+
+						100% {
+							opacity: 1;
+						}
+					}
+				}
 			}
 		}
 	}

lib/WeBWorK/PG.pm

@@ -513,9 +513,12 @@ The summary will also be generated if this is true.
 
 Determines if any messages generated in answer evaluation will be shown.
 
-=item showCorrectAnswers (boolean, default: 0)
+=item showCorrectAnswers (numeric, default: 0)
 
-Determines if correct answers will be shown.
+Determines if correct answers will be shown. If 0, then correct answers are not
+shown. If set to 1, then correct answers are shown but hidden, and a "Reveal"
+button is shown at first. If that button is clicked, then the answer is shown.
+If set to 2, then correct answers are shown immediately.
 
 =item answerPrefix (string, default: '')
 

macros/PG.pl

@@ -902,8 +902,10 @@ =head2 ENDDOCUMENT
 =item *
 
 C<showCorrect>: This is a boolean value that is 1 by default. If this is true
-and the translator option C<showCorrectAnswers> is also true, then a preview of
-the correct answer is shown in the feedback popover.
+and the translator option C<showCorrectAnswers> is nonzero, then a preview of
+the correct answer is shown in the feedback popover. In other words, this option
+prevents showing correct answers even if the frontend requests that correct
+answers be shown.
 
 =item *
 
@@ -1230,14 +1232,29 @@ sub ENDDOCUMENT {
 											)
 											. (
 												$rh_envir->{showCorrectAnswers} && $options{showCorrect}
-												? feedbackLine(
-													maketext('Correct Answer'),
-													previewAnswer(
+												? do {
+													my $correctAnswer = previewAnswer(
 														$ansHash->{correct_ans_latex_string},
 														$options{wrapPreviewInTex},
 														$ansHash->{correct_ans}
-													)
-												)
+													);
+													feedbackLine(
+														maketext('Correct Answer'),
+														$rh_envir->{showCorrectAnswers} > 1
+														? $correctAnswer
+														: Mojo::DOM->new_tag(
+															'button',
+															type  => 'button',
+															class => 'reveal-correct-btn btn btn-secondary btn-sm',
+															maketext('Reveal')
+														)
+														. Mojo::DOM->new_tag(
+															'div',
+															class => 'd-none',
+															sub {$correctAnswer}
+														)
+													);
+												}
 												: ''
 											);
 										}