From 72d1dd523219a0c5c803f41122de5c6914519491 Mon Sep 17 00:00:00 2001 From: Alex Jordan Date: Sun, 6 Aug 2023 03:04:05 -0700 Subject: [PATCH 1/6] input field correctness indicators --- htdocs/js/Problem/problem.scss | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/htdocs/js/Problem/problem.scss b/htdocs/js/Problem/problem.scss index e4c4e7d487..77c80ce1c9 100644 --- a/htdocs/js/Problem/problem.scss +++ b/htdocs/js/Problem/problem.scss @@ -76,6 +76,24 @@ } } + input[type=text], span.mq-editable-field { + background-size: auto 80%; + background-position: right; + background-repeat: no-repeat; + + &.correct { + padding-right: 30px; + background-color: #8F8; /* green */ + background-image: url("data:image/svg+xml;utf8,✓"); + } + + &.incorrect { + padding-right: 30px; + background-color: #DAA; /* red */ + background-image: url("data:image/svg+xml;utf8,⚠"); + } + } + input[type=radio] { margin-right: 0.25rem; } From d56651a2ed0f82e4513b3cb30c306c52fdf7b218 Mon Sep 17 00:00:00 2001 From: Alex Jordan Date: Sun, 6 Aug 2023 10:53:45 -0700 Subject: [PATCH 2/6] remove (in)correct input field background color --- htdocs/js/Problem/problem.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/htdocs/js/Problem/problem.scss b/htdocs/js/Problem/problem.scss index 77c80ce1c9..5e4831e2b6 100644 --- a/htdocs/js/Problem/problem.scss +++ b/htdocs/js/Problem/problem.scss @@ -83,13 +83,11 @@ &.correct { padding-right: 30px; - background-color: #8F8; /* green */ background-image: url("data:image/svg+xml;utf8,✓"); } &.incorrect { padding-right: 30px; - background-color: #DAA; /* red */ background-image: url("data:image/svg+xml;utf8,⚠"); } } From d0ddad79beec63ad6d092f2a9612dbd6bb94deb1 Mon Sep 17 00:00:00 2001 From: Alex Jordan Date: Sun, 6 Aug 2023 11:16:21 -0700 Subject: [PATCH 3/6] fix correctness indicator height --- htdocs/js/Problem/problem.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/htdocs/js/Problem/problem.scss b/htdocs/js/Problem/problem.scss index 5e4831e2b6..c33acf8830 100644 --- a/htdocs/js/Problem/problem.scss +++ b/htdocs/js/Problem/problem.scss @@ -77,18 +77,18 @@ } input[type=text], span.mq-editable-field { - background-size: auto 80%; + background-size: 20px auto; background-position: right; background-repeat: no-repeat; &.correct { - padding-right: 30px; - background-image: url("data:image/svg+xml;utf8,✓"); + padding-right: 27px; + background-image: url("data:image/svg+xml;utf8,✓"); } &.incorrect { - padding-right: 30px; - background-image: url("data:image/svg+xml;utf8,⚠"); + padding-right: 27px; + background-image: url("data:image/svg+xml;utf8,⚠"); } } From ce990b505f86c223ad4bc5995928600a43e7b97e Mon Sep 17 00:00:00 2001 From: Glenn Rice Date: Sun, 6 Aug 2023 14:47:19 -0500 Subject: [PATCH 4/6] Switch to using svg paths to construct the correctness icons. These are copied from Bootstrap's form validation icons. Also tweak positioning a bit so these fit into the input a little better.. --- htdocs/js/Problem/problem.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/htdocs/js/Problem/problem.scss b/htdocs/js/Problem/problem.scss index c33acf8830..e36980afc8 100644 --- a/htdocs/js/Problem/problem.scss +++ b/htdocs/js/Problem/problem.scss @@ -78,17 +78,17 @@ input[type=text], span.mq-editable-field { background-size: 20px auto; - background-position: right; + background-position: right 4px center; background-repeat: no-repeat; &.correct { - padding-right: 27px; - background-image: url("data:image/svg+xml;utf8,✓"); + 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: 27px; - background-image: url("data:image/svg+xml;utf8,⚠"); + 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='%23dc3545'%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='%23dc3545' stroke='none'/%3e%3c/svg%3e"); } } From 0dc9db3d9ede80927e081f8717ec9e3493a0dae8 Mon Sep 17 00:00:00 2001 From: Alex Jordan Date: Sun, 6 Aug 2023 14:23:17 -0700 Subject: [PATCH 5/6] tweak incorrect indicator color --- htdocs/js/Problem/problem.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/htdocs/js/Problem/problem.scss b/htdocs/js/Problem/problem.scss index e36980afc8..20c10cf4b2 100644 --- a/htdocs/js/Problem/problem.scss +++ b/htdocs/js/Problem/problem.scss @@ -88,7 +88,7 @@ &.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='%23dc3545'%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='%23dc3545' stroke='none'/%3e%3c/svg%3e"); + 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"); } } From e332bc7ff2e65f72bd260f4db6b2ed9197116375 Mon Sep 17 00:00:00 2001 From: Glenn Rice Date: Mon, 7 Aug 2023 18:14:05 -0500 Subject: [PATCH 6/6] Only add the incorrect coloring and icon to text or MathQuill inputs that are non empty. --- htdocs/js/InputColor/color.js | 5 ++++- htdocs/js/MathQuill/mqeditor.js | 4 +++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/htdocs/js/InputColor/color.js b/htdocs/js/InputColor/color.js index bd079acd6f..025301ac18 100644 --- 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 index 7aeff39819..57ad5fa0e1 100644 --- 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.