mirror of https://github.com/gtitov/wcwb.git
gman
9 months ago
parent
9a54c78f0b
commit
53c1d0e0e1
@ -0,0 +1,236 @@
|
|||||||
|
<multiple-choice
|
||||||
|
data-correct-label="Верно 😸"
|
||||||
|
data-incorrect-label="Надо поразмыслить 🐱"
|
||||||
|
>
|
||||||
|
<form onsubmit="event.preventDefault()">
|
||||||
|
<ol class="opt-list not-content"><slot /></ol>
|
||||||
|
<div class="footer">
|
||||||
|
<button class="submit" type="submit" disabled> Проверить </button>
|
||||||
|
<div class="answer sr-only" role="alert"></div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</multiple-choice>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
multiple-choice {
|
||||||
|
display: block;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
color: var(--sl-color-text-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
form > * + * {
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.opt-list {
|
||||||
|
list-style: none;
|
||||||
|
padding-inline-start: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit,
|
||||||
|
.answer {
|
||||||
|
padding: 0.8rem;
|
||||||
|
border-radius: 1.5rem;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit {
|
||||||
|
cursor: pointer;
|
||||||
|
color: var(--sl-color-accent);
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit:focus {
|
||||||
|
background-color: hsl(224, 20%, 94%);
|
||||||
|
outline: 3px solid var(--sl-color-accent);
|
||||||
|
outline-offset: -3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit:not(:focus-visible) {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit:hover {
|
||||||
|
background: var(--sl-color-text-accent);
|
||||||
|
color: var(--sl-color-black);
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit:disabled,
|
||||||
|
.submit:active {
|
||||||
|
transform: translateY(0.25rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit:disabled {
|
||||||
|
background-color: hsl(224, 20%, 94%);
|
||||||
|
color: hsl(224, 7%, 36%);
|
||||||
|
opacity: 0.65;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.answer {
|
||||||
|
text-align: center;
|
||||||
|
transition-property: color, background-color;
|
||||||
|
transition-duration: 250ms;
|
||||||
|
transition-timing-function: ease-out;
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.correct {
|
||||||
|
color: var(--sl-color-green-low);
|
||||||
|
background-color: var(--sl-color-green);
|
||||||
|
animation: tada 1s 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrong {
|
||||||
|
color: var(--sl-color-red-low);
|
||||||
|
background-color: var(--sl-color-red);
|
||||||
|
animation: nope 0.3s 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: no-preference) {
|
||||||
|
.submit {
|
||||||
|
transition-property: box-shadow, transform;
|
||||||
|
transition-duration: 0.15s;
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 2.5, 0.6, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.correct,
|
||||||
|
.wrong {
|
||||||
|
animation-iteration-count: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes tada {
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
transform: scale3d(1, 1, 1);
|
||||||
|
}
|
||||||
|
10%,
|
||||||
|
20% {
|
||||||
|
transform: scale3d(0.8, 0.8, 0.8) rotate3d(0, 0, 1, -3deg);
|
||||||
|
}
|
||||||
|
30%,
|
||||||
|
50%,
|
||||||
|
70%,
|
||||||
|
90% {
|
||||||
|
transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, 3deg);
|
||||||
|
}
|
||||||
|
40%,
|
||||||
|
60%,
|
||||||
|
80% {
|
||||||
|
transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, -3deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes nope {
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
}
|
||||||
|
20%,
|
||||||
|
60% {
|
||||||
|
transform: translate3d(-0.5rem, 0, 0);
|
||||||
|
}
|
||||||
|
40%,
|
||||||
|
80% {
|
||||||
|
transform: translate3d(0.5rem, 0, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
class MultipleChoice extends HTMLElement {
|
||||||
|
#defaultCorrectLabel: string;
|
||||||
|
#defaultIncorrectLabel: string;
|
||||||
|
#key: string;
|
||||||
|
#submitEl: HTMLButtonElement;
|
||||||
|
#answerEl: HTMLParagraphElement;
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
this.#defaultCorrectLabel = this.dataset.correctLabel!;
|
||||||
|
this.#defaultIncorrectLabel = this.dataset.incorrectLabel!;
|
||||||
|
this.#key = Math.random().toString();
|
||||||
|
this.#submitEl = this.querySelector(".submit")!;
|
||||||
|
this.#answerEl = this.querySelector(".answer")!;
|
||||||
|
this.querySelectorAll(".opt-list > li").forEach((li) =>
|
||||||
|
this.#upgradeListItem(li)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
#upgradeListItem(li: Element) {
|
||||||
|
const option = li.querySelector(
|
||||||
|
'input[type="radio"]'
|
||||||
|
) as HTMLInputElement | null;
|
||||||
|
if (!option) return;
|
||||||
|
|
||||||
|
option.removeAttribute("disabled");
|
||||||
|
option.setAttribute("name", this.#key);
|
||||||
|
option.addEventListener("change", () => {
|
||||||
|
this.#clearAnswer();
|
||||||
|
this.#enableSubmit();
|
||||||
|
});
|
||||||
|
if (option.checked) this.#enableSubmit();
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Clear the answer text and hide its container visually. */
|
||||||
|
#clearAnswer() {
|
||||||
|
this.#answerEl.innerText = "";
|
||||||
|
this.#answerEl.classList.remove("wrong", "correct");
|
||||||
|
this.#answerEl.classList.add("sr-only");
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Show the answer result to the user. */
|
||||||
|
#setAnswer(isCorrect: boolean) {
|
||||||
|
const answerTemplate = this.querySelector(
|
||||||
|
"input:checked ~ template"
|
||||||
|
) as HTMLTemplateElement | null;
|
||||||
|
if (answerTemplate) {
|
||||||
|
this.#answerEl.replaceChildren(answerTemplate.content.cloneNode(true));
|
||||||
|
} else {
|
||||||
|
this.#answerEl.innerText = isCorrect
|
||||||
|
? this.#defaultCorrectLabel
|
||||||
|
: this.#defaultIncorrectLabel;
|
||||||
|
}
|
||||||
|
this.#answerEl.classList.remove("sr-only", "wrong", "correct");
|
||||||
|
this.#answerEl.classList.add(isCorrect ? "correct" : "wrong");
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Activate the submit button, preparing it to evaluate the form when clicked. */
|
||||||
|
#enableSubmit() {
|
||||||
|
this.#submitEl.removeAttribute("disabled");
|
||||||
|
this.#submitEl.classList.remove("sr-only");
|
||||||
|
this.#submitEl.onclick = () => this.#submitAnswer();
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Disable the submit button and hide it visually. */
|
||||||
|
#disableSubmit() {
|
||||||
|
this.#submitEl.setAttribute("disabled", "");
|
||||||
|
this.#submitEl.classList.add("sr-only");
|
||||||
|
this.#submitEl.onclick = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Check if the selected option is correct and display the result. */
|
||||||
|
#submitAnswer() {
|
||||||
|
const selection = this.querySelector(
|
||||||
|
"input:checked"
|
||||||
|
) as HTMLInputElement | null;
|
||||||
|
if (!selection) return;
|
||||||
|
|
||||||
|
this.#disableSubmit();
|
||||||
|
const isCorrect =
|
||||||
|
selection.dataset.isCorrect !== undefined &&
|
||||||
|
["", "true"].includes(selection.dataset.isCorrect);
|
||||||
|
this.#setAnswer(isCorrect);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
customElements.define("multiple-choice", MultipleChoice);
|
||||||
|
</script>
|
||||||
@ -0,0 +1,94 @@
|
|||||||
|
---
|
||||||
|
export interface Props {
|
||||||
|
isCorrect?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { isCorrect } = Astro.props as Props;
|
||||||
|
---
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<label>
|
||||||
|
<input type="radio" disabled data-is-correct={isCorrect} /><span
|
||||||
|
><slot /></span
|
||||||
|
>
|
||||||
|
{
|
||||||
|
Astro.slots.has("feedback") && (
|
||||||
|
<template>
|
||||||
|
<slot name="feedback" />
|
||||||
|
</template>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</label>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
label {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto 1fr;
|
||||||
|
gap: 1rem;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 1rem;
|
||||||
|
margin-inline: -0.5rem;
|
||||||
|
padding: 0.5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
label:hover {
|
||||||
|
background-color: var(--sl-color-accent-low);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="radio"] {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="radio"] ~ * {
|
||||||
|
color: var(--sl-color-text-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="radio"]:checked ~ * {
|
||||||
|
color: var(--sl-color-white);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="radio"]:focus::after {
|
||||||
|
outline: 3px solid var(--sl-color-text-accent);
|
||||||
|
outline-offset: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="radio"]:focus,
|
||||||
|
input[type="radio"]:not(:focus-visible)::after {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="radio"]::after {
|
||||||
|
display: block;
|
||||||
|
content: "";
|
||||||
|
text-align: center;
|
||||||
|
line-height: 1.5;
|
||||||
|
width: 1.5em;
|
||||||
|
height: 1.5em;
|
||||||
|
font-size: 1.25em;
|
||||||
|
font-weight: 900;
|
||||||
|
border: 2px solid var(--sl-color-accent-high);
|
||||||
|
border-radius: 100%;
|
||||||
|
color: var(--sl-color-white);
|
||||||
|
box-shadow: -3px 3px var(--theme-shade-subtle);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="radio"]:checked::after {
|
||||||
|
color: hsl(var(--color-base-white), 100%);
|
||||||
|
background-image: radial-gradient(
|
||||||
|
var(--sl-color-white) 50%,
|
||||||
|
transparent 0%,
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
border-color: var(--sl-color-white);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (forced-colors: active) {
|
||||||
|
input[type="radio"]:checked::after {
|
||||||
|
background-color: Highlight;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue