Show headings over the solution area

Currently, the heading appear step by step, as the user make progress. Closes #7
2020-09-04 16:26:45 +02:00
parent 099cc72429
commit cfed3d3d0a
3 changed files with 30 additions and 7 deletions
--- a/index.html
+++ b/index.html
@ -13,7 +13,10 @@
            <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="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" />