good/bad score

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>

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();

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;