diff --git a/Quiz/index.php b/Quiz/index.php new file mode 100644 index 0000000..34ebb4c --- /dev/null +++ b/Quiz/index.php @@ -0,0 +1,86 @@ += $totalQuestions) { + $finished = true; + } else { + $finished = false; + } +} elseif (isset($_POST['reset'])) { + session_destroy(); + header("Location: " . $_SERVER['PHP_SELF']); + exit; +} else { + $finished = false; +} +?> + + + + + + Quiz en ligne + + + +
+

Quiz en ligne basique

+ + + +

Résultat final

+

Votre score : /

+ +
+ +
+ + + + + +
+

+ $choice): ?> +
+ +
+ + + +
+ +

Question sur

+ + + + + diff --git a/Quiz/questions.json b/Quiz/questions.json new file mode 100644 index 0000000..dd297ce --- /dev/null +++ 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 + } +] diff --git a/Quiz/style.css b/Quiz/style.css new file mode 100644 index 0000000..1a2cb6f --- /dev/null +++ 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; +}