Quiz en ligne basique :)

2025-05-24 12:43:21 +02:00
parent 19abaeff85
commit ff31fcf8b0
3 changed files with 191 additions and 0 deletions
--- a/Quiz/index.php
+++ b/Quiz/index.php
@@ -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>
--- a/Quiz/questions.json
+++ b/Quiz/questions.json
@@ -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
+  }
+]
--- a/Quiz/style.css
+++ b/Quiz/style.css
@@ -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;
+}