add progress and back button

This commit is contained in:
thilo 2020-03-21 22:28:01 +01:00
parent 167e55f021
commit d5889a9ef1
2 changed files with 41 additions and 1 deletions

View file

@ -29,6 +29,7 @@
v-on:click="answerQuestion(answer.value)">{{ answer.text }}</button> v-on:click="answerQuestion(answer.value)">{{ answer.text }}</button>
</div> </div>
<router-link to="/questionmaire" style="text-decoration: none"><button class="alert">Ich brauche Hilfe zu dieser Frage</button></router-link> <router-link to="/questionmaire" style="text-decoration: none"><button class="alert">Ich brauche Hilfe zu dieser Frage</button></router-link>
<svg 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> </template>
@ -49,6 +50,9 @@
answerQuestion(value) { answerQuestion(value) {
this.$store.commit('answerQuestion', value) this.$store.commit('answerQuestion', value)
this.$store.commit('nextQuestion') this.$store.commit('nextQuestion')
},
goBack() {
this.$store.commit('previousQuestion')
} }
}, },
} }

View file

@ -1,5 +1,8 @@
<template> <template>
<div class="questionmaire"> <div class="questionmaire">
<div class="progress">
<div v-bind:key="n" v-for="n in $store.state.questions.length" v-bind:class="getDotClass(n)"></div>
</div>
<Question <Question
v-bind:type="$store.state.questions[$store.state.currentQuestion].type" v-bind:type="$store.state.questions[$store.state.currentQuestion].type"
v-bind:question="$store.state.questions[$store.state.currentQuestion].question" v-bind:question="$store.state.questions[$store.state.currentQuestion].question"
@ -14,10 +17,43 @@
components: {Question}, components: {Question},
mounted() { mounted() {
this.$store.commit("init") this.$store.commit("init")
} },
methods: {
getDotClass(n) {
if (n < this.$store.state.currentQuestion) {
return "point answered"
} else {
return "point"
}
}
},
} }
</script> </script>
<style scoped> <style scoped>
.progress {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
}
.point {
font-family: sans-serif;
padding: 0.1em 0 0 0;
margin: 0.2em;
width: 0.5em;
height: 0.5em;
border-radius: 50%;
font-size: 0.9em;
color: #000000;
text-align: center;
background: transparent;
border: 2px solid #23286b;
user-select: none;
cursor: pointer;
}
.point.answered {
background-color: #23286b;
}
</style> </style>