ditdot-dev / vue-flow-form

Create conversational conditional-logic forms with Vue.js.
https://www.ditdot.hr/en/vue-flow-form
MIT License
779 stars 174 forks source link

multiple choice with max selected option. #243

Open 6540140 opened 2 years ago

6540140 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 2 years ago

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!