TODO

drgrice1 · Sep 21, 2023 · 21c9642 · 21c9642
1 parent 299e247
commit 21c9642
Show file tree

Hide file tree

Showing 16 changed files with 763 additions and 553 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-feedback-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('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.

diff --git a/htdocs/js/MathQuill/mqeditor.scss b/htdocs/js/MathQuill/mqeditor.scss
@@ -3,27 +3,11 @@
 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;
 	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 {