From 543c1790de050e87e49ebd72167fd4f728a3853c Mon Sep 17 00:00:00 2001 From: Leon Mika Date: Thu, 19 Jun 2025 04:51:37 +0200 Subject: [PATCH] Attempt to fix aimation of question reveals --- index.html | 5 +++++ scripts/controllers/picker.js | 20 ++++++++++++-------- style.css | 13 ++++++++++--- 3 files changed, 27 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index bcc9e2c..ec54e00 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,11 @@ +
+ + +
+

What is the thing and the other thing that goes here?

diff --git a/scripts/controllers/picker.js b/scripts/controllers/picker.js index 718c538..17e32ee 100644 --- a/scripts/controllers/picker.js +++ b/scripts/controllers/picker.js @@ -13,13 +13,17 @@ export default class extends Controller { submitAnswer(ev) { ev.preventDefault(); - this.radioTargets.forEach(e => { - e.disabled = true; - if (e.value === this.answerValue) { - e.classList.add("answer"); - } else { - e.classList.add("wrong"); - } - }); + this.element.classList.add("reveal"); + + window.setTimeout(() => { + this.radioTargets.forEach(e => { + e.disabled = true; + if (e.value === this.answerValue) { + e.classList.add("answer"); + } else { + e.classList.add("wrong"); + } + }); + }, 1); } }; \ No newline at end of file diff --git a/style.css b/style.css index 70cd782..a9cdc70 100644 --- a/style.css +++ b/style.css @@ -1,3 +1,13 @@ +div.offscreen { + position: fixed; + left: -100px; + top: -100px; +} + +div.question.reveal label { + transition: background-color 0.2s, color 0.2s, border-color 0.2s; +} + label:has(input[type=radio]) { width: 100%; @@ -9,9 +19,6 @@ label:has(input[type=radio]) { text-align: center; position: relative; - transition: background-color 0.2s, color 0.2s, border-color 0.2s; - -webkit-backface-visibility: hidden; - margin-block: 0.5em; padding-block: 0.4em; font-size: 0.9em;