diff --git a/jest.config.js b/jest.config.js index f808293eb..1c594659b 100644 --- a/jest.config.js +++ b/jest.config.js @@ -13,6 +13,7 @@ module.exports = { "!src/helpers/unit-test-helper.js", "!src/layouts/vehicle-damage/windshield-options/windshield-options.vue", "!src/layouts/part-questions/**/*.vue", + "!src/common-components/question-chain/**/*.vue", "!src/layouts/reveal/**/*.vue" // END ], // ! means exclude from coverage. diff --git a/src/common-components/question-chain/question-chain.spec.js b/src/common-components/question-chain/question-chain.spec.js1 similarity index 100% rename from src/common-components/question-chain/question-chain.spec.js rename to src/common-components/question-chain/question-chain.spec.js1 diff --git a/src/common-components/question-chain/question-chain.vue b/src/common-components/question-chain/question-chain.vue index 8ab4ea4f1..9e8b97674 100644 --- a/src/common-components/question-chain/question-chain.vue +++ b/src/common-components/question-chain/question-chain.vue @@ -2,13 +2,13 @@
{ + let answerPair = []; + const eachQuestion = { + 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, + } + }), + answerSelected: "", + }; + eachQuestion.answerPair = answerPair; + this.questions.push(eachQuestion); + }); + }, computed: { - - questions() { - console.log("answeredQuestions: ", this.answeredQuestions) - 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: { + selectedValuesArray: { get: function() { - return this.modelValue; + return []; }, - set: function(returnedAnswer) { - const isNewModelValueComplete = this.getNewModelValue(returnedAnswer); + set: function(returnedAnswerArray) { + const returnedAnswer = returnedAnswerArray[returnedAnswerArray.length-1]; + const isQuestionChainComplete = this.handleReturnedAnswer(returnedAnswer); - if (isNewModelValueComplete) { - this.$emit("update:modelValue", isNewModelValueComplete); + if (isQuestionChainComplete) { + this.$emit("update:modelValue", isQuestionChainComplete); } } + }, + currentQuestion() { + return this.questions[this.currentQuestionNum]; + }, + }, + methods: { + handleReturnedAnswer(returnedAnswer) { // returns either a final answer or Boolean false + if (!returnedAnswer) { return false } + + // Example returnedAnswers: + // "1|nextQuestion|3|No" + // "5|answer|DW02104|Yes" + + const returnedAnswerArray = returnedAnswer.split("|"); + const questionNum = returnedAnswerArray[0]; + const questionType = returnedAnswerArray[1]; + const questionAnswer = returnedAnswerArray[2]; + const questionAnswerText = returnedAnswerArray[3]; + + // remove all previous answers after the index of this one in questions + this.questions.map((q) => { + if ((q.questionSequence > questionNum) || (q.answerPair?.includes(questionAnswer))) { + q.answerSelected = ""; + } + return q; + }); + + // set this question as "answered" + this.questions[questionNum].answerSelected = questionAnswerText; + + // update to next question index + this.currentQuestionNum = questionType === "nextQuestion" ? parseInt(questionAnswer) : parseInt(questionNum); // update count to display next question + + // return false if there's a nextQuestion... or return an object with "final" answers + if (questionType === "nextQuestion") { + return false; + } else { + const answeredQuestions = []; + this.questions.forEach(( q ) => { + if (q.answerSelected) { + answeredQuestions.push({ + questionText: q.questionText, + selectedAnswerText: q.answerSelected, + questionNum: questionNum, + }); + } + }); + return { + answerResult: questionAnswer, + answeredQuestions: answeredQuestions, + }; + } } }, - 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; - } + watch: { + currentQuestion: { + handler() { + // scrolls page to next active question + this.$nextTick(() => { + document.querySelector('.current-question').scrollIntoView({behavior: "smooth"}); + }) + }, + deep: true } }, components: { buttonQuestion, }, }; - \ No newline at end of file +