add progress and back button

src/components/Question.vue

@@ -29,6 +29,7 @@
                     v-on:click="answerQuestion(answer.value)">{{ answer.text }}</button>
         </div>
         <router-link to="/questionmaire" style="text-decoration: none"><button class="alert">Ich brauche Hilfe zu dieser Frage</button></router-link>
+        <svg v-on:click="goBack()" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48"><path fill="none" d="M0 0h24v24H0z"/><path d="M8 11.333l10.223-6.815a.5.5 0 0 1 .777.416v14.132a.5.5 0 0 1-.777.416L8 12.667V19a1 1 0 0 1-2 0V5a1 1 0 1 1 2 0v6.333z"/></svg>
     </div>
 </template>
 
@@ -49,6 +50,9 @@
             answerQuestion(value) {
                 this.$store.commit('answerQuestion', value)
                 this.$store.commit('nextQuestion')
+            },
+            goBack() {
+                this.$store.commit('previousQuestion')
             }
         },
     }

src/views/Questionnaire.vue

@@ -1,5 +1,8 @@
 <template>
     <div class="questionmaire">
+        <div class="progress">
+            <div v-bind:key="n" v-for="n in $store.state.questions.length" v-bind:class="getDotClass(n)"></div>
+        </div>
         <Question
                 v-bind:type="$store.state.questions[$store.state.currentQuestion].type"
                 v-bind:question="$store.state.questions[$store.state.currentQuestion].question"
@@ -14,10 +17,43 @@
         components: {Question},
         mounted() {
             this.$store.commit("init")
-        }
+        },
+        methods: {
+            getDotClass(n) {
+                if (n < this.$store.state.currentQuestion) {
+                    return "point answered"
+                } else {
+                    return "point"
+                }
+            }
+        },
     }
 </script>
 
 <style scoped>
+    .progress {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        justify-content: center;
+    }
+    .point {
+        font-family: sans-serif;
+        padding: 0.1em 0 0 0;
+        margin: 0.2em;
+        width: 0.5em;
+        height: 0.5em;
+        border-radius: 50%;
+        font-size: 0.9em;
+        color: #000000;
+        text-align: center;
+        background: transparent;
+        border: 2px solid #23286b;
+        user-select: none;
+        cursor: pointer;
+    }
+    .point.answered {
+        background-color: #23286b;
+    }
 
 </style>