Create a first draft of the quiz that lets users order the elements
This commit is contained in:
commit
1ac81b7541
51
index.html
Normal file
51
index.html
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Ministranten-Quiz</title>
|
||||||
|
<link rel="stylesheet" href="quiz.css">
|
||||||
|
<script src="vue.js"></script>
|
||||||
|
<script src="quiz.js" async></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="quiz">
|
||||||
|
<div class="store">
|
||||||
|
<div
|
||||||
|
class="card"
|
||||||
|
v-for="item_idx in store.items"
|
||||||
|
v-bind:class="{selected: item_idx == store.selected}"
|
||||||
|
v-bind:style="{visibility: store_card_visible(item_idx) ? 'visible' : 'hidden'}"
|
||||||
|
v-on:click="store_select(item_idx)"
|
||||||
|
>
|
||||||
|
{{ store_text(item_idx) }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="state">
|
||||||
|
<div class="helptext" v-if="!all_inserted || order_revealed">{{ helptext }}</div>
|
||||||
|
<button v-if="all_inserted && !order_revealed" v-on:click="reveal_order">Reihenfolge prüfen</button>
|
||||||
|
</div>
|
||||||
|
<div class="solution">
|
||||||
|
<div class="arrow" v-bind:style="{visibility: arrows_visible ? 'visible' : 'hidden'}">
|
||||||
|
<svg width="20" height="20" v-on:click="insert_front()">
|
||||||
|
<path d="M20 0V20L0 10Z" fill="#2b8856" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<template v-for="elem in solution">
|
||||||
|
<div class="row">
|
||||||
|
<div class="card" v-bind:class="{incorrect: incorrects[elem.main_idx]}">
|
||||||
|
{{ solution_main_text(elem) }}
|
||||||
|
<svg width=20 height=20 v-if="!order_correct" v-on:click="remove_solution(elem)">
|
||||||
|
<path d="M2 2L18 18M18 2L2 18" stroke="#f00" stroke-width="2px" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="arrow" v-bind:style="{visibility: arrows_visible ? 'visible' : 'hidden'}">
|
||||||
|
<svg width="20" height="20" v-on:click="insert_after(elem)">
|
||||||
|
<path d="M20 0V20L0 10Z" fill="#2b8856" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
88
quiz.css
Normal file
88
quiz.css
Normal file
@ -0,0 +1,88 @@
|
|||||||
|
body {
|
||||||
|
background-color: #2b8856;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Roboto Slab';
|
||||||
|
src: url(https://fonts.jimstatic.com/s/robotoslab/v11/BngbUXZYTXPIvIBgJJSb6s3BzlRRfKOFbvjojISmb2Rj.woff2) format('woff2');
|
||||||
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||||
|
}
|
||||||
|
#quiz {
|
||||||
|
background-color: #fff;
|
||||||
|
font-family: "Roboto Slab";
|
||||||
|
font-size: 16px;
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 960px;
|
||||||
|
}
|
||||||
|
#quiz .store {
|
||||||
|
border-bottom: 2px solid #000;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
#quiz .card {
|
||||||
|
background-color: #eee;
|
||||||
|
display: inline-block;
|
||||||
|
margin: 5px;
|
||||||
|
min-height: 50px;
|
||||||
|
padding: 5px;
|
||||||
|
vertical-align: top;
|
||||||
|
width: 166px;
|
||||||
|
}
|
||||||
|
#quiz .store .card {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
#quiz .store .card:hover {
|
||||||
|
background-color: #c7dad0;
|
||||||
|
}
|
||||||
|
#quiz .card.selected {
|
||||||
|
border: 3px solid #2b8856;
|
||||||
|
padding: 2px;
|
||||||
|
}
|
||||||
|
#quiz .card.incorrect {
|
||||||
|
background-color: #faa;
|
||||||
|
}
|
||||||
|
#quiz .state {
|
||||||
|
border-bottom: 2px solid #000;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
#quiz .state .helptext {
|
||||||
|
margin: 5px;
|
||||||
|
}
|
||||||
|
#quiz .state button {
|
||||||
|
background-color: #e8912a;
|
||||||
|
border-radius: 0;
|
||||||
|
border-width: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
font-family: "Roboto Slab";
|
||||||
|
font-size: 16px;
|
||||||
|
margin: 5px;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
#quiz .state button:hover {
|
||||||
|
background-color: #facc99;
|
||||||
|
}
|
||||||
|
#quiz .solution {
|
||||||
|
padding: 20px 5px;
|
||||||
|
}
|
||||||
|
#quiz .row .card {
|
||||||
|
position: relative;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
#quiz .row .card svg {
|
||||||
|
cursor: pointer;
|
||||||
|
position: absolute;
|
||||||
|
right: 5px;
|
||||||
|
top: 5px;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
#quiz .row .card:hover svg {
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
#quiz .arrow {
|
||||||
|
height: 0;
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
#quiz .arrow svg {
|
||||||
|
cursor: pointer;
|
||||||
|
left: 190px;
|
||||||
|
position: relative;
|
||||||
|
top: -10px;
|
||||||
|
}
|
||||||
197
quiz.js
Normal file
197
quiz.js
Normal file
@ -0,0 +1,197 @@
|
|||||||
|
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;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
11965
vue-debug.js
Normal file
11965
vue-debug.js
Normal file
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user