174 lines
4.3 KiB
Vue
174 lines
4.3 KiB
Vue
<template>
|
|
<div class="survey-page">
|
|
<h1 class="survey-page__title">{{title}}</h1>
|
|
<survey :survey='survey'></survey>
|
|
|
|
<solution :value="solution" v-if="module.solutionsEnabled"></solution>
|
|
<div v-if="surveyComplete">
|
|
<a class="button button--primary" @click="reopen">Übung bearbeiten</a>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as SurveyVue from 'survey-vue';
|
|
import {css} from '@/survey.config'
|
|
|
|
import SURVEY_QUERY from '@/graphql/gql/surveyQuery.gql';
|
|
import MODULE_QUERY from '@/graphql/gql/moduleByIdQuery.gql';
|
|
import UPDATE_ANSWER from '@/graphql/gql/mutations/updateAnswer.gql';
|
|
import Solution from '@/components/content-blocks/Solution';
|
|
|
|
import {extractSurveySolutions} from '@/helpers/survey-solutions';
|
|
|
|
const Survey = SurveyVue.Survey;
|
|
|
|
export default {
|
|
props: ['id'],
|
|
|
|
components: {
|
|
Solution,
|
|
Survey
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
survey: this.initSurvey(),
|
|
title: '',
|
|
module: {}
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
surveyComplete() {
|
|
return this.survey && this.survey.isCompleted
|
|
},
|
|
solution() {
|
|
return {
|
|
text: this.answers.reduce((previous, answer) => {
|
|
if (!answer.answer) {
|
|
return previous
|
|
}
|
|
return `
|
|
${previous}
|
|
<h2 class="solution-text__heading">${answer.title}</h2>
|
|
<p class="solution-text__answer">${answer.answer}</p>
|
|
`
|
|
}, '')
|
|
}
|
|
},
|
|
answers() {
|
|
return this.survey.currentPage && this.survey.currentPage.elements
|
|
? this.survey.currentPage.elements.reduce(extractSurveySolutions, [])
|
|
: []
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
initSurvey(data, answer) {
|
|
let survey = new SurveyVue.Model(data);
|
|
const flatAnswers = {};
|
|
for (let k in answer) {
|
|
flatAnswers[k] = answer[k].answer;
|
|
}
|
|
survey.data = flatAnswers;
|
|
|
|
survey.onComplete.add((sender, options) => {
|
|
// sender.clear(false);
|
|
//
|
|
// sender.mode = 'display';
|
|
|
|
const data = {};
|
|
|
|
for (let k in survey.data) {
|
|
if (survey.data.hasOwnProperty(k)) {
|
|
let question = sender.getQuestionByName(k);
|
|
data[k] = {
|
|
answer: survey.data[k],
|
|
correct: question && question.correctAnswer ? question.correctAnswer : ''
|
|
};
|
|
}
|
|
}
|
|
|
|
this.$apollo.mutate({
|
|
mutation: UPDATE_ANSWER,
|
|
variables: {
|
|
input: {
|
|
answer: {
|
|
surveyId: this.id,
|
|
data: JSON.stringify(data)
|
|
}
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
survey.css = css;
|
|
survey.locale = 'de';
|
|
survey.showProgressBar = 'bottom';
|
|
|
|
return survey;
|
|
},
|
|
reopen() {
|
|
let data = this.survey.data; // save the data
|
|
this.survey.clear();
|
|
this.survey.data = data; // reapply it
|
|
}
|
|
},
|
|
|
|
apollo: {
|
|
survey: {
|
|
query: SURVEY_QUERY,
|
|
variables() {
|
|
return {
|
|
id: this.id
|
|
}
|
|
},
|
|
manual: true,
|
|
result({data, loading, networkStatus}) {
|
|
if (!loading) {
|
|
let json = JSON.parse(data.survey.data);
|
|
json.showTitle = false;
|
|
let answer = {};
|
|
if (data.survey.answer && data.survey.answer.data) {
|
|
answer = JSON.parse(data.survey.answer.data);
|
|
}
|
|
|
|
this.survey = this.initSurvey(json, answer);
|
|
this.title = json.title;
|
|
const module = data.survey.module;
|
|
|
|
this.$apollo.addSmartQuery('module', {
|
|
query: MODULE_QUERY,
|
|
variables: {
|
|
id: module.id
|
|
}
|
|
});
|
|
}
|
|
},
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/styles/_variables.scss";
|
|
@import "@/styles/_mixins.scss";
|
|
|
|
.survey-page {
|
|
max-width: 800px;
|
|
display: grid;
|
|
grid-template-rows: auto 1fr;
|
|
grid-auto-rows: auto;
|
|
grid-row-gap: $large-spacing;
|
|
justify-self: center;
|
|
padding: 100px 0;
|
|
width: 100%;
|
|
|
|
&__title {
|
|
@include meta-title;
|
|
margin: 0;
|
|
}
|
|
}
|
|
</style>
|