Rendering

The QTI-SDK is delivered with a rendering engine aiming at compiling assessment contents in a suitable shape for the client-side. The way the rendering engine operates is very simple. It is given a QtiComponent object that will be rendered as HTML markup. It will be traversed recursively and every nested QtiComponent object will be rendered in its most appropriated HTML element equivalent, with the class attribute value set as qti-[qtiClassName] where qtiClassName is the related QTI class attribute of the QtiComponent object, prefixed with qti-. Every QTI component is then delivered with appropriate semantics that the client-side can deal with to understand the provided content.

The item in use in this example is the "Composition of Water" item, from the QTI 2.1 Implementation Guide.

use qtism\runtime\rendering\markup\goldilocks\GoldilocksRenderingEngine;
use qtism\data\storage\xml\XmlDocument;

$renderer = new GoldilocksRenderingEngine();
$itemDoc = new XmlDocument('2.1');
$itemDoc->load('choice_multiple.xml');

$rendered = $renderer->render($itemDoc->getDocumentComponent());
echo $rendered->saveXML();

The example above will output the following markup ... Additionally, QTI attributes that do not disclose any sensitive information regarding the assessment are transformed into data-* attributes that can be useful for the client-side.

<div data-identifier="choiceMultiple" data-title="Composition of Water" data-adaptive="false" data-time-dependent="false" class="qti-assessmentItem">
  <div class="qti-itemBody">
    <div data-response-identifier="RESPONSE" data-shuffle="true" data-max-choices="0" data-min-choices="0" data-orientation="vertical" class="qti-choiceInteraction qti-vertical qti-count-6">
      <p class="qti-prompt">Which of the following elements are used to form water?</p>
      <ul>
        <li data-identifier="H" data-fixed="false" class="qti-simpleChoice">Hydrogen</li>
        <li data-identifier="He" data-fixed="false" class="qti-simpleChoice">Helium</li>
        <li data-identifier="C" data-fixed="false" class="qti-simpleChoice">Carbon</li>
        <li data-identifier="O" data-fixed="false" class="qti-simpleChoice">Oxygen</li>
        <li data-identifier="N" data-fixed="false" class="qti-simpleChoice">Nitrogen</li>
        <li data-identifier="Cl" data-fixed="false" class="qti-simpleChoice">Chlorine</li>
      </ul>
    </div>
  </div>
</div>

As a reference, please find below the original QTI XML content. You will notice that elements that are not purely content related were not rendered to not pollute the rendering data with unnecessary information.

<?xml version="1.0" encoding="UTF-8"?>
<assessmentItem xmlns="http://www.imsglobal.org/xsd/imsqti_v2p1"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://www.imsglobal.org/xsd/imsqti_v2p1  http://www.imsglobal.org/xsd/qti/qtiv2p1/imsqti_v2p1.xsd"
  identifier="choiceMultiple" title="Composition of Water" adaptive="false" timeDependent="false">
  <responseDeclaration identifier="RESPONSE" cardinality="multiple" baseType="identifier">
    <correctResponse>
      <value>H</value>
      <value>O</value>
    </correctResponse>
    <mapping lowerBound="0" upperBound="2" defaultValue="-2">
      <mapEntry mapKey="H" mappedValue="1"/>
      <mapEntry mapKey="O" mappedValue="1"/>
      <mapEntry mapKey="Cl" mappedValue="-1"/>
    </mapping>
  </responseDeclaration>
  <outcomeDeclaration identifier="SCORE" cardinality="single" baseType="float"/>
  <itemBody>
    <choiceInteraction responseIdentifier="RESPONSE" shuffle="true" maxChoices="0">
      <prompt>Which of the following elements are used to form water?</prompt>
      <simpleChoice identifier="H" fixed="false">Hydrogen</simpleChoice>
      <simpleChoice identifier="He" fixed="false">Helium</simpleChoice>
      <simpleChoice identifier="C" fixed="false">Carbon</simpleChoice>
      <simpleChoice identifier="O" fixed="false">Oxygen</simpleChoice>
      <simpleChoice identifier="N" fixed="false">Nitrogen</simpleChoice>
      <simpleChoice identifier="Cl" fixed="false">Chlorine</simpleChoice>
    </choiceInteraction>
  </itemBody>
  <responseProcessing template="http://www.imsglobal.org/question/qti_v2p1/rptemplates/map_response"/>
</assessmentItem>