raspberrypilearning · sashamishcheriakova · Dec 23, 2024 · Dec 23, 2024 · Dec 23, 2024 · Dec 23, 2024
diff --git a/fr-FR/code/quiz-time-animals/default.css b/fr-FR/code/quiz-time-animals/default.css
@@ -0,0 +1,13 @@
+:root {
+  /* Variable de police */
+  --font: 16px/1.25 'Raleway', sans-serif;
+
+  /* Couleurs de base */
+  --body-background: #FFFF00;
+  --background: #33B5E5;
+  --header-font-colour: #ffffff;
+  --h1-colour: #001e4d;
+  --h2-colour: #001e4d;
+  --button-background-colour: #ffffff;
+  --button-font-colour: #001e4d;
+}
diff --git a/fr-FR/code/quiz-time-animals/index.html b/fr-FR/code/quiz-time-animals/index.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="fr">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="default.css">
+    <title>Quiz sur la faune</title>
+  </head>
+  <body>
+    <header class="header">
+      <span class="sitename">Quiz sur la faune</span>
+      <span id="scoreText" class="sitename">Score : 0</span>
+    </header>
+    <main>
+
+      <div class="q-container">
+        <h1>Question 1</h1>
+        <h2>Quelle est la plus grande espèce de félin vivant ?</h2>
+
+        <input type="radio" name="q1" value="correct" id="q1a1">
+        <label for="q1a1">Tigre</label><br>
+
+        <input type="radio" name="q1" value="" id="q1a2">
+        <label for="q1a2">Guépard</label><br>
+
+        <input type="radio" name="q1" value="" id="q1a3">
+        <label for="q1a3">Lion</label><br>
+
+        <div class="result" id="result1"></div>
+        <button id="q1" onclick="checkAnswer('q1', '#result1')">Vérifier la réponse</button>
+      </div>
+
+      <div class="q-container">
+        <h1>Question 2</h1>
+        <h2>Quel oiseau est connu pour sa capacité à imiter la parole humaine ?</h2>
+
+        <input type="radio" name="q2" value="" id="q2a1">
+        <label for="q2a1">Moineau</label><br>
+
+        <input type="radio" name="q2" value="" id="q2a2">
+        <label for="q2a2">Pigeon</label><br>
+
+        <input type="radio" name="q2" value="correct" id="q2a3">
+        <label for="q2a3">Perroquet</label><br>
+
+        <div class="result" id="result2"></div>  
+        <button id="q2" onclick="checkAnswer('q2', '#result2')">Vérifier la réponse</button>
+      </div>
+
+      <div class="q-container">
+        <h1>Question 3</h1>
+        <h2>Quel animal est connu pour ses rayures noires et blanches distinctives ?</h2>
+
+        <input type="radio" name="q3" value="" id="q3a1">
+        <label for="q3a1">Hippopotame</label><br>
+
+        <input type="radio" name="q3" value="" id="q3a2">
+        <label for="q3a2">Girafe</label><br>
+
+        <input type="radio" name="q3" value="correct" id="q3a3">
+        <label for="q3a3">Zèbre</label><br>
+
+        <div class="result" id="result3"></div>  
+        <div class="fullMarks">Bien joué ! Tout est correct !</div>
+        <a class="retry" href="index.html">Essaie encore !</a>
+        <button id="q3" onclick="checkAnswer('q3', '#result3')">Vérifier la réponse</button>
+      </div>
+
+    </main>
+  </body>
+  <script src="scripts.js"></script>
+</html>
+
diff --git a/fr-FR/code/quiz-time-animals/project_config.yml b/fr-FR/code/quiz-time-animals/project_config.yml
@@ -0,0 +1,3 @@
+name: 'Quiz sur les animaux'
+identifier: 'quiz-time-animals'
+type: 'html'
diff --git a/fr-FR/code/quiz-time-animals/scripts.js b/fr-FR/code/quiz-time-animals/scripts.js
@@ -0,0 +1,55 @@
+// Variables
+var score = 0;
+var currentQ = 0;
+
+// Constants
+const scoreText = document.querySelector('#scoreText');
+const questions = document.querySelectorAll('.q-container');
+const fullMarks = document.querySelector('.fullMarks');
+const retry = document.querySelector('.retry');
+
+// Check answer function
+function checkAnswer(question, result) {
+  let answer = document.querySelector(`input[name="${question}"]:checked`);
+  let qResult = document.querySelector(result);
+  qResult.style.display = 'block';
+  if (answer) {
+    document.querySelector('#' + question).disabled = true;
+    if (answer.value === 'correct') {
+      qResult.innerText = 'Correct';
+      score += 1;
+      scoreText.innerText = `Score: ${score}`;
+      nextQ();
+    } else {
+      qResult.innerText = 'Incorrect';
+      nextQ();
+    }
+  } else {
+    qResult.innerText = 'Please select an answer';
+  }
+}
+
+// Next question function
+function nextQ() {
+  questions[currentQ].classList.add('fade-out');
+  setTimeout(() => {
+    if (currentQ < questions.length - 1) {
+      questions[currentQ].style.display = 'none';
+      currentQ++;
+      questions[currentQ].classList.add('slide-left');
+      questions[currentQ].style.display = 'block';
+    } else {
+      scoreText.innerText = `Final score: ${score}/${questions.length}`;
+      scoreText.classList.add('glowing');
+      if (score === questions.length) {
+        fullMarks.style.display = 'block';
+      } else {
+        retry.style.display = 'block';
+      }
+    }
+  }, '2000');
+}
+
+// Display first question
+questions[0].style.display = 'block';
+questions[0].style.opacity = 1;
diff --git a/fr-FR/code/quiz-time-animals/style.css b/fr-FR/code/quiz-time-animals/style.css
@@ -0,0 +1,207 @@
+@import url(https://fonts.googleapis.com/css?family=Raleway:400,700,900,400italic,700italic,900italic);
+
+* {
+  margin: 0;
+  padding: 0;
+  font: var(--font);
+  box-sizing: border-box;
+  color: var(--colour);
+}
+
+body {
+  background-color: var(--body-background);
+}
+
+.header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  padding: 20px 100px;
+  background: var(--background);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: var(--header-font-colour);
+}
+
+.sitename {
+  font-size: 32px;
+  text-decoration: none;
+  font-weight: 700;
+}
+
+.q-container {
+  background-color: var(--background);
+  width: 90%;
+  max-width: 600px;
+  margin: 100px auto 0;
+  border-radius: 10px;
+  padding: 30px;
+  display: none;
+  opacity: 0;
+}
+
+h1 {
+  font-size: 25px;
+  color: var(--h1-colour);
+  font-weight: 600;
+  padding-bottom: 30px;
+}
+
+h2 {
+  font-size: 25px;
+  color: var(--h2-colour);
+  font-weight: 600;
+  padding-bottom: 20px;
+}
+
+button {
+  background-color: var(--button-background-colour);
+  color: var(--button-font-colour);
+  width: 30%;
+  border: 0;
+  padding: 10px;
+  margin: 20px 0;
+  border-radius: 4px;
+  cursor: pointer;
+  align-self: center;
+  display: block;
+}
+
+.result {
+  background-color: var(--h1-colour);
+  color: var(--header-font-colour);
+  width: 100%;
+  border: 0;
+  padding: 10px;
+  margin: 20px 0;
+  border-radius: 4px;
+  align-self: center;
+  display: none;
+}
+
+.fullMarks {
+  display: none;
+}
+
+.retry {
+  text-decoration: none;
+  display: none;
+}
+
+@media screen and (max-width: 768px) {
+
+  .header {
+      padding: 20px;
+  }
+
+}
+
+/* Animations */
+
+@keyframes disappear {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+.fade-out {
+  animation: disappear 2s ease;
+}
+
+@keyframes appear {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.fade-in {
+  opacity: 1;
+  animation: appear 2s ease;
+}
+
+@keyframes grow {
+  from {
+    transform: scale(0);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.grow-in {
+  opacity: 1;
+  animation: grow 2s ease;
+}
+
+@keyframes rise {
+  from {
+    transform: translateY(20%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(-70%);
+    opacity: 1;
+  }
+}
+
+.rise-in {
+  opacity: 1;
+  transform: translateY(-70%);
+  animation: rise 2s ease;
+}
+
+@keyframes slide-in-left {
+  from {
+    transform: translatex(-70%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0%);
+    opacity: 1;
+  }
+}
+
+.slide-left {
+  opacity: 1;
+  animation: slide-in-left 2s ease;
+}
+
+@keyframes slide-in-right {
+  from {
+    transform: translatex(70%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0%);
+    opacity: 1;
+  }
+}
+
+.slide-right {
+  opacity: 1;
+  animation: slide-in-right 2s ease;
+}
+
+@keyframes glow {
+  from {
+    text-shadow: 0 0 20px var(--body-background);
+  }
+  to {
+    text-shadow: 0 0 50px var(--header-font-colour), 0 0 10px var(--header-font-colour);
+  }
+}
+
+.glowing {
+  opacity: 1;
+  animation: glow 2s ease-in-out infinite alternate;
+}
diff --git a/fr-FR/code/quiz-time-karate/default.css b/fr-FR/code/quiz-time-karate/default.css
@@ -0,0 +1,18 @@
+@import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap');
+:root {
+  /* Variable de police */
+  --body-font: 1.1rem Verdana, sans-serif;
+  --header-font: lighter 3rem 'Bangers', cursive;
+  --title-font: lighter 2rem 'Bangers', cursive;
+  --h1-font: lighter 3rem 'Bangers', cursive;
+  --h2-font: lighter 1rem Verdana, sans-serif;
+
+  /* Couleurs de base */
+  --body-background: #ffffff;
+  --background: #000000;
+  --header-font-color: #000000;
+  --h1-colour: #ffffff;
+  --h2-colour: #ffffff;
+  --button-background-colour: #ffffff;
+  --button-font-colour: #000000;
+}