covidassist/src/views/HelpPage.vue

<style scoped>
  .help {
    padding: 1em;
  }

  @media screen and (min-width : 906px) {
    .help {
      width: 600px;
      margin-left: auto;
      margin-right: auto;
    }
  }

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

<template>
  <div class="help">
    <p>{{ $store.state.questions[$route.params.id].description }}</p>
    <div class="button-wrapper">
    <router-link v-bind:to="'/questionnaire/' + $route.params.id"><button>Zurück zur Frage</button></router-link>
    <br><br>
    <button v-on:click="nextQuestion()" class="alert">Ich möchte diese Frage überspringen</button>
    </div>
  </div>
</template>

<script>
    import router from "@/router";

    export default {
        name: "HelpPage",
        props: {
            text: String
        },
        methods: {
            nextQuestion() {
                this.$store.commit("setSkipped", this.$route.params.id)
                if (this.$route.params.id < this.$store.state.questions.length - 1) {
                    const nextQuestion = parseInt(this.$route.params.id) + 1
                    this.$router.push("/questionnaire/" + nextQuestion)
                }
                else {
                    this.$store.commit("setSurveyCompleted")
                    router.push('/results')
                }
            },
        },
  }
</script>