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"> <link rel="stylesheet" href="./fontello/css/fontello.css">
</head> </head>
<body> <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"> <div class="question" data-controller="picker" data-picker-answer-value="2">
<p>What is the thing and the other thing that goes here?</p> <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) { submitAnswer(ev) {
ev.preventDefault(); ev.preventDefault();
this.radioTargets.forEach(e => { this.element.classList.add("reveal");
e.disabled = true;
if (e.value === this.answerValue) { window.setTimeout(() => {
e.classList.add("answer"); this.radioTargets.forEach(e => {
} else { e.disabled = true;
e.classList.add("wrong"); 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]) { label:has(input[type=radio]) {
width: 100%; width: 100%;
@ -9,9 +19,6 @@ label:has(input[type=radio]) {
text-align: center; text-align: center;
position: relative; position: relative;
transition: background-color 0.2s, color 0.2s, border-color 0.2s;
-webkit-backface-visibility: hidden;
margin-block: 0.5em; margin-block: 0.5em;
padding-block: 0.4em; padding-block: 0.4em;
font-size: 0.9em; font-size: 0.9em;