Quiz en ligne basique :)
This commit is contained in:
86
Quiz/index.php
Normal file
86
Quiz/index.php
Normal file
@@ -0,0 +1,86 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
session_start();
|
||||||
|
|
||||||
|
define('QUESTIONS_FILE', 'questions.json');
|
||||||
|
|
||||||
|
$questions = json_decode(file_get_contents(QUESTIONS_FILE), true);
|
||||||
|
|
||||||
|
$totalQuestions = count($questions);
|
||||||
|
|
||||||
|
if (!isset($_SESSION['current_question'])) {
|
||||||
|
$_SESSION['current_question'] = 0;
|
||||||
|
$_SESSION['score'] = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['answer'])) {
|
||||||
|
$current = $_SESSION['current_question'];
|
||||||
|
$selected = (int)$_POST['answer'];
|
||||||
|
|
||||||
|
if ($selected === $questions[$current]['answer']) {
|
||||||
|
$_SESSION['score']++;
|
||||||
|
}
|
||||||
|
|
||||||
|
$_SESSION['current_question']++;
|
||||||
|
|
||||||
|
if ($_SESSION['current_question'] >= $totalQuestions) {
|
||||||
|
$finished = true;
|
||||||
|
} else {
|
||||||
|
$finished = false;
|
||||||
|
}
|
||||||
|
} elseif (isset($_POST['reset'])) {
|
||||||
|
session_destroy();
|
||||||
|
header("Location: " . $_SERVER['PHP_SELF']);
|
||||||
|
exit;
|
||||||
|
} else {
|
||||||
|
$finished = false;
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<title>Quiz en ligne</title>
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<h1>Quiz en ligne basique</h1>
|
||||||
|
|
||||||
|
<?php if ($finished): ?>
|
||||||
|
|
||||||
|
<h2>Résultat final</h2>
|
||||||
|
<p>Votre score : <?= $_SESSION['score'] ?>/<?= $totalQuestions ?></p>
|
||||||
|
|
||||||
|
<form method="post" action="">
|
||||||
|
<button type="submit" name="reset">Recommencer le quiz</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<?php else: ?>
|
||||||
|
|
||||||
|
<?php
|
||||||
|
$current = $_SESSION['current_question'];
|
||||||
|
$q = $questions[$current];
|
||||||
|
?>
|
||||||
|
|
||||||
|
<form method="post" action="">
|
||||||
|
<p class="question"><?= htmlspecialchars($q['question']) ?></p>
|
||||||
|
<?php foreach ($q['choices'] as $index => $choice): ?>
|
||||||
|
<div class="choice">
|
||||||
|
<label>
|
||||||
|
<input type="radio" name="answer" value="<?= $index ?>" required />
|
||||||
|
<?= htmlspecialchars($choice) ?>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
|
||||||
|
<button type="submit">Valider</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<p>Question <?= $current + 1 ?> sur <?= $totalQuestions ?></p>
|
||||||
|
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
17
Quiz/questions.json
Normal file
17
Quiz/questions.json
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"question": "Quelle est la capitale de la France ?",
|
||||||
|
"choices": ["Paris", "Londres", "Berlin", "Madrid"],
|
||||||
|
"answer": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"question": "Quelle langue est utilisée pour développer des pages web dynamiques côté serveur ?",
|
||||||
|
"choices": ["JavaScript", "PHP", "Python", "HTML"],
|
||||||
|
"answer": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"question": "Combien y a-t-il de continents sur Terre ?",
|
||||||
|
"choices": ["4", "5", "6", "7"],
|
||||||
|
"answer": 3
|
||||||
|
}
|
||||||
|
]
|
||||||
88
Quiz/style.css
Normal file
88
Quiz/style.css
Normal file
@@ -0,0 +1,88 @@
|
|||||||
|
/* Reset basique */
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
color: #000000;
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: flex-start;
|
||||||
|
padding: 3rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||||
|
width: 100%;
|
||||||
|
max-width: 600px;
|
||||||
|
padding: 2rem 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 2rem;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.question {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.choice {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.choice label {
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.choice input[type="radio"] {
|
||||||
|
margin-right: 0.8rem;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
accent-color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
background-color: #333333;
|
||||||
|
color: #ffffff;
|
||||||
|
border: none;
|
||||||
|
padding: 12px 30px;
|
||||||
|
font-size: 1rem;
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
box-shadow: 0 3px 10px rgba(0,0,0,0.15);
|
||||||
|
transition: background-color 0.3s ease, box-shadow 0.3s ease;
|
||||||
|
display: block;
|
||||||
|
margin: 2rem auto 0;
|
||||||
|
width: 180px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
background-color: #555555;
|
||||||
|
box-shadow: 0 5px 15px rgba(0,0,0,0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #222222;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user