vue-flow-form icon indicating copy to clipboard operation
vue-flow-form copied to clipboard

multiple choice with max selected option.

Open 6540140 opened this issue 2 years ago • 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.

6540140 avatar Apr 04 '22 07:04 6540140

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

6540140 avatar Apr 08 '22 01:04 6540140

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: [ .......

6540140 avatar May 02 '22 09:05 6540140

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..

6540140 avatar May 06 '22 00:05 6540140

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;
  },

6540140 avatar May 11 '22 02:05 6540140

Sorry. upper function does not work. when i go back reverse question and forward. question does not displayed. when single select choice question. Sorry!

6540140 avatar May 29 '22 23:05 6540140

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
  }

6540140 avatar Jun 01 '22 11:06 6540140

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!

spinn avatar Jun 03 '22 11:06 spinn