From dd926b938aed04d9a4b3a0b8c982f18baddbcc78 Mon Sep 17 00:00:00 2001
From: Klemek <klemek@outlook.fr>
Date: Mon, 5 Jun 2023 16:00:39 +0200
Subject: [PATCH] good/bad score

---
 index.html | 2 +-
 main.js    | 7 ++++---
 style.css  | 8 ++++++++
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 2718b63..1256087 100644
--- a/index.html
+++ b/index.html
@@ -23,7 +23,7 @@
     <main id="app" style="display:none">
         <h1>DICOMIOPSY QCM</h1>
         <div>
-            <div id='status'>Score : {{ score }}</div>
+            <div id='status'>Score : <span class="good">{{ good }} ✔</span> | <span class="bad">{{ bad }} ✘</span></div>
             <h2 id="question">{{ data[question].name }}</div>
             <template v-for="(answer, i) in answers">
                 <div class="answer" :class="{right: show_results && answer.id === this.question, wrong: show_results && answer.clicked && answer.id !== this.question}" @click="click(i)">{{ data[answer.id].description }}</div>
diff --git a/main.js b/main.js
index 01fead9..03b67db 100644
--- a/main.js
+++ b/main.js
@@ -21,7 +21,8 @@ let app = {
     data() {
         return {
             data: [{ name: 'loading', description: 'loading' }],
-            score: 0,
+            good: 0,
+            bad: 0,
             question: 0,
             answers: [
                 { id: 0, clicked: false },
@@ -47,9 +48,9 @@ let app = {
             if (!this.show_results) {
                 this.answers[i].clicked = true;
                 if (this.answers[i].id == this.question) {
-                    this.score += 1;
+                    this.good += 1;
                 } else {
-                    this.score = 0;
+                    this.bad += 1;
                 }
             } else {
                 this.newQuestion();
diff --git a/style.css b/style.css
index 3c9d916..6cb9ed1 100644
--- a/style.css
+++ b/style.css
@@ -207,6 +207,10 @@ ol {
   background-color: #558B2F;
 }
 
+.good {
+  color: #558B2F;
+}
+
 .answer.wrong {
   background-color: #F44336;
   color: #eeeeee;
@@ -217,6 +221,10 @@ ol {
   background-color: #c62828;
 }
 
+.bad {
+  color: #C62828;
+}
+
 @media (hover: hover) {
   .answer.wrong:hover {
     background-color: #E53935;