-
Notifications
You must be signed in to change notification settings - Fork 1
/
flashcards.html
94 lines (83 loc) · 3.05 KB
/
flashcards.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<head>
<title>kawaba</title>
<link rel="stylesheet" href="../style.css">
<link rel="stylesheet" href="../hovertranslate.css">
<script src="../hovertranslate.js"></script>
<link rel="icon" type="image/x-icon" href="../favicon.ico">
</head>
<body>
<header>
<div class="container">
<img src="../kawaba.svg" width="60px" height="60px">
<div class="center-text">
<h1>kawaba</h1>
<h3>the language of parts</h3>
</div>
</div>
</header>
<div class="nav">
<button onclick="location.href='/'">home</button>
<button onclick="location.href='/lessons'">lessons</button>
<button onclick="location.href='https://www.reddit.com/r/kawaba'">reddit</button>
<button onclick="location.href='https://discord.gg/nXwr6zwtks'">discord</button>
</div>
<div class="game-container">
<div class="question" id="question"></div>
<div class="options" id="options">
<!-- Options will be dynamically inserted here -->
</div>
</div>
<script>
const questions = [
{
question: "What does 'example' mean?",
options: ["Sample", "Tree", "Ocean", "Run"],
correct: 0
},
{
question: "Translate 'sun' to your language:",
options: ["Luna", "Soleil", "Sol", "Lume"],
correct: 2
},
{
question: "What does 'hello' mean?",
options: ["Hi", "Bye", "Thanks", "Good"],
correct: 0
}
];
function getRandomQuestion() {
return Math.floor(Math.random() * questions.length);
}
function loadQuestion() {
const questionEl = document.getElementById('question');
const optionsEl = document.getElementById('options');
const randomIndex = getRandomQuestion();
const currentQuestion = questions[randomIndex];
questionEl.textContent = currentQuestion.question;
optionsEl.innerHTML = '';
currentQuestion.options.forEach((option, index) => {
const button = document.createElement('div');
button.textContent = option;
button.className = 'option';
button.onclick = () => checkAnswer(index, randomIndex);
optionsEl.appendChild(button);
});
}
function checkAnswer(selected, questionIndex) {
const options = document.querySelectorAll('.option');
options.forEach((option, index) => {
if (index === questions[questionIndex].correct) {
option.classList.add('correct');
} else if (index === selected) {
option.classList.add('incorrect');
}
});
setTimeout(() => {
loadQuestion();
}, 1000);
}
loadQuestion();
</script>
</body>
</html>