covidassist/src/components/Question.vue

<style scoped>
    .question {
      padding: 0.5em;
    }

    button {
      display: block; 
      width: 80%;
      margin: 0 auto;
      margin-bottom: 5%;
    }    
    
</style>

<template>
    <div class="question">
        <p>{{ question }}</p>
        <div v-if="type === 'yesno'" class="question-choice">
            <button v-on:click="$store.commit('nextQuestion')">Ja</button>
            <button v-on:click="$store.commit('nextQuestion')">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 === 'choice'" class="question-options">
            <button v-bind:key="answer.text"
                    v-for="answer in answers"
                    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>

<script>
    export default {
        name: "Question",
        props: {
            type: String,
            question: String,
            answers: Array
        },
        data() {
            return {
                selection: 0
            }
        },
        methods: {
            answerQuestion(value) {
                this.$store.commit('answerQuestion', value)
                this.$store.commit('nextQuestion')
            },
            goBack() {
                this.$store.commit('previousQuestion')
            }
        },
    }
</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>