simple quiz vue component
This commit is contained in:
polv committed
1 parent
eb51015c6c
commit
b2aa693f1a
3 files changed
+157
No files matched your search
@@ -0,0 +1,73 @@
|
|||||||
|
<template>
|
||||||
|
<div id="sentence-quiz" :class="$style.root" ref="main">
|
||||||
|
<button type="button" @click="nextSentence()">Next</button>
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { nextTick, onMounted, ref, useTemplateRef } from "vue";
|
||||||
|
|
||||||
|
const mainEl = useTemplateRef("main");
|
||||||
|
const sentences = ref<number[]>([]);
|
||||||
|
const sentences_array_index = ref(NaN);
|
||||||
|
|
||||||
|
function nextSentence() {
|
||||||
|
if (!mainEl.value) return;
|
||||||
|
|
||||||
|
const getCurrentSentenceIndex = () => {
|
||||||
|
if (sentences.value.length <= 1) {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (++sentences_array_index.value < sentences.value.length) {
|
||||||
|
return sentences.value[sentences_array_index.value];
|
||||||
|
}
|
||||||
|
|
||||||
|
sentences.value = sentences.value
|
||||||
|
.map((s) => ({ s, k: Math.random() }))
|
||||||
|
.sort((a, b) => a.k - b.k)
|
||||||
|
.map((a) => a.s);
|
||||||
|
|
||||||
|
sentences_array_index.value = 0;
|
||||||
|
|
||||||
|
return sentences.value[sentences_array_index.value];
|
||||||
|
};
|
||||||
|
|
||||||
|
const currentSentenceIndex = getCurrentSentenceIndex();
|
||||||
|
|
||||||
|
mainEl.value.querySelectorAll("#sentence-quiz > ul > li").forEach((el, i) => {
|
||||||
|
if (!(el instanceof HTMLElement)) return;
|
||||||
|
el.style.display = i === currentSentenceIndex ? "" : "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;
|
||||||
|
}
|
||||||
|
|
||||||
|
> button {
|
||||||
|
float: right;
|
||||||
|
border: 1px solid gray;
|
||||||
|
padding: 0 0.5em;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -7,6 +7,7 @@ import { h } from "vue";
|
|||||||
|
|
||||||
import AudioButton from "./components/AudioButton.vue";
|
import AudioButton from "./components/AudioButton.vue";
|
||||||
import Details from "./components/Details.vue";
|
import Details from "./components/Details.vue";
|
||||||
|
import SentenceQuiz from "./components/SentenceQuiz.vue";
|
||||||
// import PDF from "./components/PDF.vue";
|
// import PDF from "./components/PDF.vue";
|
||||||
import TTS from "./components/TTS.vue";
|
import TTS from "./components/TTS.vue";
|
||||||
import YouTube from "./components/YouTube.vue";
|
import YouTube from "./components/YouTube.vue";
|
||||||
@@ -24,6 +25,7 @@ export default {
|
|||||||
// ...
|
// ...
|
||||||
app.component("AudioButton", AudioButton);
|
app.component("AudioButton", AudioButton);
|
||||||
app.component("Details", Details);
|
app.component("Details", Details);
|
||||||
|
app.component("SentenceQuiz", SentenceQuiz);
|
||||||
app.component("TTS", TTS);
|
app.component("TTS", TTS);
|
||||||
app.component("YouTube", YouTube);
|
app.component("YouTube", YouTube);
|
||||||
// app.component("PDF", PDF);
|
// app.component("PDF", PDF);
|
||||||
|
|||||||
@@ -1,5 +1,87 @@
|
|||||||
# Lesson 10: Korean Numbers
|
# Lesson 10: Korean Numbers
|
||||||
|
|
||||||
|
<SentenceQuiz>
|
||||||
|
|
||||||
|
- 사람 두 명 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2017/03/Lesson10-1.mp3" /> = <span class="md spoiler">2 people</span>
|
||||||
|
- 사람 한 명 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2017/03/Lesson10-3.mp3" /> = <span class="md spoiler">1 person</span>
|
||||||
|
- 펜 다섯 개 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2017/03/Lesson10-5.mp3" /> = <span class="md spoiler">5 pens</span>
|
||||||
|
- 펜 마흔네 개 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2017/03/Lesson10-7.mp3" /> = <span class="md spoiler">44 pens</span>
|
||||||
|
|
||||||
|
- 두 명의 사람 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2017/03/Lesson10-2.mp3" /> = <span class="md spoiler">2 people</span>
|
||||||
|
- 한 명의 사람 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2017/03/Lesson10-4.mp3" /> = <span class="md spoiler">1 person</span>
|
||||||
|
- 다섯 개의 펜 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2017/03/Lesson10-6.mp3" /> = <span class="md spoiler">5 pens</span>
|
||||||
|
- 마흔네 개의 펜 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2017/03/Lesson10-8.mp3" /> = <span class="md spoiler">44 pens</span>
|
||||||
|
|
||||||
|
- 나는 펜 네 개를 샀어 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2015/02/Lesson10-Feb-10-1.mp3" /> = <span class="md spoiler">I bought four pens</span>
|
||||||
|
- 나는 햄버거 두 개를 먹었어 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2015/02/Lesson10-Feb-10-2.mp3" /> = <span class="md spoiler">I ate two hamburgers</span>
|
||||||
|
- 나는 어제 친구 다섯 명을 만났어 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2015/02/Lesson10-Feb-10-3.mp3" /> = <span class="md spoiler">I met five friends yesterday</span>
|
||||||
|
|
||||||
|
- 나는 네 개의 펜을 샀어 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2017/03/Lesson10-12.mp3" /> = <span class="md spoiler">I bought four pens</span>
|
||||||
|
- 나는 두 개의 햄버거를 먹었어 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2017/03/Lesson10-13.mp3" /> = <span class="md spoiler">I ate two hamburgers</span>
|
||||||
|
- 나는 어제 다섯 명의 친구를 만났어 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2015/11/Lesson-10-1.mp3" /> = <span class="md spoiler">I met five friends yesterday</span>
|
||||||
|
|
||||||
|
- 그 사람은 차 네 대가 있어요 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2015/02/Lesson10-Feb-10-4.mp3" /> = <span class="md spoiler">That person has four cars</span>
|
||||||
|
- 저는 우유 두 잔을 샀어요 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2015/02/Lesson10-Feb-10-5.mp3" /> = <span class="md spoiler">I bought two glasses of milk</span>
|
||||||
|
- 저는 땅콩 두 개를 먹었어요 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2015/02/Lesson10-Feb-10-6.mp3" /> = <span class="md spoiler">I ate two peanuts</span>
|
||||||
|
|
||||||
|
- 저는 어제 학교에 세 번 갔어요 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2017/03/Lesson10-18.mp3" /> = <span class="md spoiler">I went to school three times yesterday</span>
|
||||||
|
- 저는 그 영화를 다섯 번 봤어요 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2017/03/Lesson10-19.mp3" /> = <span class="md spoiler">I saw that movie five times</span>
|
||||||
|
- 저는 오늘 두 번 운동할 것입니다 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2017/03/Lesson10-20.mp3" /> = <span class="md spoiler">I will exercise twice (two times) today</span>
|
||||||
|
- 저는 어제 고기를 두 번 먹었어요 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2015/02/Lesson10-Feb-10-7.mp3" /> = <span class="md spoiler">I ate meat twice yesterday</span>
|
||||||
|
- 저는 오늘 축구를 네 번 할 거예요 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2015/02/Lesson10-Feb-10-8.mp3" /> = <span class="md spoiler">I will play soccer four times today</span>
|
||||||
|
|
||||||
|
- 2시 30분 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2017/03/Lesson10-23.mp3" /> = <span class="md spoiler">2:30, or</span>
|
||||||
|
- 두 시 삼십 분 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2017/03/Lesson10-23.mp3" /> = <span class="md spoiler">Two thirty</span>
|
||||||
|
|
||||||
|
- 3시 10분 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2017/03/Lesson10-24.mp3" /> = <span class="md spoiler">3:10</span>
|
||||||
|
- 세 시 십 분 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2017/03/Lesson10-24.mp3" /> = <span class="md spoiler">Three ten</span>
|
||||||
|
- 12시 50분 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2017/03/Lesson10-25.mp3" /> = <span class="md spoiler">12:50</span>
|
||||||
|
- 열두 시 오십 분 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2017/03/Lesson10-25.mp3" /> = <span class="md spoiler">Twelve fifty</span>
|
||||||
|
|
||||||
|
- 나는 5시에 먹을 거야 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2017/03/Lesson10-26.mp3" /> = <span class="md spoiler">I will eat at 5:00</span>
|
||||||
|
- 나는 2시 30분에 왔어 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2015/11/Lesson-10-2.mp3" /> = <span class="md spoiler">I came at 2:30</span>
|
||||||
|
- 우리는 야구를 1시에 할 거예요 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2015/02/Lesson10-Feb-10-9.mp3" />= <span class="md spoiler">We will play baseball at 1:00</span>
|
||||||
|
- 우리는 7시 20분에 시작할 거예요 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2015/11/Lesson-10-s1.mp3" /> = <span class="md spoiler">We will start at 7:20</span>
|
||||||
|
|
||||||
|
- 저는 열 살이에요 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2015/11/Lesson-10-s2.mp3" /> = <span class="md spoiler">I am ten years old</span>
|
||||||
|
- 저의 여자 친구는 스물여섯 살이에요 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2015/11/Lesson-10-s3.mp3" /> = <span class="md spoiler">My girlfriend is twenty six years old</span>
|
||||||
|
|
||||||
|
- 몇 살이에요? <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2015/11/Lesson-10-s4.mp3" /> = <span class="md spoiler">How old are you?</span>
|
||||||
|
|
||||||
|
- 저의 첫 번째 친구는 착했어요 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2017/03/Lesson10-33.mp3" /> = <span class="md spoiler">My first friend was nice</span>
|
||||||
|
- 저는 첫 번째 차를 싫어했어요 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2015/02/Lesson10-Feb-10-10.mp3" /> = <span class="md spoiler">I didn’t like that first car</span>
|
||||||
|
|
||||||
|
- 그 두 번째 선생님은 똑똑했어요 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2017/03/Lesson10-35.mp3" /> = <span class="md spoiler">That second teacher was smart</span>
|
||||||
|
- 저는 두 번째 남자를 골랐어요 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2015/02/Lesson10-Feb-10-11.mp3" /> = <span class="md spoiler">I chose the second man</span>
|
||||||
|
|
||||||
|
- 이 여권은 저의 세 번째 여권이에요 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2015/02/Lesson10-Feb-10-12.mp3" /> = <span class="md spoiler">This passport is my third passport</span>
|
||||||
|
- 저는 세 번째 문을 열었어요 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2015/02/Lesson10-Feb-10-13.mp3" /> = <span class="md spoiler">I opened the third door</span>
|
||||||
|
|
||||||
|
- 저는 네 번째 사람이었어요 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2015/02/Lesson10-Feb-10-14.mp3" /> = <span class="md spoiler">I was the fourth person</span>
|
||||||
|
- 이 아이는 저의 네 번째 아들이에요 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2015/02/Lesson10-Feb-10-15.mp3" /> = <span class="md spoiler">This person is my fourth son</span>
|
||||||
|
|
||||||
|
- 이 수업은 오늘 저의 열 번째 수업입니다 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2015/02/Lesson10-Feb-10-16.mp3" /> = <span class="md spoiler">This is my tenth class today</span>
|
||||||
|
- 저는 백 번째 페이지를 읽었어요 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2015/02/Lesson10-Feb-10-17.mp3" /> = <span class="md spoiler">I read the 100th page</span>
|
||||||
|
|
||||||
|
- 우리 둘째 아들은 고등학생이에요 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2015/02/Lesson10-Feb-10-18.mp3" /> = <span class="md spoiler">Our second son is a high school student</span>
|
||||||
|
- 우리 셋째 아이는 야구를 좋아해요 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2015/02/Lesson10-Feb-10-19.mp3" /> = <span class="md spoiler">Our third child likes baseball</span>
|
||||||
|
- 이 아이는 우리 첫째 아들이에요 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2015/02/Lesson10-Feb-10-20.mp3" /> = <span class="md spoiler">This (child) is our first son</span>
|
||||||
|
|
||||||
|
- 우리 둘째는 고등학생이에요 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2015/02/Lesson10-Feb-10-21.mp3" /> = <span class="md spoiler">Our second (child) is a high school student</span>
|
||||||
|
- 우리 셋째는 야구를 좋아해요 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2015/02/Lesson10-Feb-10-22.mp3" /> = <span class="md spoiler">Our third (child) likes baseball</span>
|
||||||
|
- 이 아이는 우리 첫째예요 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2015/02/Lesson10-Feb-10-23.mp3" /> = <span class="md spoiler">This (child) is our first (child)</span>
|
||||||
|
|
||||||
|
- 이것은 저의 마지막 수업이에요 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2017/03/Lesson10-49.mp3" /> = <span class="md spoiler">This is my last class</span>
|
||||||
|
- 저는 마지막 것을 안 봤어요 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2017/03/Lesson10-50.mp3" /> = <span class="md spoiler">I didn’t see the last thing (I didn’t see that last one)</span>
|
||||||
|
|
||||||
|
- 처음에 그 여자를 싫어했어요 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2017/03/Lesson10-51.mp3" /> = <span class="md spoiler">I didn’t like that girl at first</span>
|
||||||
|
- 저는 처음에 체육 수업을 싫어했어요 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2015/02/Lesson10-Feb-10-24.mp3" /> = <span class="md spoiler">At first I didn’t like PE class</span>
|
||||||
|
|
||||||
|
- 저는 어제 선생님을 처음 만났어요 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2017/03/Lesson10-53.mp3" /> = <span class="md spoiler">I met my teacher for the first time yesterday</span>
|
||||||
|
- 저는 내일 한국에 처음 갈 것입니다 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2017/03/Lesson10-54.mp3" /> = <span class="md spoiler">I will go to Korea for the first time tomorrow</span>
|
||||||
|
|
||||||
|
</SentenceQuiz>
|
||||||
|
|
||||||
## Vocabulary
|
## Vocabulary
|
||||||
|
|
||||||
The vocabulary in this section does not need to be separated. In my mind, they would all fall under the category of “Other.”
|
The vocabulary in this section does not need to be separated. In my mind, they would all fall under the category of “Other.”
|
||||||
|
|||||||
Reference in new issue
Block a user