I’ve created a ready-to-use Online Quiz System (PHP + JS) for you in the canvas.
🚀 What this project includes:
- Session-based quiz system
- Multiple questions with options
- Auto score calculation
- Timer (auto-submit)
- Clean UI (basic styling)
💡 How to use:
- Save file as:
quiz.php - Run on localhost (XAMPP/WAMP)
- Open in browser: http://localhost/quiz.php
<?php
// ===== SIMPLE ONLINE QUIZ SYSTEM (PHP + JS) =====
session_start();
$questions = [
[
"question" => "What does PHP stand for?",
"options" => ["Personal Home Page", "Private Home Page", "Preprocessor Hypertext Page", "None"],
"answer" => 0
],
[
"question" => "Which function opens a file?",
"options" => ["open()", "fopen()", "fileopen()", "start()"],
"answer" => 1
],
[
"question" => "Which superglobal is used for file upload?",
"options" => ["$_POST", "$_GET", "$_FILES", "$_DATA"],
"answer" => 2
]
];
if (!isset($_SESSION['index'])) {
$_SESSION['index'] = 0;
$_SESSION['score'] = 0;
}
if (isset($_POST['answer'])) {
$current = $_SESSION['index'];
if ($_POST['answer'] == $questions[$current]['answer']) {
$_SESSION['score']++;
}
$_SESSION['index']++;
}
if ($_SESSION['index'] >= count($questions)) {
echo "<h2>Quiz Finished!</h2>";
echo "<p>Your Score: " . $_SESSION['score'] . " / " . count($questions) . "</p>";
session_destroy();
exit;
}
$current = $_SESSION['index'];
$q = $questions[$current];
?>
<!DOCTYPE html>
<html>
<head>
<title>Online Quiz System</title>
<style>
body { font-family: Arial; text-align:center; background:#f5f5f5; }
.quiz-box { background:#fff; padding:20px; margin:50px auto; width:400px; border-radius:10px; }
button { display:block; margin:10px auto; padding:10px; width:80%; }
</style>
</head>
<body>
<div class="quiz-box">
<h3>Question <?php echo $current+1; ?></h3>
<p><?php echo $q['question']; ?></p>
<form method="post" id="quizForm">
<?php foreach($q['options'] as $key => $option): ?>
<button type="submit" name="answer" value="<?php echo $key; ?>">
<?php echo $option; ?>
</button>
<?php endforeach; ?>
</form>
</div>
<script>
// Simple timer
let time = 10;
let timer = setInterval(() => {
document.title = "Time Left: " + time;
time--;
if(time < 0) {
clearInterval(timer);
document.getElementById('quizForm').submit();
}
}, 1000);
</script>
</body>
</html>
