Default XSL templates
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.
For information on the Intermediate XML schema, see
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. Then the source HTML is transformed by the relevant XSL templates.
The HTML Player has the following default XSL templates:
Label.xsl
Question.xsl
Navigation.xsl
For more information, see
Default XSL templates.
HTML transformation processes
The HTML transformation processes are as follows:
1 HTML Player retrieves the page Banner nodes from the Player XML, and then transforms them to HTML source via the Label.xsl template. It replaces the mrBannerText node with the HTML source in the layout template.
2 HTML Player retrieves the page Navigation nodes from the Player XML, and then transforms them to HTML source via the Navigation.xsl template. It replaces the mrNavBar node 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. It replaces the corresponding mrData node 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. It replaces the corresponding mrData node 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. It replaces the corresponding mrData node 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. It transforms the Intermediate XML to HTML source by using the Question.xsl template. Then it replaces the corresponding with the HTML source in the Question template.
▪It replaces the corresponding mrData node 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">
<!--- Set style -->
<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>
<!--- For each used to ensure order -->
<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:
<div><br/></div>
<div></div>
<span style="">
</span>
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>
<!--- div tag needed for horizontal alignment of tables-->
<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:
<span class="mrQuestionTable" style="display:block;margin-left: 1em;">
If all templates use default templates, the entire Question HTML source resembles 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
<div><br/></div>
Transformed by Navigation.xsl
<span style="float:left;">
<span style="direction:rtl;float:left;margin-right:10px;">
<input type="submit" name="_NNext" class="mrNext" style="width: 70px;" value="Next" alt="Next"></input>
</span>
<input type="submit" name="_NStop" class="mrStop" style="width: 70px;" value="Stop" alt="Stop"></input>
</span>
See also