Interviewer - Server > Architecture > HTML players > HTML Player: Example XML
 
HTML Player: Example XML
The following examples demonstrate how exported HTML Player XML can be used to produce more sophisticated question rendering. Questions can be scripted using whatever question type is appropriate for the response.
For example, if a drag and drop ranking system is going to be implemented, then the most appropriate question type would be a categorical loop with numeric responses. The drag and drop ranking system can be implemented as a custom control, for example, by creating a question template that implements the HTML and uses <mrRef> tags to reference the JavaScript.
The metadata script is:
RankingGrid "Please rank the top {InsertHere} daily newspapers." loop
{
  Telegraph "Telegraph" style(Image="Telegraph.gif"),
  Independent "The Independent" style(Image="Independent.gif”),
  Times "The Times" style(Image="Times.gif"),
  Express "The Express" style(Image="Express.gif"),
  Mail "Mail" style(Image="Mail.gif"),
  The_Sun "The Sun" style(Image="Sun.gif"),
  Daily_Mirror "Daily Mirror" style(Image="Mirror.gif")
} fields -
(
  QRank "Rank"
  long [0 .. 10]
  defaultanswer(0);
) expand grid;
The routing script is:
RankingGrid.Style.Control.Type = ControlTypes.ctXML
RankingGrid.QuestionTemplate = “RankingGrid.htm”
The example above produces the following HTML:
<div></div>
<span class="mrQuestionText" style="">Please rank the top {InsertHere} daily newspapers.</span>
<div><br/></div>
<textarea name="_QRankingGrid2_R" id="_Q0" class="mrEdit" autocomplete="off" rows="6" cols="40">
  <Question QuestionName="RankingGrid" QuestionFullName="RankingGrid" QuestionType="LoopCategorical">... cut ...</Question>
</textarea>
<div><br/></div>
Note that the Question XML has been significantly reduced. When the form is submitted back to the server the Player XML in the textarea can be submitted as-is, but it is recommended to just submit back the Question and Response nodes. The Question nodes must contain the QuestionName attribute. The following example provides the full response XML. The Value nodes should contain the answers, in this case the Rank question is a numeric (for example, the responses could be <Value>4</Value>).
<Question QuestionName="RankingGrid">
<Question QuestionName="Telegraph">
<Question QuestionName="QRank">
<Response>
<Value></Value>
</Response>
</Question>
</Question>
<Question QuestionName="Independent">
<Question QuestionName="QRank">
<Response>
<Value></Value>
</Response>
</Question>
</Question
><Question QuestionName="Times">
<Question QuestionName="QRank">
<Response>
<Value></Value>
</Response>
</Question>
</Question>
<Question QuestionName="Express">
<Question QuestionName="QRank">
<Response>
<Value></Value>
</Response>
</Question>
</Question>
<Question QuestionName="Mail">
<Question QuestionName="QRank">
<Response>
<Value></Value>
</Response>
</Question>
</Question>
<Question QuestionName="The_Sun">
<Question QuestionName="QRank">
<Response>
<Value></Value>
</Response>
</Question>
</Question>
<Question QuestionName="Daily_Mirror">
<Question QuestionName="QRank">
<Response>
<Value></Value>
</Response>
</Question>
</Question>
</Question>
The RankingGrid.htm question template normally references a Javascript file to manipulate the XML.
In addition to outputting the whole ranking grid as XML, the individual QRank questions can also be output as XML. For example:
RankingGrid[..].QRank.Style.Control.Type = ControlTypes.ctXML
This produces a table where each iteration is output as XML. For example:
<td id="Cell.1.0" style="text-Align: Center;vertical-align: Middle;">
  <textarea name="_QRankingGrid2_QTelegraph_QQRank_R" id="_Q0_Q0_Q0" class="mrEdit" autocomplete="off" rows="6" cols="40">
    <Question QuestionName="QRank" QuestionFullName="RankingGrid2[{Telegraph}].QRank" QuestionDataType="Long">...cut...</Question>
  </textarea>
</td>
In this case, the XML submitted as the response is submitted separately for each QRank question. For example:
<Question QuestionName="QRank">
  <Response>
    <Value>5</Value>
  </Response>
</Question>
The HTML Player knows the corresponding iterations from the textarea's name="_QRankingGrid2_QTelegraph_QQRank_R" attribute.
All questions in the interview can be output output as XML by changing the Control.Type in the default styles. The only problem with this is that sensible default control types are already set for most question types. This means that setting IOM.DefaultStyles.Default.Control.Type = ControlTypes.ctPassword does not work as expected. The correct technique is to use the following script to change the default style for each question type:
IOM.DefaultStyles.Questions[..].Style.Control.Type = ControlTypes.ctXML
See also
HTML players