Free header 1
Demo Survey EN
The WSel selection Questions types extends the classic selection question types with high customization possibilities.
Advanced Combo & ListBoxes (WSEL_LISTBOX & WSEL_CBO)
51 - Q308 : [Tp = WSEL_LISTBOX] Advanced listbox
WSEL_LISTBOX and WSEL_CBO extends the html Select tag to allow full html items (images for example).
In the Row Template , he havset itemheight to 50px and size (number of items) to 4,
*
⚠️ one selection Is required
52 - Q309 : [Tp = WSEL_CBO] Advanced Combobox
WSEL_CBO with same row template and modalities as above,
expand_more
53 - Q310 : [Tp = WSEL_CBO] with custom CSS,
here, itemHeight is set to auto. So you have to put your own Css in row template,
expand_more
Advanced Selection lists (WSEL_OPT & WSEL_CHK)
Each modality have 3 html zones where you can put your own html:
  • the uncheck symbol zone: visible only when unchecked
  • the check symbol zone: visible only when checked
  • the modality zone:always visible
The unchecksymbol and checksymbol can also be mixed in a customizable switcher
54 - Q314 : A rich set of check and uncheck symbols
WSEL_OPT:
noinput (non checkable)
WSEL_CHK:
noinput (non checkable)
55 - Q318 : [Tp = WSEL_OPT] Rating
this is the default setting,
56 - Q319 : Rating Advanced : Spacing intems
Since WSEL* uses flex, you can use justify-content spacing in row template custom CSS
justify-content:normal
justify-content:center
justify-content:flex-end
justify-content:space-around 🚩1
justify-content:space-between
justify-content:space-evenly
57 - Q326 : Rating Advanced : Playing with items symbols
Numbered
4em + j-c:center
Note: the font-size of first star is set to min (6em,max(4em,10vw)) to evoluate smoothtly from 4em to 6em according to screen width.
Others Stars font-size are set to fixed 4em.
div rect + j-c:space-evenly
Rounded
Circles size are set to 10% for responsiveness,
not at all
🤢 absolutely
😍
with emojis
Stars size are set with vw unit for responsiveness
58 - Q334 : The Flexwrap mode applied to WSEL_OPT (option list)
The mode Flex (default) puts items besides each other and wraps when there is no more space
Please note that for 9 stars to 12 stars, the default check template defined in the template column is applied
59 - Q335 : like Q332 but with mode=Flex and not mode=Rating
Rating Mode and FlexWrap Mode are very similar. Check and Uncheck symbols are inverted in rating mode with additionnal CSS in order to select the modalities before the selected one.
Using emojis
60 - Q337 : GridCols=4 applied to a WSEL_CHK (check box list)
The WSEL with mode=n puts n items per row.
*
⚠️ Please: between 2 and 3 selections
The WSEL_CHK and WSEL_OPT OrderWrap and OrderBlock reorder items in the order of their selection.
Of little interest for WSEL_OPT in wich selected item move to first.
61 - Q340 : Question Checkboxes (mode=FlexOrder)
in this mode, items are ordered in the order of their selection (elements are wrapped)
Before Text
Left Text
Right Text
After Text
62 - Q341 : Question with options (mode=FlexOrder)
FlexOrder works also with WSEL_OPT (of litte interest however)
Before Text
Left Text
Right Text
After Text
63 - Q342 : Question Checkboxes (mode=GridOrder)
GridOrder allow to put ordered items in multiple columns.
Please Note that use of RankOrder in checkSymbols (a number appears then in front of selected items)
Before Text
Left Text
Right Text
After Text
For each item in WSEL Controls, you can add either a comment zone or a number box zone.
  • The comment zone is sizable and can be either always visible or toggled when item is selected.
  • The Number Zone is a numeric Zone that is multiplied in summary or analysis with the value of the modality

Remark: Items are bordered in Css field of template row for better visualization.

64 - Q345 : WSEL_CHK with Comments
65 - Q346 : WSEL_CHK wirh comments and bottom Number box
66 - Q347 : WSEL_CHK wirh comments and right Number box
Validation Error. Please check your responses.
Visit us Demo survey March 2021