Add opinion scale left and right labels

Author: EkaterinaVu

examples/questionnaire/Example.vue

@@ -96,16 +96,17 @@
             subtitle: '1 - Awful, 5 - So, so, 10 - Excellent',
             type: QuestionType.IconRate,
             required: true,
-          
+            maxSize: 6,
           }),
           new QuestionModel({
             id: 'opinion_scale_num',
             tagline: 'Hi! Welcome to our demo survey 😊',
             title: 'Tell us about our service',
-            subtitle: '1 - Awful, 5 - So, so, 10 - Excellent',
             type: QuestionType.OpinionScale,
             required: true,
-            maxSize: -3
+            maxSize: 8,
+            labelLeft: 'Awful',
+            labelRight: 'Excellent'
           }),
           new QuestionModel({
             id: 'first_name',

src/assets/css/common.css

@@ -542,7 +542,8 @@ header.vff-header svg.f-logo {
 .vff p,
 .vff .f-section-text,
 .vff span.f-tagline,
-.vff span.f-sub {
+.vff span.f-sub,
+.vff .fh2 span.f-label-scale {
   font-size: 1.1em;
   line-height: 1.34;
 }
@@ -585,7 +586,8 @@ header.vff-header svg.f-logo {
 }
 
 .vff .fh2 span.f-tagline,
-.vff .fh2 span.f-sub {
+.vff .fh2 span.f-sub,
+.vff .fh2 span.f-label-scale {
   font-size: .51em;
 }
 
@@ -744,7 +746,6 @@ header.vff-header svg.f-logo {
 */
 
 .vff .field-opinionscale ul.f-radios {
-  width: 100%;
   max-width: 750px;
   min-width: auto;
   display: -ms-flexbox;
@@ -790,12 +791,30 @@ header.vff-header svg.f-logo {
   margin: 0;
 }
 
+.vff .f-label-scale-wrap {
+  display: -ms-flexbox;
+  display: flex;
+  justify-content: space-between;
+  max-width: 750px;
+  min-width: auto;
+  margin: 8px -8px 0 0;
+}
+
+.vff .f-label-scale {
+  margin-right: 8px;
+  font-weight: 400;
+  color: var(--vff-secondary-text-color);
+}
+
+.vff .f-label-scale-num {
+  display: none;
+}
+
 /* 
   field rate
 */
 
 .vff .field-iconrate ul.f-radios {
-  width: 100%;
   max-width: 750px;
   min-width: auto;
   display: -ms-flexbox;
@@ -814,6 +833,7 @@ header.vff-header svg.f-logo {
   max-width: 64px;
   height: 100%;
   flex: 1 0 0%;
+  display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   align-items: center;
@@ -829,6 +849,7 @@ header.vff-header svg.f-logo {
 
 .vff .field-iconrate ul.f-radios li .f-icon-wrap {
   flex: 1 1 0%;
+  display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   align-items: center;
@@ -1210,7 +1231,8 @@ header.vff-header svg.f-logo {
   }
 
   .vff .fh2 span.f-sub, 
-  .vff .fh2 span.f-tagline {
+  .vff .fh2 span.f-tagline,
+  .vff .fh2 span.f-label-scale {
     font-size: .58em;
   }
 
@@ -1283,7 +1305,8 @@ header.vff-header svg.f-logo {
   }
 
   .vff .fh2 span.f-sub, 
-  .vff .fh2 span.f-tagline {
+  .vff .fh2 span.f-tagline,
+  .vff .fh2 span.f-label-scale {
     font-size: .64em;
   }
 
@@ -1314,7 +1337,8 @@ header.vff-header svg.f-logo {
   }
 
   .vff .field-multiplepicturechoice ul.f-radios,
-  .vff .field-opinionscale ul.f-radios {
+  .vff .field-opinionscale ul.f-radios,
+  .vff .f-label-scale-wrap {
     max-width: 320px;
   }
 
@@ -1327,6 +1351,14 @@ header.vff-header svg.f-logo {
     -ms-flex: 0 0 calc(20% - 8px);
     flex: 0 0 calc(20% - 8px);
   }
+
+  .vff .f-label-scale-wrap {
+    flex-direction: column;
+  }
+
+  .vff .f-label-scale-num {
+    display: inline;
+  }
 }
 
 @media screen and (max-height:400px) {
@@ -1360,7 +1392,8 @@ header.vff-header svg.f-logo {
   }
 
   .vff .fh2 span.f-sub, 
-  .vff .fh2 span.f-tagline {
+  .vff .fh2 span.f-tagline,
+  .vff .fh2 span.f-label-scale {
     font-size: .6em;
   }
 

src/components/QuestionTypes/OpinionScaleType.vue

@@ -22,6 +22,16 @@
         </div>
       </li> 
     </ul>
+    <div v-if="!isIconScale && (question.labelLeft || question.labelRight)" class="f-label-scale-wrap">
+      <span class="f-label-scale">
+        <span class="f-label-scale-num">1 - </span>
+        {{ question.labelLeft }}
+      </span>
+      <span class="f-label-scale">
+        <span class="f-label-scale-num">{{ question.options.length }} - </span>
+        {{ question.labelRight }}
+      </span>
+    </div>
   </div>
 </template>
 

src/models/QuestionModel.js

@@ -132,7 +132,9 @@ export default class QuestionModel {
     this.accept = null
     this.maxSize = null
     this.rows = []
-    this.columns = []
+    this.columns = [],
+    this.labelLeft = null,
+    this.labelRight = null
 
     Object.assign(this, options)