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>