HTML/CSS
JavaScript

Quiz Popup

The quiz encourages participation while educating users in a fun way

 
								<head>
								<style>
									.quiz-container {
										display: none;
										position: fixed;
										top: 0;
										left: 0;
										width: 100%;
										height: 100%;
										background-color: rgba(0, 0, 0, 0.5);
										z-index: 1000;
										font-family: 'Arial', sans-serif;
									}
									
									.startquiz_wrap{
										top: 40%;
								display: flex;
								width: fit-content;
								height: 38px;
								padding: 0px 20px;
								white-space: nowrap;
								-webkit-box-pack: center;
								justify-content: center;
								-webkit-box-align: center;
								align-items: center;
								border-radius: 6px 6px 0px 0px;
								border: 0px;
								cursor: pointer;
								font-size: 1em;
								bottom: 50%;
								gap: 10px;
								transform-origin: center bottom;
								pointer-events: all;
								position: fixed;
								left: auto;
								right: 0px;
								transform: translate(50%, 0px) rotate(-90deg);
								background: #dd5041 !important;
								color: rgb(252, 253, 253) !important;
								fill: rgb(252, 253, 253) !important;
								z-index: 99;
									}
							
									.quiz-popup {
										position: absolute;
										top: 50%;
										left: 50%;
										transform: translate(-50%, -50%);
										background: white;
										padding: 2rem;
										border-radius: 15px;
										box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
										width: 90%;
										max-width: 500px;
										animation: popIn 0.5s ease-out;
									}
							
									@keyframes popIn {
										0% {
											transform: translate(-50%, -50%) scale(0.3);
											opacity: 0;
										}
										100% {
											transform: translate(-50%, -50%) scale(1);
											opacity: 1;
										}
									}
							
									.quiz-header {
										text-align: center;
										margin-bottom: 2rem;
									}
							
									.quiz-title {
										color: #333;
										font-size: 1.5rem;
										margin-bottom: 0.5rem;
									}
							
									.quiz-score {
										font-size: 1.2rem;
										color: #666;
									}
							
									.quiz-content {
										margin-bottom: 2rem;
									}
							
									.question {
										font-size: 1.2rem;
										color: #333;
										margin-bottom: 1rem;
									}
							
									.options {
										display: grid;
										gap: 1rem;
									}
							
									.option {
										padding: 1rem;
										border: 2px solid #ddd;
										border-radius: 8px;
										cursor: pointer;
										transition: all 0.3s ease;
										background: white;
									}
							
									.option:hover {
										background: #f5f5f5;
										transform: translateY(-2px);
									}
							
									.option.correct {
										background: #4CAF50;
										color: white;
										border-color: #4CAF50;
									}
							
									.option.incorrect {
										background: #f44336;
										color: white;
										border-color: #f44336;
									}
							
									.quiz-footer {
										text-align: center;
									}
							
									.next-btn {
										padding: 0.8rem 2rem;
										background: #dd5041;
										color: white;
										border: none;
										border-radius: 5px;
										cursor: pointer;
										font-size: 1rem;
										transition: background 0.3s ease;
									}
							
									.next-btn:hover {
										background: #1976D2;
									}
							
									.progress-bar {
										width: 100%;
										height: 10px;
										background: #ddd;
										border-radius: 5px;
										margin-bottom: 1rem;
									}
							
									.progress {
										height: 100%;
										background: #dd5041;
										border-radius: 5px;
										transition: width 0.3s ease;
									}
							
									.feedback {
										text-align: center;
										margin-top: 1rem;
										font-size: 1.1rem;
										min-height: 1.5rem;
									}
							
									.celebration {
										position: absolute;
										pointer-events: none;
										animation: celebrate 1s ease-out forwards;
									}
							
									@keyframes celebrate {
										0% {
											transform: translateY(0);
											opacity: 1;
										}
										100% {
											transform: translateY(-100px);
											opacity: 0;
										}
									}
								</style>
							</head>
							<body>
								<button class="startquiz_wrap" onclick="startQuiz()">Start Quiz</button>
							
								<div class="quiz-container" id="quizContainer">
									<div class="quiz-popup">
										<div class="quiz-header">
											<div class="quiz-title">Plaeto Quiz Challenge</div>
											<div class="quiz-score">Score: <span id="score">0</span></div>
										</div>
										
										<div class="progress-bar">
											<div class="progress" id="progress"></div>
										</div>
							
										<div class="quiz-content">
											<div class="question" id="question"></div>
											<div class="options" id="options"></div>
										</div>
							
										<div class="feedback" id="feedback"></div>
							
										<div class="quiz-footer">
											<button class="next-btn" id="nextBtn" onclick="nextQuestion()" style="display: none;">Next Question</button>
										</div>
									</div>
								</div>
															</body>
Note: In the console, type 'allow pasting,' and then you can paste the code below. 
 
								const questions = [
								{
									question: "What's the best way to keep your feet healthy?",
									options: [
										"Wearing tight shoes",
										"Using proper fitting shoes",
										"Walking barefoot always",
										"Wearing the same shoes everyday"
									],
									correct: 1
								},
								{
									question: "Which feature is most important in children's shoes?",
									options: [
										"Proper fit and comfort",
										"Fancy designs",
										"Brand name",
										"Cheap price"
									],
									correct: 0
								},
								{
									question: "How often should growing children's feet be measured?",
									options: [
										"Once a year",
										"Every 3-4 months",
										"Never",
										"Only when shoes feel tight"
									],
									correct: 1
								}
							];
					
							let currentQuestion = 0;
							let score = 0;
							let isAnswered = false;
					
							function startQuiz() {
								document.getElementById('quizContainer').style.display = 'block';
								showQuestion();
								updateProgress();
							}
					
							function showQuestion() {
								const question = questions[currentQuestion];
								document.getElementById('question').textContent = question.question;
								
								const optionsContainer = document.getElementById('options');
								optionsContainer.innerHTML = '';
								
								question.options.forEach((option, index) => {
									const button = document.createElement('div');
									button.className = 'option';
									button.textContent = option;
									button.onclick = () => checkAnswer(index);
									optionsContainer.appendChild(button);
								});
					
								document.getElementById('nextBtn').style.display = 'none';
								document.getElementById('feedback').textContent = '';
								isAnswered = false;
							}
					
							function checkAnswer(selectedIndex) {
								if (isAnswered) return;
								
								isAnswered = true;
								const correct = questions[currentQuestion].correct;
								const options = document.querySelectorAll('.option');
								
								options[correct].classList.add('correct');
								
								if (selectedIndex === correct) {
									score += 10;
									document.getElementById('score').textContent = score;
									document.getElementById('feedback').textContent = 'Correct! +10 points';
									createCelebration(options[selectedIndex]);
								} else {
									options[selectedIndex].classList.add('incorrect');
									document.getElementById('feedback').textContent = 'Wrong answer. Try again!';
								}
								
								document.getElementById('nextBtn').style.display = 'block';
							}
					
							function nextQuestion() {
								currentQuestion++;
								
								if (currentQuestion >= questions.length) {
									showFinalScore();
									return;
								}
								
								showQuestion();
								updateProgress();
							}
					
							function updateProgress() {
								const progress = ((currentQuestion + 1) / questions.length) * 100;
								document.getElementById('progress').style.width = `${progress}%`;
							}
					
							function showFinalScore() {
								const quizContent = document.querySelector('.quiz-content');
								quizContent.innerHTML = `
									<div>Quiz Complete!</div>
									<div>Your final score: ${score} points</div>
									<div>Thank you for playing!</div>
								`;
								document.getElementById('nextBtn').style.display = 'none';
							}
					
							function createCelebration(element) {
								const rect = element.getBoundingClientRect();
								const celebration = document.createElement('div');
								celebration.className = 'celebration';
								celebration.textContent = '+10';
								celebration.style.left = `${rect.left + rect.width / 2}px`;
								celebration.style.top = `${rect.top}px`;
								document.body.appendChild(celebration);
								
								setTimeout(() => celebration.remove(), 1000);
							}