This will walk through building a survey based on a supplied web page template. Sensorpro uses jquery and bootstrap by default, so these libraries and style sheets are available by default.

From the home screen, add a blank survey give it a name and description.

There are 3 styles of survey which display differently:

There are quite a number of survey properties controlling various aspects of survey behavior.

There are two ways to add questions a to a survey:

This is the fastest way to add questions to a survey. This allows you to add multiple questions of the same type at the same time. Select "Bulk Add" from the questions tab.&nbsp; In this case, we will copy the questions directly from the survey page:

Paste the resulting text into the bulk add field, leaving a blank space between each question and&nbsp;selecting the question type.

Click "parse questions" and then save.&nbsp;

Repeat this process until all the questions are created.&nbsp;

Navigate to the pages tab and design the survey page. Survey pages can contain the following types of data:

To add questions to the survey page, drag and drop them to the canvas

Questions and answers created using "bulk add" will be plain text by default but it is possible to set bold, underline etc or add custom HTML.

Navigate to the questions tab. Select the question to design then using the HTML button. You will be taken to the content editor where you can style the question.

Note the Likert scale questions like the one below, differ from our usual convention in that there are no answers just question text.

There is a slight modification to the add question process. All of our questions with the exception of Free text expect at least one answer. In the above format there is only question text so a blank answer is added as shown below. This will not show when the question is displayed but satisfices our requirement to have an answer for each questions.

Navigate to the pages tab and design the survey page.&nbsp; To add HTML, drag the "Add User Defined Content" panel to the design canvas.&nbsp;

Edit the content panel. This will take you into the content editor. Select the source code button. Paste in your HTML code and save the content.

In our example, we have 3 hero images which will have logic to to decide which one shows. Each of these should be created as a separate survey line. Take care just to copy the HTML and not any of the jQuery code.&nbsp;

When we have added the 3 hero images, they will show on the design canvas as follows. Add the remaining HTML panels using the same process.&nbsp;

Adding form fields uses the same process as adding HTML. But with form fields we may want to do some further actions.&nbsp;

Sensorpro has a list of predefined form fields for each survey ideally we would map the form fields to one of the predefined survey fields. More information can be found here on these fields:&nbsp;

As part of the copy process, we renamed the input fields to use two of our predefined fields names. We changed the IDs as follows:

The extracted styles can be added in two ways:&nbsp;

To include on the survey page edit the page properties. Navigate to "Advanced logic page text" and paste in the styles.

Restyling Sensorpro questions and survey page

As we are working within a predefined structure for the survey page and questions this process is based on re-styling our default style to match as closely as possible the supplied template style. The Sensorpro styles which were modified&nbsp; to match the supplied style.

There is some logic contained with in this survey to hide and show contact details depending on how the question is answered. Sample shown below.&nbsp;

This is configured on page rules. The rule is as follows:&nbsp;

If "would you like someone from our client team to contact you by phone = yes" then&nbsp;show the contact detail on survey line 17

This survey requires page initialization as it has logic for the following:

The template contained script logic to get time zone, apply a mask to the phone field. This script was taken from the survey template supplied and added to the survey properties "Advanced logic page load"

Sensorpro rendered pages contain jquery by default and bootstrap but not&nbsp;

jquery.mask.min.js, jquery.timepicker.js,jquery.timepicker.css

These were added in on page properties "Advanced logic page text"

This survey has logic to control what questions, hero images, welcome text is displayed based on query string parameters passed in. Sensorpro had a scripting language which is used to achieve this. This is appended to the validation script above.&nbsp;

The key Sensorpro functions used are as follows.

Full script used to show and hide appropriate lines as survey is loaded.&nbsp;

This survey contains two custom input fields - phone number and time (ext_AltPhone, ext_User4). These need to be validated on page submit. This is achieved by adding validation logic to the page properties "Advanced logic page submit"&nbsp;

To validate these fields, we use the following code:&nbsp;

[Q11.0] is the mechanism we use to check if a question has been answered. In this case we are checking if question sequence 11 answer 0 is selected.

PageError.add('ext_AltPhone', 'Phone Number Required'): This triggers and error message and prevents form submission.&nbsp;

More information can be found on advanced logic functions:&nbsp;

It is key to test the process form start to finish ensuring the following: