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. diff --git a/htdocs/js/Problem/problem.scss b/htdocs/js/Problem/problem.scss index e4c4e7d487..20c10cf4b2 100644 --- 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; }