ghost613/math-quiz
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Neon Math Explosion Quiz</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">9 <style>10 @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');11 12 body {13 font-family: 'Press Start 2P', cursive;14 background-color: #0a0a1a;15 color: #fff;16 overflow: hidden;17 }18 19 .neon-text {20 text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff00de, 0 0 30px #ff00de;21 color: white;22 }23 24 .neon-box {25 box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #00f7ff, 0 0 30px #00f7ff;26 border: 2px solid #00f7ff;27 background-color: rgba(0, 0, 20, 0.7);28 }29 30 .neon-button {31 transition: all 0.3s;32 box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #00ff88, 0 0 30px #00ff88;33 border: 2px solid #00ff88;34 background-color: rgba(0, 20, 10, 0.7);35 }36 37 .neon-button:hover {38 transform: scale(1.05);39 box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #00ff88, 0 0 40px #00ff88;40 }41 42 .option {43 transition: all 0.3s;44 box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ffcc00, 0 0 30px #ffcc00;45 border: 2px solid #ffcc00;46 background-color: rgba(20, 15, 0, 0.7);47 }48 49 .option:hover {50 transform: scale(1.05);51 box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ffcc00, 0 0 40px #ffcc00;52 }53 54 .correct {55 animation: correct 1s;56 box-shadow: 0 0 20px #00ff88, 0 0 40px #00ff88;57 }58 59 .wrong {60 animation: wrong 1s;61 box-shadow: 0 0 20px #ff0000, 0 0 40px #ff0000;62 }63 64 @keyframes correct {65 0% { transform: scale(1); }66 50% { transform: scale(1.1); }67 100% { transform: scale(1); }68 }69 70 @keyframes wrong {71 0% { transform: scale(1); }72 50% { transform: scale(0.9); }73 100% { transform: scale(1); }74 }75 76 .explosion {77 position: fixed;78 top: 0;79 left: 0;80 width: 100%;81 height: 100%;82 background-color: #ff0000;83 opacity: 0;84 z-index: 100;85 pointer-events: none;86 display: flex;87 justify-content: center;88 align-items: center;89 font-size: 5rem;90 color: white;91 text-shadow: 0 0 10px black;92 animation: explosion 2s ease-out;93 }94 95 @keyframes explosion {96 0% { opacity: 0; transform: scale(0.1); }97 20% { opacity: 1; }98 100% { opacity: 0; transform: scale(2); }99 }100 101 .particle {102 position: absolute;103 background-color: #ff9900;104 border-radius: 50%;105 pointer-events: none;106 }107 108 .score-display {109 font-size: 2rem;110 text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #00ff88, 0 0 30px #00ff88;111 }112 113 .question {114 min-height: 100px;115 display: flex;116 align-items: center;117 justify-content: center;118 }119 </style>120</head>121<body class="min-h-screen flex flex-col items-center justify-center p-4">122 <div id="app" class="w-full max-w-2xl">123 <h1 class="text-4xl md:text-5xl text-center mb-8 neon-text">NEON MATH EXPLOSION</h1>124 125 <div class="neon-box rounded-lg p-6 mb-8">126 <div class="flex justify-between items-center mb-6">127 <div class="score-display">Score: <span id="score">0</span></div>128 <div class="text-xl">Question: <span id="question-number">1</span>/10</div>129 </div>130 131 <div class="question text-2xl mb-8 text-center" id="question">132 Loading question...133 </div>134 135 <div class="grid grid-cols-2 gap-4 mb-6" id="options">136 <!-- Options will be inserted here -->137 </div>138 139 <div class="flex justify-center">140 <button id="next-btn" class="neon-button py-3 px-6 rounded-lg text-lg hidden">141 NEXT QUESTION <i class="fas fa-arrow-right ml-2"></i>142 </button>143 </div>144 </div>145 146 <div id="start-screen" class="neon-box rounded-lg p-8 text-center">147 <h2 class="text-2xl md:text-3xl mb-6 neon-text">READY FOR THE CHALLENGE?</h2>148 <p class="mb-8">Answer 10 math questions correctly... or face explosive consequences!</p>149 <button id="start-btn" class="neon-button py-3 px-8 rounded-lg text-xl">150 START QUIZ <i class="fas fa-bolt ml-2"></i>151 </button>152 </div>153 </div>154 155 <div id="explosion" class="explosion hidden">156 BOOM!157 </div>158 159 <div id="game-over" class="neon-box rounded-lg p-8 text-center hidden absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50 w-4/5 max-w-md">160 <h2 class="text-3xl mb-6 neon-text">GAME OVER</h2>161 <p class="mb-4 text-xl">Your final score:</p>162 <p class="text-4xl mb-8 score-display" id="final-score">0</p>163 <button id="restart-btn" class="neon-button py-3 px-8 rounded-lg text-xl">164 PLAY AGAIN <i class="fas fa-redo ml-2"></i>165 </button>166 </div>167 168 <script>169 document.addEventListener('DOMContentLoaded', () => {170 // DOM elements171 const startScreen = document.getElementById('start-screen');172 const app = document.getElementById('app');173 const questionElement = document.getElementById('question');174 const optionsContainer = document.getElementById('options');175 const nextButton = document.getElementById('next-btn');176 const scoreElement = document.getElementById('score');177 const questionNumberElement = document.getElementById('question-number');178 const startButton = document.getElementById('start-btn');179 const explosionElement = document.getElementById('explosion');180 const gameOverScreen = document.getElementById('game-over');181 const finalScoreElement = document.getElementById('final-score');182 const restartButton = document.getElementById('restart-btn');183 184 // Quiz variables185 let currentQuestionIndex = 0;186 let score = 0;187 let questions = [];188 let selectedAnswer = null;189 let quizActive = false;190 191 // Generate questions192 function generateQuestions() {193 const operations = ['+', '-', '*', '/'];194 questions = [];195 196 for (let i = 0; i < 10; i++) {197 const operation = operations[Math.floor(Math.random() * operations.length)];198 let num1, num2, answer;199 200 switch(operation) {201 case '+':202 num1 = Math.floor(Math.random() * 50) + 10;203 num2 = Math.floor(Math.random() * 50) + 10;204 answer = num1 + num2;205 break;206 case '-':207 num1 = Math.floor(Math.random() * 50) + 30;208 num2 = Math.floor(Math.random() * num1) + 1;209 answer = num1 - num2;210 break;211 case '*':212 num1 = Math.floor(Math.random() * 12) + 1;213 num2 = Math.floor(Math.random() * 12) + 1;214 answer = num1 * num2;215 break;216 case '/':217 num2 = Math.floor(Math.random() * 10) + 1;218 answer = Math.floor(Math.random() * 10) + 1;219 num1 = num2 * answer;220 break;221 }222 223 // Generate options224 let options = [answer];225 while (options.length < 4) {226 let wrongAnswer;227 if (operation === '/') {228 wrongAnswer = Math.floor(Math.random() * 15) + 1;229 } else {230 wrongAnswer = answer + (Math.floor(Math.random() * 10) - 5);231 }232 233 if (wrongAnswer !== answer && !options.includes(wrongAnswer) && wrongAnswer > 0) {234 options.push(wrongAnswer);235 }236 }237 238 // Shuffle options239 options = options.sort(() => Math.random() - 0.5);240 241 questions.push({242 question: `${num1} ${operation} ${num2} = ?`,243 answer: answer,244 options: options245 });246 }247 }248 249 // Start quiz250 function startQuiz() {251 generateQuestions();252 currentQuestionIndex = 0;253 score = 0;254 quizActive = true;255 scoreElement.textContent = score;256 questionNumberElement.textContent = 1;257 startScreen.classList.add('hidden');258 app.classList.remove('hidden');259 showQuestion();260 }261 262 // Show question263 function showQuestion() {264 const currentQuestion = questions[currentQuestionIndex];265 questionElement.textContent = currentQuestion.question;266 267 optionsContainer.innerHTML = '';268 currentQuestion.options.forEach((option, index) => {269 const optionElement = document.createElement('div');270 optionElement.className = 'option py-4 px-2 rounded-lg text-center cursor-pointer text-xl';271 optionElement.textContent = option;272 optionElement.dataset.option = option;273 optionElement.addEventListener('click', selectAnswer);274 optionsContainer.appendChild(optionElement);275 });276 277 nextButton.classList.add('hidden');278 selectedAnswer = null;279 }280 281 // Select answer282 function selectAnswer(e) {283 if (!quizActive || selectedAnswer !== null) return;284 285 const selectedOption = e.target;286 const currentQuestion = questions[currentQuestionIndex];287 selectedAnswer = selectedOption.dataset.option;288 289 // Disable all options290 const options = document.querySelectorAll('.option');291 options.forEach(option => {292 option.style.pointerEvents = 'none';293 if (option.dataset.option == currentQuestion.answer) {294 option.classList.add('correct');295 }296 });297 298 // Check if answer is correct299 if (selectedAnswer == currentQuestion.answer) {300 selectedOption.classList.add('correct');301 score += 10;302 scoreElement.textContent = score;303 } else {304 selectedOption.classList.add('wrong');305 createExplosion();306 }307 308 nextButton.classList.remove('hidden');309 }310 311 // Next question312 function nextQuestion() {313 currentQuestionIndex++;314 questionNumberElement.textContent = currentQuestionIndex + 1;315 316 if (currentQuestionIndex < questions.length) {317 showQuestion();318 } else {319 endQuiz();320 }321 }322 323 // Create explosion effect324 function createExplosion() {325 explosionElement.classList.remove('hidden');326 327 // Create particles328 for (let i = 0; i < 50; i++) {329 const particle = document.createElement('div');330 particle.className = 'particle';331 const size = Math.random() * 20 + 5;332 particle.style.width = `${size}px`;333 particle.style.height = `${size}px`;334 particle.style.left = `${Math.random() * 100}%`;335 particle.style.top = `${Math.random() * 100}%`;336 document.body.appendChild(particle);337 338 // Animate particles339 const angle = Math.random() * Math.PI * 2;340 const distance = Math.random() * 300 + 100;341 const duration = Math.random() * 2 + 1;342 343 particle.animate([344 { transform: 'translate(0, 0)', opacity: 1 },345 { transform: `translate(${Math.cos(angle) * distance}px, ${Math.sin(angle) * distance}px)`, opacity: 0 }346 ], {347 duration: duration * 1000,348 easing: 'cubic-bezier(0.4, 0, 0.2, 1)'349 });350 351 // Remove particle after animation352 setTimeout(() => {353 particle.remove();354 }, duration * 1000);355 }356 357 // Hide explosion after animation358 setTimeout(() => {359 explosionElement.classList.add('hidden');360 }, 2000);361 }362 363 // End quiz364 function endQuiz() {365 quizActive = false;366 finalScoreElement.textContent = score;367 gameOverScreen.classList.remove('hidden');368 }369 370 // Restart quiz371 function restartQuiz() {372 gameOverScreen.classList.add('hidden');373 startQuiz();374 }375 376 // Event listeners377 startButton.addEventListener('click', startQuiz);378 nextButton.addEventListener('click', nextQuestion);379 restartButton.addEventListener('click', restartQuiz);380 });381 </script>382<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=ghost613/math-quiz" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>383</html>