jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CSR-111 EXAMPLE of multiple capability questions

Browse source
This commit is contained in:
Katie 2022-08-24 15:36:21 -04:00
parent 9c40093144
commit 6626122b1e
1 changed files with 68 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

153
src/common-components/question-chain/question-chain.vue
View file

@ -1,16 +1,18 @@
<template> <template>
<div v-for="(q, i) in questions" :key="i"> <div v-for="(q, i) in questions" :key="i">
<transition appear name="fade" mode="out-in"> <transition appear name="fade" mode="out-in">
<buttonQuestion v-if="q.answerSelected || (q.questionSequence === currentQuestionNum)" <buttonQuestion
class="radioQuestion" v-if="q.answerSelected || (q.questionSequence === currentQuestionNum)"
class="radioQuestion"
:class="(q.questionSequence === currentQuestionNum) && 'current-question'" :class="(q.questionSequence === currentQuestionNum) && 'current-question'"
:questionText="q.questionText" :questionText="q.questionText"
:answers="q.answers" :answers="q.answers"
:groupName="`${keyString}-${q.questionSequence}`" :groupName="`${keyString}-${q.questionSequence}`"
v-model="q.answerSelected" v-model="q.answerSelected"
@isCheckedChanged="handleAnswer" @isCheckedChanged="handleAnswer"
isRequired isRequired
:validationRules="validationRules" /> :validationRules="validationRules"
/>
</transition> </transition>
</div> </div>
</template> </template>
@ -20,76 +22,65 @@ import buttonQuestion from "@/common-components/button-question/button-question"
import { useValidateForm } from "vee-validate"; import { useValidateForm } from "vee-validate";
export default { export default {
name: "questionChain", name: "questionChain",
data() { data() {
return { return {
currentQuestionNum: 0, currentQuestionNum: 0,
questions: [], questions: [],
}; };
}, },
props: { props: {
questionData: Object, questionData: Object,
validationRules: String, validationRules: String,
modelValue: Array, modelValue: Array,
partIndex: Number, partIndex: Number,
keyString: String, keyString: String,
}, },
async created() { async created() {
await this.setupQuestionChain(); // validate form upon create to prevent out of sync / persistent valid states
}, await useValidateForm(); // do a test validation check, without triggering full validation
methods: {
async setupQuestionChain(validate = true) {
// validate form upon create to prevent out of sync / persistent valid states
if (validate)
await useValidateForm(); // do a test validation check, without triggering full validation
this.questionData.map((q, i) => { this.questionData.map((q, i) => {
let answerPair = []; let answerPair = [];
const question = { const question = {
questionText: q.questionText, questionText: q.questionText,
questionSequence: q.questionSequence, questionSequence: q.questionSequence,
answers: q.answers.map((a) => { answers: q.answers.map((a) => {
answerPair.push(a.nextQuestionSequence ? a.nextQuestionSequence : a.answerResult); answerPair.push(a.nextQuestionSequence ? a.nextQuestionSequence : a.answerResult);
return { return {
Text: a.answerText, Text: a.answerText,
// Name will either be nextQuestionSequence or answerResult // Name will either be nextQuestionSequence or answerResult
// Name will be used by list-button as the input value. // Name will be used by list-button as the input value.
// It must be a single string or number, so concatenating together a string with // It must be a single string or number, so concatenating together a string with
// 4 pieces of data separated by pipe characters: // 4 pieces of data separated by pipe characters:
// question number|type of answer|answer value|answer text // question number|type of answer|answer value|answer text
Name: a.nextQuestionSequence ? Name: a.nextQuestionSequence ?
q.questionSequence + "|nextQuestion|" + a.nextQuestionSequence + "|" + a.answerText : q.questionSequence + "|nextQuestion|" + a.nextQuestionSequence + "|" + a.answerText :
q.questionSequence + "|answer|" + a.answerResult + "|" + a.answerText, q.questionSequence + "|answer|" + a.answerResult + "|" + a.answerText,
nextQuestionSequence: a.nextQuestionSequence, nextQuestionSequence: a.nextQuestionSequence,
answerResult: a.answerResult, answerResult: a.answerResult,
questionSequence: q.questionSequence, questionSequence: q.questionSequence,
questionType: a.nextQuestionSequence ? "nextQuestion" : "answer", questionType: a.nextQuestionSequence ? "nextQuestion" : "answer",
}
}),
answerSelected: q.answerSelected || "",
};
console.log("answerSelected set")
question.answerPair = answerPair;
if (!q.suppressQuestion) {
this.questions.push(question);
}
this.$watch("questions", (newValue, oldValue) => {
console.log("QUESTIONS CHANGED")
console.log("newValues: ", newValue)
console.log("oldValue: ", oldValue)
}, { deep: true })
});
if (!this.modelValue?.length > 0) {
// set this.currentQuestionNum to first valid question
this.currentQuestionNum = this.questions[0]?.questionSequence ?? 0;
// scroll the next question into view
this.$nextTick(() => {
document.querySelector('.current-question').scrollIntoView({ behavior: "smooth" });
})
} }
}, }),
answerSelected: q.answerSelected || "",
};
question.answerPair = answerPair;
if (!q.suppressQuestion) {
this.questions.push(question);
}
});
if (!this.modelValue?.length > 0) {
// set this.currentQuestionNum to first valid question
this.currentQuestionNum = this.questions[0].questionSequence;
// scroll the next question into view
this.$nextTick(() => {
document.querySelector('.current-question').scrollIntoView({behavior: "smooth"});
})
}
},
methods: {
handleAnswer(returnedAnswer) { handleAnswer(returnedAnswer) {
/* /*
returnedAnswer example format: returnedAnswer example format:
@ -119,21 +110,16 @@ export default {
const questionAnswerText = returnedAnswerArray[3]; const questionAnswerText = returnedAnswerArray[3];
const answeredQuestions = []; const answeredQuestions = [];
console.log(questionAnswerText)
console.log(returnedAnswerArray)
this.questions.forEach((q) => { this.questions.forEach((q) => {
// find this question and mark it as "answered" by populating answerSelected // find this question and mark it as "answered" by populating answerSelected
if (q.questionSequence === questionNum) { if (q.questionSequence === questionNum) {
// q.answerSelected = returnedAnswer; q.answerSelected = returnedAnswer;
console.log("answerSelected set")
q.answerNumber = questionNum; q.answerNumber = questionNum;
q.selectedAnswerText = questionAnswerText; q.selectedAnswerText = questionAnswerText;
} }
// remove all answers AFTER this question... // remove all answers AFTER this question...
// (needed in case user is changing previously answered questions) // (needed in case user is changing previously answered questions)
if ((q.questionSequence > questionNum)) { if ((q.questionSequence > questionNum)) {
console.log("deleting answerSelected")
delete q.answerSelected; delete q.answerSelected;
} }
if (q.answerSelected) { if (q.answerSelected) {
@ -152,7 +138,7 @@ export default {
this.currentQuestionNum = parseInt(questionAnswer); // update count to display next question this.currentQuestionNum = parseInt(questionAnswer); // update count to display next question
// scroll the next question into view // scroll the next question into view
this.$nextTick(() => { this.$nextTick(() => {
document.querySelector('.current-question').scrollIntoView({ behavior: "smooth" }); document.querySelector('.current-question').scrollIntoView({behavior: "smooth"});
}) })
return false; return false;
@ -160,7 +146,7 @@ export default {
// reset current question index (removes .current-question class) // reset current question index (removes .current-question class)
this.currentQuestionNum = 0; // reset count this.currentQuestionNum = 0; // reset count
// return an object with the part answer, all the answered questions, and the part index // return an object with the part answer, all the answered questions, and the part index
return { return {
answerResult: questionAnswer, answerResult: questionAnswer,
@ -174,8 +160,5 @@ export default {
components: { components: {
buttonQuestion, buttonQuestion,
}, },
watch: {
}
}; };
</script> </script>