Lukas/Ministranten-Quiz
2
0
Fork 0
Code Issues 4 Pull Requests Releases Wiki Activity

Allow the user to place cards in rows with previous missing elements

Browse Source 
Closes #8
This commit is contained in:
Lukas Fürderer 2020-09-04 19:24:49 +02:00
parent cfed3d3d0a
commit f4ce288914
3 changed files with 18 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
index.html
View File

@ -24,16 +24,17 @@
</div>
<template v-for="(elem, row) in solution">
<div class="row">
<div
v-for="(idx, column) in elem.idx"
class="card"
v-bind:class="{incorrect: column == store.section && incorrects[row], revealed: column == store.section && elem.got_revealed}"
>
<span>{{ solution_text(elem, column) }}</span>
<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>
<template v-for="(idx, column) in elem.idx"><div
v-if="idx != null"
class="card"
v-bind:class="{incorrect: column == store.section && incorrects[row], revealed: column == store.section && elem.got_revealed}"
>
<span>{{ solution_text(elem, column) }}</span>
<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><div v-if="idx == null" class="card_placeholder">
</div></template>
<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>

4
quiz.css
View File

@ -91,6 +91,10 @@ body {
vertical-align: top;
width: calc(16.667vw - 50.5px);
}
#quiz .card_placeholder {
display: inline-block;
width: calc(16.667vw - 30.5px);
}
#quiz .card span {
white-space: pre-line;
}

3
quiz.js
View File

@ -398,6 +398,9 @@ var app = new Vue({
this.correction_visible = false;
this.solution.forEach(elem => {
elem.got_revealed = false;
if (elem.idx.length < this.store.section) {
elem.idx.push(null);
}
});
},
add_card_to: function(row) {