From 3339aff375ec2ea8a499a41b6f8e059a110b5992 Mon Sep 17 00:00:00 2001 From: halsamen Date: Fri, 8 Aug 2025 22:45:17 +0900 Subject: [PATCH] Created a new project: Kuli --- Kuli/index.html | 54 +++++++++ Kuli/script.js | 255 +++++++++++++++++++++++++++++++++++++++++ Kuli/src/words_list.js | 3 + Kuli/style.css | 179 +++++++++++++++++++++++++++++ 4 files changed, 491 insertions(+) create mode 100644 Kuli/index.html create mode 100644 Kuli/script.js create mode 100644 Kuli/src/words_list.js create mode 100644 Kuli/style.css diff --git a/Kuli/index.html b/Kuli/index.html new file mode 100644 index 0000000..819dd41 --- /dev/null +++ b/Kuli/index.html @@ -0,0 +1,54 @@ + + + + + + + Enjoy your Kuli + + +
N
+
+
+ ○ + + × + +
+ + + + + + + + + + + + +
+
+
+
+
+
+ ○ + + × + +
+
Perfect!
+
+
+
Replay
+ Go Spell It + + + + + + + + + \ No newline at end of file diff --git a/Kuli/script.js b/Kuli/script.js new file mode 100644 index 0000000..719f426 --- /dev/null +++ b/Kuli/script.js @@ -0,0 +1,255 @@ +let wordClass = "noun"; +let target = words(wordClass); +let targetLen = target.length; +console.log(targetLen); + +let body = document.getElementsByTagName("body")[0]; +let clsChg = document.getElementById("clsChg"); +let display = document.getElementById("display"); +let word = document.getElementById("word"); +let pronunc = document.getElementById("pronunc"); +let ans = [document.getElementById("ans_0"), document.getElementById("ans_1"), document.getElementById("ans_2"), document.getElementById("ans_3")] +let result = document.getElementById("result"); +let scoreElemA = document.getElementById("scoreA"); +let scoreElemB = document.getElementById("scoreB"); +let corrCntElemA = document.getElementById("corrCntA"); +let wrongCntElemA = document.getElementById("wrongCntA"); +let corrCntElemB = document.getElementById("corrCntB"); +let wrongCntElemB = document.getElementById("wrongCntB"); +let perfect = document.getElementById("perfect"); +let imperfect = document.getElementById("imperfect"); +let replay = document.getElementById("replay"); +let playAnother = document.getElementsByClassName("playAnother")[0]; +let footer = document.getElementsByTagName("footer")[0]; +let startSound = document.getElementById("startSound"); +let corrSound = document.getElementById("corrSound"); +let corrSound2 = document.getElementById("corrSound2"); +let wrongSound = document.getElementById("wrongSound"); + +let curWordIdx; +let curCorrIdx; +let isClicked = [false, false, false, false]; +let wordIdx; +let tmpWordIdx; +let wordTxt; +let corrDict; +let corrIdx; +let wrongIdx = []; +let tmpWrongIdx; +let cnt = 0; +let corrCnt = 0; +let wrongCnt = 0; +let wrongs = []; +let wrongsLen; +let mistakenWordIdx; +let mistakenWordMeaning; +let mistakenWordMeaningLen; +let mistakenWordMeaningTxt; +let wrongsTxt; +function randElem(arr) { + return arr[Math.floor(Math.random() * arr.length)]; +} +function setQuiz() { + scoreElemA.style.display = "block"; + display.style.display = "table"; + result.style.display = "none"; + replay.style.display = "none"; + playAnother.style.display = "none"; + footer.style.display = "inline"; +} +function removeQuiz() { + display.style.display = "none"; + result.style.display = "block"; + replay.style.display = "block"; + playAnother.style.display = "block"; + footer.style.display = "none"; +} +function quiz() { + if (cnt == 20) { + removeQuiz(); + cnt = 0; + wrongsLen = wrongs.length; + if (wrongsLen == 0) { + perfect.style.display = "block"; + imperfect.style.display = "none"; + scoreElemA.style.display = "none"; + scoreElemB.style.display = "none"; + body.style.animation = "gaming 2s linear infinite"; + result.style.animation = "gaming 2s linear infinite"; + perfect.style.animation = "gaming 2s linear infinite"; + return [null, null]; + } else { + perfect.style.display = "none"; + imperfect.style.display = "block"; + scoreElemA.style.display = "none"; + scoreElemB.style.display = "block"; + corrCntElemB.innerText = corrCnt; + wrongCntElemB.innerText = wrongCnt; + wrongsTxt = ""; + for (let i = 0; i < wrongsLen; ++i) { + mistakenWordIdx = wrongs[i][0]; + mistakenWordMeaning = target[mistakenWordIdx]["meaning"]; + mistakenWordMeaningLen = mistakenWordMeaning.length; + mistakenWordMeaningTxt = "'" + mistakenWordMeaning[0] + "'"; + if (mistakenWordMeaningLen != 0) { + for (let i = 1; i < mistakenWordMeaningLen; ++i) { + if (i == mistakenWordMeaningLen - 1) { + mistakenWordMeaningTxt += " or '" + mistakenWordMeaning[i] + "'"; + } else { + mistakenWordMeaningTxt += ", '" + mistakenWordMeaning[i] + "'"; + } + } + } + wrongsTxt += "'" + target[mistakenWordIdx]["word"] + "'" + + " is " + + mistakenWordMeaningTxt + ", not '" + wrongs[i][1] + "'.
" + } + imperfect.innerHTML = wrongsTxt.slice(0, -4); + return [null, null]; + } + } else { + setQuiz(); + tmpWordIdx = Math.floor(Math.random() * targetLen); + while (tmpWordIdx == wordIdx) { + tmpWordIdx = Math.floor(Math.random() * targetLen); + } + wordIdx = tmpWordIdx; + corrIdx = Math.floor(Math.random() * 4); + console.log(corrIdx); + for (let i = 0; i < 4; ++i) { + if (i == corrIdx) continue; + tmpWrongIdx = Math.floor(Math.random() * targetLen); + while (wrongIdx.includes(tmpWrongIdx) || tmpWrongIdx == wordIdx) { + tmpWrongIdx = Math.floor(Math.random() * targetLen); + } + wrongIdx.push(tmpWrongIdx); + ans[i].innerText = randElem(target[tmpWrongIdx]["meaning"]); + } + wrongIdx = []; + corrDict = target[wordIdx] + wordTxt = corrDict["word"]; + if (corrDict["gender_is_distinctive"]) wordTxt += " (" + corrDict["gender"] + ")"; + word.innerText = wordTxt; + pronunc.innerText = "[" + corrDict["pronunc"] + "]"; + ans[corrIdx].innerText = randElem(corrDict["meaning"]); + cnt++; + return [wordIdx, corrIdx] + } +} +function start() { + [curWordIdx, curCorrIdx] = quiz(); + startSound.currentTime = 0; + startSound.play(); + corrCnt = 0; + wrongCnt = 0; + wrongs = []; + isClicked = [false, false, false, false]; + corrCntElemA.innerText = 0; + wrongCntElemA.innerText = 0; + body.style.animation = ""; + result.style.animation = ""; +} +start(); +ans[0].addEventListener("click", () => { + if (curCorrIdx == 0) { + if (cnt == 20) { + corrSound2.play(); + } else { + corrSound.currentTime = 0; + corrSound.play(); + } + corrCnt++; + corrCntElemA.innerText = corrCnt; + [curWordIdx, curCorrIdx] = quiz(); + isClicked = [false, false, false, false]; + } else { + wrongSound.currentTime = 0; + wrongSound.play(); + if (isClicked[0]) return; + wrongCnt++; + wrongCntElemA.innerText = wrongCnt; + isClicked[0] = true; + wrongs.push([curWordIdx, ans[0].textContent]); + } +}) +ans[1].addEventListener("click", () => { + if (curCorrIdx == 1) { + if (cnt == 20) { + corrSound2.play(); + } else { + corrSound.currentTime = 0; + corrSound.play(); + } + corrCnt++; + corrCntElemA.innerText = corrCnt; + [curWordIdx, curCorrIdx] = quiz(); + isClicked = [false, false, false, false]; + } else { + wrongSound.currentTime = 0; + wrongSound.play(); + if (isClicked[1]) return; + wrongCnt++; + wrongCntElemA.innerText = wrongCnt; + isClicked[1] = true; + wrongs.push([curWordIdx, ans[1].textContent]); + } +}) +ans[2].addEventListener("click", () => { + if (curCorrIdx == 2) { + if (cnt == 20) { + corrSound2.play(); + } else { + corrSound.currentTime = 0; + corrSound.play(); + } + corrCnt++; + corrCntElemA.innerText = corrCnt; + [curWordIdx, curCorrIdx] = quiz(); + isClicked = [false, false, false, false]; + } else { + wrongSound.currentTime = 0; + wrongSound.play(); + if (isClicked[2]) return; + wrongCnt++; + wrongCntElemA.innerText = wrongCnt; + isClicked[2] = true; + wrongs.push([curWordIdx, ans[2].textContent]); + } +}) +ans[3].addEventListener("click", () => { + if (curCorrIdx == 3) { + if (cnt == 20) { + corrSound2.play(); + } else { + corrSound.currentTime = 0; + corrSound.play(); + } + corrCnt++; + corrCntElemA.innerText = corrCnt; + [curWordIdx, curCorrIdx] = quiz(); + isClicked = [false, false, false, false]; + } else { + wrongSound.currentTime = 0; + wrongSound.play(); + if (isClicked[3]) return; + wrongCnt++; + wrongCntElemA.innerText = wrongCnt; + isClicked[3] = true; + wrongs.push([curWordIdx, ans[3].textContent]); + } +}) +replay.addEventListener("click", start) +clsChg.addEventListener("click", () => { + if (wordClass == "noun") { + wordClass = "verb"; + clsChg.innerText = "V"; + } else { + wordClass = "noun"; + clsChg.innerText = "N"; + } + target = words(wordClass); + targetLen = target.length; + console.log(targetLen); + cnt = 0; + start(); +}) \ No newline at end of file diff --git a/Kuli/src/words_list.js b/Kuli/src/words_list.js new file mode 100644 index 0000000..acb60a8 --- /dev/null +++ b/Kuli/src/words_list.js @@ -0,0 +1,3 @@ +function words() { + +} \ No newline at end of file diff --git a/Kuli/style.css b/Kuli/style.css new file mode 100644 index 0000000..fae08a3 --- /dev/null +++ b/Kuli/style.css @@ -0,0 +1,179 @@ +ody { + text-align: center; + vertical-align: middle; + font-weight: bold; +} + +#clsChg { + position: absolute; + display: block; + width: 16vh; + height: 8vh; + text-align: center; + border-radius: 2rem; + background-color: darkgreen; + color: white; + font-size: 6vh; + cursor: pointer; + user-select: none; + transition: all 0.3s; + box-shadow: 0 3px 5px rgba(0, 0, 0, .3); +} + +#clsChg:hover { + background-color: green; +} + +#hamburger { + background-color: green; +} + +#scoreA { + position: absolute; + right: 0px; + width: fit-content; + text-align: center; + font-size: 45px; +} + +#display { + width: 100%; + height: 100vh; + font-size: 8vh; + color: white; +} + +#question { + height: 20%; +} + +#word { + font-size: 8vh; + color: black; +} + +#pronunc { + font-size: 4vh; + font-family: "Times New Roman", "Arial", "Courier New", "Segoe UI"; + color: gray; +} + +#ans_0 { + width: 50%; + height: 40%; + background-color: #d14d28; +} + +#ans_0:hover { + opacity: 0.6; + cursor: pointer; +} + +#ans_1 { + width: 50%; + background-color: #59c8ef; +} + +#ans_1:hover { + opacity: 0.6; + cursor: pointer; +} + +#ans_2 { + height: 40%; + background-color: #2b9464; +} + +#ans_2:hover { + opacity: 0.6; + cursor: pointer; +} + +#ans_3 { + background-color: #f5df65; +} + +#ans_3:hover { + opacity: 0.6; + cursor: pointer; +} + +#result { + width: fit-content; + min-width: 26vw; + padding: 0.5em 1em; + margin: 0 auto; + text-align: left; + background-color: white; + box-shadow: 0 3px 6px rgba(0, 0, 0, .4); +} + +#scoreB { + padding: 5px; + margin-bottom: 10px; + border-bottom: 1px solid black; + text-align: center; + font-size: 25px; +} + +#perfect { + display: block; + width: 100%; + text-align: "center"; + font-size: 14vw; + background-color: black; + color: white; +} + +#replay, +.playAnother { + position: relative; + display: block; + width: 24vw; + padding: auto; + margin: 10px auto; + border-radius: 1rem; + background-color: red; + color: white !important; + font-size: 4vw; + cursor: pointer; + transition: all 0.3s; + box-shadow: 0 3px 5px rgba(0, 0, 0, .3); +} + +#replay:hover, +.playAnother:hover { + background-color: orange; +} + +footer { + font-size: 4vh; + float: right; +} + +a { + color: blue; + text-decoration: none; +} + +footer a:hover { + text-decoration: underline; +} + +@keyframes gaming { + 0% { + background-color: magenta; + } + + 33% { + background-color: yellow; + } + + 66% { + background-color: Cyan; + } + + 100% { + background-color: magenta; + } +} \ No newline at end of file