coba
// Data kuis sudah didefinisikan dalam HTML
// Inisialisasi variabel
let currentQuestion = 0;
let userAnswers = [];
let score = 0;
// Ambil referensi elemen DOM
const startButton = document.getElementById('startButton');
const quizContainer = document.getElementById('quizContainer');
const quizInfo = document.querySelector('.quiz-info');
const questionContainer = document.getElementById('questionContainer');
const questionCounter = document.getElementById('questionCounter');
const progressBar = document.getElementById('progressBar');
const prevButton = document.getElementById('prevButton');
const nextButton = document.getElementById('nextButton');
const submitButton = document.getElementById('submitButton');
const resultsContainer = document.getElementById('resultsContainer');
const scoreDisplay = document.getElementById('scoreDisplay');
const resultInfo = document.getElementById('resultInfo');
const reviewContainer = document.getElementById('reviewContainer');
const sendButton = document.getElementById('sendButton');
const toastMessage = document.getElementById('toastMessage');
// Inisialisasi userAnswers dengan nilai default
for (let i = 0; i < quizData.length; i++) {
if (quizData[i].type === "multiple-choice" || quizData[i].type === "complex-mcq") {
userAnswers[i] = [];
} else if (quizData[i].type === "matching") {
userAnswers[i] = Array(quizData[i].items.length).fill("");
} else if (quizData[i].type === "true-false") {
userAnswers[i] = Array(quizData[i].statements.length).fill("");
}
}
// Event listener untuk tombol mulai kuis
startButton.addEventListener('click', startQuiz);
// Event listener untuk tombol navigasi
prevButton.addEventListener('click', goToPreviousQuestion);
nextButton.addEventListener('click', goToNextQuestion);
submitButton.addEventListener('click', submitQuiz);
sendButton.addEventListener('click', sendResults);
// Fungsi untuk memulai kuis
function startQuiz() {
quizInfo.style.display = 'none';
quizContainer.style.display = 'block';
loadQuestion(currentQuestion);
updateProgressBar();
}
// Fungsi untuk memuat pertanyaan
function loadQuestion(index) {
const question = quizData[index];
questionCounter.textContent = `Soal ${index + 1} dari ${quizData.length}`;
let html = `
`;
}
questionContainer.innerHTML = html;
// Tambahkan event listener untuk pilihan-pilihan jawaban
if (question.type === "multiple-choice") {
document.querySelectorAll(`input[name="q${index}"]`).forEach(option => {
option.addEventListener('change', (e) => {
userAnswers[index] = parseInt(e.target.value);
});
});
} else if (question.type === "complex-mcq") {
document.querySelectorAll(`input[name="q${index}"]`).forEach(option => {
option.addEventListener('change', (e) => {
const optionIndex = parseInt(e.target.value);
if (e.target.checked) {
// Jika checkbox dicentang, tambahkan ke jawaban
if (!userAnswers[index].includes(optionIndex)) {
userAnswers[index].push(optionIndex);
}
// Batasi hanya 2 pilihan
if (userAnswers[index].length > 2) {
const firstChecked = document.getElementById(`q${index}o${userAnswers[index][0]}`);
firstChecked.checked = false;
userAnswers[index].shift();
}
} else {
// Jika checkbox tidak dicentang, hapus dari jawaban
userAnswers[index] = userAnswers[index].filter(item => item !== optionIndex);
}
});
});
} else if (question.type === "matching") {
question.items.forEach((_, i) => {
const select = document.getElementById(`match${index}_${i}`);
select.addEventListener('change', (e) => {
userAnswers[index][i] = e.target.value;
});
});
} else if (question.type === "true-false") {
question.statements.forEach((_, i) => {
document.querySelectorAll(`input[name="tf${index}_${i}"]`).forEach(option => {
option.addEventListener('change', (e) => {
userAnswers[index][i] = e.target.value;
});
});
});
}
// Update tombol navigasi
updateNavigationButtons();
}
// Fungsi untuk memperbarui tombol navigasi
function updateNavigationButtons() {
if (currentQuestion === 0) {
prevButton.classList.add('btn-disabled');
prevButton.disabled = true;
} else {
prevButton.classList.remove('btn-disabled');
prevButton.disabled = false;
}
if (currentQuestion === quizData.length - 1) {
nextButton.style.display = 'none';
submitButton.style.display = 'inline-block';
} else {
nextButton.style.display = 'inline-block';
submitButton.style.display = 'none';
}
}
// Fungsi untuk memperbarui progress bar
function updateProgressBar() {
const progress = ((currentQuestion + 1) / quizData.length) * 100;
progressBar.style.width = `${progress}%`;
}
// Fungsi untuk pergi ke pertanyaan sebelumnya
function goToPreviousQuestion() {
if (currentQuestion > 0) {
currentQuestion--;
loadQuestion(currentQuestion);
updateProgressBar();
}
}
// Fungsi untuk pergi ke pertanyaan berikutnya
function goToNextQuestion() {
if (currentQuestion < quizData.length - 1) {
currentQuestion++;
loadQuestion(currentQuestion);
updateProgressBar();
}
}
// Fungsi untuk menghitung skor
function calculateScore() {
score = 0;
quizData.forEach((question, index) => {
if (question.type === "multiple-choice") {
if (userAnswers[index] === question.correctAnswer) {
score++;
}
} else if (question.type === "complex-mcq") {
// Untuk soal kompleks, jawaban harus persis sama (2 jawaban benar)
const correctAnswers = question.correctAnswers;
const userAnswer = userAnswers[index].sort();
if (userAnswer.length === correctAnswers.length &&
userAnswer.every((value, i) => value === correctAnswers[i])) {
score++;
}
} else if (question.type === "matching") {
// Untuk soal menjodohkan, setiap pasangan benar mendapat poin
let correctMatches = 0;
question.correctAnswers.forEach((correctAnswer, i) => {
if (userAnswers[index][i] == correctAnswer) {
correctMatches++;
}
});
// Jika semua pasangan benar, beri nilai penuh
if (correctMatches === question.items.length) {
score++;
}
} else if (question.type === "true-false") {
// Untuk soal benar/salah, setiap pernyataan benar mendapat poin
let correctStatements = 0;
question.correctAnswers.forEach((correctAnswer, i) => {
if (userAnswers[index][i] === correctAnswer.toString()) {
correctStatements++;
}
});
// Jika semua pernyataan benar, beri nilai penuh
if (correctStatements === question.statements.length) {
score++;
}
}
});
return score;
}
// Fungsi untuk menampilkan toast message
function showToast(message) {
toastMessage.textContent = message;
toastMessage.className = "show";
// Setelah 3 detik, hilangkan toast
setTimeout(() => {
toastMessage.className = toastMessage.className.replace("show", "");
}, 3000);
}
// Fungsi untuk submit kuis
function submitQuiz() {
// Hitung skor
score = calculateScore();
// Tampilkan skor
scoreDisplay.textContent = `${score}/${quizData.length}`;
resultInfo.textContent = `Jawaban benar: ${score} dari ${quizData.length} soal`;
// Tampilkan review jawaban
generateReview();
// Tampilkan halaman hasil
quizContainer.style.display = 'none';
resultsContainer.style.display = 'block';
}
// Fungsi untuk membuat review jawaban
function generateReview() {
let reviewHTML = '';
quizData.forEach((question, index) => {
reviewHTML += `
${index + 1}. ${question.question}
`;
if (question.type === "multiple-choice") {
html += ``;
} else if (question.type === "complex-mcq") {
html += ``;
html += `
`;
} else if (question.type === "matching") {
html += `Pilih 2 jawaban yang benar
`;
html += ``;
question.items.forEach((item, i) => {
const selectedValue = userAnswers[index][i];
html += `
`;
});
html += `
`;
} else if (question.type === "true-false") {
html += `
${item}
| Pernyataan | Benar/Salah |
|---|---|
| ${statement} |
`;
reviewHTML += `
`;
});
reviewContainer.innerHTML = reviewHTML;
}
// Fungsi untuk mengirim hasil
function sendResults() {
const studentName = document.getElementById('studentName').value.trim();
const className = document.getElementById('className').value.trim();
const schoolName = document.getElementById('schoolName').value.trim();
const studentPhone = document.getElementById('studentPhone').value.trim();
// Validasi input
if (!studentName || !className || !schoolName || !studentPhone) {
showToast('Harap isi semua data terlebih dahulu!');
return;
}
// Validasi nomor WhatsApp (harus diawali dengan 62)
if (!studentPhone.startsWith('62') || !/^\d+$/.test(studentPhone)) {
showToast('Format nomor WhatsApp tidak valid. Harus diawali dengan 62!');
return;
}
// Format pesan WhatsApp
const scorePercentage = Math.round((score / quizData.length) * 100);
let message = `Hasil Kuis Bab 5 - Pengembangan Ide dan Cerita Sederhana%0A%0A`;
message += `Nama: ${studentName}%0A`;
message += `Kelas: ${className}%0A`;
message += `Sekolah: ${schoolName}%0A%0A`;
message += `Skor: ${score}/${quizData.length} (${scorePercentage}%)%0A%0A`;
// Buka WhatsApp dengan pesan yang sudah disiapkan
window.open(`https://wa.me/${studentPhone}?text=${message}`, '_blank');
}
// Inisialisasi aplikasi dengan menonaktifkan tombol prevButton pada awal kuis
window.onload = function() {
prevButton.classList.add('btn-disabled');
prevButton.disabled = true;
};
${index + 1}. ${question.question}
`;
if (question.type === "multiple-choice") {
const userAnswerIndex = userAnswers[index];
const isCorrect = userAnswerIndex === question.correctAnswer;
reviewHTML += ``;
reviewHTML += `Jawaban Anda: ${userAnswerIndex !== undefined && userAnswerIndex !== null ? question.options[userAnswerIndex] : 'Tidak dijawab'}`;
if (!isCorrect) {
reviewHTML += `
Jawaban Benar: ${question.options[question.correctAnswer]}`; } reviewHTML += `
`;
} else if (question.type === "complex-mcq") {
const userAnswer = userAnswers[index];
const correctAnswers = question.correctAnswers;
const isCorrect = userAnswer.length === correctAnswers.length &&
userAnswer.sort().every((value, i) => value === correctAnswers.sort()[i]);
reviewHTML += `Jawaban Benar: ${question.options[question.correctAnswer]}`; } reviewHTML += `
`;
reviewHTML += `Jawaban Anda: ${userAnswer.map(index => question.options[index]).join(', ') || 'Tidak dijawab'}`;
if (!isCorrect) {
reviewHTML += `
Jawaban Benar: ${correctAnswers.map(index => question.options[index]).join(', ')}`; } reviewHTML += `
`;
} else if (question.type === "matching") {
const userAnswer = userAnswers[index];
let allCorrect = true;
reviewHTML += `Jawaban Benar: ${correctAnswers.map(index => question.options[index]).join(', ')}`; } reviewHTML += `
`;
question.items.forEach((item, i) => {
const userOption = userAnswer[i] !== "" ? question.options[userAnswer[i]] : "Tidak dijawab";
const correctOption = question.options[question.correctAnswers[i]];
const isItemCorrect = userAnswer[i] == question.correctAnswers[i];
if (!isItemCorrect) allCorrect = false;
reviewHTML += `
`;
} else if (question.type === "true-false") {
const userAnswer = userAnswers[index];
let allCorrect = true;
reviewHTML += ``;
reviewHTML += `"${item}" → ${userOption}`;
if (!isItemCorrect) {
reviewHTML += ` (Benar: ${correctOption})`;
}
reviewHTML += `
`;
});
reviewHTML += ``;
question.statements.forEach((statement, i) => {
const userChoice = userAnswer[i] === "" ? "Tidak dijawab" : (userAnswer[i] === "true" ? "Benar" : "Salah");
const correctChoice = question.correctAnswers[i] ? "Benar" : "Salah";
const isItemCorrect = userAnswer[i] === question.correctAnswers[i].toString();
if (!isItemCorrect) allCorrect = false;
reviewHTML += `
`;
}
// Tambahkan penjelasan
if (question.explanation) {
reviewHTML += ``;
reviewHTML += `"${statement}" → ${userChoice}`;
if (!isItemCorrect) {
reviewHTML += ` (Benar: ${correctChoice})`;
}
reviewHTML += `
`;
});
reviewHTML += ``;
reviewHTML += `
`;
}
reviewHTML += `Penjelasan:
`;
reviewHTML += `${question.explanation}`;
reviewHTML += `.jpeg)
Posts
No comments