Created a new project: Kuli
All checks were successful
Deploy Online Pages / Pages-Deployment (push) Successful in 58s
All checks were successful
Deploy Online Pages / Pages-Deployment (push) Successful in 58s
This commit is contained in:
parent
3e05721765
commit
3339aff375
54
Kuli/index.html
Normal file
54
Kuli/index.html
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<title>Enjoy your Kuli</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="clsChg">N</div>
|
||||||
|
<div id="hamburger"><span></span><span></span><span></span></div>
|
||||||
|
<div id="scoreA">
|
||||||
|
<img src="../src/circle.svg" width="50px" height="50px" alt="○" >
|
||||||
|
<span id="corrCntA"></span>
|
||||||
|
<img src="../src/cross.svg" width="50px" height="50px" alt="×">
|
||||||
|
<span id="wrongCntA"></span>
|
||||||
|
</div>
|
||||||
|
<table id="display">
|
||||||
|
<tr>
|
||||||
|
<td id="question" colspan="2">
|
||||||
|
<div id="word"></div>
|
||||||
|
<div id="pronunc"></div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td id="ans_0"></td>
|
||||||
|
<td id="ans_1"></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td id="ans_2"></td>
|
||||||
|
<td id="ans_3"></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
<div id="result">
|
||||||
|
<div id="scoreB">
|
||||||
|
<img src="../src/circle.svg" width="20px" height="20px" alt="○" >
|
||||||
|
<span id="corrCntB"></span>
|
||||||
|
<img src="../src/cross.svg" width="20px" height="20px" alt="×">
|
||||||
|
<span id="wrongCntB"></span>
|
||||||
|
</div>
|
||||||
|
<div id="perfect">Perfect!</div>
|
||||||
|
<div id="imperfect"></div>
|
||||||
|
</div>
|
||||||
|
<div id="replay">Replay</div>
|
||||||
|
<a href="../spell-it" class="playAnother">Go Spell It</a>
|
||||||
|
</body>
|
||||||
|
<footer>→Play <a href="../spell-it">Kraft of Spelling</a></footer>
|
||||||
|
<audio src="../../src/startQuiz.mp3" id="startSound"></audio>
|
||||||
|
<audio src="../../src/correct.mp3" id="corrSound"></audio>
|
||||||
|
<audio src="../../src/correct2.mp3" id="corrSound2"></audio>
|
||||||
|
<audio src="../../src/wrong.mp3" id="wrongSound"></audio>
|
||||||
|
<script src="src/words_list.js"></script>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</html>
|
||||||
255
Kuli/script.js
Normal file
255
Kuli/script.js
Normal file
@ -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 += "</span> or <span style=\"color: red;\">'" + mistakenWordMeaning[i] + "'";
|
||||||
|
} else {
|
||||||
|
mistakenWordMeaningTxt += "</span>, <span style=\"color: red;\">'" + mistakenWordMeaning[i] + "'";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
wrongsTxt += "<span style=\"color: red;\">'" + target[mistakenWordIdx]["word"] + "'</span>"
|
||||||
|
+ " is <span style=\"color: red;\">"
|
||||||
|
+ mistakenWordMeaningTxt + "</span>, not '" + wrongs[i][1] + "'.<br>"
|
||||||
|
}
|
||||||
|
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();
|
||||||
|
})
|
||||||
3
Kuli/src/words_list.js
Normal file
3
Kuli/src/words_list.js
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
function words() {
|
||||||
|
|
||||||
|
}
|
||||||
179
Kuli/style.css
Normal file
179
Kuli/style.css
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user