const totalTime = 300; // 5 menit dalam detik
let timer = totalTime;
let timerInterval;
let score = 0;
let currentQuestion = 0;
let studentName = "";
const startScreen = document.getElementById('start-screen');
const quizScreen = document.getElementById('quiz-screen');
const endScreen = document.getElementById('end-screen');
const startBtn = document.getElementById('start-btn');
const restartBtn = document.getElementById('restart-btn');
const sendWA = document.getElementById('send-wa');
const questionText = document.getElementById('question-text');
const questionImage = document.getElementById('question-image');
const choicesContainer = document.querySelector('.choices');
const timerDisplay = document.getElementById('timer');
const scoreDisplay = document.getElementById('score');
const finalScore = document.getElementById('final-score');
const finalName = document.getElementById('final-name');
const studentNameInput = document.getElementById('student-name');
function startQuiz() {
studentName = studentNameInput.value.trim();
if (studentName === "") {
alert("Mohon masukkan nama peserta.");
return;
}
score = 0;
currentQuestion = 0;
timer = totalTime;
startScreen.classList.add('d-none');
quizScreen.classList.remove('d-none');
endScreen.classList.add('d-none');
showQuestion();
startTimer();
scoreDisplay.textContent = score;
}
function showQuestion() {
if (currentQuestion >= questions.length) {
endQuiz();
return;
}
const q = questions[currentQuestion];
questionText.textContent = `${currentQuestion + 1}. ${q.text}`;
questionImage.src = q.image;
questionImage.alt = "Gambar soal";
choicesContainer.innerHTML = "";
q.choices.forEach((choice, idx) => {
const btn = document.createElement('button');
btn.textContent = choice;
btn.className = "btn";
btn.style.width = "100%";
btn.style.marginBottom = "10px";
btn.style.backgroundColor = "#f8bbd0";
btn.style.color = "#000";
btn.style.border = "none";
btn.style.borderRadius = "8px";
btn.style.fontSize = "18px";
btn.style.cursor = "pointer";
btn.addEventListener('click', () => selectAnswer(idx));
choicesContainer.appendChild(btn);
});
}
function selectAnswer(idx) {
if (idx === questions[currentQuestion].correct) {
score++;
// Bisa tambahkan suara tepuk tangan jika mau
} else {
// Bisa tambahkan suara salah jika mau
}
scoreDisplay.textContent = score;
currentQuestion++;
showQuestion();
}
function startTimer() {
timerDisplay.textContent = timer;
timerInterval = setInterval(() => {
timer--;
timerDisplay.textContent = timer;
if (timer <= 0) {
clearInterval(timerInterval);
endQuiz();
}
}, 1000);
}
function endQuiz() {
clearInterval(timerInterval);
quizScreen.classList.add('d-none');
endScreen.classList.remove('d-none');
finalScore.textContent = score;
finalName.textContent = studentName;
}
function sendToWhatsApp() {
const message = `Nilai Kuis Jurmiyah Bab Kalam sampai I’rab\nNama Peserta: ${studentName}\nSkor: ${score} dari ${questions.length}`;
const phone = "6282318601330"; // Nomor WA guru tanpa tanda plus
const url = `https://wa.me/${phone}?text=${encodeURIComponent(message)}`;
window.open(url, '_blank');
}
startBtn.addEventListener('click', startQuiz);
restartBtn.addEventListener('click', () => {
startScreen.classList.remove('d-none');
quizScreen.classList.add('d-none');
endScreen.classList.add('d-none');
studentNameInput.value = "";
score = 0;
currentQuestion = 0;
timer = totalTime;
});
sendWA.addEventListener('click', sendToWhatsApp);