diff --git a/src/App.vue b/src/App.vue index 6ca0cc6..4c62c26 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,6 +1,8 @@ <template> <div id="app"> - <router-view/> + <transition name="fade"> + <router-view/> + </transition> </div> </template> @@ -96,4 +98,11 @@ line-height: 1.35em; font-size: 24px; } + + .fade-enter-active, .fade-leave-active { + transition: opacity .5s; + } + .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { + opacity: 0; + } </style> diff --git a/src/components/Question.vue b/src/components/Question.vue index 5ca5fcd..f386d7f 100644 --- a/src/components/Question.vue +++ b/src/components/Question.vue @@ -13,9 +13,22 @@ <template> <div class="question"> <p>{{ question }}</p> - <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 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 v-if="type === 'slider'" class="question-slider"> <p>{{ selection }}</p> @@ -38,6 +51,8 @@ </template> <script> + import router from "@/router"; + export default { name: "Question", props: { @@ -52,11 +67,24 @@ }, methods: { answerQuestion(value) { - this.$store.commit('answerQuestion', value) - this.$store.commit('nextQuestion') + 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() { - this.$store.commit('previousQuestion') + if (this.$route.params.id > 0) { + const previousQuestion = parseInt(this.$route.params.id) - 1 + this.$router.push("/questionnaire/" + previousQuestion) + } }, }, mounted () { @@ -101,4 +129,9 @@ cursor: pointer; } + .buttons { + position: absolute; + bottom: 0; + padding: 1em; + } </style> diff --git a/src/router/index.js b/src/router/index.js index 61e8fa9..a2d3388 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -20,12 +20,12 @@ const routes = [ component: Warning }, { - path: '/questionnaire', + path: '/questionnaire/:id', name: 'Fragebogen', component: Questionnaire }, { - path: '/questionnaire/help', + path: '/questionnaire/help/:id', name: 'Hilfe', component: HelpPage }, diff --git a/src/store/index.js b/src/store/index.js index 49f377c..adff0fb 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -1,36 +1,20 @@ import Vue from 'vue' import Vuex from 'vuex' import axios from 'axios'; -import router from "@/router"; - Vue.use(Vuex) export default new Vuex.Store({ state: { - currentQuestion: 0, answers: [], questions: [] }, mutations: { - nextQuestion() { - if (this.state.currentQuestion < - this.state.questions.length - 1) - this.state.currentQuestion += 1 - else { - router.push('/results') - } - }, - previousQuestion() { - if (this.state.currentQuestion > 0) { - this.state.currentQuestion -= 1 - } - }, startWithFirstQuestion() { this.state.currentQuestion = 0 }, - answerQuestion(state, value) { - this.state.answers[this.state.currentQuestion] = value + answerQuestion(state, pl) { + this.state.answers[pl.id] = pl.answer }, init() { axios.get('https://avian-safeguard-214619.firebaseio.com/questions.json') diff --git a/src/views/HelpPage.vue b/src/views/HelpPage.vue index e352687..c619c81 100644 --- a/src/views/HelpPage.vue +++ b/src/views/HelpPage.vue @@ -10,24 +10,36 @@ </style> <template> - <div class="help"> - <p>{{ $store.state.questions[$store.state.currentQuestion].description }}</p> - <div class="button-wrapper"> - <router-link to="/questionnaire"> - <button>Zurück zur Frage</button> - </router-link> - <router-link to="/questionnaire"> - <button v-on:click="$store.commit('nextQuestion')" class="alert">Ich möchte diese Frage überspringen</button> - </router-link> + <div class="help"> + <p>{{ $store.state.questions[$route.params.id].description }}</p> + <div class="button-wrapper"> + <router-link v-bind:to="'/questionnaire/' + $route.params.id"><button>Zurück zur Frage</button></router-link> + <br><br> + <button v-on:click="nextQuestion()" class="alert">Ich möchte diese Frage überspringen</button> + </div> </div> </div> </template> <script> - export default { - name: "HelpPage", - props: { - text: String + import router from "@/router"; + + export default { + name: "HelpPage", + props: { + text: String + }, + methods: { + nextQuestion() { + 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') + } + }, + }, } } </script> diff --git a/src/views/Questionnaire.vue b/src/views/Questionnaire.vue index 29b76b6..feeea59 100644 --- a/src/views/Questionnaire.vue +++ b/src/views/Questionnaire.vue @@ -4,9 +4,9 @@ <div v-bind:key="n" v-for="n in $store.state.questions.length" v-bind:class="getDotClass(n)"></div> </div> <Question - v-bind:type="$store.state.questions[$store.state.currentQuestion].type" - v-bind:question="$store.state.questions[$store.state.currentQuestion].question" - v-bind:answers="$store.state.questions[$store.state.currentQuestion].answers"></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> @@ -17,7 +17,7 @@ components: {Question}, methods: { getDotClass(n) { - if (n <= this.$store.state.currentQuestion) { + if (n <= this.$route.params.id) { return "point answered" } else { return "point" diff --git a/src/views/Results.vue b/src/views/Results.vue index 19f3636..a5347aa 100644 --- a/src/views/Results.vue +++ b/src/views/Results.vue @@ -1,17 +1,20 @@ <template> <div class="results"> <p>Ihre Wahrscheinlichkeit sich zu infizieren ist</p> - <p>Auf Folgendes sollten Sie achten:</p> + <p class="risk-chance alert" v-if="risk >= 66">hoch</p> + <p class="risk-chance warning" v-if="risk >= 33 && risk < 66">durchschnittlich</p> + <p class="risk-chance success" v-if="risk < 33">niedrig</p> + <p v-if="bad.length > 0">Auf Folgendes sollten Sie achten:</p> <div v-for="card in bad" v-bind:key="card.description" class="card-advice alert"> <div class="card-advice-title">{{ card.title }}</div> <div class="card-advice-description">{{ card.description }}</div> </div> - <p>Hier können Sie sich noch verbessern:</p> + <p v-if="warning.length > 0">Hier können Sie sich noch verbessern:</p> <div v-for="card in warning" v-bind:key="card.description" class="card-advice warning"> <div class="card-advice-title">{{ card.title }}</div> <div class="card-advice-description">{{ card.description }}</div> </div> - <p>Das machen Sie schon gut:</p> + <p v-if="good.length > 0">Das machen Sie schon gut:</p> <div v-for="card in good" v-bind:key="card.description" class="card-advice success"> <div class="card-advice-title">{{ card.title }}</div> <div class="card-advice-description">{{ card.description }}</div> @@ -23,12 +26,17 @@ export default { name: "Results", mounted() { - /*const biased = this.$store.state.answers.map((x, i) => { + const summed = this.$store.state.answers.map((x, i) => { return x * this.$store.state.questions[i].multiplicator - }) - const summed = biased.reduce(function(acc, current) { + }).reduce(function(acc, current) { return acc + current - }) */ + }) + + const sumMult = this.$store.state.questions.reduce(function(acc, current) { + return acc + current.multiplicator + }, 0) + + this.risk = Math.round(summed / sumMult) for(let i = 0; i < this.$store.state.answers.length; i ++) { if (this.$store.state.answers[i] < 33) { @@ -51,6 +59,7 @@ }, data() { return { + risk: -1, bad: [], warning: [], good: [] @@ -81,4 +90,18 @@ .card-advice.alert { background: rgba(233, 74, 71, 0.25); } + .risk-chance { + text-align: center; + font-size: 1.5em; + font-weight: bold; + } + .risk-chance.success { + color: #62E160; + } + .risk-chance.warning { + color: orange; + } + .risk-chance.alert { + color: #E94A47; + } </style> diff --git a/src/views/Warning.vue b/src/views/Warning.vue index 84d867c..d4f645e 100644 --- a/src/views/Warning.vue +++ b/src/views/Warning.vue @@ -25,9 +25,7 @@ </p> </div> <div class="button-wrapper"> - <router-link v-on:click="this.$store.commit('startWithFirstQuestion')" style="text-decoration:none" to="/questionnaire"> - <button>Ich möchte weiter zum Test</button> - </router-link> + <router-link style="text-decoration:none" to="/questionnaire/0"><button>Ich möchte weiter zum Test</button></router-link> </div> </div> </template>