covidassist/src/components/Question.vue

106 lines
3.0 KiB
Vue

<style scoped>
.question {
padding: 0.5em;
}
button {
width: 80%;
margin-bottom: 5%;
}
.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>
<template>
<div class="question">
<p>{{ question }}</p>
<div class="button-wrapper bottom-aligned">
<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 v-bind:to="'/questionnaire/help/' + $route.params.id" style="text-decoration: none"><button class="alert">Ich brauche Hilfe zu dieser Frage</button></router-link>
</div>
</div>
</template>
<script>
import router from "@/router";
export default {
name: "Question",
props: {
type: String,
question: String,
answers: Array
},
data() {
return {
selection: 0
}
},
methods: {
answerQuestion(value) {
this.$store.commit('answerQuestion', {
id: this.$route.params.id,
answer: value
})
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')
}
}
},
mounted () {
document.addEventListener("backbutton", this.goBack, false);
},
beforeDestroy () {
document.removeEventListener("backbutton", this.goBack);
}
}
</script>