121 lines
3.6 KiB
Vue
121 lines
3.6 KiB
Vue
<style scoped>
|
|
.question {
|
|
padding: 0.5em;
|
|
}
|
|
|
|
button {
|
|
width: 80%;
|
|
margin-bottom: 5%;
|
|
}
|
|
|
|
</style>
|
|
|
|
<template>
|
|
<div class="question">
|
|
<p>{{ question }}</p>
|
|
<div class="buttons">
|
|
<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>
|
|
<svg v-if="$store.state.currentQuestion != 0" 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>
|
|
</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 {
|
|
router.push('/results')
|
|
}
|
|
},
|
|
goBack() {
|
|
if (this.$route.params.id > 0) {
|
|
const previousQuestion = parseInt(this.$route.params.id) - 1
|
|
this.$router.push("/questionnaire/" + previousQuestion)
|
|
}
|
|
},
|
|
},
|
|
mounted () {
|
|
document.addEventListener("backbutton", this.goBack, false);
|
|
},
|
|
beforeDestroy () {
|
|
document.removeEventListener("backbutton", this.goBack);
|
|
}
|
|
}
|
|
</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;
|
|
}
|
|
|
|
.buttons {
|
|
position: absolute;
|
|
bottom: 0;
|
|
padding: 1em;
|
|
}
|
|
</style>
|