Skip to content

Commit cb128ff

Browse files
EkaterinaVuEkaterinaVu
committed
Add icon scale question
1 parent b842d87 commit cb128ff

File tree

7 files changed

+119
-117
lines changed

7 files changed

+119
-117
lines changed

‎examples/questionnaire/Example.vue‎

Lines changed: 6 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -94,34 +94,20 @@
9494
tagline: 'Hi! Welcome to our demo survey 😊',
9595
title: 'Tell us about our service',
9696
subtitle: '1 - Awful, 5 - So, so, 10 - Excellent',
97-
type: QuestionType.OpinionNumberScale,
97+
type: QuestionType.IconRate,
9898
required: true,
9999
min: 1,
100-
max: 10,
100+
max: 5,
101101
}),
102102
new QuestionModel({
103-
id: 'opinion_scale_text',
103+
id: 'opinion_scale_num',
104104
tagline: 'Hi! Welcome to our demo survey 😊',
105105
title: 'Tell us about our service',
106+
subtitle: '1 - Awful, 5 - So, so, 10 - Excellent',
106107
type: QuestionType.OpinionScale,
107108
required: true,
108-
options: [
109-
new ChoiceOption({
110-
label: 'Awful'
111-
}),
112-
new ChoiceOption({
113-
label: 'Poor'
114-
}),
115-
new ChoiceOption({
116-
label: 'Just OK'
117-
}),
118-
new ChoiceOption({
119-
label: 'Very good'
120-
}),
121-
new ChoiceOption({
122-
label: 'Excellent'
123-
})
124-
]
109+
min: 1,
110+
max: 10,
125111
}),
126112
new QuestionModel({
127113
id: 'first_name',

‎src/assets/css/common.css‎

Lines changed: 61 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -743,8 +743,7 @@ header.vff-header svg.f-logo {
743743
field opinion scale
744744
*/
745745

746-
.vff .field-opinionscale ul.f-radios,
747-
.vff .field-opinionnumberscale ul.f-radios {
746+
.vff .field-opinionscale ul.f-radios {
748747
width: 100%;
749748
max-width: 750px;
750749
min-width: auto;
@@ -762,8 +761,7 @@ header.vff-header svg.f-logo {
762761
flex-wrap: wrap;
763762
}
764763

765-
.vff .field-opinionscale ul.f-radios li,
766-
.vff .field-opinionnumberscale ul.f-radios li {
764+
.vff .field-opinionscale ul.f-radios li {
767765
display: -ms-flexbox;
768766
display: -webkit-box;
769767
display: flex;
@@ -777,24 +775,73 @@ header.vff-header svg.f-logo {
777775
-webkit-box-direction: normal;
778776
padding: 8px 8px 10px;
779777
margin-right: 8px;
780-
-ms-flex: 0 0 calc(20% - 8px);
781-
flex: 0 0 calc(20% - 8px);
778+
-ms-flex: 1 0 calc(10% - 8px);
779+
flex: 1 0 calc(10% - 8px);
782780
font-size: 15px;
783781
line-height: 1.38;
784782
min-height: 64px;
785783
}
786784

787-
.vff .field-opinionnumberscale ul.f-radios.f-numbers li {
788-
-ms-flex: 0 0 calc(10% - 8px);
789-
flex: 0 0 calc(10% - 8px);
785+
.vff .field-opinionscale ul.f-radios li .f-label-wrap {
786+
justify-content: center;
787+
}
788+
789+
.vff .field-opinionscale ul.f-radios li .f-label {
790+
margin: 0;
790791
}
791792

792-
.vff .field-opinionnumberscale ul.f-radios.f-numbers li .f-label-wrap {
793+
/*
794+
field rate
795+
*/
796+
797+
.vff .field-iconrate ul.f-radios {
798+
width: 100%;
799+
max-width: 750px;
800+
min-width: auto;
801+
display: -ms-flexbox;
802+
display: -webkit-box;
803+
display: flex;
804+
margin: 0 -8px 0 0;
805+
-webkit-box-orient: vertical;
806+
-webkit-box-direction: normal;
807+
-ms-flex-flow: 0 1;
808+
-webkit-box-align: stretch;
809+
-ms-flex-align: stretch;
810+
align-items: stretch;
811+
}
812+
813+
.vff .field-iconrate ul.f-radios li {
814+
max-width: 64px;
815+
height: 100%;
816+
flex: 1 0 0%;
817+
display: flex;
818+
-webkit-box-align: center;
819+
align-items: center;
820+
-webkit-box-pack: center;
793821
justify-content: center;
822+
cursor: pointer;
823+
outline: none;
824+
position: relative;
825+
margin-right: 8px;
826+
padding: 0;
794827
}
795828

796-
.vff .field-opinionnumberscale ul.f-radios.f-numbers li .f-label {
797-
margin: 0;
829+
.vff .field-iconrate ul.f-radios li .f-icon-wrap {
830+
flex: 1 1 0%;
831+
padding-right: 4px;
832+
display: flex;
833+
-webkit-box-align: center;
834+
align-items: center;
835+
flex-direction: column;
836+
}
837+
838+
.vff .field-iconrate ul.f-radios li .f-icon {
839+
margin-bottom: 8px;
840+
}
841+
842+
.vff .field-iconrate ul.f-radios li .f-icon-wrap svg{
843+
height: 100%;
844+
width: 100%;
798845
}
799846

800847
/*
@@ -1249,13 +1296,12 @@ header.vff-header svg.f-logo {
12491296
max-width: 320px;
12501297
}
12511298

1252-
.vff .field-multiplepicturechoice ul.f-radios li,
1253-
.vff .field-opinionscale ul.f-radios li {
1299+
.vff .field-multiplepicturechoice ul.f-radios li {
12541300
-ms-flex: 0 0 calc(50% - 8px);
12551301
flex: 0 0 calc(50% - 8px);
12561302
}
12571303

1258-
.vff .field-opinionnumberscale ul.f-radios.f-numbers li {
1304+
.vff .field-opinionscale ul.f-radios li {
12591305
-ms-flex: 0 0 calc(20% - 8px);
12601306
flex: 0 0 calc(20% - 8px);
12611307
}

‎src/components/FlowFormQuestion.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@
115115
import FlowFormFileType from './QuestionTypes/FileType.vue'
116116
import FlowFormMatrixType from './QuestionTypes/MatrixType.vue'
117117
import FlowFormOpinionScaleType from './QuestionTypes/OpinionScaleType.vue'
118-
import FlowFormOpinionNumberScaleType from './QuestionTypes/OpinionNumberScaleType.vue'
118+
import FlowFormIconRateType from './QuestionTypes/IconRateType.vue'
119119
import { IsMobile } from '../mixins/IsMobile'
120120
121121
@@ -138,7 +138,7 @@
138138
FlowFormUrlType,
139139
FlowFormMatrixType,
140140
FlowFormOpinionScaleType,
141-
FlowFormOpinionNumberScaleType,
141+
FlowFormIconRateType,
142142
},
143143
144144
props: {

‎src/components/QuestionTypes/IconRateType.vue‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<script>
2+
/*
3+
Copyright (c) 2020 - present, DITDOT Ltd. - MIT Licence
4+
https://github.com/ditdot-dev/vue-flow-form
5+
https://www.ditdot.hr/en
6+
*/
7+
8+
import OpinionScaleType from './OpinionScaleType.vue'
9+
import { QuestionType } from '../../models/QuestionModel'
10+
11+
export default {
12+
extends: OpinionScaleType,
13+
name: QuestionType.IconRate,
14+
15+
data() {
16+
return {
17+
isIconScale: true
18+
}
19+
},
20+
}
21+
</script>

‎src/components/QuestionTypes/OpinionNumberScaleType.vue‎

Lines changed: 0 additions & 61 deletions
This file was deleted.

‎src/components/QuestionTypes/OpinionScaleType.vue‎

Lines changed: 28 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,23 @@
11
<template>
22
<div class="f-radios-wrap">
3-
<ul class="f-radios" v-bind:class="{'f-numbers': isNumberScale}" role="listbox">
3+
<ul class="f-radios" role="listbox">
44
<li
55
v-for="(option, index) in question.options"
66
v-on:click.prevent="toggleAnswer(option)"
77
v-bind:class="{'f-selected': option.selected}"
88
v-bind:key="'m' + index"
9-
v-bind:aria-label="getLabel(index)"
9+
v-bind:aria-label="getLabel(option.value)"
1010
role="option"
1111
>
12-
<div class="f-label-wrap">
13-
<span v-if="!isNumberScale" class="f-key">{{ getToggleKey(index) }}</span>
12+
<div v-if="!isIconScale" class="f-label-wrap">
1413
<span v-if="option.choiceLabel()" class="f-label">{{ option.choiceLabel() }}</span>
1514
</div>
15+
<div v-else-if="isIconScale" class="f-icon-wrap">
16+
<div class="f-icon">
17+
<svg viewBox="0 0 58 47"><path class="symbolFill" d="M21 27.1L48.05.05l9.9 9.9L21 46.9.05 25.95l9.9-9.9z" fill-rule="nonzero"></path><path class="symbolOutline" d="M21 30.636L9.95 19.586 3.586 25.95 21 43.364 54.414 9.95 48.05 3.586 21 30.636zM48.05.05l9.9 9.9L21 46.9.05 25.95l9.9-9.9L21 27.1 48.05.05z" fill-rule="nonzero"></path></svg>
18+
</div>
19+
<div class="f-key">{{ getToggleKey(option.value) }}</div>
20+
</div>
1621
</li>
1722
</ul>
1823
</div>
@@ -34,7 +39,19 @@
3439
3540
data() {
3641
return {
37-
isNumberScale: false
42+
isIconScale: false
43+
}
44+
},
45+
46+
beforeMount() {
47+
if (this.question.max && !this.question.options.length) {
48+
const
49+
min = this.question.min || 1,
50+
max = this.question.max
51+
52+
for (let i = min; i <= max; i++) {
53+
this.question.options.push(new ChoiceOption({value: i.toString()}))
54+
}
3855
}
3956
},
4057
@@ -67,14 +84,14 @@
6784
},
6885
6986
/**
70-
* Listens for keyboard events (A, B, C, ...)
87+
* Listens for keyboard events (1, 2, 3, ...)
7188
*/
7289
onKeyListener($event) {
7390
if (this.active && $event.key && $event.key.length === 1) {
7491
let keyCode = $event.key.toUpperCase().charCodeAt(0)
75-
76-
if (keyCode >= 65 && keyCode <= 90) {
77-
let index = keyCode - 65
92+
console.log(keyCode)
93+
if (keyCode >= 48 && keyCode <= 57) {
94+
let index = keyCode - 49
7895
7996
if (index > -1) {
8097
let option = this.question.options[index]
@@ -91,15 +108,8 @@
91108
return this.language.ariaMultipleChoice.replace(':letter', this.getToggleKey(index))
92109
},
93110
94-
getToggleKey(index) {
95-
console.log(index)
96-
const key = 65 + index
97-
98-
if (key <= 90) {
99-
return String.fromCharCode(key)
100-
}
101-
102-
return ''
111+
getToggleKey(num) {
112+
return num
103113
},
104114
105115
toggleAnswer(option) {

‎src/models/QuestionModel.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export const QuestionType = Object.freeze({
2222
Url: 'FlowFormUrlType',
2323
Matrix: 'FlowFormMatrixType',
2424
OpinionScale: 'FlowFormOpinionScaleType',
25-
OpinionNumberScale: 'FlowFormOpinionNumberScaleType',
25+
IconRate: 'FlowFormIconRateType',
2626
})
2727

2828
export const DropdownOptionBlank = Object.freeze({

0 commit comments

Comments
 (0)