119 lines
No EOL
3.9 KiB
Vue
119 lines
No EOL
3.9 KiB
Vue
<template>
|
|
<div v-for="(q, i) in questions" :key="i">
|
|
<transition appear name="fade" mode="out-in">
|
|
<buttonQuestion
|
|
v-if="q.questionSequence === currentQuestion"
|
|
class="radioQuestion"
|
|
:questionText="q.questionText"
|
|
:answers="q.answers"
|
|
:groupName="`${questionData.glassName}-${questionData.glassLocation}-${i}`"
|
|
textPosition="text-start"
|
|
v-model="selectedValue"
|
|
:isRequired=true
|
|
:validationRules="validationRules"
|
|
:clearOnUnmount=false
|
|
/>
|
|
</transition>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import buttonQuestion from "@/common-components/button-question/button-question";
|
|
|
|
export default {
|
|
name: "questionChain",
|
|
data() {
|
|
return {
|
|
currentQuestion: 1,
|
|
answeredQuestions: [],
|
|
};
|
|
},
|
|
props: {
|
|
questionData: Object,
|
|
validationRules: String,
|
|
modelValue: Array,
|
|
},
|
|
computed: {
|
|
|
|
questions() {
|
|
const questions = this.questionData.partQuestions.map((q, i) => {
|
|
return {
|
|
questionText: q.questionText,
|
|
questionSequence: q.questionSequence,
|
|
answers: q.answers.map((a) => {
|
|
return {
|
|
Text: a.answerText,
|
|
// Name will either be nextQuestionSequence or answerResult
|
|
Name: a.nextQuestionSequence ? a.nextQuestionSequence : "answer-" + a.answerResult,
|
|
nextQuestionSequence: a.nextQuestionSequence,
|
|
answerResult: a.answerResult,
|
|
}
|
|
})
|
|
}
|
|
});
|
|
// add an empty item to be array[0] since we start with 1
|
|
questions.unshift({ "DeliberatelyBlankObject": "This object has been added as a placeholder only for question #0"});
|
|
return questions;
|
|
},
|
|
selectedValue: {
|
|
get: function() {
|
|
return this.modelValue;
|
|
},
|
|
set: function(returnedAnswer) {
|
|
const isNewModelValueComplete = this.getNewModelValue(returnedAnswer);
|
|
|
|
if (isNewModelValueComplete) {
|
|
this.$emit("update:modelValue", isNewModelValueComplete);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
getNewModelValue(returnedAnswer) {
|
|
if (!returnedAnswer || !Array.isArray(returnedAnswer)) { return false }
|
|
const lastAnswer = returnedAnswer[returnedAnswer.length - 1];
|
|
const currentQuestion = this.questions[this.currentQuestion];
|
|
|
|
if (lastAnswer.indexOf("answer-") === 0) {
|
|
// if it is an answerResult
|
|
const finalAnswer = lastAnswer.slice(7);
|
|
|
|
const currentQuestionSelectedAnswer = currentQuestion.answers.find(
|
|
({ answerResult }) => answerResult === finalAnswer
|
|
);
|
|
|
|
// add current item to list of answered questions
|
|
this.answeredQuestions.push(
|
|
{
|
|
questionText: currentQuestion.questionText,
|
|
selectedAnswerText: currentQuestionSelectedAnswer.Text,
|
|
}
|
|
);
|
|
|
|
return {
|
|
answerResult: finalAnswer,
|
|
answeredQuestions: this.answeredQuestions,
|
|
};
|
|
} else {
|
|
const currentQuestionSelectedAnswer = currentQuestion.answers.find(
|
|
({ nextQuestionSequence }) => nextQuestionSequence === parseInt(lastAnswer)
|
|
);
|
|
|
|
// add current item to list of answered questions
|
|
this.answeredQuestions.push(
|
|
{
|
|
questionText: currentQuestion.questionText,
|
|
selectedAnswerText: currentQuestionSelectedAnswer.Text,
|
|
}
|
|
);
|
|
|
|
this.currentQuestion = parseInt(lastAnswer); // update count to display next question
|
|
return false;
|
|
}
|
|
}
|
|
},
|
|
components: {
|
|
buttonQuestion,
|
|
},
|
|
};
|
|
</script> |