Embedded Files
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f8ff;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background-color: #ffffff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
width: 90%;
max-width: 600px;
}
h1 {
color: #333;
font-size: 2.5em;
}
#quiz-box {
margin-top: 20px;
}
#question {
font-size: 1.5em;
color: #555;
margin-bottom: 20px;
}
#answer-buttons {
display: grid;
gap: 10px;
margin-bottom: 20px;
}
.btn {
background-color: #ffb3b3;
color: #333;
border: none;
padding: 15px;
font-size: 1.2em;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s;
}
.btn:hover:not([disabled]) {
background-color: #ff8080;
}
.btn.correct {
background-color: #a8e6cf;
}
.btn.incorrect {
background-color: #ff8585;
}
.btn[disabled] {
cursor: no-drop;
}
#next-button {
background-color: #80cfff;
color: #fff;
border: none;
padding: 10px 20px;
font-size: 1.2em;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s;
}
#next-button:hover {
background-color: #5bbad5;
}
.hide {
display: none;
}
</style>
<div class="container">
<h1>Yuk, Belajar Panca Indra!</h1>
<div id="quiz-box">
<h2 id="question"></h2>
<div id="answer-buttons">
</div>
<button id="next-button" class="hide">Lanjut</button>
</div>
<div id="score-box" class="hide">
<h2>Skor Kamu: <span id="score">0</span></h2>
<p>Hebat! Kamu sudah selesai.</p>
</div>
</div>
<script>
const questions = [
{
question: "Untuk mencium bau bunga, kita menggunakan indra apa?",
answers: [
{ text: "Mata", correct: false },
{ text: "Hidung", correct: true },
{ text: "Telinga", correct: false },
],
},
Page updated
Google Sites
Report abuse