diff --git a/quiz.css b/quiz.css
index 48435be..3f49940 100644
--- a/quiz.css
+++ b/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;
diff --git a/quiz.js b/quiz.js
index 9b59716..56980ff 100644
--- a/quiz.js
+++ b/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 {
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.order_correct) {
+ if (this.solution_revealed) {
+ 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;
- },
- 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);
+ if (this.store.section == 0) {
+ return this.solution.length == cards_content[0].length;
} else {
- return [];
+ let available = this.store.items.length;
+ let inserted = 0;
+ for (let i=0; i this.store.section) {
+ inserted++;
+ }
+ }
+ return inserted == available;
}
},
- order_correct: function() {
- return this.order_revealed && this.all_inserted && !this.incorrects.includes(true);
+ arrows_visible: function() {
+ 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 solution.idx[this.store.section] == idx);
},
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) {
- return cards_content[0][elem.main_idx];
+ solution_text: function(elem, column) {
+ 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) {
- this.solution.splice(this.find_solution(elem), 1);
+ remove_solution: function(row_idx) {
+ 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;
},
},
});