Allow the user to assign additional cards after the ordering step

- Helptexts are not properly implemented yet
- Empty additional slots are not supported yet

index.html

@@ -19,14 +19,17 @@
                                 <path d="M20 0V20L0 10Z" fill="#2b8856" />
                             </svg>
                         </div>
-                        <template v-for="elem in solution">
+                        <template v-for="(elem, row) in solution">
                             <div class="row">
-                                <div class="card" v-bind:class="{incorrect: incorrects[elem.main_idx]}">
+                                <div v-for="(idx, column) in elem.idx" class="card" v-bind:class="{incorrect: column == store.section && incorrects[row]}">
-                                    {{ solution_main_text(elem) }}
+                                    {{ solution_text(elem, column) }}
-                                    <svg width=20 height=20 v-if="!order_correct" v-on:click="remove_solution(elem)">
+                                    <svg width=20 height=20 v-if="column == store.section && !solution_correct" v-on:click="remove_solution(row)">
                                         <path d="M2 2L18 18M18 2L2 18" stroke="#f00" stroke-width="2px" />
                                     </svg>
                                 </div>
+                                <svg v-if="elem.idx.length == store.section && store.selected != null" v-on:click="add_card_to(row)" class="plus" width="20" height="20">
+                                    <path d="M8 0H12V8H20V12H12V20H8V12H0V8H8Z" fill="#2b8856" />
+                                </svg>
                             </div>
                             <div class="arrow" v-bind:style="{visibility: arrows_visible ? 'visible' : 'hidden'}">
                                 <svg width="20" height="20" v-on:click="insert_after(elem)">
@@ -36,8 +39,9 @@
                         </template>
                     </div>
                     <div class="description">
-                        <div class="helptext" v-if="!all_inserted || order_revealed">{{ helptext }}</div>
+                        <div class="helptext" v-if="!all_inserted || solution_revealed">{{ helptext }}</div>
-                        <button v-if="all_inserted && !order_revealed" v-on:click="reveal_order">Reihenfolge prüfen</button>
+                        <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>
                     </div>
                     <div class="close_button" v-on:click="is_open = false">
                         <svg width="30" height="30">

quiz.css

@@ -37,6 +37,7 @@ body {
 }
 #quiz .description {
     grid-area: 1 / 2 / 3 / 3;
+    overflow-y: auto;
     padding: 10px;
 }
 #quiz .close_button {
@@ -94,6 +95,10 @@ body {
 #quiz .row .card:hover svg {
     visibility: visible;
 }
+#quiz .row svg.plus {
+    cursor: pointer;
+    vertical-align: middle;
+}
 #quiz .arrow {
     height: 0;
     width: 0;

quiz.js

@@ -27,6 +27,34 @@ let cards_content = [
         "Segen",
         "Entlassung",
     ],
+    [
+        "Die versammelte Gemeinde wartet auf ihren Herrn, um mit ihm die Eucharistie zu feiern.",
+        "Wir beginnen mit der Feier. Das Kreuzzeichen macht uns bewusst, dass Gott (Vater, Sohn und Heiliger Geist) in unserer Gemeinschaft gegenwärtig ist. Es ist ein kurzes Glaubensbekenntnis",
+        "Die Gemeinde wird willkommen geheißen. Einstimmung auf den Gottesdienst und die damit verbundenen Anliegen.",
+        "Bekennen der eigenen Schuld, die uns voneinander und von Gott trennt, im Vertrauen darauf, dass Gott uns verzeiht und uns bedingungslos annimmt.",
+        "Begrüßungsruf, mit dem früher die Herrscher begrüßt wurden. Die Gläubigen rufen ihren Herrn Jesus Christus an und bitten ihn um seine Zuwendung.",
+        "Lobpreis Gottes",
+        "Kurzes zusammenfassendes Gebet im Namen der Gemeinde, verbunden mit dem Tagesanliegen des Gottesdienstes.",
+        "Die Erfahrungen des Volkes Israel mit seinem Gott Jahwe.",
+        "Meditation zur ersten Lesung",
+        "Erfahrungen der Apostel und der ersten Christengemeinden mit der Botschaft Jesu werden an uns heutige Menschen weitergegeben.",
+        "Jubelruf zur Begrüßung Jesu Christi.",
+        "Frohe Botschaft: Geschichte Gottes mit den Menschen auf das Leben und Wirken Jesu bezogen.",
+        "Deutung und Aktualisierung der frohen Botschaft für unser Leben.",
+        "Wir antworten auf Gottes Wort und seine Zuwendung, indem wir unseren Glauben an ihn bekennen.",
+        "Die Nöte und Sorgen der Menschen werden vor Gott ausgesprochen, mit der Bitte um seine Hilfe.",
+        "Mit Brot und Wein bringen wir uns selbst vor Gott, damit auch wir verwandelt werden. Wir bringen unsere Gaben für andere (Kollekte).",
+        "Großes Lob- und Dankgebet, Wechselgebet, Einleitung zum großen Dankgebet.",
+        "Lob Gottes",
+        "Jesus ist in den Zeichen von Brot und Wein bei uns. Die Gemeinschaft mit ihm befähigt uns, in seiner Nachfolge zu leben.",
+        "Im Gebet, das Jesus uns lehrte, sind die Grundbedürfnisse des Menschen angesprochen. Jesu Bitten sind unsere Bitten.",
+        "Frieden ist ein Geschenk Gottes. Gleichzeitig sind wir dazu aufgerufen, Frieden und Versöhnung unter den Menschen zu stiften.",
+        "Lamm Gottes: Das geteilte Brot, Zeichen dafür, dass alle Anteil haben an dem einen Leib Christi. Bitte um Erbarmen.",
+        "In Gemeinschaft verbunden mit Christus und untereinander. (Kumpane, lat. Cum pane = mit Brot; Kumpane sind Menschen, die miteinander durch gemeinsames Brotessen verbunden sind.)\nWir werden auf unserem Weg zu Gott gestärkt.",
+        "Dank für die Erfahrung der Nähe Gottes und dieser Gemeinschaft, Dank für die Stärkung durch die Kommunion.",
+        "Wir erhalten Stärkung und alle guten Wünsche für den Alltag, sowie den Auftrag, Gott in der Welt zu bezeugen.",
+        "Aufforderung, das Evangelium im Alltag zu leben und zu bezeugen.",
+    ],
 ];
 
 function shuffle(a) {
@@ -38,9 +66,9 @@ function shuffle(a) {
     }
 }
 
-function shuffle_cards() {
+function shuffle_cards(section) {
     let a = [];
-    for (let i=0; i<cards_content[0].length; i++) {
+    for (let i=0; i<cards_content[section].length; i++) {
         a.push(i);
     }
     shuffle(a);
@@ -87,26 +115,25 @@ function choose_incorrects(idx_vals) {
     options[result_chain].forEach((elem) => {
         a[elem] = false;
     });
-    return a;
+    return idx_vals.map(idx => a[idx]);
 }
 
 var app = new Vue({
     el: "#quiz",
     data: {
         is_open: true,
-        cards_content,
         store: {
             section: 0,
             selected: null,
-            items: shuffle_cards(),
+            items: shuffle_cards(0),
         },
         solution: [],
-        order_revealed: false,
+        solution_revealed: false,
     },
     computed: {
         helptext: function() {
-            if (this.order_revealed) {
+            if (this.solution_revealed) {
-                if (this.order_correct) {
+                if (this.solution_correct) {
                     return "Perfekt! Die Reihenfolge ist korrekt.";
                 } else {
                     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.";
@@ -126,39 +153,51 @@ var app = new Vue({
             }
         },
         all_inserted: function() {
-            return this.solution.length == this.cards_content[0].length;
+            if (this.store.section == 0) {
-        },
+                return this.solution.length == cards_content[0].length;
-        arrows_visible: function() {
-            return this.store.selected != null;
-        },
-        incorrects: function() {
-            if (this.order_revealed) {
-                let idx_vals = this.solution.map(elem => elem.main_idx);
-                return choose_incorrects(idx_vals);
             } else {
-                return [];
+                let available = this.store.items.length;
+                let inserted = 0;
+                for (let i=0; i<this.solution.length; i++) {
+                    if (this.solution[i].idx.length > this.store.section) {
+                        inserted++;
+                    }
+                }
+                return inserted == available;
             }
         },
-        order_correct: function() {
+        arrows_visible: function() {
-            return this.order_revealed && this.all_inserted && !this.incorrects.includes(true);
+            return this.store.section == 0 && this.store.selected != null;
+        },
+        incorrects: function() {
+            if (!this.solution_revealed) {
+                return this.solution.map(elem => false);
+            }
+            if (this.store.section == 0) {
+                let idx_vals = this.solution.map(elem => elem.idx[0]);
+                return choose_incorrects(idx_vals);
+            } else {
+                return this.solution.map((elem, i) => {
+                    return elem.idx.length > this.store.section
+                        && elem.idx[this.store.section] != i;
+                });
+            }
+        },
+        solution_correct: function() {
+            return this.solution_revealed && this.all_inserted && !this.incorrects.includes(true);
         },
     },
     methods: {
         store_text: function(idx) {
-            return this.cards_content[this.store.section][idx];
+            return cards_content[this.store.section][idx];
         },
         store_card_visible: function(idx) {
-            for (let i=0; i<this.solution.length; i++) {
+            return !this.solution.some(solution => solution.idx[this.store.section] == idx);
-                if (this.solution[i].main_idx == idx) {
-                    return false;
-                }
-            }
-            return true;
         },
         store_select: function(i) {
             if (this.solution.length == 0) {
                 this.solution.push({
-                    main_idx: i,
+                    idx: [i],
                 });
             } else if (i == this.store.selected) {
                 this.store.selected = null;
@@ -166,12 +205,12 @@ var app = new Vue({
                 this.store.selected = i;
             }
         },
-        solution_main_text: function(elem) {
+        solution_text: function(elem, column) {
-            return cards_content[0][elem.main_idx];
+            return cards_content[column][elem.idx[column]];
         },
         insert_front: function() {
             this.solution.splice(0, 0, {
-                main_idx: this.store.selected,
+                idx: [this.store.selected],
             });
             this.store.selected = null;
         },
@@ -184,15 +223,29 @@ var app = new Vue({
         },
         insert_after: function(elem) {
             this.solution.splice(this.find_solution(elem)+1, 0, {
-                main_idx: this.store.selected,
+                idx: [this.store.selected],
             });
             this.store.selected = null;
         },
-        remove_solution: function(elem) {
+        remove_solution: function(row_idx) {
-            this.solution.splice(this.find_solution(elem), 1);
+            if (this.store.section == 0) {
+                this.solution.splice(row_idx, 1);
+            } else {
+                this.solution[row_idx].idx.pop();
+            }
         },
         reveal_order: function() {
-            this.order_revealed = true;
+            this.solution_revealed = true;
+        },
+        open_next_column: function() {
+            this.store.section++;
+            this.store.selected = null;
+            this.store.items = shuffle_cards(this.store.section);
+            this.solution_revealed = false;
+        },
+        add_card_to: function(row) {
+            this.solution[row].idx.push(this.store.selected);
+            this.store.selected = null;
         },
     },
 });