covidassist/src/views/Questionnaire.vue

115 lines
2.9 KiB
Vue

<template>
<div class="questionnaire">
<img id="back-button" v-if="$route.params.id != 0" 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)
}
}
},
}
</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>