Show a score at the end of the quiz

Closes #9

index.html

@@ -51,6 +51,7 @@
                         <button v-if="revealing_text != null" v-on:click="show_correction">{{ revealing_text }}</button>
                         <button v-if="next_column_text != null" v-on:click="open_next_column">{{ next_column_text }}</button>
                         <button v-if="correction_visible && !solution_correct && !solution_revealed" v-on:click="reveal_solution">Lösung aufdecken</button>
+                        <button v-if="finished_quiz" v-on:click="scoreboard_open = true">Auswertung anzeigen</button>
                     </div>
                     <div class="close_button" v-on:click="is_open = false">
                         <svg width="30" height="30">
@@ -71,6 +72,31 @@
                         </div>
                     </div>
                 </div>
+                <div v-if="scoreboard_open" class="scoreboard">
+                    <table>
+                        <thead>
+                            <tr>
+                                <th></th>
+                                <th>Bei erster Überprüfung</th>
+                                <th>Nach Korrektur</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr v-for="(round, idx) in score">
+                                <td>{{ score_round_description(idx) }}</td>
+                                <td class="single_value" v-for="points in round">{{ points }} / {{ max_score_in(idx) }}</td>
+                            </tr>
+                            <tr>
+                                <td class="total" colspan="3">Gesamtpunktzahl: {{ achieved_total_score }} / {{ maximum_total_score }}</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                    <div class="close_button" v-on:click="scoreboard_open = false">
+                        <svg width="30" height="30">
+                            <path d="M4 4L26 26M4 26L26 4" stroke="#000" stroke-width="2px" />
+                        </svg>
+                    </div>
+                </div>
             </div>
         </div>
     </body>

quiz.css

@@ -66,6 +66,7 @@ body {
     font-family: "Roboto Slab";
     font-size: 16px;
     margin-top: 5px;
+    margin-bottom: 10px;
     padding: 5px 10px;
 }
 #quiz .close_button {
@@ -143,3 +144,47 @@ body {
     position: relative;
     top: -10px;
 }
+
+#quiz .scoreboard {
+    background-color: #fff;
+    border: 2px solid #000;
+    display: grid;
+    grid-template-columns: auto 30px;
+    grid-template-rows: 30px auto;
+    height: 220px;
+    left: calc(50vw - 332px);
+    position: absolute;
+    top: calc(50vh - 112px);
+    width: 660px;
+}
+#quiz .scoreboard table {
+    border-collapse: collapse;
+    grid-area: 1 / 1 / 3 / 2;
+    height: 200px;
+    margin: 10px 0 10px 30px;
+}
+#quiz .scoreboard div.close_button {
+    grid-area: 1 / 2 / 2 / 3;
+}
+#quiz .scoreboard tbody tr:nth-child(2n+1) {
+    background-color: #eee;
+}
+#quiz .scoreboard tbody tr:nth-child(2n) {
+    background-color: #ddd;
+}
+#quiz .scoreboard thead tr, #quiz .scoreboard tbody tr:last-child {
+    background-color: #bbb;
+}
+#quiz .scoreboard th {
+    padding: 3px 10px;
+}
+#quiz .scoreboard td {
+    padding: 3px;
+}
+#quiz .scoreboard td.single_value {
+    text-align: center;
+}
+#quiz .scoreboard td.total {
+    font-weight: bold;
+    text-align: center;
+}

quiz.js

@@ -193,6 +193,8 @@ var app = new Vue({
         next_insert_num: null,
         solution: [],
         correction_visible: false,
+        score: [],
+        scoreboard_open: false,
     },
     computed: {
         headings: function() {
@@ -211,14 +213,14 @@ var app = new Vue({
                             "Schau dir die Reihenfolge genau an. Elemente die zuvor nicht korrekt einsortiert waren, sind nun grün markiert.",
                             "Alle Bedeutungen sind jetzt am richtigen Platz. Die Bedeutungen die zuvor nicht korrekt zugeordnet waren, sind grün markiert.",
                             "Die biblichen Bezüge sind nun zugeordnet. Bezüge die zuvor nicht korrekt platziert waren, sind grün markiert.",
-                            "Die Ministrantendienste sind nun am richtigen Platz. Was zuvor nicht korrekt zugeordnet war, ist grün markiert.\nDu hast es geschafft! Das Quiz ist nun zu Ende.",
+                            "Die Ministrantendienste sind nun am richtigen Platz. Was zuvor nicht korrekt zugeordnet war, ist grün markiert.\n\nDu hast " + this.achieved_total_score + " von " + this.maximum_total_score + " Punkten erreicht.",
                         ][this.store.section];
                     } else {
                         return [
                             "Perfekt! Die Reihenfolge ist korrekt.",
                             "Super! Alle Bedeutungen sind korrekt eingeordnet.",
                             "Sehr gut! Die biblischen Bezüge sind alle korrekt zugeordnet.",
-                            "Gut gemacht! Die Ministrantendienste sind alle passend zugeordnet.\nDu hast es geschafft! Das Quiz ist nun zu Ende.",
+                            "Gut gemacht! Die Ministrantendienste sind alle passend zugeordnet.\n\nDu hast " + this.achieved_total_score + " von " + this.maximum_total_score + " Punkten erreicht.",
                         ][this.store.section];
                     }
                 } else if (this.store.section == 0) {
@@ -322,6 +324,25 @@ var app = new Vue({
         solution_revealed: function() {
             return this.solution.some(elem => elem.got_revealed);
         },
+        finished_quiz: function() {
+            return this.store.section == cards_content.length - 1 && this.solution_correct;
+        },
+        achieved_total_score: function() {
+            let sum = 0;
+            this.score.forEach(step => {
+                step.forEach(count => {
+                    sum += count;
+                });
+            });
+            return sum;
+        },
+        maximum_total_score: function() {
+            let sum = 0;
+            cards_content.forEach(column => {
+                sum += column.filter(x => x != null).length;
+            });
+            return 2 * sum;
+        },
     },
     methods: {
         store_text: function(idx) {
@@ -390,6 +411,9 @@ var app = new Vue({
                 this.next_insert_num = 1;
             }
             this.correction_visible = true;
+            let num_elements = cards_content[this.store.section].filter(x => x != null).length;
+            let num_wrong = this.incorrects.filter(x => x).length;
+            this.score.push([num_elements - num_wrong, num_elements]);
         },
         open_next_column: function() {
             this.store.section++;
@@ -408,6 +432,7 @@ var app = new Vue({
             this.store.selected = null;
         },
         reveal_solution: function() {
+            let needed_corrections = 0;
             if (this.store.section == 0) {
                 // remove wrong elements
                 let incorrect_rows = [];
@@ -427,6 +452,7 @@ var app = new Vue({
                             idx: [i],
                             got_revealed: true,
                         });
+                        needed_corrections++;
                     }
                 }
             } else {
@@ -436,14 +462,28 @@ var app = new Vue({
                     if (!card_inserted && card_needed) {
                         elem.idx.push(i);
                         elem.got_revealed = true;
+                        needed_corrections++;
                     } else if (card_inserted && !card_needed) {
                         elem.idx.splice(this.store.section, 1);
                     } else if (card_inserted && card_needed && elem.idx[this.store.section] != i) {
                         Vue.set(elem.idx, this.store.section, i);
                         elem.got_revealed = true;
+                        needed_corrections++;
                     }
                 });
             }
+            this.score[this.store.section][1] -= needed_corrections;
+        },
+        score_round_description: function(idx) {
+            return [
+                "Runde 1: Ablauf",
+                "Runde 2: Bedeutung",
+                "Runde 3: Biblischer Bezug",
+                "Runde 4: Ministrantendienst",
+            ][idx];
+        },
+        max_score_in: function(idx) {
+            return cards_content[idx].filter(x => x != null).length;
         },
     },
 });