TODO

drgrice1 · Sep 19, 2023 · d7c0f0e · d7c0f0e
1 parent 299e247
commit d7c0f0e
Show file tree

Hide file tree

Showing 14 changed files with 458 additions and 161 deletions.
diff --git a/htdocs/js/Essay/essay.js b/htdocs/js/Essay/essay.js
@@ -1,17 +1,28 @@
 'use strict';
 
 (() => {
-	const addPreviewButton = (latexEntry) => {
-		if (latexEntry.dataset.previewBtnAdded) return;
-		latexEntry.dataset.previewBtnAdded = 'true';
+	const initializePreviewButton = (latexEntry) => {
+		if (latexEntry.dataset.previewBtnInitialized) return;
+		latexEntry.dataset.previewBtnInitialized = 'true';
 
-		const buttonContainer = document.createElement('div');
-		buttonContainer.classList.add('latexentry-button-container', 'mt-1');
+		const buttonContainer =
+			document.getElementById(`${latexEntry.id}-latexentry-button-container`) || document.createElement('div');
 
-		const button = document.createElement('button');
-		button.type = 'button';
-		button.classList.add('latexentry-preview', 'btn', 'btn-secondary', 'btn-sm');
-		button.textContent = 'Preview';
+		if (!buttonContainer.classList.contains('latexentry-button-container')) {
+			buttonContainer.classList.add('latexentry-button-container', 'mt-1');
+			buttonContainer.id = `${latexEntry.id}-latexentry-button-container`;
+			latexEntry.after(buttonContainer);
+		}
+
+		const button = buttonContainer.querySelector('.latexentry-preview') || document.createElement('button');
+
+		if (!button.classList.contains('latexentry-preview')) {
+			button.type = 'button';
+			button.classList.add('latexentry-preview', 'btn', 'btn-secondary', 'btn-sm');
+			button.textContent = 'Preview';
+
+			buttonContainer.append(button);
+		}
 
 		button.addEventListener('click', () => {
 			button.dataset.bsContent = latexEntry.value
@@ -49,19 +60,16 @@
 				popover.show();
 			}
 		});
-
-		buttonContainer.append(button);
-		latexEntry.after(buttonContainer);
 	};
 
-	document.querySelectorAll('.latexentryfield').forEach(addPreviewButton);
+	document.querySelectorAll('.latexentryfield').forEach(initializePreviewButton);
 
 	const observer = new MutationObserver((mutationsList) => {
 		for (const mutation of mutationsList) {
 			for (const node of mutation.addedNodes) {
 				if (node instanceof Element) {
-					if (node.classList.contains('latexentryfield')) addPreviewButton(node);
-					else node.querySelectorAll('.latexentryfield').forEach(addPreviewButton);
+					if (node.classList.contains('latexentryfield')) initializePreviewButton(node);
+					else node.querySelectorAll('.latexentryfield').forEach(initializePreviewButton);
 				}
 			}
 		}

diff --git a/htdocs/js/GraphTool/graphtool.scss b/htdocs/js/GraphTool/graphtool.scss
@@ -366,3 +366,15 @@
 		}
 	}
 }
+
+.graphtool-outer-container {
+	position: relative;
+	width: fit-content;
+
+	.ww-feedback-btn {
+		position: absolute;
+		left: 100%;
+		top: 0;
+		margin-left: 0.25rem;
+	}
+}
diff --git a/htdocs/js/InputColor/color.js b/htdocs/js/InputColor/color.js
@@ -11,7 +11,7 @@
 		// Color all of the inputs and selects associated with this answer.  On the first pass radio inputs are
 		// collected into groups by name, and on the second pass the checked radio is highlighted, or if none are
 		// checked all are highlighted.
-		document.querySelectorAll(`input[name*=${answerId}],select[name*=${answerId}`)
+		document.querySelectorAll(`input[name*=${answerId}],select[name*=${answerId}]`)
 			.forEach((input) => {
 				if (input.type.toLowerCase() === 'radio') {
 					if (!radioGroups[input.name]) radioGroups[input.name] = [];
@@ -46,6 +46,30 @@
 		}
 	};
 
+	for (const button of document.querySelectorAll('.ww-feedback-btn')) {
+		new bootstrap.Popover(button, { allowList: { ...bootstrap.Popover.Default.allowList, script: [/.*/] } });
+
+		// Render MathJax previews.
+		if (window.MathJax) {
+			button.addEventListener('show.bs.popover', () => {
+				MathJax.startup.promise = MathJax.startup.promise.then(() => MathJax.typesetPromise(['.popover-body']));
+			});
+		}
+
+		// Execute javascript in the answer preview.
+		button.addEventListener('shown.bs.popover', () => {
+			document
+				.querySelector('.popover.ww-result-popover')
+				?.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);
+				});
+		});
+	}
+
 	// Color inputs already on the page.
 	document.querySelectorAll('td a[data-answer-id]').forEach(setupAnswerLink);
 

diff --git a/htdocs/js/MathQuill/mqeditor.js b/htdocs/js/MathQuill/mqeditor.js
@@ -31,6 +31,14 @@
 		input.classList.add('mq-edit');
 		answerQuill.latexInput = mq_input;
 
+		// Give the mathquill answer box the correct/incorrect colors.
+		if (input.classList.contains('correct')) answerQuill.classList.add('correct');
+		if (input.classList.contains('incorrect')) answerQuill.classList.add('incorrect');
+		if (input.classList.contains('partially-correct')) answerQuill.classList.add('partically-correct');
+
+		const ariaDescribedBy = input.getAttribute('aria-describedby');
+		if (ariaDescribedBy) answerQuill.setAttribute('aria-describedby', ariaDescribedBy);
+
 		// Default options.
 		const cfgOptions = {
 			spaceBehavesLikeTab: true,
@@ -130,8 +138,8 @@
 			button.append(icon);
 
 			// Find the preview button container, and add the equation editor button to that.
-			const buttonContainer = container.nextElementSibling;
-			if (buttonContainer && buttonContainer.classList.contains('latexentry-button-container')) {
+			const buttonContainer = document.getElementById(`${answerLabel}-latexentry-button-container`);
+			if (buttonContainer) {
 				buttonContainer.classList.add('d-flex', 'gap-1');
 				buttonContainer.prepend(button);
 				innerContainer.append(buttonContainer);
@@ -494,26 +502,6 @@
 		answerQuill.mathField.latex(answerQuill.latexInput.value);
 		answerQuill.mathField.moveToLeftEnd();
 		answerQuill.mathField.blur();
-
-		// Look for a result in the attempts table for this answer.
-		for (const tableLink of document.querySelectorAll('td a[data-answer-id]')) {
-			// Give the mathquill answer box the correct/incorrect colors.
-			if (answerLabel.includes(tableLink.dataset.answerId)) {
-				if (tableLink.parentNode.classList.contains('ResultsWithoutError'))
-					answerQuill.classList.add('correct');
-				else {
-					if (answerQuill.input.value !== '') answerQuill.classList.add('incorrect');
-				}
-			}
-
-			// Make a click on the results table link give focus to the mathquill answer box.
-			if (answerLabel === tableLink.dataset.answerId) {
-				tableLink.addEventListener('click', (e) => {
-					e.preventDefault();
-					answerQuill.textarea.focus();
-				});
-			}
-		}
 	};
 
 	// Set up MathQuill inputs that are already in the page.

diff --git a/htdocs/js/MathQuill/mqeditor.scss b/htdocs/js/MathQuill/mqeditor.scss
@@ -3,7 +3,7 @@
 span[id^='mq-answer'] {
 	/*rtl:ignore*/
 	direction: ltr;
-	padding: 4px 5px 2px 5px;
+	padding: 4px 5px;
 	border-radius: 4px !important;
 	background-color: white;
 	margin-right: 0;

diff --git a/htdocs/js/Problem/problem.scss b/htdocs/js/Problem/problem.scss
@@ -33,13 +33,18 @@
 	}
 
 	/* Problem elements */
-	label, input[type=text], select, textarea {
+	label,
+	input[type='text'],
+	select,
+	textarea {
 		font-weight: normal;
 		line-height: 18px;
 		width: auto;
 	}
 
-	select, textarea, input[type=text] {
+	select,
+	textarea,
+	input[type='text'] {
 		display: inline-block;
 		padding: 4px 6px;
 		margin-bottom: 0;
@@ -50,17 +55,21 @@
 		background-color: white;
 	}
 
-	textarea, input[type=text] {
-		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+	textarea,
+	input[type='text'] {
+		font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 	}
 
-	input[type=text] {
+	input[type='text'] {
 		height: 30px;
 		font-size: 14px;
 		line-height: 20px;
 	}
 
-	select, input[type=text], input[type=radio], input[type=checkbox] {
+	select,
+	input[type='text'],
+	input[type='radio'],
+	input[type='checkbox'] {
 		&.correct {
 			border-color: rgba(81, 153, 81, 0.8); /* green */
 			outline: 0;
@@ -72,11 +81,12 @@
 			border-color: rgba(191, 84, 84, 0.8); /* red */
 			outline: 0;
 			box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px 2px rgba(191, 84, 84, 0.6);
-			color:inherit;
+			color: inherit;
 		}
 	}
 
-	input[type=text], span.mq-editable-field {
+	input[type='text'],
+	span.mq-editable-field {
 		background-size: 20px auto;
 		background-position: right 4px center;
 		background-repeat: no-repeat;
@@ -92,14 +102,15 @@
 		}
 	}
 
-	input[type=radio] {
+	input[type='radio'] {
 		margin-right: 0.25rem;
 	}
 
 	select {
 		cursor: pointer;
 
-		&[multiple], &[size] {
+		&[multiple],
+		&[size] {
 			height: auto;
 		}
 	}
@@ -108,7 +119,10 @@
 		max-width: 100%;
 	}
 
-	input[type=text], input[type=radio], textarea, select {
+	input[type='text'],
+	input[type='radio'],
+	textarea,
+	select {
 		&:focus {
 			border-color: rgba(82, 168, 236, 0.8);
 			outline: 0;
@@ -118,7 +132,12 @@
 
 	.pg-table {
 		text-align: center;
-		thead, tbody, tfoot, tr, td, th {
+		thead,
+		tbody,
+		tfoot,
+		tr,
+		td,
+		th {
 			padding: 0.25rem;
 			border: 1px solid black;
 		}
@@ -179,7 +198,8 @@ table.attemptResults {
 		border-bottom-right-radius: 4px;
 	}
 
-	td, th {
+	td,
+	th {
 		border-style: inset;
 		border-width: 1px;
 		text-align: center;
@@ -230,7 +250,8 @@ table.attemptResults {
 		height: 100%;
 	}
 
-	a, a span {
+	a,
+	a span {
 		color: #038;
 		text-decoration: none;
 
@@ -240,7 +261,9 @@ table.attemptResults {
 	}
 }
 
-div, label, span {
+div,
+label,
+span {
 	&.ResultsWithoutError {
 		color: #0f5132; /* Dark Green */
 		background-color: #8f8; /* Light Green */
@@ -269,6 +292,67 @@ div, label, span {
 	}
 }
 
+/* Feeback */
+.ww-result-popover {
+	--bs-popover-body-padding-x: 0;
+	--bs-popover-body-padding-y: 0;
+	--bs-popover-max-width: 400px;
+	--bs-popover-zindex: 18;
+
+	.popover-header {
+		text-align: center;
+	}
+
+	&.correct {
+		.popover-header {
+			--bs-popover-header-bg: #8f8;
+		}
+	}
+
+	&.incorrect {
+		.popover-header {
+			--bs-popover-header-bg: #d69191;
+		}
+	}
+
+	&.partially-correct {
+		.popover-header {
+			--bs-popover-header-bg: #ffc107;
+		}
+	}
+
+	.popover-body {
+		.card {
+			border-top-left-radius: 0;
+			border-top-right-radius: 0;
+			--bs-card-spacer-y: 0.5rem;
+			--bs-card-cap-bg: #ddd;
+
+			.card-header {
+				border-radius: 0;
+
+				&:not(:first-child) {
+					border-top: var(--bs-card-border-width) solid var(--bs-card-border-color);
+				}
+			}
+
+			.card-body {
+				mjx-container {
+					margin: 0;
+				}
+
+				.parsehilight {
+					background-color: yellow;
+				}
+
+				&.feedback-message {
+					background-color: #ede275;
+				}
+			}
+		}
+	}
+}
+
 /* Comments */
 
 div.AuthorComment {

diff --git a/lib/WeBWorK/PG.pm b/lib/WeBWorK/PG.pm
@@ -176,7 +176,6 @@ sub new_helper ($invocant, %options) {
 	# This must be done before the post processing, since the image tags output by the image generator initially
 	# include markers which are invalid html. Mojo::DOM will change these markers into attributes and this will fail.
 	if ($image_generator) {
-		my $sourceFile = "$options{templateDirectory}$options{sourceFilePath}";
 		$image_generator->render(
 			refresh   => $options{refreshMath2img} // 0,
 			body_text => $translator->r_text,