PHP Interactive Quiz App with Animated Scores
Build a timed quiz application with animated score counters, progress bars, and PHP session-based scoring.
PHPJavaScriptCSSAnimationQuiz
Overview
Create an interactive quiz app with animated circular progress, timed questions, and a beautiful results screen — powered by PHP sessions.
Question Bank (questions.php)
php
<?php
function getQuestions(): array {
return [
['q' => 'What does PHP stand for?', 'options' => ['Personal Home Page', 'PHP: Hypertext Preprocessor', 'Private Home Page', 'Public Host Program'], 'answer' => 1],
['q' => 'Which function outputs text in PHP?', 'options' => ['print()', 'echo()', 'write()', 'Both A & B'], 'answer' => 3],
['q' => 'Which symbol starts a PHP variable?', 'options' => ['@', '#', '$', '&'], 'answer' => 2],
];
}
?>Quiz Handler (quiz.php)
php
<?php
session_start();
require 'questions.php';
$questions = getQuestions();
$current = (int)($_GET['q'] ?? 0);
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$selected = (int)$_POST['answer'];
if ($selected === $questions[$current - 1]['answer']) {
$_SESSION['score'] = ($_SESSION['score'] ?? 0) + 1;
}
}
if ($current >= count($questions)) { header('Location: result.php'); exit; }
$q = $questions[$current];
$total = count($questions);
$progress = round(($current / $total) * 100);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Quiz - Question <?= $current + 1 ?></title>
<style>
body { background: #0f0f23; color: #fff; font-family: sans-serif; display: flex; justify-content: center; padding: 3rem; }
.quiz-card { background: #1a1a3e; padding: 2.5rem; border-radius: 20px; max-width: 600px; width: 100%; }
.progress { height: 8px; background: #2d2d5e; border-radius: 4px; overflow: hidden; margin-bottom: 2rem; }
.progress-fill { height: 100%; background: linear-gradient(90deg, #6c63ff, #48dbfb); transition: width 0.5s; }
.options label { display: block; padding: 1rem; margin: 0.5rem 0; background: #2d2d5e; border-radius: 10px; cursor: pointer; transition: all 0.2s; }
.options label:hover { background: #3d3d7e; transform: translateX(5px); }
button { width: 100%; padding: 1rem; margin-top: 1.5rem; background: #6c63ff; color: #fff; border: none; border-radius: 10px; font-size: 1.1rem; cursor: pointer; }
</style>
</head>
<body>
<div class="quiz-card">
<div class="progress"><div class="progress-fill" style="width:<?= $progress ?>%"></div></div>
<p style="opacity:0.6">Question <?= $current + 1 ?> of <?= $total ?></p>
<h2><?= htmlspecialchars($q['q']) ?></h2>
<form method="POST" action="?q=<?= $current + 1 ?>">
<div class="options">
<?php foreach ($q['options'] as $i => $opt): ?>
<label><input type="radio" name="answer" value="<?= $i ?>" required> <?= htmlspecialchars($opt) ?></label>
<?php endforeach; ?>
</div>
<button type="submit">Next →</button>
</form>
</div>
</body>
</html>Animated Result (result.php)
php
<?php
session_start();
$score = $_SESSION['score'] ?? 0;
$total = 3;
$pct = round(($score / $total) * 100);
$_SESSION['score'] = 0;
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Quiz Result</title>
<style>
body { background: #0f0f23; color: #fff; display: flex; justify-content: center; align-items: center; min-height: 100vh; }
.result { text-align: center; }
svg { width: 200px; height: 200px; }
circle { fill: none; stroke-width: 8; stroke-linecap: round; }
.bg { stroke: #2d2d5e; }
.fg { stroke: #6c63ff; stroke-dasharray: 565; stroke-dashoffset: 565; animation: fill 1.5s ease forwards; }
@keyframes fill { to { stroke-dashoffset: <?= 565 - (565 * $pct / 100) ?>; } }
.score-text { font-size: 3rem; font-weight: bold; }
</style>
</head>
<body>
<div class="result">
<svg viewBox="0 0 200 200"><circle class="bg" cx="100" cy="100" r="90"/><circle class="fg" cx="100" cy="100" r="90" transform="rotate(-90 100 100)"/></svg>
<div class="score-text"><?= $score ?>/<?= $total ?></div>
<p style="font-size:1.3rem"><?= $pct >= 80 ? '������ Excellent!' : ($pct >= 50 ? '������ Good job!' : '������ Keep learning!') ?></p>
<a href="index.php" style="color:#6c63ff">Try Again →</a>
</div>
</body>
</html>Technologies
- PHP — sessions, scoring, question bank - CSS — SVG circle animation, progress bar - JavaScript — timer functionality
Related Projects
PHPApr 27, 2026
Analog Clock with PHP & CSS
Build a beautiful real-time analog clock using PHP for time calculation and CSS for the rotating hands and dial.
PHPCSSAnimationClock
Read more → Source
PHPApr 27, 2026
Animated Loading Spinners Gallery in PHP
Create a gallery of 10+ beautiful CSS loading spinner animations served dynamically through PHP.
PHPCSSAnimationSpinners
Read more → Source
PHPApr 27, 2026
PHP Color Palette Generator
Generate beautiful random color palettes with hex codes, RGB values, and one-click copy — all powered by PHP.
PHPCSSColorsDesign Tool
Read more → Source
Comments (0)
No comments yet. Be the first to comment!