diff --git a/index.html b/index.html index 24e63c7..73409ce 100644 --- a/index.html +++ b/index.html @@ -21,7 +21,11 @@ - + {{ solution_text(elem, column) }} @@ -40,8 +44,9 @@ {{ helptext }} - {{ revealing_text }} + {{ revealing_text }} {{ next_column_text }} + Lösung aufdecken diff --git a/quiz.css b/quiz.css index 196c8b7..1ca01a1 100644 --- a/quiz.css +++ b/quiz.css @@ -91,6 +91,9 @@ body { #quiz .card.incorrect { background-color: #faa; } +#quiz .card.revealed { + background-color: #7e6; +} #quiz .solution { overflow-y: auto; diff --git a/quiz.js b/quiz.js index 2b3f4b9..abff443 100644 --- a/quiz.js +++ b/quiz.js @@ -192,12 +192,21 @@ var app = new Vue({ helptext: function() { if (this.correction_visible) { if (this.solution_correct) { - 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 das Quiz nun erfolgreich abgeschlossen.", - ][this.store.section]; + if (this.solution_revealed) { + return [ + "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.", + ][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.", + ][this.store.section]; + } } else if (this.store.section == 0) { return "Die Reihenfolge passt leider noch nicht ganz. Falsch eingeordnete Elemente sind rot markiert. Entferne diese mit einem Klick auf das rote X und füge sie neu ein, bis die Reihenfolge stimmt."; } else { @@ -296,6 +305,9 @@ var app = new Vue({ } return reduced_list; }, + solution_revealed: function() { + return this.solution.some(elem => elem.got_revealed); + }, }, methods: { store_text: function(idx) { @@ -308,6 +320,7 @@ var app = new Vue({ if (this.solution.length == 0) { this.solution.push({ idx: [i], + got_revealed: false, }); } else if (i == this.store.selected) { this.store.selected = null; @@ -321,6 +334,7 @@ var app = new Vue({ insert_front: function() { this.solution.splice(0, 0, { idx: [this.store.selected], + got_revealed: false, }); this.store.selected = null; }, @@ -334,6 +348,7 @@ var app = new Vue({ insert_after: function(elem) { this.solution.splice(this.find_solution(elem)+1, 0, { idx: [this.store.selected], + got_revealed: false, }); this.store.selected = null; }, @@ -344,7 +359,7 @@ var app = new Vue({ this.solution[row_idx].idx.pop(); } }, - reveal_solution: function() { + show_correction: function() { this.correction_visible = true; }, open_next_column: function() { @@ -352,10 +367,51 @@ var app = new Vue({ this.store.selected = null; this.store.items = shuffle_cards(this.store.section); this.correction_visible = false; + this.solution.forEach(elem => { + elem.got_revealed = false; + }); }, add_card_to: function(row) { this.solution[row].idx.push(this.store.selected); this.store.selected = null; }, + reveal_solution: function() { + if (this.store.section == 0) { + // remove wrong elements + let incorrect_rows = []; + this.incorrects.forEach((incorrect, i) => { + if (incorrect) { + incorrect_rows.push(i); + } + }); + incorrect_rows.reverse().forEach(rowNum => { + this.solution.splice(rowNum, 1); + }); + + // insert missing elements and mark them as 'got_revealed' + for (let i=0; i { + let card_inserted = elem.idx.length > this.store.section; + let card_needed = cards_content[this.store.section][i] != null; + if (!card_inserted && card_needed) { + elem.idx.push(i); + elem.got_revealed = true; + } 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; + } + }); + } + }, }, });