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