Show headings over the solution area

Currently, the heading appear step by step, as the user make progress.

Closes #7

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" />

quiz.css

@@ -31,9 +31,25 @@ body {
     grid-template-rows: 30px 100px auto;
 }
 
-#quiz .solution {
+#quiz .solution_heading {
+    background-color: #666;
     border-right: 3px solid #444;
-    grid-area: 1 / 1 / 4 / 2;
+    color: #fff;
+    font-weight: bold;
+    grid-area: 1 / 1 / 2 / 2;
+    padding: 0 5px;
+}
+#quiz .solution_heading div {
+    display: inline-block;
+    margin: 4px 5px;
+    text-align: center;
+    width: calc(16.667vw - 40.5px);
+}
+#quiz .solution_body {
+    border-right: 3px solid #444;
+    grid-area: 2 / 1 / 4 / 2;
+    overflow-y: auto;
+    padding: 20px 5px;
 }
 #quiz .description {
     grid-area: 1 / 2 / 3 / 3;
@@ -95,10 +111,6 @@ body {
     background-color: #7e6;
 }
 
-#quiz .solution {
-    overflow-y: auto;
-    padding: 20px 5px;
-}
 #quiz .row .card {
     position: relative;
     vertical-align: middle;

quiz.js

@@ -195,6 +195,14 @@ var app = new Vue({
         correction_visible: false,
     },
     computed: {
+        headings: function() {
+            return [
+                "Ablauf",
+                "Bedeutung",
+                "Biblischer Bezug",
+                "Ministrantendienst",
+            ].slice(0, this.store.section + 1);
+        },
         helptext: function() {
             if (this.correction_visible) {
                 if (this.solution_correct) {