Categorical responses
The HTML code for a categorical response is.
<tr>
<td style="">
<div></div>
<input type="
SelectionType" name="
Ref" class="
AnswerType" style="margin-left: 1em;" value="
Name" [checked=""]>
<span class="
TextType" style="">
Label</span>
</input>
</td>
</tr>
The checked="" attribute is present only when the question already has an answer (usually after a snapback or restart) and marks the respondent's current answer. This causes the radio button or check box for that answer to be preselected when the question is displayed.
For example, the question:
TeaType "Do you use tea bags, loose tea or both?" categorical [1..]
{
Bags, Loose
};
becomes:
<span class="mrQuestionText" style="">Do you use tea bags, loose tea or both?</span>
<div><br/></div>
<div></div>
<span style="display: inline-block;">
<table summary="Do you use tea bags, loose tea or both?"
class="mrQuestionTable" style="margin-left: 1em;">
<tr>
<td style="">
<div></div>
<input type="checkbox" name="_QTeaType_CBags"
class="mrMultiple" style="margin-left: 1em;"
value="Bags">
<span class="mrMultipleText" style="">Tea bags</span>
</input>
</td>
</tr>
<tr>
<td style="">
<div></div>
<input type="checkbox" name="_QTeaType_CLoose"
class="mrMultiple" style="margin-left: 1em;"
value="Loose">
<span class="mrMultipleText" style="">Loose tea</span>
</input>
</td>
</tr>
</table>
</span>
For single rows/columns, the table element UseTablesLayout attribute in the intermediate XML indicates whether the table uses tables layout. The corresponding intermediate XML is as follows:
<Questions>
- <Question>
<Style ElementAlign="NewLine" Indent="1" />
- <Table Summary="Male or Female?"
UseTablesLayout= “false”>
- <Row Y="0">
- <Cell X="0" Y="0">
- <Control Type="RadioButton"
QuestionName="_QGender_C" ElementID="_Q0_C">
- <Style ElementAlign="NewLine" Indent="1">
<Control Type="RadioButton" />
</Style>
- <Category Name="Male" CategoryID="0">
- <Label>
<Style ElementAlign="Right" />
<Text>Male</Text>
</Label>
</Category>
</Control>
</Cell>
</Row>
- <Row Y="1">
- <Cell X="0" Y="1">
- <Control Type="RadioButton"
QuestionName="_QGender_C" ElementID="_Q0_C">
- <Style ElementAlign="NewLine" Indent="1">
<Control Type="RadioButton" />
</Style>
- <Category Name="Female" CategoryID="1">
- <Label>
<Style ElementAlign="Right" />
<Text>Female</Text>
</Label>
</Category>
</Control>
</Cell>
</Row>
</Table>
</Question>
</Questions>
The UseTablesLayout attribute is retrieved in the default Question.xsl, when creating HTML codes for questions. When UseTablesLayout is false, tables are replaced with a span layout. When UseTablesLayout is true, the existing table layout is used. The rules of replacing the table layout as follows:
If UseTablesLayout = false
1 Replace table tags with span tags. Span attributes are the same as the table node with the exception that the summary attribute is removed.
2 Replace td tags with span tags. Span attributes are the same as the td node. If the categorical lists are in a single row, inline-block is used.
Note The replacement could cause slight presentation differences. ICellStyle.ColSpan and ICellStyle.RowSpan will no longer work.
Example HTML code with table and td tags is:
<div></div>
<span class="mrQuestionText" style="">Male or Female?</span>
<div><br/></div>
<div></div>
<span style=" ">
<table summary="Male or Female?" class="mrQuestionTable" style="margin-left: 1em;">
<tr>
<td style="">
<div></div>
<input type="radio" name="_QGender_C" class="mrSingle" style="margin-left: 1em;" value="Male">
<span class="mrSingleText" style="">Male</span>
</input>
</td>
</tr>
<tr>
<td style="">
<div></div>
<input type="radio" name="_QGender_C" class="mrSingle" style="margin-left: 1em;" value="Female">
<span class="mrSingleText" style="">Female</span>
</input>
</td>
</tr>
</table></span>
After replacing the table with span layout, the HTML code would be:
<div></div>
<span class="mrQuestionText" style="">Male or Female?</span>
<div><br/></div>
<div></div>
<span style=" ">
<span class="mrQuestionTable" style="margin-left: 1em ;">
<span style="">
<div></div>
<input type="radio" name="_QGender_C" class="mrSingle" style="margin-left: 1em;" value="Male">
<span class="mrSingleText" style="">Male</span>
</input>
</span ><span style="">
<div></div>
<input type="radio" name="_QGender_C" class="mrSingle" style="margin-left: 1em;" value="Female">
<span class="mrSingleText" style="">Female</span>
</input>
</span >
</ span ></span>
When categorical lists are in single column, the HTML code for a categorical response would be:
<span style="">
<div></div>
<input type="radio" name="_QGender_C" class="mrSingle" style="margin-left: 1em;" value="Male">
<span class="mrSingleText" style="">Male</span>
</input>
</span >
When categorical lists are in a single row, the HTML code for a categorical response would be:
<span style="display:inline-block;">
<div></div>
<input type="radio" name="_QGender_C" class="mrSingle" style="margin-left: 1em;" value="Male">
<span class="mrSingleText" style="">Male</span>
</input>
</span >
Note display: inline-block; ensures that responses are in the same row.
See also