From 92ff9455ca8f1cf1de40b366a636353c204b5157 Mon Sep 17 00:00:00 2001
From: Julien WITTOUCK <julien.wittouck@gmail.com>
Date: Thu, 14 Sep 2023 09:21:08 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20:=20add=20icons=20to=20good=20an?=
 =?UTF-8?q?d=20bad=20answers?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../resources/templates/quiz/results.html     | 30 ++++++++++++++-----
 1 file changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/main/resources/templates/quiz/results.html b/src/main/resources/templates/quiz/results.html
index f4b5b10..18e188a 100644
--- a/src/main/resources/templates/quiz/results.html
+++ b/src/main/resources/templates/quiz/results.html
@@ -35,11 +35,21 @@
         <p class="text-sm text-blue-700">
           Vous avez obtenu un score de <span th:text="${quiz.score}">5</span> / <span th:text="${quiz.questions.size}">10</span>.
         </p>
-        <p class="text-sm text-blue-700">
+        <p class="text-sm text-blue-700 inline-flex">
           Les questions auxquelles vous avez répondu correctement sont surlignées en
-          <span class="rounded-md bg-green-50 text-sm font-medium text-green-900">vert</span>,
+          <span class="rounded-md bg-green-50 text-sm font-medium text-green-900 inline-flex items-center ml-1">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-1.5">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+            vert
+          </span>,
           les autres en
-          <span class="rounded-md bg-red-50 text-sm font-medium text-red-900">rouge</span>.
+          <span class="rounded-md bg-red-50 text-sm font-medium text-red-900 inline-flex items-center ml-1">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-1.5">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+            rouge
+          </span>.
         </p>
       </div>
     </div>
@@ -51,12 +61,18 @@
     <fieldset >
 
       <!-- titre de la question -->
-      <legend class="rounded-md bg-green-50 p-4 text-sm font-medium text-green-900" th:if="${question.correct}" th:text="${question.text}">
-        Question text
+      <legend class="rounded-md bg-green-50 p-4 text-sm font-medium text-green-900 flex items-center" th:if="${question.correct}">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-1.5">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+        <span th:text="${question.text}">Question text</span>
       </legend>
 
-      <legend class="rounded-md bg-red-50 p-4 text-sm font-medium text-red-900" th:if="${!question.correct}" th:text="${question.text}">
-        Question text
+      <legend class="rounded-md bg-red-50 p-4 text-sm font-medium text-red-900 flex items-center" th:if="${!question.correct}">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-1.5">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+        <span th:text="${question.text}">Question text</span>
       </legend>
 
       <div class="mt-6 space-y-6" th:if="${question.questionType.name() == 'SINGLE_CHOICE'}">
-- 
2.51.2