diff --git a/index.html b/index.html index b514d52..3caeae7 100644 --- a/index.html +++ b/index.html @@ -51,6 +51,7 @@ +
@@ -71,6 +72,31 @@
+
+ + + + + + + + + + + + + + + + + +
Bei erster ÜberprüfungNach Korrektur
{{ score_round_description(idx) }}{{ points }} / {{ max_score_in(idx) }}
Gesamtpunktzahl: {{ achieved_total_score }} / {{ maximum_total_score }}
+
+ + + +
+
diff --git a/quiz.css b/quiz.css index 7c19cc5..cd8ba25 100644 --- a/quiz.css +++ b/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; +} diff --git a/quiz.js b/quiz.js index 83a317e..83abf59 100644 --- a/quiz.js +++ b/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; }, }, });