<!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_heading">
<div class="heading" v-for="heading in headings">{{ heading }}</div>
</div>
<div class="solution_body">
<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">
<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>
</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 || correction_visible">{{ helptext }}</div>
<button v-if="revealing_text != null" v-on:click="show_correction">{{ revealing_text }}</button>
<button v-if="next_column_text != null" v-on:click="open_next_column">{{ next_column_text }}</button>
<button v-if="correction_visible && !solution_correct && !solution_revealed" v-on:click="reveal_solution">Lösung aufdecken</button>
<button v-if="finished_quiz" v-on:click="scoreboard_open = true">Auswertung anzeigen</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 v-for="row in reduced_store">
<div
class="card"
v-for="item_idx in row"
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 v-if="scoreboard_open" class="scoreboard">
<table>
<thead>
<tr>
<th></th>
<th>Bei erster Überprüfung</th>
<th>Nach Korrektur</th>
</tr>
</thead>
<tbody>
<tr v-for="(round, idx) in score">
<td>{{ score_round_description(idx) }}</td>
<td class="single_value" v-for="points in round">{{ points }} / {{ max_score_in(idx) }}</td>
</tr>
<tr>
<td class="total" colspan="3">Gesamtpunktzahl: {{ achieved_total_score }} / {{ maximum_total_score }}</td>
</tr>
</tbody>
</table>
<div class="close_button" v-on:click="scoreboard_open = false">
<svg width="30" height="30">
<path d="M4 4L26 26M4 26L26 4" stroke="#000" stroke-width="2px" />
</svg>
</div>
</div>
</div>
</div>
</body>
</html>