ditdot-dev/vue-flow-form

multiple choice with max selected option.

6540140 opened this issue · 7 comments

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

  1. survey can control max selected item number.
  2. 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
  }
spinn commented

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!