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",
        "Vaterunser",
        "Friedensgruß",
        "Brechen des Brotes / Agnus Dei – Lamm Gottes",
        "Kommunion",
        "Dank- / Schlussgebet",
        "Segen",
        "Entlassung",
    ],
];

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() {
    let a = [];
    for (let i=0; i<cards_content[0].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 a;
}

var app = new Vue({
    el: "#quiz",
    data: {
        cards_content,
        store: {
            section: 0,
            selected: null,
            items: shuffle_cards(),
        },
        solution: [],
        order_revealed: false,
    },
    computed: {
        helptext: function() {
            if (this.order_revealed) {
                if (this.order_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 oben auf ein Element des Gottesdienstablaufs, um es nach unten zu übernehmen.";
                } else if (this.solution.length == 1) {
                    if (this.store.selected == null) {
                        return "Wähle nun von oben das nächste Element aus.";
                    } else {
                        return "Klicke unten 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() {
            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);
            } else {
                return [];
            }
        },
        order_correct: function() {
            return this.order_revealed && this.all_inserted && !this.incorrects.includes(true);
        },
    },
    methods: {
        store_text: function(idx) {
            return this.cards_content[this.store.section][idx];
        },
        store_card_visible: function(idx) {
            for (let i=0; i<this.solution.length; i++) {
                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,
                });
            } else if (i == this.store.selected) {
                this.store.selected = null;
            } else {
                this.store.selected = i;
            }
        },
        solution_main_text: function(elem) {
            return cards_content[0][elem.main_idx];
        },
        insert_front: function() {
            this.solution.splice(0, 0, {
                main_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, {
                main_idx: this.store.selected,
            });
            this.store.selected = null;
        },
        remove_solution: function(elem) {
            this.solution.splice(this.find_solution(elem), 1);
        },
        reveal_order: function() {
            this.order_revealed = true;
        },
    },
});