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

Run the quiz in a dialog box to get more horizontal space

Browse Source 
- Rearrange the elements to make use of this new space
This commit is contained in:
Lukas Fürderer
2020-08-21 21:15:33 +02:00
parent 0a6a4d2cec
commit 9a855dbf7c
3 changed files with 89 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
index.html
View File

@ -9,42 +9,53 @@
</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" />
<p>Teste mit diesem Quiz dein Wissen über den Gottesdienstablauf.</p>
<button v-on:click="is_open = true">Quiz starten</button>
<div class="overlay" v-if="is_open">
<div class="dialog">
<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 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" />
<div class="description">
<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="close_button" v-on:click="is_open = false">
<svg width="30" height="30">
<path d="M4 4L26 26M4 26L26 4" stroke="#000" stroke-width="2px" />
</svg>
</div>
</template>
<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>
</div>
</div>
</body>