vue-flow-form
vue-flow-form copied to clipboard
multiple choice with max selected option.
I like this program...Thanks....very much. I'm here to ask for a feature that people seem to like.
The most frequently used question type is "multipleChoice". If you create a 'maxchoicenum' setting item in the settings
- survey can control max selected item number.
- survey can move to the next question directly when multiple:false + nextStepOnAnswer: true .
people will like the function. ^^; thanks.
Sorry. wrong mention is found.
survey can move to the next question directly when user select 2 items.. when setting... multiple:true + nextStepOnAnswer: true + maxchoicenum: 2
I tried to solve upper issue..(from me ^^;). It works...(Thanks!!)
MultipleChoiceType.vue
Add below code...in methods.. ###############
methods: { validate() { if (this.question.max === 0) this.question.max = this.question.options.length; if (this.question.max >= this.question.options.filter(o => o.selected).length) { return true } }, }
In survey question page. vue.. we can add 'max'...you insert max == 0 it will works originally. #########
new QuestionModel({ id: 'a003', type: QuestionType.MultipleChoice, multiple: true, nextStepOnAnswer: true, // only used at multiple=false tagline: 'Title...', title: 'Title..~~~', subtitle: '', placeholder: '', description: '', descriptionLink: '', required: true, helpText: '', // only used at LongText & MultipleChoice helpTextShow : false, allowOther : false, // add OTHER choice at last choice sentence max: 3. options: [ .......
Sorry. upper source is not working properly. when you proceed back to previous question..and re-go forward question.. question does not displayed properly... ps. with my poor coding skill..sorry. I'll check another way..
upper bug fixed...
survey_sample.vue
new QuestionModel({ id: 'a009', //문항번호, 점프때 필요 type: QuestionType.MultipleChoice, // 설문지 타입 multiple: true, // Single Choice max: 3,
MultipleChoiceType.vue
validate() { if(this.question.multiple === false) return true; if (this.question.max === 0) { console.log("in max === 0") return false; } else { if(this.question.max >= this.question.options.filter(o => o.selected).length) { console.log("below selected length", this.question.options.filter(o => o.selected).length) return true; } else { console.log("over selected length", this.question.options.filter(o => o.selected).length) return false; }
}
return true;
},
Sorry. upper function does not work. when i go back reverse question and forward. question does not displayed. when single select choice question. Sorry!
i have write new code..not in 'validate' but in 'hasValue()'...it works ^^;
before)
hasValue() { if (this.question.options.filter(o => o.selected).length) { return true }
if (this.question.allowOther) {
return this.question.other && this.question.other.trim().length > 0
}
return false
}
after) hasValue() { if (this.question.options.filter(o => o.selected).length <= this.question.max) { console.log("this.question.max: ", this.question.options.max) return true }
if (this.question.allowOther) {
return this.question.other && this.question.other.trim().length > 0
}
return false
}
Hi @6540140,
glad to hear it works, although this check should belong to the validate() method. We'll check your suggestions and code and add this in the next version. Thanks again for your input!