277 lines
6.7 KiB
HTML
277 lines
6.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>KUIS</title>
|
||
<style>
|
||
body {
|
||
margin: 0;
|
||
padding: 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 100vh;
|
||
background-color: #A1C398;
|
||
}
|
||
|
||
.canvas {
|
||
position: relative; /* Konteks posisi relatif */
|
||
width: 90%; /* Lebar konten utama */
|
||
max-width: 1200px; /* Lebar maksimum */
|
||
height: 80vh; /* Tinggi konten utama, gunakan vh untuk tinggi responsif */
|
||
background-color: #BFD8AF;
|
||
border-radius: 20px;
|
||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-around;
|
||
padding: 20px;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.modal {
|
||
display: none;
|
||
position: fixed;
|
||
z-index: 1;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: auto;
|
||
background-color: rgb(0,0,0);
|
||
background-color: rgba(0,0,0,0.4);
|
||
}
|
||
|
||
.modal-content {
|
||
background-color: #789461;
|
||
margin: 15% auto;
|
||
padding: 20px;
|
||
border: 1px solid #888;
|
||
width: 50%;
|
||
font-size: large;
|
||
}
|
||
|
||
.close {
|
||
color: #aaa;
|
||
float: right;
|
||
font-size: 28px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.close:hover,
|
||
.close:focus {
|
||
color: black;
|
||
text-decoration: none;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.menu {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 10px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.previous-button {
|
||
position: absolute;
|
||
top: 2vh; /* Sesuaikan jarak atas */
|
||
left: 2vw; /* Sesuaikan jarak kiri */
|
||
background-color: transparent;
|
||
border: none;
|
||
cursor: pointer;
|
||
z-index: 1;
|
||
padding: 10px; /* Tambahkan padding */
|
||
}
|
||
|
||
.previous-button img {
|
||
width: 5%; /* Sesuaikan ukuran gambar dengan persentase */
|
||
height: auto;
|
||
margin-top: 45px; /* Sesuaikan margin atas */
|
||
}
|
||
|
||
.menu-text {
|
||
margin-top: 40px;
|
||
text-align: center;
|
||
flex-grow: 1;
|
||
font-size: 30px;
|
||
}
|
||
|
||
#quiz {
|
||
text-align: center;
|
||
margin-top: 10px; /* Sesuaikan margin atas */
|
||
margin-bottom: 90px; /* Sesuaikan margin bawah */
|
||
}
|
||
|
||
#question {
|
||
font-size: 30px;
|
||
margin-top: 20px; /* Sesuaikan margin atas */
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
#choices {
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
#choices button {
|
||
font-size: 18px;
|
||
padding: 10px 20px;
|
||
margin: 5px;
|
||
background-color: antiquewhite;
|
||
border-radius: 20px;
|
||
}
|
||
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="canvas">
|
||
<div class="menu">
|
||
<a href="{{ url_for('dashboard') }}" class="previous-button">
|
||
<img src="{{ url_for('static', filename='assets/previous.png') }}" alt="Previous Icon">
|
||
</a>
|
||
<h1 class="menu-text">JAWAB PERTANYAAN DIBAWAH INI DENGAN BENAR!</h1>
|
||
</div>
|
||
<div id="quiz">
|
||
<div id="question"></div>
|
||
<div id="choices"></div>
|
||
</div>
|
||
<div id="resultModal" class="modal">
|
||
<div class="modal-content">
|
||
<span class="close">×</span>
|
||
<div id="result"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
const questions = [
|
||
{
|
||
question: "1. Di mana biasanya anak-anak kecil bermain??",
|
||
choices: ["مصنع", "ملعب", "كرسي"],
|
||
correctAnswer: "ملعب"
|
||
},
|
||
{
|
||
question: "2. كرة سلة biasanya digunakan untuk?",
|
||
choices: ["Menulis", "Belajar", "Olahraga"],
|
||
correctAnswer: "Olahraga"
|
||
},
|
||
{
|
||
question: "3. Dibawah ini manakah Bahasa Arab dari pabrik?",
|
||
choices: ["مصنع", "Jالساعة", "سور"],
|
||
correctAnswer: "مصنع"
|
||
},
|
||
{
|
||
question: "4. Dimana tempat kita sholat?'?",
|
||
choices: ["مصلّى", "السباحة", "مِنْضَدَة"],
|
||
correctAnswer: "مصلّى"
|
||
},
|
||
{
|
||
question: "5. حديقة adalah?",
|
||
choices: ["Basket", "Ruang Guru", "Taman"],
|
||
correctAnswer: "Taman"
|
||
},
|
||
{
|
||
question: "6. Dimana kita menulis?",
|
||
choices: ["ملابس", "كتاب", "سور"],
|
||
correctAnswer: "كتاب"
|
||
},
|
||
{
|
||
question: "7. Manakah dibawah ini yang termasuk alas kaki?",
|
||
choices: ["السباحة", "حذاء", "مِرْحَاض"],
|
||
correctAnswer: "حذاء"
|
||
},
|
||
{
|
||
question: "8. الساعة adalah?",
|
||
choices: ["Jam", "Kursi", "Sepatu"],
|
||
correctAnswer: "Jam"
|
||
},
|
||
{
|
||
question: "9. Pasangan dari كرسي adalah?",
|
||
choices: ["ملعب", "مِرْحَاض", "مِنْضَدَة"],
|
||
correctAnswer: "مِنْضَدَة"
|
||
},
|
||
{
|
||
question: "10. Selain menggunakan bolpoin, dibawah ini manakah yang bisa untuk menulis?",
|
||
choices: ["قلم", "ملابس", "حديقة"],
|
||
correctAnswer: "قلم"
|
||
}
|
||
];
|
||
|
||
let currentQuestion = 0;
|
||
let score = 0;
|
||
const quiz = document.getElementById('quiz');
|
||
const questionElement = document.getElementById('question');
|
||
const choicesElement = document.getElementById('choices');
|
||
const resultElement = document.getElementById('result');
|
||
let wrongAnswers = [];
|
||
|
||
const modal = document.getElementById("resultModal");
|
||
const span = document.getElementsByClassName("close")[0];
|
||
|
||
function loadQuestion() {
|
||
const q = questions[currentQuestion];
|
||
questionElement.textContent = q.question;
|
||
choicesElement.innerHTML = "";
|
||
for (let i = 0; i < q.choices.length; i++) {
|
||
const button = document.createElement("button");
|
||
button.textContent = q.choices[i];
|
||
button.onclick = function() {
|
||
checkAnswer(q.choices[i]);
|
||
}
|
||
choicesElement.appendChild(button);
|
||
}
|
||
}
|
||
|
||
function checkAnswer(choice) {
|
||
const q = questions[currentQuestion];
|
||
if (choice === q.correctAnswer) {
|
||
score++;
|
||
} else {
|
||
wrongAnswers.push(q.question);
|
||
}
|
||
currentQuestion++;
|
||
if (currentQuestion < questions.length) {
|
||
loadQuestion();
|
||
} else {
|
||
showModal();
|
||
}
|
||
}
|
||
|
||
function showModal() {
|
||
const totalQuestions = questions.length;
|
||
const percentage = (score / totalQuestions) * 100;
|
||
const message = `Score kamu ${score} dari ${totalQuestions}. Nilai persentase kamu ${percentage}%`;
|
||
let wrongMessage = "<p>Soal yang kurang tepat jawabannya adalah:</p><ul>";
|
||
if (wrongAnswers.length === 0) {
|
||
wrongMessage = "<p>Selamat! Kamu berhasil menjawab semua soal dengan benar!!.</p>";
|
||
} else {
|
||
wrongAnswers.forEach(function (wrongAnswer) {
|
||
wrongMessage += `<li>${wrongAnswer}</li>`;
|
||
});
|
||
wrongMessage += "</ul>";
|
||
}
|
||
resultElement.innerHTML = `<div>${message}</div><div>${wrongMessage}</div>`;
|
||
modal.style.display = "block";
|
||
}
|
||
|
||
span.onclick = function() {
|
||
modal.style.display = "none";
|
||
}
|
||
|
||
window.onclick = function(event) {
|
||
if (event.target == modal) {
|
||
modal.style.display = "none";
|
||
}
|
||
}
|
||
|
||
loadQuestion();
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|