From 10c45908d402a605cd5e0aae54bc174234746600 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lukas=20F=C3=BCrderer?= <l.fuerderer@gmail.com>
Date: Sat, 29 Aug 2020 18:31:48 +0200
Subject: [PATCH] Write more description texts for the complete procedure

Closes #1
---
 index.html |  4 ++--
 quiz.css   | 12 ++++++++++++
 quiz.js    | 45 +++++++++++++++++++++++++++++++++++++++------
 3 files changed, 53 insertions(+), 8 deletions(-)

diff --git a/index.html b/index.html
index 85fd4aa..2b307fe 100644
--- a/index.html
+++ b/index.html
@@ -40,8 +40,8 @@
                     </div>
                     <div class="description">
                         <div class="helptext" v-if="!all_inserted || solution_revealed">{{ helptext }}</div>
-                        <button v-if="all_inserted && !solution_revealed" v-on:click="reveal_order">Reihenfolge prüfen</button>
-                        <button v-if="solution_correct" v-on:click="open_next_column">Weiter</button>
+                        <button v-if="revealing_text != null" v-on:click="reveal_solution">{{ revealing_text }}</button>
+                        <button v-if="next_column_text != null" v-on:click="open_next_column">{{ next_column_text }}</button>
                     </div>
                     <div class="close_button" v-on:click="is_open = false">
                         <svg width="30" height="30">
diff --git a/quiz.css b/quiz.css
index 134c29a..196c8b7 100644
--- a/quiz.css
+++ b/quiz.css
@@ -40,6 +40,18 @@ body {
     overflow-y: auto;
     padding: 10px;
 }
+#quiz .description .helptext {
+    white-space: pre-line;
+}
+#quiz .description button {
+    background-color: #e8912a;
+    border: none;
+    cursor: pointer;
+    font-family: "Roboto Slab";
+    font-size: 16px;
+    margin-top: 5px;
+    padding: 5px 10px;
+}
 #quiz .close_button {
     cursor: pointer;
     grid-area: 1 / 3 / 2 / 4;
diff --git a/quiz.js b/quiz.js
index c2bc2c1..b9390bc 100644
--- a/quiz.js
+++ b/quiz.js
@@ -192,24 +192,57 @@ var app = new Vue({
         helptext: function() {
             if (this.solution_revealed) {
                 if (this.solution_correct) {
-                    return "Perfekt! Die Reihenfolge ist korrekt.";
-                } 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 das Quiz nun erfolgreich abgeschlossen.",
+                    ][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 {
+                    return "Die Zuordnung passt leider noch nicht ganz. Falsch positionierte Elemente sind rot markiert. Entferne diese mit einem Klick auf das rote X und füge sie neu ein, bis alle richtig eingeordnet sind.";
                 }
             } else {
                 if (this.solution.length == 0) {
-                    return "Klicke rechts auf ein Element des Gottesdienstablaufs, um es nach links zu übernehmen.";
+                    return "Im ersten Schritt ist das Ziel, den Gottesdienstablauf in die richtige Reihenfolge zu bringen.\nKlicke hierfür zunächst unten auf ein beliebiges Element des Gottesdienstablaufs, um es nach links zu übernehmen.";
                 } else if (this.solution.length == 1) {
                     if (this.store.selected == null) {
-                        return "Wähle nun von rechts das nächste Element aus.";
+                        return "Wähle nun von unten ein weiteres beliebiges Element aus.";
                     } else {
                         return "Klicke links auf einen grünen Pfeil, um es an der richtigen Stelle in die Liste einzuordnen.";
                     }
                 } else {
-                    return "Bringe nun auch alle weiteren Elemente in die richtige Reihenfolge.";
+                    return [
+                        "Bringe nun auch alle weiteren Elemente in die richtige Reihenfolge, wie sie bei einem Gottesdienst durchlaufen werden.\nFalls du etwas falsch eingeordnet hast, kannst du es mit einem Klick auf das rote X wieder löschen. (Wird sichtbar beim Überfahren mit der Maus)",
+                        "Finde nun zu jedem Element des Gottesdienstablaufs die passende Bedeutung aus der Liste.",
+                        "Welcher biblische Bezug gehört zum jeweiligen Element des Gottesdienstablaufs? Es gibt nicht zu jedem Punkt einen biblischen Bezug.",
+                        "Ordne nun die gegebenen Ministrantendienste der jeweils passenden Zeile zu.",
+                    ][this.store.section];
                 }
             }
         },
+        revealing_text: function() {
+            if (this.all_inserted && !this.solution_revealed) {
+                if (this.store.section == 0) {
+                    return "Reihenfolge prüfen";
+                } else {
+                    return "Zuordnung prüfen";
+                }
+            }
+            return null;
+        },
+        next_column_text: function() {
+            if (this.solution_correct) {
+                return [
+                    "Nächster Schritt: Bedeutungen zuordnen",
+                    "Nächster Schritt: Biblische Bezüge zuordnen",
+                    "Nächster Schritt: Ministrantendienste zuordnen",
+                    null,
+                ][this.store.section];
+            }
+            return null;
+        },
         all_inserted: function() {
             if (this.store.section == 0) {
                 return this.solution.length == cards_content[0].length;
@@ -292,7 +325,7 @@ var app = new Vue({
                 this.solution[row_idx].idx.pop();
             }
         },
-        reveal_order: function() {
+        reveal_solution: function() {
             this.solution_revealed = true;
         },
         open_next_column: function() {