updated questionmaire

src/components/Question.vue

@@ -1,7 +1,17 @@
 <template>
     <div class="question">
         <p>{{ question }}</p>
-        <button v-bind:key="answer" v-for="answer in answers">{{ answer }}</button>
+        <div v-if="type === 'choice'" class="question-choice">
+            <button>Ja</button>
+            <button>Nein</button>
+        </div>
+        <div v-if="type === 'slider'" class="question-slider">
+            <p>{{ selection }}</p>
+            <input v-model="selection" type="range" min="0" max="150" value="18" class="slider">
+        </div>
+        <div v-if="type === 'options'" class="question-options">
+            <button v-bind:key="answer" v-for="answer in answers">{{ answer }}</button>
+        </div>
         <router-link to="/questionmaire"><button class="alert">Ich brauche Hilfe zu dieser Frage</button></router-link>
     </div>
 </template>
@@ -10,12 +20,49 @@
     export default {
         name: "Question",
         props: {
+            type: String,
             question: String,
             answers: Array
-        }
+        },
+        data() {
+            return {
+                selection: 0
+            }
+        },
     }
 </script>
 
 <style scoped>
+    .slider {
+        -webkit-appearance: none;
+        appearance: none;
+        width: 100%;
+        height: 1em;
+        background: #d3d3d3;
+        outline: none;
+        opacity: 0.7;
+        -webkit-transition: .2s;
+        transition: opacity .2s;
+    }
+
+    .slider:hover {
+        opacity: 1;
+    }
+
+    .slider::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        appearance: none;
+        width: 2.5em;
+        height: 2.5em;
+        background: #e94a47;
+        cursor: pointer;
+    }
+
+    .slider::-moz-range-thumb {
+        width: 2.5em;
+        height: 2.5em;
+        background: #e94a47;
+        cursor: pointer;
+    }
 
 </style>

src/store/index.js

@@ -3,29 +3,41 @@ import Vuex from 'vuex'
 
 Vue.use(Vuex)
 
-export default new Vuex.Store({
-  state: {
-    currentQuestion: 0,
-    answers: [],
-    questions: [{
-      question: "Test",
-      answers: ["Answer 1", "Answer 2", "Answer 3"]
-    }]
-  },
-  mutations: {
-    nextQuestion() {
-      if(this.state.currentQuestion <=
-         this.state.questions.length - 1)
-      this.state.currentQuestion += 1
+const preQuestions = [
+    {
+        type: "slider",
+        question: "Wie alt sind Sie?"
     },
-    previousQuestion() {
-      if(this.state.currentQuestion > 0) {
-        this.state.currentQuestion -= 1
-      }
+    {
+        illustration: "",
+        type: "choice",
+        question: "Haben Sie sich in letzter Zeit in einem Risikogebiet aufgehalten?"
+    },
+    {
+        illustration: "",
+        type: "choice",
+        question: "Hatten Sie Kontakt zu Personen, die positiv auf COVID-19 getestet wurden?"
     }
-  },
-  actions: {
-  },
-  modules: {
-  }
+]
+
+export default new Vuex.Store({
+    state: {
+        currentQuestion: 0,
+        answers: [],
+        questions: preQuestions
+    },
+    mutations: {
+        nextQuestion() {
+            if (this.state.currentQuestion <=
+                this.state.questions.length - 1)
+                this.state.currentQuestion += 1
+        },
+        previousQuestion() {
+            if (this.state.currentQuestion > 0) {
+                this.state.currentQuestion -= 1
+            }
+        }
+    },
+    actions: {},
+    modules: {}
 })

src/views/Questionnaire.vue

@@ -1,7 +1,9 @@
 <template>
     <div class="questionmaire">
-        <Question v-bind:question="$store.state.questions[$store.state.currentQuestion].question"
-                  v-bind:answers="$store.state.questions[$store.state.currentQuestion].answers"></Question>
+        <Question
+                v-bind:type="$store.state.questions[$store.state.currentQuestion].type"
+                v-bind:question="$store.state.questions[$store.state.currentQuestion].question"
+                v-bind:answers="$store.state.questions[$store.state.currentQuestion].answers"></Question>
     </div>
 </template>