Input Lists

This option enables you to create questions which have lists in the following formats:

• drop down,

• radio button, and

• check box

It's best practice to use radio buttons for single choice options. Drop downs add an extra click and really should be limited where long lists are totally unavoidable.

Adding a list based question

The format is the same as other questions except that you need to create a list of options that can be selected. To do this click on the + icon on the top right of the drop down headed Options.

This Options List, will hold any drop down lists already created for that form. You will see below that clicking the + icon enables one to access lists created outside of this form.

The first thing the user sees after clicking the + icon is this:

Create a new or re-use a shared list

This allows the user to either create a brand new list or re-use one already saved to Your Items.

In this case we have created a brand new list, which can be see below. One can see that the list needs to be given a Name and Description.

An example list

Lists have two elements:

• Option - what the customer sees

• Value - what is used for conditions names and also what is mapped in XML where eMapper is used

Lists can be re-ordered and deleted quickly and easily using the action buttons to the right of the option. I.e. the up/down/cross icons.

If you've added alternative languages to your form, i should be noted that it is also possible to support additional languages with the list options too.

As mentioned when a list is saved it is then available anywhere else on that form. I.e. it will be present in the Options list:

If it is ‘Saved to Your Items’ then it will be accessible for all forms.

If you subsequently need to change the list, you simply select the list in the Options dropdown and then click on the little pencil icon top right of the drop down beside where you add a new list i.e. the + icon.

Images in Lists

The option text within lists can be added as HTML and so it is possible to augment the format of these including the ability to add images to make the choice be an image rather than words. I.e.

Instead of adding:

Big Pothole as a list option

You could add:

<img class="radio images" 
src="../potholes_galore.jpg" 
alt="Big Pothole" 
aria-hidden="true">

This means the content of Bit Pothole is still there for screen readers/accessibility purposes, but if added for each list item you can have a nice visual 'list':

Visual Radio List

Plus, because eDesigner forms support bootstrap and fontawesome, it's also possible to add things like ratings in star format. E.g. The following is the same as five stars:

<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>

The following is the same as three stars:

<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>

If we add in the above ratings for one to five, like the above, we end up with this:

Using HTML to add a visual star rating

To get the stars to be orange will need the following added to your CSS file:

span.fa.fa-star.checked {

• color: orange;

}