From cfed3d3d0a7da18c2a9744b193897833fa305f7a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lukas=20F=C3=BCrderer?= <l.fuerderer@gmail.com>
Date: Fri, 4 Sep 2020 16:26:45 +0200
Subject: [PATCH] Show headings over the solution area

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

Closes #7
---
 index.html |  5 ++++-
 quiz.css   | 24 ++++++++++++++++++------
 quiz.js    |  8 ++++++++
 3 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index 73409ce..c1fafae 100644
--- 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" />
diff --git a/quiz.css b/quiz.css
index 1ca01a1..f8a25b6 100644
--- a/quiz.css
+++ b/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;
diff --git a/quiz.js b/quiz.js
index 893f413..972c0fa 100644
--- a/quiz.js
+++ b/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) {