Ministranten-Quiz/quiz.js

let cards_content = [
    [
        "Einzug",
        "Kreuzzeichen und liturgischer Gruß",
        "Begrüßung und Einführung in die Feier",
        "Schuldbekenntnis und Vergebungsbitte (Bußakt)",
        "Kyrie",
        "Gloria",
        "Tagesgebet",
        "Lesung (Altes Testament)",
        "Zwischengesang / Antwortpsalm",
        "Lesung (Neues Testament)",
        "Hallelujaruf",
        "Evangelium",
        "Homilie / Predigt",
        "Credo / Glaubensbekenntnis",
        "Fürbitten",
        "Gabenbereitung mit Gabengebet",
        "Eucharistisches Hochgebet: Präfation",
        "Sanctus",
        "Einsetzungsbericht / Wandlung",
        "Vaterunser",
        "Friedensgruß",
        "Brechen des Brotes / Agnus Dei – Lamm Gottes",
        "Kommunion",
        "Dank- / Schlussgebet",
        "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) {
    for (let x = a.length-1; x>0; x--) {
        let y = Math.floor(Math.random() * (x + 1));
        let temp = a[x];
        a[x] = a[y];
        a[y] = temp;
    }
}

function shuffle_cards(section) {
    let a = [];
    for (let i=0; i<cards_content[section].length; i++) {
        a.push(i);
    }
    shuffle(a);
    return a;
}

function choose_incorrects(idx_vals) {
    let options = {
        0: [],
    };
    function find_longest_chain(maxkey) {
        let longest = null;
        for (let key in options) {
            if (
                (
                    maxkey == null
                    || key <= maxkey
                )
                && (
                    longest == null
                    || options[key].length > options[longest].length
                    || (
                        options[key].length == options[longest].length
                        && Number.parseInt(key) < Number.parseInt(longest)
                    )
                )
            ) {
                longest = key;
            }
        }
        return longest;
    }
    idx_vals.forEach((val) => {
        let longest = find_longest_chain(val);
        let mychain = options[longest].slice();
        mychain.push(val);
        options[val + 1] = mychain;
    });
    let result_chain = find_longest_chain(null);
    let a = [];
    for (let i=0; i<cards_content[0].length; i++) {
        a.push(true);
    }
    options[result_chain].forEach((elem) => {
        a[elem] = false;
    });
    return idx_vals.map(idx => a[idx]);
}

var app = new Vue({
    el: "#quiz",
    data: {
        is_open: true,
        store: {
            section: 0,
            selected: null,
            items: shuffle_cards(0),
        },
        solution: [],
        solution_revealed: false,
    },
    computed: {
        helptext: function() {
            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.";
                }
            } else {
                if (this.solution.length == 0) {
                    return "Klicke rechts auf ein 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.";
                    } 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.";
                }
            }
        },
        all_inserted: function() {
            if (this.store.section == 0) {
                return this.solution.length == cards_content[0].length;
            } else {
                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;
            }
        },
        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 cards_content[this.store.section][idx];
        },
        store_card_visible: function(idx) {
            return !this.solution.some(solution => solution.idx[this.store.section] == idx);
        },
        store_select: function(i) {
            if (this.solution.length == 0) {
                this.solution.push({
                    idx: [i],
                });
            } else if (i == this.store.selected) {
                this.store.selected = null;
            } else {
                this.store.selected = i;
            }
        },
        solution_text: function(elem, column) {
            return cards_content[column][elem.idx[column]];
        },
        insert_front: function() {
            this.solution.splice(0, 0, {
                idx: [this.store.selected],
            });
            this.store.selected = null;
        },
        find_solution: function(elem) {
            for (let i=0; i<this.solution.length; i++) {
                if (this.solution[i] == elem) {
                    return i;
                }
            }
        },
        insert_after: function(elem) {
            this.solution.splice(this.find_solution(elem)+1, 0, {
                idx: [this.store.selected],
            });
            this.store.selected = null;
        },
        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.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;
        },
    },
});