web/iswhoa
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Attempt to fix aimation of question reveals

Browse source
This commit is contained in:
Leon Mika 2025-06-19 04:51:37 +02:00
parent fd190a5e3d
commit 543c1790de
3 changed files with 27 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
index.html
View file

@ -8,6 +8,11 @@
<link rel="stylesheet" href="./fontello/css/fontello.css">
</head>
<body>
<div class="offscreen">
<i class="icon-cancel"></i>
<i class="icon-ok"></i>
</div>
<div class="question" data-controller="picker" data-picker-answer-value="2">
<p>What is the thing and the other thing that goes here?</p>

20
scripts/controllers/picker.js
View file

@ -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);
}
};

13
style.css
View file

@ -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;