Merge pull request #899 from Alex-Jordan/correct-indicator

input field correctness indicators
openwebwork · Aug 24, 2023 · 983a085 · 983a085
2 parents 55f7b50 + 78061fb
commit 983a085
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 2 deletions.
diff --git a/htdocs/js/InputColor/color.js b/htdocs/js/InputColor/color.js
@@ -17,7 +17,10 @@
 					if (!radioGroups[input.name]) radioGroups[input.name] = [];
 					radioGroups[input.name].push(input);
 				} else {
-					input.classList.add(type);
+					if (input.type.toLowerCase() === 'text') {
+						if (type === 'correct' || input.value !== '') input.classList.add(type);
+					} else
+						input.classList.add(type);
 				}
 			});
 

diff --git a/htdocs/js/MathQuill/mqeditor.js b/htdocs/js/MathQuill/mqeditor.js
@@ -501,7 +501,9 @@
 			if (answerLabel.includes(tableLink.dataset.answerId)) {
 				if (tableLink.parentNode.classList.contains('ResultsWithoutError'))
 					answerQuill.classList.add('correct');
-				else answerQuill.classList.add('incorrect');
+				else {
+					if (answerQuill.input.value !== '') answerQuill.classList.add('incorrect');
+				}
 			}
 
 			// Make a click on the results table link give focus to the mathquill answer box.

diff --git a/htdocs/js/Problem/problem.scss b/htdocs/js/Problem/problem.scss
@@ -76,6 +76,22 @@
 		}
 	}
 
+	input[type=text], span.mq-editable-field {
+		background-size: 20px auto;
+		background-position: right 4px center;
+		background-repeat: no-repeat;
+
+		&.correct {
+			padding-right: 29px;
+			background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
+		}
+
+		&.incorrect {
+			padding-right: 29px;
+			background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23AE5757'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23AE5757' stroke='none'/%3e%3c/svg%3e");
+		}
+	}
+
 	input[type=radio] {
 		margin-right: 0.25rem;
 	}