<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Power Quiz</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
.question { margin-bottom: 20px; }
.options button { margin-right: 10px; padding: 10px 20px; }
.correct { background-color: green; color: white; }
.incorrect { background-color: red; color: white; }
#timer { font-size: 1.2em; margin-bottom: 20px; }
#score { font-size: 1.2em; margin-bottom: 20px; }
#result { margin-top: 20px; font-size: 1.2em; }
#restart { margin-top: 20px; padding: 10px 20px; }
</style>
</head>
<body>
<h1>Power Quiz</h1>
<div id="nameInput">
<label for="name">Enter your name:</label>
<input type="text" id="name" required>
<button onclick="startQuiz()">Start Quiz</button>
</div>
<div id="quiz" style="display:none;">
<div id="timer"></div>
<div id="score"></div>
<div id="questionContainer"></div>
<div id="result"></div>
<button id="restart" onclick="restartQuiz()" style="display:none;">Restart Quiz</button>
</div>
<audio id="correctSound" src="https://www.soundjay.com/button/sounds/beep-07.mp3"></audio>
<audio id="incorrectSound" src="https://www.soundjay.com/button/sounds/beep-08.mp3"></audio>
<script>
const questions = [
{ base: 2, exponent: 2, options: [3, 4, 8, 16], answer: 4 },
{ base: 3, exponent: 2, options: [6, 9, 12, 15], answer: 9 },
{ base: 2, exponent: 3, options: [6, 8, 10, 12], answer: 8 },
{ base: 4, exponent: 2, options: [12, 16, 20, 24], answer: 16 },
{ base: 2, exponent: 4, options: [16, 18, 20, 22], answer: 16 },
{ base: 5, exponent: 2, options: [20, 25, 30, 35], answer: 25 },
{ base: 2, exponent: 5, options: [24, 32, 40, 48], answer: 32 },
{ base: 3, exponent: 3, options: [24, 27, 30, 33], answer: 27 },
{ base: 2, exponent: 6, options: [48, 54, 60, 64], answer: 64 },
{ base: 6, exponent: 2, options: [30, 36, 42, 48], answer: 36 },
{ base: 2, exponent: 7, options: [96, 102, 112, 128], answer: 128 },
{ base: 7, exponent: 2, options: [42, 48, 49, 54], answer: 49 },
{ base: 2, exponent: 8, options: [192, 200, 216, 256], answer: 256 },
{ base: 8, exponent: 2, options: [56, 64, 72, 80], answer: 64 },
{ base: 2, exponent: 9, options: [384, 400, 432, 512], answer: 512 },
{ base: 9, exponent: 2, options: [72, 81, 90, 99], answer: 81 },
{ base: 2, exponent: 10, options: [768, 800, 864, 1024], answer: 1024 },
{ base: 10, exponent: 2, options: [80, 90, 100, 110], answer: 100 },
{ base: 2, exponent: 11, options: [1536, 1600, 1728, 2048], answer: 2048 },
{ base: 11, exponent: 2, options: [99, 108, 110, 121], answer: 121 }
];
let currentQuestionIndex = 0;
let score = 0;
let timerInterval;
function startQuiz() {
const name = document.getElementById('name').value;
if (!name) return alert('Please enter your name.');
document.getElementById('nameInput').style.display = 'none';
document.getElementById('quiz').style.display = 'block';
showQuestion();
}
function showQuestion() {
const question = questions[currentQuestionIndex];
const questionContainer = document.getElementById('questionContainer');
questionContainer.innerHTML = `
<div class="question">
<p>What is ${question.base} to the power of ${question.exponent}?</p>
<div class="options">
${question.options.map(option => `<button onclick="checkAnswer(${option})">${option}</button>`).join('')}
</div>
</div>
`;
startTimer();
}
function startTimer() {
let timeLeft = 120; // 2 minutes
document.getElementById('timer').textContent = `Time left: ${timeLeft}s`;
timerInterval = setInterval(() => {
timeLeft--;
document.getElementById('timer').textContent = `Time left: ${timeLeft}s`;
if (timeLeft <= 0) {
clearInterval(timerInterval);
nextQuestion();
}
}, 1000);
}
function checkAnswer(selectedOption) {
clearInterval(timerInterval);
const question = questions[currentQuestionIndex];
const buttons = document.querySelectorAll('.options button');
buttons.forEach(button => {
button.disabled = true;
if (parseInt(button.textContent) === question.answer) {
button.classList.add('correct');
if (selectedOption === question.answer) {
score += 1000;
document.getElementById('correctSound').play();
} else {
score -= 500;
document.getElementById('incorrectSound').play();
}
} else if (parseInt(button.textContent) === selectedOption) {
button.classList.add('incorrect');
}
});
document.getElementById('score').textContent = `Current Score: ${score}`;
setTimeout(nextQuestion, 1000);
}
function nextQuestion() {
currentQuestionIndex++;
if (currentQuestionIndex < questions.length) {
showQuestion();
} else {
endQuiz();
}
}
function endQuiz() {
const resultContainer = document.getElementById('result');
const name = document.getElementById('name').value;
resultContainer.innerHTML = `<p>${name}, your total score is: ${score}</p>`;
document.getElementById('questionContainer').innerHTML = '';
document.getElementById('timer').textContent = '';
document.getElementById('score').textContent = '';
document.getElementById('restart').style.display = 'block';
}
function restartQuiz() {
currentQuestionIndex = 0;
score = 0;
document.getElementById('name').value = '';
document.getElementById('nameInput').style.display = 'block';
document.getElementById('quiz').style.display = 'none';
document.getElementById('result').innerHTML = '';
document.getElementById('timer').textContent = '';
document.getElementById('score').textContent = '';
document.getElementById('restart').style.display = 'none';
}
</script>
</body>
</html>
Yazan
/ Kasım 24, 2024