HTML Ranges are used to customize the way questions are displayed to respondents. Because the ranges are highly customizable, the HTML will override some of the basic question settings in the survey editor (like page breaks within the range, conditional logic and validation), so be sure to account for this when programming the HTML.
The basic premise of an HTML range is that the HTML code you modify will organize and present each of the various questions, which are the input box elements you see in the default code. An input element for each question is required to be in the code, but whether or not you wish to present the question or record a hidden default value, is up to you. If you would like to keep a question hidden, leave the input type as "hidden," such as in the example code below.
If you have a hidden element like the above question, you will need to enter a default value (otherwise, the question does not need to be in the HTML range). Simply enter your default value in between the quotation marks of the value parameter, so it looks like the following (you can enter a number or a text string for the value):
If you would like the question to be visible to the respondent, change the input TYPE from "hidden" to its respective HTML type, which are represented by the following:
Converting a Matrix Table into HTML Range
- Program table using regular table builder--make sure it contains all rows and columns you want.
- Click "edit table texts", which will bring up the WYSIWYG (rich-text HTML editor). When this loads, click the HTML button in the WYSIWYG and copy all of the HTML. Save this to a text file on your computer.
- Click "cancel" at the bottom and return to the main table-editing screen. On this page, click the DELETE button and select "do not delete any questions" (this will delete the structure, not the questions).
- When you're back at the survey editor, select the first and last question you want to go into the HTML range, then click the HTML range button on the left.
- Once the HTML range loads, you will see a WYSIWYG and will have complete control over the HTML. Here you can click the HTML button and paste in your table's HTML you already created. Some things to keep in mind:
- Do not change or overwrite content at the bottom of the HTML source in the HTML range. This HTML is necessary for our Survey software.
- You can customize error message placement by using the %QDatapoint_ERROR% placeholders. The datapoint must match your question label. Unless you are intentionally suppressing an error, be sure they are placed in a visible, intuitive location for your respondents.