Merge branch '15-choses-a-faire-css' into 'main'

Resolve "CSS Work"

Closes #15

See merge request !2

macao/assets/_custom.scss

 body {
   --accent-quiz: #2aa198;
+  // Defined but not used for now
+  --quizz-backgourd-color: #00000;
+  --feedback-sucess-color: lightgreen;
+  --feedback-error-color: #ef5d5d;
 }
 
-#correct-indic {
-  border: 2px solid var(--accent-quiz);
-  border-radius: 8px;
-  padding: 16px;
-
-  p {
-    margin: 0;
-  }
-
-}
+// ***********************************
+// Gloabl
+// ***********************************
 
 #sv-nav-complete {
   display: none;
@@ -29,3 +26,24 @@ select.sd-dropdown.inline-dropdown, input.sd-input.inline-input {
   width: fit-content;
   padding: 8px;
 }
+
+// ***********************************
+// User Feedback in quizz
+// ***********************************
+#correct-indic.incorrect{
+  background-color: var(--feedback-error-color);
+}
+
+#correct-indic.correct{
+  background-color: var(--feedback-sucess-color);
+}
+
+#correct-indic {
+  //border: 2px solid var(--accent-quiz);
+  border-radius: 8px;
+  padding: 16px;
+
+  p {
+    margin: 0;
+  }
+}

macao/assets/custom.js

+$(document).ready(function() {
+    console.log("Hello from custom.js");
+
+    // Add specific classes to play buttons
+    $('button:contains("Play")').html('<i class="fa-solid fa-play"></i>');
+});
+console.log("Goodbye from custom.js");

macao/layouts/partials/docs/inject/head.html

@@ -8,10 +8,12 @@
     <script defer type="text/javascript" src="https://unpkg.com/survey-jquery/survey.jquery.min.js"></script>
     <script defer type="text/javascript"
             src="https://unpkg.com/survey-core/themes/default-light-panelless.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <script src="https://cdn.jsdelivr.net/npm/markdown-it@14.1.0/dist/markdown-it.min.js"></script>
 
     {{- $quizjs := slice -}}
     {{- $quizjs = $quizjs | append (resources.Get "quiz.js") -}}
+    {{- $quizjs = $quizjs | append (resources.Get "custom.js") -}}
     {{- $quizjs = $quizjs | append (resources.Get "gapfill-select.js") -}}
     {{- $quizjs = $quizjs | append (resources.Get "gapfill-open.js") -}}
     {{- $quizjs = $quizjs | resources.Concat "quiz.bundle.js" -}}