67 lines
3.6 KiB
HTML
67 lines
3.6 KiB
HTML
<!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">
|
|
<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, 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]}">
|
|
<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>
|
|
<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>
|
|
</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="description">
|
|
<div class="helptext" v-if="!all_inserted || solution_revealed">{{ helptext }}</div>
|
|
<button v-if="all_inserted && !solution_revealed" v-on:click="reveal_order">Reihenfolge prüfen</button>
|
|
<button v-if="solution_correct" v-on:click="open_next_column">Weiter</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>
|
|
<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)"
|
|
>
|
|
<span>{{ store_text(item_idx) }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|