Write more description texts for the complete procedure

Closes #1

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">

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;

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