69 lines
1.3 KiB
Vue
69 lines
1.3 KiB
Vue
<template>
|
|
<div
|
|
id="sentence-quiz"
|
|
:class="$style.root"
|
|
ref="main"
|
|
@click="nextSentence()"
|
|
>
|
|
<slot />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { nextTick, onMounted, ref, useTemplateRef } from "vue";
|
|
|
|
const mainEl = useTemplateRef("main");
|
|
const sentences = ref<number[]>([]);
|
|
const i_sentences = ref(NaN);
|
|
|
|
function nextSentence() {
|
|
if (!mainEl.value) return;
|
|
|
|
const getShuffle = () => {
|
|
if (sentences.value.length <= 1) {
|
|
return 0;
|
|
}
|
|
|
|
if (++i_sentences.value < sentences.value.length) {
|
|
return i_sentences.value;
|
|
}
|
|
|
|
sentences.value = sentences.value
|
|
.map((s) => ({ s, k: Math.random() }))
|
|
.sort((a, b) => a.k - b.k)
|
|
.map((a) => a.s);
|
|
|
|
return 0;
|
|
};
|
|
|
|
i_sentences.value = getShuffle();
|
|
|
|
mainEl.value.querySelectorAll("#sentence-quiz > ul > li").forEach((el, i) => {
|
|
if (!(el instanceof HTMLElement)) return;
|
|
el.style.display = i === i_sentences.value ? "" : "none";
|
|
});
|
|
}
|
|
|
|
onMounted(() => {
|
|
nextTick(() => {
|
|
if (!mainEl.value) return;
|
|
|
|
sentences.value = Array.from(
|
|
mainEl.value.querySelectorAll("#sentence-quiz > ul > li"),
|
|
).map((el, i) => i);
|
|
|
|
nextSentence();
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style module>
|
|
.root {
|
|
margin-top: 1em;
|
|
|
|
&:hover li li {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|