9c48c5f8b6
Added back button on first question
118 lines
3 KiB
Vue
118 lines
3 KiB
Vue
<template>
|
|
<div class="questionnaire">
|
|
<img id="back-button" v-on:click="goBack()" src="../assets/arrow-circle-left-outline.svg">
|
|
<div id="status-bar-wrapper">
|
|
<div class="progress">
|
|
<div v-bind:key="n" v-for="n in $store.state.questions.length" v-bind:class="getDotClass(n)"></div>
|
|
</div>
|
|
|
|
</div>
|
|
<Question
|
|
v-bind:type="$store.state.questions[$route.params.id].type"
|
|
v-bind:question="$store.state.questions[$route.params.id].question"
|
|
v-bind:answers="$store.state.questions[$route.params.id].answers"></Question>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Question from "@/components/Question";
|
|
export default {
|
|
name: "Questionnaire",
|
|
components: {Question},
|
|
methods: {
|
|
getDotClass(n) {
|
|
if (n <= this.$route.params.id) {
|
|
return "point answered"
|
|
} else {
|
|
return "point"
|
|
}
|
|
},
|
|
goBack() {
|
|
if (this.$route.params.id > 0) {
|
|
const previousQuestion = parseInt(this.$route.params.id) - 1
|
|
this.$router.push("/questionnaire/" + previousQuestion)
|
|
}
|
|
else {
|
|
this.$router.push("/")
|
|
}
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* set the applications app to 600 when viewed on desktop (width more than 906) */
|
|
@media screen and (min-width: 906px) {
|
|
.questionnaire {
|
|
width: 600px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
}
|
|
|
|
/* adjust the status bar for very thin devices (for example iPhone 5) */
|
|
@media screen and (max-width: 330px) {
|
|
.progress {
|
|
margin-top: 0.5em;
|
|
}
|
|
|
|
.point {
|
|
width: 0.35em;
|
|
height: 0.35em;
|
|
}
|
|
|
|
#back-button {
|
|
width: 2em;
|
|
}
|
|
}
|
|
|
|
/* regular status bar for devices wider than 330px */
|
|
@media screen and (min-width: 330px) {
|
|
.progress {
|
|
margin-top: 0.7em;
|
|
}
|
|
|
|
.point {
|
|
width: 0.5em;
|
|
height: 0.5em;
|
|
}
|
|
|
|
#back-button {
|
|
width: 2.5em;
|
|
}
|
|
}
|
|
|
|
#back-button {
|
|
position: absolute;
|
|
margin-left: 2%;
|
|
float: left;
|
|
|
|
}
|
|
|
|
#status-bar-wrapper {
|
|
display: block;
|
|
flex-direction: row;
|
|
/* if this transparent border gets removed, the progress bar isn't centered anymore */
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.progress {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
justify-content: center;
|
|
}
|
|
|
|
.point {
|
|
margin: 0.2em;
|
|
border-radius: 50%;
|
|
background: transparent;
|
|
border: 2px solid #23286b;
|
|
user-select: none;
|
|
}
|
|
|
|
.point.answered {
|
|
background-color: #23286b;
|
|
}
|
|
</style>
|