Add MultiplePictureChoice question type

src/assets/css/common.css

@@ -409,7 +409,7 @@ header.vff-header svg.f-logo {
   margin-top: 22px;
 }
 
-.vff div.field-sectionbreaktype .f-answer {
+.vff div.field-sectionbreak .f-answer {
   margin-top: 18px;
 }
 
@@ -444,13 +444,13 @@ header.vff-header svg.f-logo {
 }
 
 /* ios datepicker */
-.vff.vff-is-ios  .field-datetype:not(.f-has-value) .f-answer > span {
+.vff.vff-is-ios  .field-date:not(.f-has-value) .f-answer > span {
   position: relative;
   top: 0;
   left: 0;
 }
 
-.vff.vff-is-ios  .field-datetype:not(.f-has-value) .f-answer > span::before {
+.vff.vff-is-ios  .field-date:not(.f-has-value) .f-answer > span::before {
   position: absolute;
   content: attr(data-placeholder);
   display: block;
@@ -468,16 +468,16 @@ header.vff-header svg.f-logo {
 */
 
 .vff a.f-link, 
-.vff .field-submittype .f-section-wrap a {
+.vff .field-submit .f-section-wrap a {
   color: inherit;
   border-bottom: 1px dotted;
   word-break: break-word;
 }
 
 .vff a.f-link:hover, 
 .vff a.f-link:active,  
-.vff .field-submittype .f-section-wrap a:hover, 
-.vff .field-submittype .f-section-wrap a:active {
+.vff .field-submit .f-section-wrap a:hover, 
+.vff .field-submit .f-section-wrap a:active {
  color: inherit; 
  border-bottom: none;
 }
@@ -575,7 +575,7 @@ header.vff-header svg.f-logo {
 }
 
 /*
-  f-radios (multiple-choice)
+  f-radios (multiple choice)
 */
 
 .vff ul.f-radios {
@@ -629,6 +629,64 @@ header.vff-header svg.f-logo {
   position: absolute;
 }
 
+/*
+  f-radios (multiple picture choice)
+*/
+
+.vff .field-multiplepicturechoice ul.f-radios{
+  max-width: 800px;
+  min-width: auto;
+  display: -ms-flexbox;
+  display: flex;
+  margin: 0 -8px 0 0;
+  flex-flow: 0 1;
+  -moz-box-align: stretch;
+  align-items: stretch;
+  flex-wrap: wrap;
+}
+
+.vff .field-multiplepicturechoice ul.f-radios li{
+  position: relative;
+  display: -ms-flexbox;
+  display: flex;
+  -moz-box-align: center;
+  align-items: center;
+  flex-direction: column;
+  padding: 8px 8px 10px;
+  cursor: pointer;
+  margin-bottom: 8px;
+  margin-right: 8px;
+  -ms-flex: 0 0 calc(25% - 8px);
+  flex: 0 0 calc(25% - 8px);
+  font-size: 15px;
+  line-height: 1.38;
+}
+
+.vff .field-multiplepicturechoice ul.f-radios li span.f-image{
+  display: flex;
+  display: -ms-flexbox;
+  -moz-box-align: center;
+  align-items: center;
+  -moz-box-pack: center;
+  justify-content: center;
+  overflow: hidden;
+  width: 100%;
+  height: 164px;
+  margin-bottom: 8px;
+}
+
+.vff .field-multiplepicturechoice ul.f-radios li span.f-image img{
+  margin-bottom: .8px;
+  max-height: 100%;
+  max-width: 100%;
+}
+
+.vff .field-multiplepicturechoice ul.f-radios li div.f-label-wrap{
+  width: 100%;
+  position: relative;
+  min-height: 20px;
+}
+
 /*
   footer
 */
@@ -714,8 +772,8 @@ header.vff-header svg.f-logo {
   margin-bottom: 20px;
 }
 
-.vff .field-sectionbreaktype,
-.vff .field-submittype {
+.vff .field-sectionbreak,
+.vff .field-submit {
   max-width: 920px;
 }
 
@@ -805,8 +863,8 @@ header.vff-header svg.f-logo {
 */
 
 @media only screen and (min-width: 1440px) {
-  .vff .field-sectionbreaktype,
-  .vff .field-submittype {
+  .vff .field-sectionbreak,
+  .vff .field-submit {
     max-width: 960px;
   }
 
@@ -818,8 +876,8 @@ header.vff-header svg.f-logo {
 }
 
 @media only screen and (min-width: 1920px) {
-  .vff .field-sectionbreaktype,
-  .vff .field-submittype {
+  .vff .field-sectionbreak,
+  .vff .field-submit {
     max-width: 1160px;
   }
 
@@ -884,6 +942,12 @@ header.vff-header svg.f-logo {
     padding-right: 0;
   }
 
+  .vff .field-multiplepicturechoice ul.f-radios li{
+    font-size: 14px;
+    -ms-flex: 0 0 calc(33.3333% - 8px);
+    flex: 0 0 calc(33.3333% - 8px);
+  }
+
 }
 
 @media screen and (max-width:479px) {
@@ -949,14 +1013,23 @@ header.vff-header svg.f-logo {
     font-size: .62em;
   }
 
-  .vff .field-sectionbreaktype p {
+  .vff .field-sectionbreak p {
     font-size: 1em;
   }
 
   .vff-footer .f-timer {
     font-size: 16px;
   }
 
+  .vff .field-multiplepicturechoice ul.f-radios li span.f-image{
+    height: 130px;
+  }
+
+  .vff .field-multiplepicturechoice ul.f-radios li{
+    -ms-flex: 0 0 calc(50% - 8px);
+    flex: 0 0 calc(50% - 8px);
+  }
+
 }
 
 @media screen and (max-height:400px) {

src/assets/css/themes/theme-green.css

@@ -106,13 +106,13 @@ header.vff-header svg.f-logo {
 }
 
 /*faux input type date placeholder for iOS*/
-.vff.vff-is-ios .field-datetype:not(.f-has-value) .f-answer > span::before{
+.vff.vff-is-ios .field-date:not(.f-has-value) .f-answer > span::before{
   color: var(--vff-secondary-text-color);
   font-weight: 300;
   font-size: .72em;
 }
 
-/*field-multiplechoicetype*/
+/*field-multiplechoice*/
 .vff ul.f-radios li {
   border: 1px solid var(--vff-secondary-text-color);
   font-weight: 900;
@@ -135,7 +135,7 @@ header.vff-header svg.f-logo {
   font-weight: 300;
 }
 
-/*field-dropdowntype*/
+/*field-dropdown*/
 .vff span.f-empty {
   color: var(--vff-secondary-text-color);
 }
@@ -275,7 +275,7 @@ header.vff-header svg.f-logo {
     background-color: var(--vff-main-accent-color);
   }
 
-  /*field-multiplechoicetype*/
+  /*field-multiplechoice*/
   .vff ul.f-radios li {
     color: var(--vff-secondary-text-color);
   }

src/assets/css/themes/theme-minimal.css

@@ -100,13 +100,13 @@ header.vff-header svg.f-logo{
 }
 
 /*faux input type date placeholder for iOS*/
-.vff.vff-is-ios .field-datetype:not(.f-has-value) .f-answer > span::before{
+.vff.vff-is-ios .field-date:not(.f-has-value) .f-answer > span::before{
   color: var(--vff-secondary-text-color);
   font-weight: 300;
   font-size: .72em;
 }
 
-/*field-multiplechoicetype*/
+/*field-multiplechoice*/
 .vff ul.f-radios li {
   border: 1px solid var(--vff-secondary-text-color);
 }
@@ -125,7 +125,7 @@ header.vff-header svg.f-logo{
   color: var(--vff-secondary-text-color);
 }
 
-/*field-dropdowntype*/
+/*field-dropdown*/
 .vff span.f-empty {
   color: var(--vff-secondary-text-color);
 }
@@ -278,7 +278,7 @@ header.vff-header svg.f-logo{
     background-color: var(--vff-main-accent-color);
   }
 
-  /*field-multiplechoicetype*/
+  /*field-multiplechoice*/
   .vff ul.f-radios li.f-selected{
     color: var(--vff-main-accent-color);
   }

src/assets/css/themes/theme-purple.css

@@ -116,13 +116,13 @@ header.vff-header svg.f-logo{
 }
 
 /*faux input type date placeholder for iOS*/
-.vff.vff-is-ios .field-datetype:not(.f-has-value) .f-answer > span::before{
+.vff.vff-is-ios .field-date:not(.f-has-value) .f-answer > span::before{
   color: var(--vff-secondary-text-color);
   font-weight: 300;
   font-size: .72em;
 }
 
-/*field-multiplechoicetype*/
+/*field-multiplechoice*/
 .vff ul.f-radios li {
   border: 1px solid var(--vff-secondary-form-bg-color);
   background-color: var(--vff-main-form-bg-color);
@@ -143,7 +143,7 @@ header.vff-header svg.f-logo{
   color: var(--vff-field-key-color);
 }
 
-/*field-dropdowntype*/
+/*field-dropdown*/
 .vff span.f-empty {
   color: var(--vff-secondary-text-color);
 }
@@ -265,7 +265,7 @@ header.vff-header svg.f-logo{
     background-color: rgba(44,62,80,0.8);
   }
 
-  /*field-multiplechoicetype*/
+  /*field-multiplechoice*/
   .vff .f-key {
     font-weight: 400;
   }

src/components/Question.vue

@@ -101,6 +101,7 @@
   import FlowFormEmailType from './QuestionTypes/EmailType.vue'
   import FlowFormLongTextType from './QuestionTypes/LongTextType.vue'
   import FlowFormMultipleChoiceType from './QuestionTypes/MultipleChoiceType.vue'
+  import FlowFormMultiplePictureChoiceType from './QuestionTypes/MultiplePictureChoiceType.vue'
   import FlowFormNumberType from './QuestionTypes/NumberType.vue'
   import FlowFormPasswordType from './QuestionTypes/PasswordType.vue'
   import FlowFormPhoneType from './QuestionTypes/PhoneType.vue'
@@ -119,13 +120,15 @@
       FlowFormEmailType,
       FlowFormLongTextType,
       FlowFormMultipleChoiceType,
+      FlowFormMultiplePictureChoiceType,
       FlowFormNumberType,
       FlowFormPasswordType,
       FlowFormPhoneType,
       FlowFormSectionBreakType,
       FlowFormTextType,
       FlowFormUrlType
     },
+
     props: {
       question: QuestionModel,
       language: LanguageModel,
@@ -139,25 +142,30 @@
         default: false
       }
     },
+
     mixins: [
       IsMobile
     ],
+
     data() {
       return {
         QuestionType: QuestionType,
         dataValue: null,
         debounced: false
       }
     },
+
     mounted() {
       this.focusField()
       this.dataValue = this.question.answer
 
       this.$refs.qanimate.addEventListener('animationend', this.onAnimationEnd)
     },
+
     beforeDestroy() {
       this.$refs.qanimate.removeEventListener('animationend', this.onAnimationEnd)
     },
+
     methods: {
       /**
        * Autofocus the input box of the current question
@@ -288,6 +296,7 @@
         return q.showInvalid()
       }
     },
+
     computed: {
       mainClasses: {
         cache: false,
@@ -301,7 +310,7 @@
             'f-has-value': this.$refs.questionComponent && this.$refs.questionComponent.hasValue
           }
 
-          classes['field-' + this.question.type.toLowerCase().substring(8)] = true
+          classes['field-' + this.question.type.toLowerCase().substring(8, this.question.type.length - 4)] = true
 
           return classes
         }

src/components/QuestionTypes/BaseType.vue

@@ -156,6 +156,7 @@
         return !this.question.required || this.hasValue
       }
     },
+
     computed: {
       placeholder() {
         return this.question.placeholder || this.language.placeholder