From f4ce28891420abf92e6dccf4c31381e5e8db3802 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lukas=20F=C3=BCrderer?= <l.fuerderer@gmail.com>
Date: Fri, 4 Sep 2020 19:24:49 +0200
Subject: [PATCH] Allow the user to place cards in rows with previous missing
 elements

Closes #8
---
 index.html | 21 +++++++++++----------
 quiz.css   |  4 ++++
 quiz.js    |  3 +++
 3 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/index.html b/index.html
index c1fafae..b514d52 100644
--- a/index.html
+++ b/index.html
@@ -24,16 +24,17 @@
                         </div>
                         <template v-for="(elem, row) in solution">
                             <div class="row">
-                                <div
-                                    v-for="(idx, column) in elem.idx"
-                                    class="card"
-                                    v-bind:class="{incorrect: column == store.section && incorrects[row], revealed: column == store.section && elem.got_revealed}"
-                                >
-                                    <span>{{ solution_text(elem, column) }}</span>
-                                    <svg width=20 height=20 v-if="column == store.section && !solution_correct" v-on:click="remove_solution(row)">
-                                        <path d="M2 2L18 18M18 2L2 18" stroke="#f00" stroke-width="2px" />
-                                    </svg>
-                                </div>
+                                <template v-for="(idx, column) in elem.idx"><div
+                                        v-if="idx != null"
+                                        class="card"
+                                        v-bind:class="{incorrect: column == store.section && incorrects[row], revealed: column == store.section && elem.got_revealed}"
+                                    >
+                                        <span>{{ solution_text(elem, column) }}</span>
+                                        <svg width=20 height=20 v-if="column == store.section && !solution_correct" v-on:click="remove_solution(row)">
+                                            <path d="M2 2L18 18M18 2L2 18" stroke="#f00" stroke-width="2px" />
+                                        </svg>
+                                    </div><div v-if="idx == null" class="card_placeholder">
+                                </div></template>
                                 <svg v-if="elem.idx.length == store.section && store.selected != null" v-on:click="add_card_to(row)" class="plus" width="20" height="20">
                                     <path d="M8 0H12V8H20V12H12V20H8V12H0V8H8Z" fill="#2b8856" />
                                 </svg>
diff --git a/quiz.css b/quiz.css
index f8a25b6..7c19cc5 100644
--- a/quiz.css
+++ b/quiz.css
@@ -91,6 +91,10 @@ body {
     vertical-align: top;
     width: calc(16.667vw - 50.5px);
 }
+#quiz .card_placeholder {
+    display: inline-block;
+    width: calc(16.667vw - 30.5px);
+}
 #quiz .card span {
     white-space: pre-line;
 }
diff --git a/quiz.js b/quiz.js
index 972c0fa..83a317e 100644
--- a/quiz.js
+++ b/quiz.js
@@ -398,6 +398,9 @@ var app = new Vue({
             this.correction_visible = false;
             this.solution.forEach(elem => {
                 elem.got_revealed = false;
+                if (elem.idx.length < this.store.section) {
+                    elem.idx.push(null);
+                }
             });
         },
         add_card_to: function(row) {