Merge pull request #939 from drgrice1/attempts-table-replace

Add feedback in the post processing phase which replaces the webwork2 attempts table.

.github/workflows/unit-tests.yml

@@ -29,6 +29,7 @@ jobs:
             libjson-perl \
             libjson-xs-perl \
             liblocale-maketext-lexicon-perl \
+            libmojolicious-perl \
             libtest2-suite-perl \
             libtie-ixhash-perl \
             libuuid-tiny-perl \

cpanfile

@@ -18,6 +18,7 @@ on runtime => sub {
 	requires 'JSON::XS';
 	requires 'Locale::Maketext';
 	requires 'Locale::Maketext::Lexicon';
+	requires 'Mojolicious';
 	requires 'Tie::IxHash';
 	requires 'Types::Serialiser';
 	requires 'UUID::Tiny';

docker/pg.Dockerfile

@@ -21,6 +21,7 @@ RUN apt-get update \
 		libjson-perl \
 		libjson-xs-perl \
 		liblocale-maketext-lexicon-perl \
+		libmojolicious-perl \
 		libtest2-suite-perl \
 		libtie-ixhash-perl \
 		libuuid-tiny-perl \

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);
 				}
 			}
 		}

htdocs/js/Feedback/feedback.js

@@ -0,0 +1,49 @@
+(() => {
+	const initializeFeedback = (feedbackBtn) => {
+		if (feedbackBtn.dataset.popoverInitialized) return;
+		feedbackBtn.dataset.popoverInitialized = 'true';
+
+		new bootstrap.Popover(feedbackBtn, { sanitize: false, container: feedbackBtn.parentElement });
+
+		// Render MathJax previews.
+		if (window.MathJax) {
+			feedbackBtn.addEventListener('show.bs.popover', () => {
+				MathJax.startup.promise = MathJax.startup.promise.then(() => MathJax.typesetPromise(['.popover-body']));
+			});
+		}
+
+		feedbackBtn.addEventListener('shown.bs.popover', () => {
+			const bsPopover = bootstrap.Popover.getInstance(feedbackBtn);
+
+			// Execute javascript in the answer preview.
+			bsPopover.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);
+			});
+
+			// Make a click on the popover header close the popover.
+			bsPopover.tip?.querySelector('.popover-header')?.addEventListener('click', () => bsPopover?.hide());
+		});
+	};
+
+	// Setup feedback popovers already on the page.
+	document.querySelectorAll('.ww-feedback-btn').forEach(initializeFeedback);
+
+	// Deal with feedback popovers that are added to the page later.
+	const observer = new MutationObserver((mutationsList) => {
+		mutationsList.forEach((mutation) => {
+			mutation.addedNodes.forEach((node) => {
+				if (node instanceof Element) {
+					if (node.classList.contains('ww-feedback-btn')) initializeFeedback(node.firstElementChild);
+					else node.querySelectorAll('.ww-feedback-btn').forEach(initializeFeedback);
+				}
+			});
+		});
+	});
+	observer.observe(document.body, { childList: true, subtree: true });
+
+	// Stop the mutation observer when the window is closed.
+	window.addEventListener('unload', () => observer.disconnect());
+})();

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('partially-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.

htdocs/js/MathQuill/mqeditor.scss

@@ -3,27 +3,11 @@
 span[id^='mq-answer'] {
 	/*rtl:ignore*/
 	direction: ltr;
-	padding: 4px 5px 2px 5px;
+	padding: 4px;
 	border-radius: 4px !important;
 	background-color: white;
 	margin-right: 0;
 	margin-left: 0;
-
-	&.correct {
-		border-color: rgba(81, 153, 81, 0.8);
-		outline: 0;
-		outline: thin dotted \9;
-		box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(81, 153, 81, 0.6);
-		color: inherit;
-	}
-
-	&.incorrect {
-		border-color: rgba(191, 84, 84, 0.8);
-		outline: 0;
-		outline: thin dotted \9;
-		box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(191, 84, 84, 0.6);
-		color: inherit;
-	}
 }
 
 input[type='text'].codeshard.mq-edit {