60 lines
1.2 KiB
Vue
60 lines
1.2 KiB
Vue
<template>
|
|
<div id="sentence-quiz" 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<string[]>([]);
|
|
const i_sentences = ref(NaN);
|
|
|
|
function nextSentence() {
|
|
if (!mainEl.value) return;
|
|
|
|
const getShuffle = () => {
|
|
if (sentences.value.length <= 1) {
|
|
return sentences.value[0] || "";
|
|
}
|
|
|
|
if (++i_sentences.value < sentences.value.length) {
|
|
return sentences.value[i_sentences.value];
|
|
}
|
|
|
|
sentences.value = sentences.value
|
|
.map((s) => ({ s, k: Math.random() }))
|
|
.sort((a, b) => a.k - b.k)
|
|
.map((a) => a.s);
|
|
|
|
i_sentences.value = 0;
|
|
return sentences.value[i_sentences.value];
|
|
};
|
|
|
|
mainEl.value.innerHTML = getShuffle();
|
|
}
|
|
|
|
onMounted(() => {
|
|
nextTick(() => {
|
|
if (!mainEl.value) return;
|
|
|
|
sentences.value = Array.from(
|
|
mainEl.value.querySelectorAll("#sentence-quiz > ul > li"),
|
|
).map((el) => el.innerHTML);
|
|
|
|
nextSentence();
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
#sentence-quiz {
|
|
margin-top: 1em;
|
|
|
|
&:hover li {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|