Default XSL templates

Interviewer - Server > Reference > HTML Player component > Default XSL templates

Starting with version 6, you can customize XSL templates in the HTML Player. The default XSL templates and intermediate XSL schema are provided to assist in the customization of XSL templates. This section describes how the default XSL templates work in the HTML Player.

See Intermediate XML schema for information on the Intermediate XML schema.

Default XSL files

The HTML Player uses XSLT to create HTML source output. It uses the Player XML as input, and retrieves relevant information from the Player XML. The source HTML is then transformed by the relevant XSL templates.

The HTML Player has three default XSL templates:

Label.xsl

Question.xsl

Navigation.xsl

See Default XSL templates for more information.

HTML transformation processes

The HTML transformation processes are as follows:

1 HTML Player retrieves the page Banner nodes from the Player XML and transforms them to HTML source via the Label.xsl template. The mrBannerText node is then replaced with the HTML source in the layout template.

2 HTML Player retrieves the page Navigation nodes from the Player XML and transforms them to HTML source via the Navigation.xsl template. The mrNavBar node is then replaced with the HTML source in the Layout template.

3 HTML Player transforms the HTML source for Questions controls:

▪Question Error Message: HTML Player retrieves the question Error nodes from the Player XML and transforms them to HTML source via the Label.xsl template. The corresponding mrData node is then replaced with the HTML source in the Question template.

▪Question Banner: HTML Player retrieves the question Banner nodes from the Player XML and transforms them to HTML source via the Label.xsl template. The corresponding mrData node is then replaced with the HTML source in the Question template.

▪Question Label: HTML Player retrieves the question Label node from the Player XML and transform it to HTML source via the Label.xsl template. The corresponding mrData node is then replaced with the HTML source in the Question template.

▪Question Controls: HTML Player retrieves the Question node from the Player XML and creates the corresponding Intermediate XML against it. The Intermediate XML is then transformed to HTML source via the Question.xsl template. Finally, the corresponding mrData node is replaced with the HTML source in the Question template.

▪The corresponding mrData node is replaced with the Question template source in the Layout template.

4 Output the Layout template source.

Example HTML Player transformation

For a question defined as:

FavoritePets "What are your favorite household pets?" categorical
  {
    Dogs,
    Goldfish,
    Mice,
    Cats,
    Hamsters
  }
defaultanswer ( {Dogs, Cats} );

The corresponding Player XML is:

<Page SavePoint="FavoritePets" Project="SimpleCategorical" Language="zh-CN" Context="Question" LabelType="Label" RoutingContext="Web" SessionToken="eeenv4ahszvepnvog5tr3obojiaqaaaa" EstimatedPages="1">
<Title>
<Style ElementAlign="Right"/>
<Text>FavoritePets</Text>
</Title>
<Question QuestionName="FavoritePets" QuestionFullName="FavoritePets" QuestionDataType="Categorical">
<Style ElementAlign="NewLine" Indent="1"/>
<Label>
<Style ElementAlign="NewLine"/>
<Text>What are your favorite household pets?</Text>
</Label>
<Category Name="Dogs">
<Style ElementAlign="NewLine" Indent="1">
<Control Type="CheckButton"/>
</Style>
<Label>
<Style ElementAlign="Right"/>
<Text>Dogs</Text>
</Label>
</Category>
<Category Name="Goldfish">
<Style ElementAlign="NewLine" Indent="1">
<Control Type="CheckButton"/>
</Style>
<Label>
<Style ElementAlign="Right"/>
<Text>Goldfish</Text>
</Label>
</Category>
<Category Name="Mice">
<Style ElementAlign="NewLine" Indent="1">
<Control Type="CheckButton"/>
</Style>
<Label>
<Style ElementAlign="Right"/>
<Text>Mice</Text>
</Label>
</Category>
<Category Name="Cats">
<Style ElementAlign="NewLine" Indent="1">
<Control Type="CheckButton"/>
</Style>
<Label>
<Style ElementAlign="Right"/>
<Text>Cats</Text>
</Label>
</Category>
<Category Name="Hamsters">
<Style ElementAlign="NewLine" Indent="1">
<Control Type="CheckButton"/>
</Style>
<Label>
<Style ElementAlign="Right"/>
<Text>Hamsters</Text>
</Label>
</Category>
<Validation MaxValue="5"/>
<Response>
<Value></Value>
</Response>
</Question>
<Navigation Type="Next" IsDefault="true">
<Style ElementAlign="Right" Width="70px">
<Control Type="Button"/>
</Style>
<Label>
<Style Align="Center" ElementAlign="NewLine"/>
<Text>Next</Text>
</Label>
</Navigation>
<Navigation Type="Stop">
<Style ElementAlign="Right" Width="70px">
<Control Type="Button"/>
</Style>
<Label>
<Style Align="Center" ElementAlign="NewLine"/>
<Text>Stop</Text>
</Label>
</Navigation></Page>

HTML Player retrieves the question Label element from the Player XML and transforms it via the Label.xsl template. The following code defines how to transform HTML codes for the Label element. HTML Player transforms the Player XML Label element in the default Label.xsl template:

<xsl:template name="LabelBase">
<xsl:if test="Style/@ElementAlign = 'NewLine'">
<div></div>
</xsl:if>
<xsl:element name="span">
<xsl:if test="$bIncludeCSSStyles">
<xsl:attribute name="class"><xsl:value-of select="$sLabelClass"/></xsl:attribute>
</xsl:if>
<xsl:attribute name="style">
<xsl:call-template name="LabelStyle"/>
<xsl:if test="Style/@Width or Style/@Height">
<xsl:call-template name="SpanStyle"/>
</xsl:if>
<xsl:call-template name="BlockStyle"/>
</xsl:attribute>
<xsl:call-template name="Label"/>
</xsl:element>
</xsl:template>

First, the Div tag is created against the Style element's ElementAlign attribute (to layout the label) and the Span tag is created to contain the label's content. Then HTML Player calls the LabelStyle template in order to transform the label style. You can replace the tags with whatever you want or you can change the LabelStyle template to control the label style. In the following sample, the HTML source is transformed as follows:

<div></div>
<span class="mrQuestionText" style="">What are your favorite household pets?</span>

HTML Player retrieves all Navigation nodes and transforms them via the Navigation.xsl template. The Player XML is then converted to Intermediate XML, which is used to transform the question control via the Question.xsl template. The Intermediate XML is as follows:

<Questions>
<Question>
<Style ElementAlign="NewLine" Indent="1"/>
<Table UseTablesLayout="0" Summary="What are your favorite household pets?">
<Row Y="0">
<Cell X="0" Y="0">
<Control Type="CheckButton" QuestionName="_QFavoritePets_C" ElementID="_Q0_C">
<Style ElementAlign="NewLine" Indent="1">
<Control Type="CheckButton"/>
</Style>
<Category Name="Dogs" CategoryID="0">
<Label>
<Style ElementAlign="Right"/>
<Text>Dogs</Text>
</Label>
</Category>
</Control>
</Cell>
</Row>
<Row Y="1">
<Cell X="0" Y="1">
<Control Type="CheckButton" QuestionName="_QFavoritePets_C" ElementID="_Q0_C">
<Style ElementAlign="NewLine" Indent="1">
<Control Type="CheckButton"/>
</Style>
<Category Name="Goldfish" CategoryID="1">
<Label>
<Style ElementAlign="Right"/>
<Text>Goldfish</Text>
</Label>
</Category>
</Control>
</Cell>
</Row>
<Row Y="2">
<Cell X="0" Y="2">
<Control Type="CheckButton" QuestionName="_QFavoritePets_C" ElementID="_Q0_C">
<Style ElementAlign="NewLine" Indent="1">
<Control Type="CheckButton"/>
</Style>
<Category Name="Mice" CategoryID="2">
<Label>
<Style ElementAlign="Right"/>
<Text>Mice</Text>
</Label>
</Category>
</Control>
</Cell>
</Row>
<Row Y="3">
<Cell X="0" Y="3">
<Control Type="CheckButton" QuestionName="_QFavoritePets_C" ElementID="_Q0_C">
<Style ElementAlign="NewLine" Indent="1">
<Control Type="CheckButton"/>
</Style>
<Category Name="Cats" CategoryID="3">
<Label>
<Style ElementAlign="Right"/>
<Text>Cats</Text>
</Label>
</Category>
</Control>
</Cell>
</Row>
<Row Y="4">
<Cell X="0" Y="4">
<Control Type="CheckButton" QuestionName="_QFavoritePets_C" ElementID="_Q0_C">
<Style ElementAlign="NewLine" Indent="1">
<Control Type="CheckButton"/>
</Style>
<Category Name="Hamsters" CategoryID="4">
<Label>
<Style ElementAlign="Right"/>
<Text>Hamsters</Text>
</Label>
</Category>
</Control>
</Cell>
</Row>
</Table>
</Question>
</Questions>

The following code transforms the Intermediate XML's Question element in the default Question.xsl template. It defines how to transform the HTML code for the Intermediate XML's Question element:

<xsl:template match="Question">
<xsl:param name="bWithinTable" select="false()"/>
<xsl:if test="Style/@ElementAlign = 'NewLine'">
<xsl:choose>
<xsl:when test="position() != 1 and not($bWithinTable)">
<div><br /></div>
</xsl:when>
<xsl:otherwise>
<div></div>
</xsl:otherwise>
</xsl:choose>
</xsl:if>
<xsl:element name="span">

<xsl:attribute name="style">
<xsl:if test="not($bWithinTable)">
<xsl:if test="Style/Cell/@Width or Style/Cell/@Height">
<xsl:call-template name="SpanStyle"/>
</xsl:if>
<xsl:call-template name="BlockStyle"/>
</xsl:if>
</xsl:attribute>

<xsl:for-each select="*">
<xsl:choose>
<xsl:when test="name() = 'Control'">
<xsl:apply-templates select="."/>
</xsl:when>
<xsl:when test="name() = 'Label'">
<xsl:apply-templates select=".">
<xsl:with-param name="sLabelClass" select="'mrQuestionText'"/>
</xsl:apply-templates>
</xsl:when>
<xsl:when test="name() = 'Error'">
<xsl:apply-templates select=".">
<xsl:with-param name="sLabelClass" select="'mrErrorText'"/>
</xsl:apply-templates>
</xsl:when>
<xsl:when test="name() = 'Table'">
<xsl:apply-templates select="."/>
</xsl:when>
<xsl:when test="name() = 'Questions'">
<xsl:apply-templates/>
</xsl:when>
</xsl:choose>
</xsl:for-each>
</xsl:element>
</xsl:template>

When matching the Intermediate XML's Question element, HTML Player tries to retrieve the question style's ElementAlign attribute. It then creates the corresponding HTML tag. A Span element is then created and the SpanStyle/BlockStyle template is called to set the style. Finally, the relevant templates are called to transform the Question element's child elements. In the following sample, the HTML source is transformed as follows:

The following code transforms the Intermediate XML's Table element in the default Question.xsl template:

<xsl:template match="Table">
<xsl:param name="Orientation" select="Column" />
<xsl:choose>
<xsl:when test="@UseTablesLayout = '0'">
<xsl:element name="span">
<xsl:if test="$bIncludeCSSStyles">
<xsl:attribute name="class">mrQuestionTable</xsl:attribute>
</xsl:if>
<xsl:for-each select="parent::node()">
<xsl:attribute name="style">
<xsl:text>display:block;</xsl:text>
<xsl:call-template name="TableStyle"/>
</xsl:attribute>
</xsl:for-each>
<xsl:call-template name="SpanRow">
<xsl:with-param name="Orientation" select="$Orientation" />
</xsl:call-template>
</xsl:element>
</xsl:when>
<xsl:otherwise>

<xsl:element name="table">
<xsl:if test="@Summary">
<xsl:attribute name="summary">
<xsl:value-of select="@Summary"/>
</xsl:attribute>
</xsl:if>
<xsl:if test="$bIncludeCSSStyles">
<xsl:attribute name="class">mrQuestionTable</xsl:attribute>
</xsl:if>
<xsl:for-each select="parent::node()">
<xsl:attribute name="style">
<xsl:call-template name="TableStyle"/>
</xsl:attribute>
</xsl:for-each>
<xsl:apply-templates select="Row">
<xsl:sort select="@Y" order="ascending" data-type="number" />
</xsl:apply-templates>
</xsl:element>
</xsl:otherwise>
</xsl:choose>
</xsl:template>

When matching the Intermediate XML's Table element, the Table element's UseTablesLayout attribute is retrieved. This attribute is used to create the span or table elements to layout the question controls. In the following sample, the HTML source is transformed as follows:

If all templates use default templates, the entire Question HTML source will resemble the following:

Transformed by Label.xsl

<div></div>
<span class="mrQuestionText" style="">What are your favorite household pets?</span>
Transformed by Question.xsl
<div><br/></div>
<div></div>
<span style="">
<span class="mrQuestionTable" style="display:block;margin-left: 1em;">
<span style="">
<div></div>
<input type="checkbox" name="_QFavoritePets_CDogs" class="mrMultiple" style="margin-left: 1em;" value="Dogs">
<span class="mrMultipleText" style="">Dogs</span>
</input>
</span>
<span style="">
<div></div>
<input type="checkbox" name="_QFavoritePets_CGoldfish" class="mrMultiple" style="margin-left: 1em;" value="Goldfish">
<span class="mrMultipleText" style="">Goldfish</span>
</input>
</span>
<span style="">
<div></div>
<input type="checkbox" name="_QFavoritePets_CMice" class="mrMultiple" style="margin-left: 1em;" value="Mice">
<span class="mrMultipleText" style="">Mice</span>
</input>
</span>
<span style="">
<div></div>
<input type="checkbox" name="_QFavoritePets_CCats" class="mrMultiple" style="margin-left: 1em;" value="Cats">
<span class="mrMultipleText" style="">Cats</span>
</input>
</span>
<span style="">
<div></div>
<input type="checkbox" name="_QFavoritePets_CHamsters" class="mrMultiple" style="margin-left: 1em;" value="Hamsters">
<span class="mrMultipleText" style="">Hamsters</span>
</input>
</span>
</span>
</span>
<div><br/></div>

Defined in the default layout template

Transformed by Navigation.xsl