Quiz IPA SMU Kelas 1
;
let currentQuestion = 0;
let score = 0;
let userName = '';
let totalReward = 0;
function showNameInput() {
const quizContainer = document.getElementById('quiz-container');
quizContainer.innerHTML = '';
const formElement = document.createElement('form');
formElement.id = 'nameForm';
const nameLabel = document.createElement('label');
nameLabel.setAttribute('for', 'name');
nameLabel.textContent = 'Masukkan Nama Anda:';
formElement.appendChild(nameLabel);
const nameInput = document.createElement('input');
nameInput.type = 'text';
nameInput.id = 'name';
nameInput.className = 'form-control';
nameInput.required = true;
formElement.appendChild(nameInput);
const buttonElement = document.createElement('button');
buttonElement.type = 'submit';
buttonElement.className = 'btn btn-purple mt-3';
buttonElement.textContent = 'Mulai Quiz';
formElement.appendChild(buttonElement);
formElement.addEventListener('submit', function(e) {
e.preventDefault();
userName = document.getElementById('name').value;
loadQuestion();
});
quizContainer.appendChild(formElement);
}
function loadQuestion() {
const quizContainer = document.getElementById('quiz-container');
quizContainer.innerHTML = '';
const questionElement = document.createElement('h4');
questionElement.textContent = `Pertanyaan ${currentQuestion + 1}: ${questions[currentQuestion].question}`;
quizContainer.appendChild(questionElement);
const formElement = document.createElement('form');
formElement.id = 'quizForm';
questions[currentQuestion].options.forEach((option, index) => {
const divElement = document.createElement('div');
divElement.className = 'form-check';
const inputElement = document.createElement('input');
inputElement.type = 'radio';
inputElement.name = 'option';
inputElement.className = 'form-check-input';
inputElement.id = `option${index}`;
inputElement.value = index;
const labelElement = document.createElement('label');
labelElement.className = 'form-check-label';
labelElement.htmlFor = `option${index}`;
labelElement.textContent = option;
divElement.appendChild(inputElement);
divElement.appendChild(labelElement);
formElement.appendChild(divElement);
});
const buttonElement = document.createElement('button');
buttonElement.type = 'button';
buttonElement.className = 'btn btn-purple mt-3';
buttonElement.textContent = 'Submit';
buttonElement.addEventListener('click', checkAnswer);
formElement.appendChild(buttonElement);
quizContainer.appendChild(formElement);
}
function checkAnswer() {
const selectedOption = document.querySelector('input[name="option"]:checked');
const feedbackContainer = document.getElementById('feedback-container');
const feedbackElement = document.getElementById('feedback');
const stickerElement = document.getElementById('sticker');
const rewardElement = document.getElementById('reward');
if (selectedOption) {
const answer = parseInt(selectedOption.value);
if (answer === questions[currentQuestion].answer) {
score++;
feedbackElement.innerHTML = '
Benar! Bagus sekali!';
stickerElement.src = 'https://kerajaanusaha.my.id/uploads/banner-20240829-025650anak happy.webp';
totalReward += 10000;
rewardElement.innerHTML = `Anda mendapatkan Rp. 10,000! Total Hadiah: Rp. ${totalReward}`;
speak('Jawaban Anda benar! Bagus sekali!');
} else {
feedbackElement.innerHTML = `Salah! Jawaban yang benar adalah: ${questions[currentQuestion].options[questions[currentQuestion].answer]}`;
stickerElement.src = 'https://kerajaanusaha.my.id/uploads/banner-20240829-030002anak sedih.webp';
rewardElement.innerHTML = 'Tidak ada hadiah kali ini.';
speak('Jawaban Anda salah. Jawaban yang benar adalah: ' + questions[currentQuestion].options[questions[currentQuestion].answer]);
}
currentQuestion++;
if (currentQuestion < questions.length) {
setTimeout(() => {
feedbackContainer.style.display = 'none';
loadQuestion();
}, 3000);
} else {
setTimeout(showFinalScore, 3000);
}
feedbackContainer.style.display = 'block';
} else {
alert('Silakan pilih salah satu jawaban.');
}
updateScore();
}
function updateScore() {
const scoreElement = document.getElementById('score');
const totalRewardElement = document.getElementById('totalReward');
scoreElement.textContent = `Score: ${score}`;
totalRewardElement.textContent = `Hadiah: Rp. ${totalReward}`;
}
function showFinalScore() {
const quizContainer = document.getElementById('quiz-container');
quizContainer.innerHTML = `
Quiz Selesai, ${userName}!
Skor Akhir Anda adalah: ${score} dari ${questions.length} pertanyaan.
Total Hadiah Anda: Rp. ${totalReward}
`;
saveScore();
}
function saveScore() {
let savedScores = JSON.parse(localStorage.getItem('quizScores')) || [];
savedScores.push({ userName, score, totalReward });
localStorage.setItem('quizScores', JSON.stringify(savedScores));
}
function viewSavedScores() {
const storedScores = JSON.parse(localStorage.getItem('quizScores')) || [];
const storedScoreElement = document.getElementById('storedScore');
storedScoreElement.innerHTML = '';
if (storedScores.length === 0) {
storedScoreElement.textContent = 'Tidak ada skor tersimpan.';
return;
}
const tableElement = document.createElement('table');
tableElement.className = 'table table-bordered';
const theadElement = document.createElement('thead');
theadElement.innerHTML = `
| Nama |
Skor |
Total Hadiah |
`;
tableElement.appendChild(theadElement);
const tbodyElement = document.createElement('tbody');
storedScores.forEach(({ userName, score, totalReward }) => {
const trElement = document.createElement('tr');
trElement.innerHTML = `
${userName} |
${score} |
Rp. ${totalReward} |
`;
tbodyElement.appendChild(trElement);
});
tableElement.appendChild(tbodyElement);
storedScoreElement.appendChild(tableElement);
}
function speak(text) {
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'id-ID'; // Set bahasa Indonesia
window.speechSynthesis.speak(utterance);
}
document.getElementById('viewScoreButton').addEventListener('click', viewSavedScores);
showNameInput();