Lukas/Ministranten-Quiz
2
0
Fork 0
Code Issues 4 Pull Requests Releases Wiki Activity

Show headings over the solution area

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

Closes #7
This commit is contained in:
Lukas Fürderer 2020-09-04 16:26:45 +02:00
parent 099cc72429
commit cfed3d3d0a
3 changed files with 30 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@ -13,7 +13,10 @@
<button v-on:click="is_open = true">Quiz starten</button> <button v-on:click="is_open = true">Quiz starten</button>
<div class="overlay" v-if="is_open"> <div class="overlay" v-if="is_open">
<div class="dialog"> <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'}"> <div class="arrow" v-bind:style="{visibility: arrows_visible ? 'visible' : 'hidden'}">
<svg width="20" height="20" v-on:click="insert_front()"> <svg width="20" height="20" v-on:click="insert_front()">
<path d="M20 0V20L0 10Z" fill="#2b8856" /> <path d="M20 0V20L0 10Z" fill="#2b8856" />

24
quiz.css
View File

@ -31,9 +31,25 @@ body {
grid-template-rows: 30px 100px auto; grid-template-rows: 30px 100px auto;
} }
#quiz .solution { #quiz .solution_heading {
background-color: #666;
border-right: 3px solid #444; 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 { #quiz .description {
grid-area: 1 / 2 / 3 / 3; grid-area: 1 / 2 / 3 / 3;
@ -95,10 +111,6 @@ body {
background-color: #7e6; background-color: #7e6;
} }
#quiz .solution {
overflow-y: auto;
padding: 20px 5px;
}
#quiz .row .card { #quiz .row .card {
position: relative; position: relative;
vertical-align: middle; vertical-align: middle;

8
quiz.js
View File

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