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

Run the quiz in a dialog box to get more horizontal space

Browse Source 
- Rearrange the elements to make use of this new space
This commit is contained in:
Lukas Fürderer 2020-08-21 21:15:33 +02:00
parent 0a6a4d2cec
commit 9a855dbf7c
3 changed files with 89 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
index.html
View File

@ -9,21 +9,10 @@
</head>
<body>
<div id="quiz">
<div class="store">
<div
class="card"
v-for="item_idx in store.items"
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)"
>
{{ store_text(item_idx) }}
</div>
</div>
<div class="state">
<div class="helptext" v-if="!all_inserted || order_revealed">{{ helptext }}</div>
<button v-if="all_inserted && !order_revealed" v-on:click="reveal_order">Reihenfolge prüfen</button>
</div>
<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">
<div class="arrow" v-bind:style="{visibility: arrows_visible ? 'visible' : 'hidden'}">
<svg width="20" height="20" v-on:click="insert_front()">
@ -46,6 +35,28 @@
</div>
</template>
</div>
<div class="description">
<div class="helptext" v-if="!all_inserted || order_revealed">{{ helptext }}</div>
<button v-if="all_inserted && !order_revealed" v-on:click="reveal_order">Reihenfolge prüfen</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
class="card"
v-for="item_idx in store.items"
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)"
>
{{ store_text(item_idx) }}
</div>
</div>
</div>
</div>
</div>
</body>
</html>

68
quiz.css
View File

@ -13,10 +13,46 @@ body {
margin: 0 auto;
width: 960px;
}
#quiz .store {
border-bottom: 2px solid #000;
padding: 5px;
#quiz .overlay {
background-color: rgba(0, 0, 0, 0.4);
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
}
#quiz .dialog {
background-color: #fff;
height: calc(100vh - 100px);
margin: 50px;
display: grid;
grid-template-columns: calc(66.667vw - 89px) auto 30px;
grid-template-rows: 30px 100px auto;
}
#quiz .solution {
border-right: 3px solid #444;
grid-area: 1 / 1 / 4 / 2;
}
#quiz .description {
grid-area: 1 / 2 / 3 / 3;
padding: 10px;
}
#quiz .close_button {
cursor: pointer;
grid-area: 1 / 3 / 2 / 4;
}
#quiz .close_button:hover {
background-color: #e8912a;
}
#quiz .store {
border-top: 3px solid #444;
grid-area: 3 / 2 / 4 / 4;
overflow-y: auto;
padding: 5px 0 0 5px;
}
#quiz .card {
background-color: #eee;
display: inline-block;
@ -24,7 +60,7 @@ body {
min-height: 50px;
padding: 5px;
vertical-align: top;
width: 166px;
width: calc(16.667vw - 45.5px);
}
#quiz .store .card {
cursor: pointer;
@ -39,27 +75,9 @@ body {
#quiz .card.incorrect {
background-color: #faa;
}
#quiz .state {
border-bottom: 2px solid #000;
padding: 5px;
}
#quiz .state .helptext {
margin: 5px;
}
#quiz .state button {
background-color: #e8912a;
border-radius: 0;
border-width: 0;
cursor: pointer;
font-family: "Roboto Slab";
font-size: 16px;
margin: 5px;
padding: 5px;
}
#quiz .state button:hover {
background-color: #facc99;
}
#quiz .solution {
overflow-y: auto;
padding: 20px 5px;
}
#quiz .row .card {
@ -82,7 +100,7 @@ body {
}
#quiz .arrow svg {
cursor: pointer;
left: 190px;
left: calc(16.667vw - 26px);
position: relative;
top: -10px;
}

7
quiz.js
View File

@ -93,6 +93,7 @@ function choose_incorrects(idx_vals) {
var app = new Vue({
el: "#quiz",
data: {
is_open: true,
cards_content,
store: {
section: 0,
@ -112,12 +113,12 @@ var app = new Vue({
}
} else {
if (this.solution.length == 0) {
return "Klicke oben auf ein Element des Gottesdienstablaufs, um es nach unten zu übernehmen.";
return "Klicke rechts auf ein Element des Gottesdienstablaufs, um es nach links zu übernehmen.";
} else if (this.solution.length == 1) {
if (this.store.selected == null) {
return "Wähle nun von oben das nächste Element aus.";
return "Wähle nun von rechts das nächste Element aus.";
} else {
return "Klicke unten auf einen grünen Pfeil, um es an der richtigen Stelle in die Liste einzuordnen.";
return "Klicke links auf einen grünen Pfeil, um es an der richtigen Stelle in die Liste einzuordnen.";
}
} else {
return "Bringe nun auch alle weiteren Elemente in die richtige Reihenfolge.";