248 lines
7.7 KiB
HTML
248 lines
7.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>Professional Calculator</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
min-height: 100vh;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 20px;
|
||
}
|
||
|
||
.container {
|
||
background: white;
|
||
border-radius: 20px;
|
||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||
padding: 40px;
|
||
max-width: 600px;
|
||
width: 100%;
|
||
}
|
||
|
||
h1 {
|
||
text-align: center;
|
||
color: #667eea;
|
||
margin-bottom: 10px;
|
||
font-size: 2.5em;
|
||
}
|
||
|
||
.progress {
|
||
text-align: center;
|
||
color: #666;
|
||
margin-bottom: 30px;
|
||
font-size: 1.1em;
|
||
}
|
||
|
||
.equation-box {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: white;
|
||
padding: 30px;
|
||
border-radius: 15px;
|
||
text-align: center;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.equation-box h2 {
|
||
font-size: 2.5em;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.input-group {
|
||
display: flex;
|
||
gap: 10px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
#answer {
|
||
flex: 1;
|
||
padding: 15px;
|
||
font-size: 1.1em;
|
||
border: 2px solid #667eea;
|
||
border-radius: 10px;
|
||
outline: none;
|
||
transition: border-color 0.3s;
|
||
}
|
||
|
||
#answer:focus {
|
||
border-color: #764ba2;
|
||
}
|
||
|
||
button {
|
||
padding: 15px 30px;
|
||
font-size: 1.1em;
|
||
background: #667eea;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 10px;
|
||
cursor: pointer;
|
||
transition: background 0.3s;
|
||
font-weight: bold;
|
||
}
|
||
|
||
button:hover {
|
||
background: #764ba2;
|
||
}
|
||
|
||
.feedback {
|
||
padding: 20px;
|
||
border-radius: 10px;
|
||
margin-bottom: 20px;
|
||
text-align: center;
|
||
font-size: 1.1em;
|
||
font-weight: bold;
|
||
min-height: 80px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
}
|
||
|
||
.feedback.correct {
|
||
background: #d4edda;
|
||
color: #155724;
|
||
border: 2px solid #28a745;
|
||
}
|
||
|
||
.feedback.incorrect {
|
||
background: #f8d7da;
|
||
color: #721c24;
|
||
border: 2px solid #f5c6cb;
|
||
}
|
||
|
||
.fun-fact {
|
||
margin-top: 10px;
|
||
font-style: italic;
|
||
font-size: 0.95em;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.completion {
|
||
text-align: center;
|
||
padding: 30px;
|
||
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
|
||
color: white;
|
||
border-radius: 15px;
|
||
display: none;
|
||
}
|
||
|
||
.completion h2 {
|
||
font-size: 2em;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.completion button {
|
||
background: white;
|
||
color: #28a745;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.completion button:hover {
|
||
background: #f0f0f0;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<h1>🧮 Professional Calculator</h1>
|
||
<div class="progress">Question <span id="current">1</span> of 10</div>
|
||
|
||
<div id="game">
|
||
<div class="equation-box">
|
||
<h2 id="equation"></h2>
|
||
</div>
|
||
|
||
<div id="feedback" class="feedback" style="display: none;"></div>
|
||
|
||
<div class="input-group">
|
||
<input type="number" id="answer" placeholder="Enter your answer" autocomplete="off">
|
||
<button onclick="checkAnswer()">Submit</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="completion" class="completion">
|
||
<h2>🎉 Congratulations!</h2>
|
||
<p>You've completed all 10 equations!</p>
|
||
<button onclick="location.reload()">Play Again</button>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
const equations = [
|
||
{ problem: '25 + 15', answer: 40, fact: '40 is the number of days and nights of the Great Flood in the Bible!' },
|
||
{ problem: '100 - 37', answer: 63, fact: '63 is the atomic number of Europium, a rare earth element!' },
|
||
{ problem: '12 × 6', answer: 72, fact: '72 is the number of virgins promised in Islamic tradition!' },
|
||
{ problem: '144 ÷ 12', answer: 12, fact: '12 is one of the most significant numbers - 12 months, 12 hours, 12 apostles!' },
|
||
{ problem: '7 × 8', answer: 56, fact: '56 is the number of playing cards in a standard deck plus jokers!' },
|
||
{ problem: '200 - 85', answer: 115, fact: '115 is the atomic number of Moscovium, a synthetic element!' },
|
||
{ problem: '9 × 9', answer: 81, fact: '81 is a perfect square - the fourth power of 3!' },
|
||
{ problem: '256 ÷ 4', answer: 64, fact: '64 is the number of squares on a chessboard!' },
|
||
{ problem: '50 + 50', answer: 100, fact: '100 is a perfect square and the base for our decimal system!' },
|
||
{ problem: '99 - 54', answer: 45, fact: '45 is a triangular number - the sum of 1+2+3+4+5+6+7+8+9!' }
|
||
];
|
||
|
||
let currentQuestion = 0;
|
||
const answerInput = document.getElementById('answer');
|
||
const feedbackDiv = document.getElementById('feedback');
|
||
|
||
function loadQuestion() {
|
||
const eq = equations[currentQuestion];
|
||
document.getElementById('equation').textContent = eq.problem + ' = ?';
|
||
document.getElementById('current').textContent = currentQuestion + 1;
|
||
answerInput.value = '';
|
||
answerInput.focus();
|
||
feedbackDiv.style.display = 'none';
|
||
}
|
||
|
||
function checkAnswer() {
|
||
const userAnswer = parseInt(answerInput.value);
|
||
const correctAnswer = equations[currentQuestion].answer;
|
||
|
||
if (isNaN(userAnswer)) {
|
||
feedbackDiv.className = 'feedback incorrect';
|
||
feedbackDiv.textContent = '⚠️ Please enter a valid number!';
|
||
feedbackDiv.style.display = 'flex';
|
||
return;
|
||
}
|
||
|
||
if (userAnswer === correctAnswer) {
|
||
feedbackDiv.className = 'feedback correct';
|
||
feedbackDiv.innerHTML = `✅ Correct!<div class="fun-fact">💡 ${equations[currentQuestion].fact}</div>`;
|
||
feedbackDiv.style.display = 'flex';
|
||
|
||
currentQuestion++;
|
||
if (currentQuestion < equations.length) {
|
||
setTimeout(loadQuestion, 3000);
|
||
} else {
|
||
setTimeout(showCompletion, 3000);
|
||
}
|
||
} else {
|
||
feedbackDiv.className = 'feedback incorrect';
|
||
feedbackDiv.textContent = '❌ Study some more! Try again.';
|
||
feedbackDiv.style.display = 'flex';
|
||
answerInput.value = '';
|
||
}
|
||
}
|
||
|
||
function showCompletion() {
|
||
document.getElementById('game').style.display = 'none';
|
||
document.getElementById('completion').style.display = 'block';
|
||
}
|
||
|
||
answerInput.addEventListener('keypress', (e) => {
|
||
if (e.key === 'Enter') checkAnswer();
|
||
});
|
||
|
||
loadQuestion();
|
||
</script>
|
||
</body>
|
||
</html> |