@digabi/exam-engine-exams 19.19.2-xml-exams.0 → 20.0.0-alpha.0

package/MexDocumentation/MexDocumentation.xml

@@ -1,3127 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<e:exam xmlns:e="http://ylioppilastutkinto.fi/exam.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://www.w3.org/1999/xhtml" xsi:schemaLocation="http://ylioppilastutkinto.fi/exam.xsd https://abitti.dev/schema/exam.xsd" exam-schema-version="0.5" exam-stylesheet="custom.css" date="2022-01-27">
-  <e:exam-versions>
-    <e:exam-version lang="fi-FI"/>
-  </e:exam-versions>
-  <e:exam-title>MEX format documentation</e:exam-title>
-  <e:exam-instruction>
-    <p>
-      This exam describes the MEX XML format.
-    </p>
-    <p>
-      For more information about using this format, see
-      <a href="https://github.com/digabi/exam-engine">https://github.com/digabi/exam-engine</a>
-    </p>
-    <div class="warning-box">
-      Some of the features have limited support in
-      <a href="https://oma.abitti.fi/">Abitti</a>
-      . These are documented in warning boxes like this.
-    </div>
-  </e:exam-instruction>
-  <e:table-of-contents/>
-  <e:external-material>
-    <e:attachment>
-      <e:attachment-title>Exam-specific external material title</e:attachment-title>
-      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
-          Aspernatur, libero sunt. Eos corporis quam fugiat maiores
-          expedita quidem quaerat, quos voluptatem similique quae cum.
-          Voluptate iste sed facere cum omnis.</p>
-      <e:reference>
-        <e:author>YTL</e:author>
-      </e:reference>
-    </e:attachment>
-
-  </e:external-material>
-  <e:section>
-    <e:section-title>Exam structure</e:section-title>
-    <e:question>
-      <e:question-title>XML structure</e:question-title>
-      <e:question-instruction>Exam structure is described in XML. It can contain also (X)HTML elements.
-      </e:question-instruction>
-      <div class="tree">
-        <div>
-          <strong>
-            Exam
-            <code>&lt;e:exam&gt;</code>
-          </strong>
-          1 element
-          <p>
-            Root element of the exam. All other elements are its descendants.
-          </p>
-          <div>
-            <strong>
-              Exam languages
-              <code>&lt;e:languages&gt;</code>
-            </strong>
-            1 element
-            <div>
-              <strong>
-                Exam language
-                <code>&lt;e:language&gt;</code>
-              </strong>
-              1-n elements
-            </div>
-          </div>
-          <div>
-            <strong>
-              Exam title
-              <code>&lt;e:exam-title&gt;</code>
-            </strong>
-            1 element
-          </div>
-          <div>
-            <strong>
-              Exam introduction and instructions
-              <code>&lt;e:exam-instruction&gt;</code>
-            </strong>
-            1 element
-          </div>
-          <div>
-            <strong>
-              Reference to exam introduction and instructions read from file
-              <code>&lt;e:exam-instruction-ref&gt;</code>
-            </strong>
-            1 element
-          </div>
-          <div>
-            <strong>
-              Table of contents
-              <code>&lt;e:table-of-contents&gt;</code>
-            </strong>
-            1 element
-          </div>
-          <div>
-            <strong>
-              Exam-specific external material
-              <code>&lt;e:external-material&gt;</code>
-            </strong>
-            0-1 elements
-            <p>
-              External material page is constructed based on
-              <code>e:external-material</code>
-              elements
-              defined within
-              <code>e:exam</code>
-              and
-              <code>e:question</code>
-              elements.
-              Contains
-              <code>e:attachment</code>
-              elements.
-            </p>
-          </div>
-          <div>
-            <strong>
-              Section
-              <code>&lt;e:section&gt;</code>
-            </strong>
-            1-n elements
-            <p>Section groups questions</p>
-            <div>
-              <strong>
-                Section title
-                <code>&lt;e:section-title&gt;</code>
-              </strong>
-              1 element
-              <p>Section title can contain HTML elements. Section number is added automatically.</p>
-            </div>
-            <div>
-              <strong>
-                Section instructions
-                <code>&lt;e:section-instruction&gt;</code>
-              </strong>
-              0-n elements
-              <p>Section instructions can contain HTML elements.</p>
-            </div>
-            <div>
-              <strong>
-                Question
-                <code>&lt;e:question&gt;</code>
-              </strong>
-              0-n elements
-              <p>
-                Questions can contain sub-
-                <code>e:question</code>
-                s
-              </p>
-              <div>
-                <strong>
-                  Question title
-                  <code>&lt;e:question-title&gt;</code>
-                </strong>
-                1 element
-                <p>Question title can contain HTML elements. Question number is added automatically.</p>
-              </div>
-              <div>
-                <strong>
-                  Question instructions
-                  <code>&lt;e:question-instruction&gt;</code>
-                </strong>
-                0-1 elements
-                <p>Question instructions can contain HTML elements.</p>
-              </div>
-              <div>
-                <strong>
-                  Question-specific external material
-                  <code>&lt;e:external-material&gt;</code>
-                </strong>
-                0-1 elements
-                <p>
-                  External material page is constructed based on
-                  <code>e:external-material</code>
-                  elements
-                  defined within
-                  <code>e:exam</code>
-                  and
-                  <code>e:question</code>
-                  elements.
-                  Contains
-                  <code>e:attachment</code>
-                  elements.
-                </p>
-              </div>
-              <div>
-                <strong>
-                  Internal material
-                  <code>&lt;e:attachment&gt;</code>
-                </strong>
-                0-n elements
-                <p>
-                  Internal material is displayed directly on exam page. Use
-                  <code>e:external-material</code>
-                  to
-                  display material on separate external material page.
-                </p>
-                <div>
-                  <strong>
-                    Material title
-                    <code>&lt;e:attachment-title&gt;</code>
-                  </strong>
-                  1 element
-                </div>
-                <div>
-                  <strong>
-                    Audio material
-                    <code>&lt;e:audio&gt;</code>
-                  </strong>
-                  0-1 elements
-                </div>
-                <div>
-                  <strong>
-                    Image material
-                    <code>&lt;e:image&gt;</code>
-                  </strong>
-                  0-1 elements
-                </div>
-                <div>
-                  <strong>
-                    Video material
-                    <code>&lt;e:video&gt;</code>
-                  </strong>
-                  0-1 elements
-                </div>
-                <div>
-                  <strong>
-                    Material reference
-                    <code>&lt;e:reference&gt;</code>
-                  </strong>
-                  1 element. See section Material below for details.
-                </div>
-              </div>
-              <div>
-                <strong>
-                  Answer type, e.g.
-                  <code>&lt;e:text-answer&gt;</code>
-                </strong>
-                0-n elements
-                <p>See section Answer types below for details.</p>
-              </div>
-              <div>
-                <strong>
-                  Question number,
-                  <code>&lt;e:question-number&gt;</code>
-                </strong>
-                0-n elements
-                <p>To show parent question number as a prefix and fixed number as a suffix.</p>
-              </div>
-              <div>
-                <strong>OR</strong>
-              </div>
-              <div>
-                <strong>
-                  Sub-question
-                  <code>&lt;e:question&gt;</code>
-                </strong>
-                0-n elements
-              </div>
-            </div>
-          </div>
-          <div>
-            <strong>
-              Material references
-              <code>&lt;e:references&gt;</code>
-            </strong>
-            0-1 elements
-          </div>
-          <div>
-            <strong>
-              Exam footer
-              <code>&lt;e:exam-footer&gt;</code>
-            </strong>
-            0-1 elements
-          </div>
-        </div>
-      </div>
-      <e:question>
-        <e:question-title>Special characters as entities</e:question-title>
-        <e:question-instruction>
-          <p>Certain characters requires escaping as entities in exam XML documents</p>
-          <table class="e-table">
-            <caption/>
-            <thead>
-              <tr>
-                <th>Character</th>
-                <th>Notation</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>NBSP (non-breaking-space)</td><td><code>&amp;#xA0;</code></td>
-            </tr>
-            <tr>
-              <td>SHY ­ (soft-hyphen)</td><td><code>&amp;#173;</code></td>
-          </tr>
-          <tr>
-                  <td>&gt;</td><td><code>&amp;gt;</code></td>
-              </tr>
-              <tr>
-                  <td>&lt;</td><td><code>&amp;lt;</code></td>
-              </tr>
-              <tr>
-                  <td>&amp;</td><td><code>&amp;amp;</code></td>
-              </tr>
-            </tbody>
-          </table>
-          <p>Notice, that e.g. <code>&amp;nbsp;</code> and <code>&amp;shy;</code> does not work.</p>
-        </e:question-instruction>
-      </e:question>
-    </e:question>
-
-    <e:question>
-      <e:question-title>Exam</e:question-title>
-      <e:question-instruction>
-        <p>
-          Top-level exam element.
-        </p>
-      </e:question-instruction>
-      <table class="e-table e-width-full">
-        <caption>Element attributes</caption>
-        <thead>
-          <tr>
-            <th>Attribute</th>
-            <th>Type</th>
-            <th>Mandatory</th>
-            <th>Default value</th>
-            <th>Description</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>exam-schema-version</td>
-            <td>Version string</td>
-            <td>No</td>
-            <td>—</td>
-            <td>Schema version, only 0.1 for now</td>
-          </tr>
-          <tr>
-            <td>date</td>
-            <td>YYYY-MM-DD</td>
-            <td>No</td>
-            <td>—</td>
-            <td>Exam date</td>
-          </tr>
-          <tr>
-            <td>exam-code</td>
-            <td>exam code string</td>
-            <td>No</td>
-            <td>—</td>
-            <td>Exam code used for exam specific translations</td>
-          </tr>
-          <tr>
-            <td>day-code</td>
-            <td>exam day code string</td>
-            <td>No</td>
-            <td>—</td>
-            <td>Exam day code used for exam specific translations</td>
-          </tr>
-          <tr>
-            <td>exam-stylesheet</td>
-            <td>custom CSS stylesheet file name</td>
-            <td>No</td>
-            <td>—</td>
-            <td>CSS file with this name must exist in attachments directory</td>
-          </tr>
-          <tr>
-            <td>max-answers</td>
-            <td>Integer</td>
-            <td>No</td>
-            <td>No limit</td>
-            <td>Maximum number of questions student should answer</td>
-          </tr>
-        </tbody>
-      </table>
-      <p>
-        <code>exam-code</code>
-        and
-        <code>day-code</code>
-        attributes control exam-specific
-        translations, e.g. the heading text of table of contents, and the exam title if specific
-        <code>e:exam-title</code>
-        element is missing. Currently supported exam and day
-        code pairs can be found in
-        <a href="https://github.com/digabi/exam-engine/blob/master/packages/mastering/src/i18n/exam_titles_fi-FI.json">https://github.com/digabi/exam-engine/blob/master/packages/mastering/src/i18n/exam_titles_fi-FI.json</a>
-        .
-      </p>
-      <div class="warning-box">
-        max-answers is ignored in Abitti grading.
-      </div>
-      <e:question>
-        <e:question-title>Example</e:question-title>
-        <h4/>
-        <pre class="code"><![CDATA[<e:exam
-  xmlns:e="http://ylioppilastutkinto.fi/exam.xsd"
-  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
-  xmlns="http://www.w3.org/1999/xhtml"
-  xsi:schemaLocation="http://ylioppilastutkinto.fi/exam.xsd https://abitti.dev/schema/exam.xsd"
-  exam-schema-version="0.1"
-  date="2018-09-29"
-  exam-code="EA"
-  exam-stylesheet="custom.css">]]></pre>
-      </e:question>
-    </e:question>
-
-    <e:question>
-      <e:question-title>Languages and localization</e:question-title>
-      <e:question-instruction>
-        <p>
-          Content for multiple language versions of the same exam can be defined using localization elements.
-        </p>
-        <div class="warning-box">
-          Multiple languages work in Abitti when you create transfer zip with "npm run create-transfer-zip" -command. It generates separate transfer zip for each language.
-        </div>
-      </e:question-instruction>
-      <e:question>
-        <e:question-title>Example</e:question-title>
-        <h4/>
-        <pre class="code"><![CDATA[<e:languages>
-  <e:language>fi-FI</e:language>
-  <e:language>sv-FI</e:language>
-</e:languages>
-...
-<e:localization lang="fi-FI">
-  <p>
-    Älä jätä mitään merkintöjä sellaisen tehtävän vastaukselle varattuun tilaan,
-    jota et halua jättää arvosteltavaksi.
-  </p>
-</e:localization>
-<e:localization lang="sv-FI">
-  <p>
-    Lämna inga anteckningar i svarsfältet för sådana uppgifter som du inte vill
-    lämna in för bedömning.
-  </p>
-</e:localization>]]></pre>
-        <e:localization lang="fi-FI">
-          <p>
-            Älä jätä mitään merkintöjä sellaisen tehtävän vastaukselle varattuun tilaan,
-            jota et halua jättää arvosteltavaksi.
-          </p>
-        </e:localization>
-        <e:localization lang="sv-FI">
-          <p>
-            Lämna inga anteckningar i svarsfältet för sådana uppgifter som du inte vill
-            lämna in för bedömning.
-          </p>
-        </e:localization>
-      </e:question>
-
-      <e:question>
-        <e:question-title>Pre-defined translations</e:question-title>
-        <p>There are some pre-defined translations that can be easily reused with the <code>e:translation</code> tag. For example this code</p>
-        <pre class="code"><![CDATA[<e:translation key="audio-test.instructions" />]]></pre>
-        <p>renders the following text:
-          <e:translation key="audio-test.instructions" />
-        </p>
-        <p>For a full list of available translations, <a href="https://github.com/digabi/exam-engine/tree/master/packages/core/src/i18n">see these files</a>.
-        By default, each exam's translations are first looked up in their corresponding translation files (for example,
-        German exam = GA.ts), and then in the generic Finnish/Swedish translation files (fi-FI.ts and sv-FI.ts)</p>
-      </e:question>
-    </e:question>
-
-
-  </e:section>
-
-  <e:section max-answers="1">
-    <e:section-title>Sections</e:section-title>
-    <e:section-instruction>
-      <p>
-        Exam consists of sections. Each section is described in
-        <code>e:section</code>
-        element.
-      </p>
-      <p>
-        Section can define how many questions should be answered using
-        <code>max-answers</code>
-        attribute.
-      </p>
-      <div class="warning-box">
-        max-answers is ignored in Abitti grading.
-      </div>
-      <p>
-        Section attribute <code>type</code> can be user to describe how an exam should be packed.
-      </p>
-      <div class="warning-box">
-        Type attribute is an YTL specific type code that is used only in packaging exams for matriculation examination. Type options are H, T, D, E, X, A and B. Use 'H' to denote hearing section of the exam. The other options have more cosmetic effect on exam packaging. This attribute does not have effect on how sections are displayed in the exam.
-      </div>
-      <p>
-        CAS applications can be disabled for a
-        section by setting
-        <code>cas-forbidden="true"</code>
-        attribute.
-      </p>
-    </e:section-instruction>
-    <e:section-instruction>
-      <h4>Example of simple section</h4>
-      <pre class="code"><![CDATA[<e:section max-answers="1">
-  <e:section-title>Example section title</e:section-title>
-  <e:section-instruction>Section instructions</e:section-instruction>
-  ...HTML code, questions...
-  <e:question>
-    <e:question-title>Example question title</e:question-title>
-    <e:question-instruction>Question instructions</e:question-instruction>
-    …HTML code, answer types, materials, sub-questions...
-  </e:question>
-</e:section>]]></pre>
-    </e:section-instruction>
-    <e:question>
-      <e:question-title>Example question title</e:question-title>
-      <e:question-instruction>Question instructions</e:question-instruction>
-      …HTML code, answer types, materials, sub-questions...
-    </e:question>
-  </e:section>
-
-  <e:section>
-    <e:section-title>Questions</e:section-title>
-    <e:section-instruction>
-      <p>
-        Every section consists of questions defined using
-        <code>e:question</code>
-        elements.
-        Questions are numbered automatically and they can contain HTML code, answer types,
-        material or sub-questions. Question can define how many sub-questions should be answered
-        using
-        <code>max-answers</code>
-        attribute.
-      </p>
-      <p>
-        Maximum score of question is calculated automatically using the answer types, optional
-        sub-questions and the limits from
-        <code>max-answers</code>
-        attributes.
-      </p>
-      <div class="warning-box">
-          max-answers is ignored in Abitti grading.
-        </div>
-    </e:section-instruction>
-
-    <e:section-instruction>
-      <h4>Simple question example</h4>
-      <pre class="code"><![CDATA[<e:question>
-  <e:question-title>Example question title</e:question-title>
-  <e:question-instruction>Question description</e:question-instruction>
-  …HTML code, answer types, materials, sub-questions, question numbers (e.g. <e:question-number suffix="1" />)...
-</e:question>]]></pre>
-    </e:section-instruction>
-    <e:question>
-      <e:question-title>Example question title</e:question-title>
-      <e:question-instruction>Question description</e:question-instruction>
-      …HTML code, answer types, materials, sub-questions, question numbers (e.g. <e:question-number suffix="1" />)...
-    </e:question>
-
-    <e:section-instruction>
-      <h4>Sub-question example</h4>
-      <pre class="code"><![CDATA[<e:question max-answers="1">
-  <e:question-title>Second example question title</e:question-title>
-  <e:question-instruction>Second example question instructions</e:question-instruction>
-  <e:question>
-    <e:question-title>First sub-question title</e:question-title>
-    <e:question-instruction>First sub-question instructions</e:question-instruction>
-    …HTML code, answer types, materials, sub-questions...
-  </e:question>
-  <e:question>
-    <e:question-title>Second sub-question title</e:question-title>
-    <e:question-instruction>Second sub-question instructions</e:question-instruction>
-    …HTML code, answer types, materials, sub-questions...
-  </e:question>
-</e:question>]]></pre>
-    </e:section-instruction>
-    <e:question max-answers="1">
-      <e:question-title>Second example question title</e:question-title>
-      <e:question-instruction>Second example question instructions</e:question-instruction>
-      <e:question>
-        <e:question-title>First sub-question title</e:question-title>
-        <e:question-instruction>First sub-question instructions</e:question-instruction>
-        …HTML code, answer types, materials, sub-questions...
-      </e:question>
-      <e:question>
-        <e:question-title>Second sub-question title</e:question-title>
-        <e:question-instruction>Second sub-question instructions</e:question-instruction>
-        …HTML code, answer types, materials, sub-questions...
-      </e:question>
-    </e:question>
-  </e:section>
-
-  <e:section>
-    <e:section-title>Answer types</e:section-title>
-    <e:question>
-      <e:question-title>text-answer</e:question-title>
-      <p>
-        There are three types of text answers.
-        <code>rich-text</code>
-        answer is intended for verbose essay-style answers, whereas
-        <code>single-line</code>
-        answer is intended for short, at most couple words, answers.
-        <code>integer</code>
-        answer is intended for integer answers.
-      </p>
-
-      <p>
-        Examinee can also attach screenshots to
-        <code>rich-text</code>
-        answers.
-      </p>
-
-      <table class="e-table e-width-full">
-        <caption>Element attributes</caption>
-        <thead>
-          <tr>
-            <th>Attribute</th>
-            <th>Type</th>
-            <th>Mandatory</th>
-            <th>Default value</th>
-            <th>Description</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>max-score</td>
-            <td>Integer</td>
-            <td>Yes</td>
-            <td>—</td>
-            <td>Maximum score</td>
-          </tr>
-          <tr>
-            <td>max-length</td>
-            <td>Integer</td>
-            <td>Yes</td>
-            <td>—</td>
-            <td>Maximum answer length. Works only for <code>rich-text</code> answers. It won't prevent student from entering an answer that is too long but warns the student about it.</td>
-          </tr>
-          <tr>
-            <td class="e-nowrap">use-language-of-instruction</td>
-            <td>Boolean</td>
-            <td>No</td>
-            <td>false</td>
-            <td>Whether the student should answer the question in the language of instruction (typically the mother tongue) or the subject language. This attribute controls the HTML lang attribute of the input element, so a screen reader will read the answer using the correct language. Used only in secondary language exams.</td>
-          </tr>
-          <tr>
-            <td>type</td>
-            <td>
-              <code>single-line | rich-text | integer</code>
-            </td>
-            <td>No</td>
-            <td>
-              <code>single-line</code>
-            </td>
-            <td>Type</td>
-          </tr>
-          <tr>
-            <td>class</td>
-            <td>CSS class</td>
-            <td>No</td>
-            <td>-</td>
-            <td>CSS class name</td>
-          </tr>
-        </tbody>
-      </table>
-
-      <h4>
-        <code>single-line</code>
-        answer example
-      </h4>
-      <pre class="code"><![CDATA[<e:text-answer max-score="2" />]]></pre>
-      <div class="example">
-        <e:text-answer max-score="2"/>
-      </div>
-
-      <h4>
-        <code>rich-text</code>
-        answer example
-      </h4>
-      <pre class="code"><![CDATA[<e:text-answer type="rich-text" max-score="2" />]]></pre>
-      <div class="example">
-        <e:text-answer type="rich-text" max-score="2"/>
-      </div>
-
-      <h4>
-        <code>rich-text</code>
-        answer with maximum length
-      </h4>
-      <pre class="code"><![CDATA[<e:text-answer type="rich-text" max-score="2" max-length="20" />]]></pre>
-      <div class="example">
-        <e:text-answer type="rich-text" max-score="2" max-length="20"/>
-      </div>
-
-
-      <h4>
-        <code>integer</code>
-        answer example
-      </h4>
-      <p>The answer can only contain digits (0...9), and optionally a minus sign (-) at the beginning</p>
-      <pre class="code"><![CDATA[<e:text-answer type="integer" max-score="1" />]]></pre>
-      <div class="example">
-        <e:text-answer type="integer" max-score="1"/>
-      </div>
-
-    </e:question>
-
-    <e:question>
-      <e:question-title>
-        choice-answer
-      </e:question-title>
-      <e:question-instruction>
-        <p>
-          <code>e:choice-answer</code>
-          answer type creates a group of option buttons. Answer options are defined within it
-          using
-          <code>e:choice-answer-option</code>
-          elements.
-        </p>
-        <p>By default options are shuffled.</p>
-      </e:question-instruction>
-
-      <table class="e-table e-width-full">
-        <caption>
-          Element attributes (
-          <code>e:choice-answer</code>
-          )
-        </caption>
-        <thead>
-          <tr>
-            <th>Attribute</th>
-            <th>Type</th>
-            <th>Mandatory</th>
-            <th>Default value</th>
-            <th>Description</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>ordering</td>
-            <td>
-              <code>random | fixed</code>
-            </td>
-            <td>No</td>
-            <td>random</td>
-            <td>Ordering of options</td>
-          </tr>
-          <tr>
-            <td>direction</td>
-            <td>
-              <code>vertical | horizontal</code>
-            </td>
-            <td>No</td>
-            <td>vertical</td>
-            <td>Direction of options</td>
-          </tr>
-          <tr>
-            <td>class</td>
-            <td>CSS class</td>
-            <td>No</td>
-            <td>-</td>
-            <td>CSS class name</td>
-          </tr>
-        </tbody>
-      </table>
-
-      <table class="e-table e-width-full">
-        <caption>
-          Element attributes (
-          <code>e:choice-answer-option</code>
-          )
-        </caption>
-        <thead>
-          <tr>
-            <th>Attribute</th>
-            <th>Type</th>
-            <th>Mandatory</th>
-            <th>Default value</th>
-            <th>Description</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>score</td>
-            <td>Integer</td>
-            <td>No</td>
-            <td>0</td>
-            <td>Score for option</td>
-          </tr>
-          <tr>
-            <td>class</td>
-            <td>CSS class</td>
-            <td>No</td>
-            <td>-</td>
-            <td>CSS class name</td>
-          </tr>
-        </tbody>
-      </table>
-
-      <h4>Examples</h4>
-      <pre class="code"><![CDATA[<e:choice-answer>
-  <e:choice-answer-option score="2">Lorem</e:choice-answer-option>
-  <e:choice-answer-option score="0">Ipsum</e:choice-answer-option>
-  <e:choice-answer-option>Dolor</e:choice-answer-option>
-  <e:choice-answer-option score="-1">Sit</e:choice-answer-option>
-</e:choice-answer>]]></pre>
-      <div class="example">
-        <e:choice-answer>
-          <e:choice-answer-option score="2">Lorem</e:choice-answer-option>
-          <e:choice-answer-option score="0">Ipsum</e:choice-answer-option>
-          <e:choice-answer-option>Dolor</e:choice-answer-option>
-          <e:choice-answer-option score="-1">Sit</e:choice-answer-option>
-        </e:choice-answer>
-      </div>
-      <p>Options can contain any HTML code, like images or formulas</p>
-      <pre class="code"><![CDATA[<e:choice-answer direction="vertical">
-  <e:choice-answer-option>
-    <e:formula>f(x) = \sqrt{x^2}</e:formula>
-  </e:choice-answer-option>
-  <e:choice-answer-option>
-    <e:formula>f(x) = x^3</e:formula>
-  </e:choice-answer-option>
-  <e:choice-answer-option>
-    <e:formula>f(x) = x^4 + 3x + 5</e:formula>
-  </e:choice-answer-option>
-</e:choice-answer>]]></pre>
-      <div class="example">
-        <e:choice-answer direction="vertical">
-          <e:choice-answer-option>
-            <e:formula>f(x) = \sqrt{x^2}</e:formula>
-          </e:choice-answer-option>
-          <e:choice-answer-option>
-            <e:formula>f(x) = x^3</e:formula>
-          </e:choice-answer-option>
-          <e:choice-answer-option>
-            <e:formula>f(x) = x^4 + 3x + 5</e:formula>
-          </e:choice-answer-option>
-        </e:choice-answer>
-      </div>
-      <p>Horizontal direction works well for images</p>
-      <pre class="code"><![CDATA[<e:choice-answer direction="horizontal">
-  <e:choice-answer-option>
-    <e:image src="example_small.jpg" />
-  </e:choice-answer-option>
-  <e:choice-answer-option>
-    <e:image src="example.jpg" />
-  </e:choice-answer-option>
-  <e:choice-answer-option>
-    <e:image src="example.jpg" />
-  </e:choice-answer-option>
-  <e:choice-answer-option>
-    <e:image src="example_high.jpg" />
-  </e:choice-answer-option>
-  <e:choice-answer-option>
-    <e:image src="example.jpg" />
-  </e:choice-answer-option>
-</e:choice-answer>]]></pre>
-      <div class="example">
-        <e:choice-answer direction="horizontal">
-          <e:choice-answer-option>
-            <e:image src="example_small.jpg"/>
-          </e:choice-answer-option>
-          <e:choice-answer-option>
-            <e:image src="example.jpg"/>
-          </e:choice-answer-option>
-          <e:choice-answer-option>
-            <e:image src="example.jpg"/>
-          </e:choice-answer-option>
-          <e:choice-answer-option>
-            <e:image src="example_high.jpg"/>
-          </e:choice-answer-option>
-          <e:choice-answer-option>
-            <e:image src="example.jpg"/>
-          </e:choice-answer-option>
-        </e:choice-answer>
-      </div>
-    </e:question>
-    <e:question>
-      <e:question-title>
-        dropdown-answer
-      </e:question-title>
-      <e:question-instruction>
-        <p>
-          <code>e:dropdown-answer</code>
-          creates a dropdown menu.
-        Similarly to
-          <code>e:choice-answer</code>
-          , answer options are defined within it using
-          <code>e:dropdown-anser-option</code>
-          elements.
-        </p>
-      </e:question-instruction>
-
-      <table class="e-table e-width-full">
-        <caption>
-          Element attributes (
-          <code>e:dropdown-answer</code>
-          )
-        </caption>
-        <thead>
-          <tr>
-            <th>Attribute</th>
-            <th>Type</th>
-            <th>Mandatory</th>
-            <th>Default value</th>
-            <th>Description</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>ordering</td>
-            <td>
-              <code>random | fixed</code>
-            </td>
-            <td>No</td>
-            <td>random</td>
-            <td>Ordering of options</td>
-          </tr>
-          <tr>
-            <td>class</td>
-            <td>CSS class</td>
-            <td>No</td>
-            <td>-</td>
-            <td>CSS class name</td>
-          </tr>
-        </tbody>
-      </table>
-
-      <table class="e-table e-width-full">
-        <caption>
-          Element attributes (
-          <code>e:dropdown-answer-option</code>
-          )
-        </caption>
-        <thead>
-          <tr>
-            <th>Attribute</th>
-            <th>Type</th>
-            <th>Mandatory</th>
-            <th>Default value</th>
-            <th>Description</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>score</td>
-            <td>Integer</td>
-            <td>No</td>
-            <td>0</td>
-            <td>Score for option</td>
-          </tr>
-          <tr>
-            <td>class</td>
-            <td>CSS class</td>
-            <td>No</td>
-            <td>-</td>
-            <td>CSS class name</td>
-          </tr>
-        </tbody>
-      </table>
-
-      <h4>Example</h4>
-      <pre class="code"><![CDATA[<e:dropdown-answer>
-  <e:dropdown-answer-option score="2">Lorem</e:dropdown-answer-option>
-  <e:dropdown-answer-option score="-1">Ipsum</e:dropdown-answer-option>
-  <e:dropdown-answer-option score="-1">Dolor</e:dropdown-answer-option>
-  <e:dropdown-answer-option>Sit</e:dropdown-answer-option>
-</e:dropdown-answer>]]></pre>
-      <div class="example">
-        <e:dropdown-answer>
-          <e:dropdown-answer-option score="2">Lorem</e:dropdown-answer-option>
-          <e:dropdown-answer-option score="-1">Ipsum</e:dropdown-answer-option>
-          <e:dropdown-answer-option score="-1">Dolor</e:dropdown-answer-option>
-          <e:dropdown-answer-option>Sit</e:dropdown-answer-option>
-        </e:dropdown-answer>
-      </div>
-    </e:question>
-
-    <e:question>
-      <e:question-title>
-        scored-text-answer
-      </e:question-title>
-      <e:question-instruction>
-        <p>
-          <code>e:scored-text-answer</code>
-          is like
-          <code>e:text-answer</code>
-          , but it
-          is graded automatically based on a set of correct answers. To display answer hints
-          on the right side of the page, group
-          <code>e:scored-text-answer</code>
-          elements
-          within a
-          <code>e:hints</code>
-          element.
-        </p>
-        <div class="warning-box">
-          scored-text-answer grading must be done manually in Abitti.
-        </div>
-      </e:question-instruction>
-
-      <table class="e-table e-width-full">
-        <caption>
-          Element attributes (
-          <code>e:scored-text-answer</code>
-          )
-        </caption>
-        <thead>
-          <tr>
-            <th>Attribute</th>
-            <th>Type</th>
-            <th>Mandatory</th>
-            <th>Default value</th>
-            <th>Description</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>max-score</td>
-            <td>Integer</td>
-            <td>No</td>
-            <td>0</td>
-            <td>Maximum score</td>
-          </tr>
-          <tr>
-            <td class="e-nowrap">use-language-of-instruction</td>
-            <td>Boolean</td>
-            <td>No</td>
-            <td>false</td>
-            <td>Whether the student should answer the question in the language of instruction (typically the mother tongue) or the subject language. This attribute controls the HTML lang attribute of the input element, so a screen reader will read the answer using the correct language. Used only in secondary language exams.</td>
-          </tr>
-          <tr>
-            <td>class</td>
-            <td>CSS class</td>
-            <td>No</td>
-            <td>-</td>
-            <td>CSS class name</td>
-          </tr>
-        </tbody>
-      </table>
-
-      <table class="e-table e-width-full">
-        <caption>
-          Element attributes (
-          <code>e:accepted-answer</code>
-          )
-        </caption>
-        <thead>
-          <tr>
-            <th>Attribute</th>
-            <th>Type</th>
-            <th>Mandatory</th>
-            <th>Default value</th>
-            <th>Description</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>score</td>
-            <td>Integer</td>
-            <td>Yes</td>
-            <td>-</td>
-            <td>Score for answer</td>
-          </tr>
-        </tbody>
-      </table>
-
-      <h4>
-        Example of
-        <code>e:scored-text-answer</code>
-      </h4>
-      <pre class="code"><![CDATA[<e:hints>
-  Lorem ipsum,
-  <e:scored-text-answer>
-    <e:hint>dolor?</e:hint>
-    <e:accepted-answer score="1">dolor</e:accepted-answer>
-  </e:scored-text-answer>
-  dolor sit amet consectetur adipisicing
-  <e:scored-text-answer>
-    <e:hint>elit?</e:hint>
-    <e:accepted-answer score="1">elit</e:accepted-answer>
-  </e:scored-text-answer>
-  . Aliquam, explicabo. Ut,
-  <e:scored-text-answer>
-    <e:hint>vero?</e:hint>
-    <e:accepted-answer score="1">vero</e:accepted-answer>
-  </e:scored-text-answer>
-  ? Exercitationem eos unde possimus
-  <e:scored-text-answer>
-    <e:hint>laboriosam?</e:hint>
-    <e:accepted-answer score="1">laboriosam</e:accepted-answer>
-  </e:scored-text-answer>
-  , consectetur cum perspiciatis aut
-  <e:scored-text-answer>
-    <e:hint>dolores?</e:hint>
-    <e:accepted-answer score="1">dolores</e:accepted-answer>
-  </e:scored-text-answer>
-  quas autem eaque impedit dolore. Blanditiis, eos doloribus.
-</e:hints>]]></pre>
-      <div class="example">
-        <e:hints>
-          Lorem ipsum,
-          <e:scored-text-answer>
-            <e:hint>dolor?</e:hint>
-            <e:accepted-answer score="1">dolor</e:accepted-answer>
-          </e:scored-text-answer>
-          dolor sit amet consectetur adipisicing
-          <e:scored-text-answer>
-            <e:hint>elit?</e:hint>
-            <e:accepted-answer score="1">elit</e:accepted-answer>
-          </e:scored-text-answer>
-          . Aliquam, explicabo. Ut,
-          <e:scored-text-answer>
-            <e:hint>vero?</e:hint>
-            <e:accepted-answer score="1">vero</e:accepted-answer>
-          </e:scored-text-answer>
-          ? Exercitationem eos unde possimus
-          <e:scored-text-answer>
-            <e:hint>laboriosam?</e:hint>
-            <e:accepted-answer score="1">laboriosam</e:accepted-answer>
-          </e:scored-text-answer>
-          , consectetur cum perspiciatis aut
-          <e:scored-text-answer>
-            <e:hint>dolores?</e:hint>
-            <e:accepted-answer score="1">dolores</e:accepted-answer>
-          </e:scored-text-answer>
-          quas autem eaque impedit dolore. Blanditiis, eos doloribus.
-        </e:hints>
-      </div>
-
-      <h4>
-        Example without hints
-      </h4>
-      <p>
-        <code>e:scored-text-answer</code>
-        can also be used without hints, e.g. in
-        mathematics exams.
-      </p>
-      <pre class="code"><![CDATA[<e:formula>\frac{4{\pi}}{2}</e:formula> simplified:
-<e:scored-text-answer max-score="3"/>]]></pre>
-      <div class="example">
-        <e:formula>\frac{4{\pi}}{2}</e:formula>
-        simplified:
-        <e:scored-text-answer max-score="3"/>
-      </div>
-    </e:question>
-  </e:section>
-
-  <e:section>
-    <e:section-title>Material</e:section-title>
-    <e:question>
-      <e:question-title>attachment</e:question-title>
-      <e:question-instruction>
-        <p>
-          Questions can contain material like images, videos, HTML or files opened in external application.
-          Reference data can be defined within the
-          <code>e:attachment</code>
-          by using
-          <code>e:reference</code>
-          element. Reference information is displayed by adding
-          <code>e:references</code>
-          element, usually at the end of the exam.
-        </p>
-        <p>
-          If material should be
-          displayed on an external material page, the
-          <code>e:attachment</code>
-          element can be defined
-          as a child of an
-          <code>e:external-material</code>
-          element.
-        </p>
-        <p>
-          <code>e:external-material</code>
-          can be either a child of an
-          <code>e:exam</code>
-          or
-          <code>e:question</code>
-          element, depending on whether the material is exam-specific, or specific to a single question.
-        </p>
-      </e:question-instruction>
-
-      <table class="e-table e-width-full">
-        <caption>Element attributes</caption>
-        <thead>
-          <tr>
-            <th>Attribute</th>
-            <th>Type</th>
-            <th>Mandatory</th>
-            <th>Default value</th>
-            <th>Description</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>name</td>
-            <td>String</td>
-            <td>No</td>
-            <td>–</td>
-            <td>
-              Name of the material. Used only when material is linked to from
-              <code>e:attachment-link</code>
-              or
-              <code>e:attachment-links</code>
-              element.
-            </td>
-          </tr>
-          <tr>
-            <td>lang</td>
-            <td>String</td>
-            <td>No</td>
-            <td>–</td>
-            <td>Exam language code. Use when material should be included only in certain language version.
-            </td>
-          </tr>
-        </tbody>
-      </table>
-      <table class="e-table e-width-full">
-        <caption>
-          Sub-elements of
-          <code>e:reference</code>
-        </caption>
-        <thead>
-          <tr>
-            <th>Element</th>
-            <th>Type</th>
-            <th>Mandatory</th>
-            <th>Default value</th>
-            <th>Description</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>author</td>
-            <td>String</td>
-            <td>No</td>
-            <td/>
-            <td>Author of the material</td>
-          </tr>
-          <tr>
-            <td>title</td>
-            <td>String</td>
-            <td>No</td>
-            <td/>
-            <td>title of the material title</td>
-          </tr>
-          <tr>
-            <td>publisher</td>
-            <td>String</td>
-            <td>No</td>
-            <td/>
-            <td>Publisher</td>
-          </tr>
-          <tr>
-            <td>publication</td>
-            <td>String</td>
-            <td>No</td>
-            <td/>
-            <td>Reference to the original source, e.g. "Youtube service"</td>
-          </tr>
-          <tr>
-            <td>howpublished</td>
-            <td>String</td>
-            <td>No</td>
-            <td/>
-            <td>Release channel, e.g. "Genius web service"</td>
-          </tr>
-          <tr>
-            <td>url</td>
-            <td>String</td>
-            <td>No</td>
-            <td/>
-            <td>Internet address</td>
-          </tr>
-          <tr>
-            <td>publication-date</td>
-            <td>Date</td>
-            <td>No</td>
-            <td/>
-            <td>Publication date, e.g. 2019-03-01 or 2019</td>
-          </tr>
-          <tr>
-            <td>reference-date</td>
-            <td>Date</td>
-            <td>No</td>
-            <td/>
-            <td>Refernece date, e.g. 2019-05-01 or 2019</td>
-          </tr>
-          <tr>
-            <td>translator</td>
-            <td>String</td>
-            <td>No</td>
-            <td/>
-            <td>Name of the translator</td>
-          </tr>
-          <tr>
-            <td>modified-by</td>
-            <td>String</td>
-            <td>No</td>
-            <td/>
-            <td>Name of the modifier</td>
-          </tr>
-          <tr>
-            <td>note</td>
-            <td>String</td>
-            <td>No</td>
-            <td/>
-            <td>Free text</td>
-          </tr>
-        </tbody>
-      </table>
-      <h4>Example of internal material</h4>
-      <pre class="code"><![CDATA[<e:attachment>
-  <e:attachment-title>Title</e:attachment-title>
-  <p>...HTML code...</p>
-  <e:image src="example.jpg" />
-  <p>...More HTML code...</p>
-  <e:reference>
-    <e:author>Dolor Tempor</e:author>
-    <e:title>Qui ullamco non ut proident sit incididunt adipisicing</e:title>
-    <e:publisher>Culpa ex</e:publisher>
-    <e:publication>MEB web service</e:publication>
-    <e:howpublished>Internet service</e:howpublished>
-    <e:url>https://www.ylioppilastutkinto.fi/en/matriculation-examination</e:url>
-    <e:publication-date>1983-05-09</e:publication-date>
-    <e:reference-date>2019-04-01</e:reference-date>
-    <e:translator>Travis Translator</e:translator>
-    <e:modified-by>Mary Modifier</e:modified-by>
-    <e:note>Free text field</e:note>
-  </e:reference>
-</e:attachment>]]></pre>
-      <div class="example">
-        <e:attachment>
-          <e:attachment-title>Title</e:attachment-title>
-          <p>...HTML code...</p>
-          <e:image src="example.jpg"/>
-          <p>...More HTML code...</p>
-          <e:reference>
-            <e:author>Dolor Tempor</e:author>
-            <e:title>Qui ullamco non ut proident sit incididunt adipisicing</e:title>
-            <e:publisher>Culpa ex</e:publisher>
-            <e:publication>MEB web service</e:publication>
-            <e:howpublished>Internet service</e:howpublished>
-            <e:url>https://www.ylioppilastutkinto.fi/en/matriculation-examination</e:url>
-            <e:publication-date>1983-05-09</e:publication-date>
-            <e:reference-date>2019-04-01</e:reference-date>
-            <e:translator>Travis Translator</e:translator>
-            <e:modified-by>Mary Modifier</e:modified-by>
-            <e:note>Free text field</e:note>
-          </e:reference>
-        </e:attachment>
-      </div>
-
-      <h4>Example of external material</h4>
-      <pre class="code"><![CDATA[<e:external-material>
-  <e:attachment name="test-material">
-    <e:attachment-title>Title 1</e:attachment-title>
-    <p>...HTML code...</p>
-    <e:image src="example.jpg" />
-    <p>...More HTML code...</p>
-    <e:reference>
-      <e:author>Matriculation examination board</e:author>
-    </e:reference>
-  </e:attachment>
-  <e:attachment name="another-test-material">
-    <e:attachment-title>Title 2</e:attachment-title>
-    <e:video src="example1.webm" />
-    <e:reference>
-      <e:author>Dolor Tempor</e:author>
-      <e:title>Qui ullamco non ut proident sit incididunt adipisicing</e:title>
-      <e:publisher>Culpa ex</e:publisher>
-      <e:publication>MEB web service</e:publication>
-      <e:howpublished>Internet service</e:howpublished>
-      <e:url>https://www.ylioppilastutkinto.fi/en/matriculation-examination</e:url>
-      <e:publication-date>1983-05-09</e:publication-date>
-      <e:reference-date>2019-04-01</e:reference-date>
-      <e:translator>Travis Translator</e:translator>
-      <e:modified-by>Mary Modifier</e:modified-by>
-      <e:note>Free text field</e:note>
-    </e:reference>
-  </e:attachment>
-</e:external-material>]]></pre>
-      <e:external-material>
-        <e:attachment name="test-material">
-          <e:attachment-title>Title 1</e:attachment-title>
-          <p>...HTML code...</p>
-          <e:image src="example.jpg"/>
-          <p>...More HTML code...</p>
-          <e:reference>
-            <e:author>Matriculation examination board</e:author>
-          </e:reference>
-        </e:attachment>
-        <e:attachment name="another-test-material">
-          <e:attachment-title>Title 2</e:attachment-title>
-          <e:video src="example1.webm"/>
-          <e:reference>
-            <e:author>Dolor Tempor</e:author>
-            <e:title>Qui ullamco non ut proident sit incididunt adipisicing</e:title>
-            <e:publisher>Culpa ex</e:publisher>
-            <e:publication>MEB web service</e:publication>
-            <e:howpublished>Internet service</e:howpublished>
-            <e:url>https://www.ylioppilastutkinto.fi/en/matriculation-examination</e:url>
-            <e:publication-date>1983-05-09</e:publication-date>
-            <e:reference-date>2019-04-01</e:reference-date>
-            <e:translator>Travis Translator</e:translator>
-            <e:modified-by>Mary Modifier</e:modified-by>
-            <e:note>Free text field</e:note>
-          </e:reference>
-        </e:attachment>
-      </e:external-material>
-
-      <h4>Example of exam-specific external material</h4>
-      <pre class="code"><![CDATA[<e:exam ...>
-  ...
-  <e:table-of-contents />
-  <e:external-material>
-    <e:attachment>
-      <e:attachment-title>Exam-specific external material title</e:attachment-title>
-      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
-          Aspernatur, libero sunt. Eos corporis quam fugiat maiores
-          expedita quidem quaerat, quos voluptatem similique quae cum.
-          Voluptate iste sed facere cum omnis.</p>
-      <e:reference>
-        <e:author>YTL</e:author>
-      </e:reference>
-    </e:attachment>
-  </e:external-material>
-  <e:section>
-    ...]]></pre>
-
-    </e:question>
-    <e:question>
-      <e:question-title>image</e:question-title>
-      <e:question-instruction>
-        <code>e:image</code>
-        element adds an image to the exam. It can be used anywhere where
-        HTML is allowed.
-      </e:question-instruction>
-
-      <table class="e-table e-width-full">
-        <caption>Element attributes</caption>
-        <thead>
-          <tr>
-            <th>Attribute</th>
-            <th>Type</th>
-            <th>Mandatory</th>
-            <th>Default value</th>
-            <th>Description</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>src</td>
-            <td>String</td>
-            <td>Yes</td>
-            <td>–</td>
-            <td>Filename of the image</td>
-          </tr>
-          <tr>
-            <td>lang</td>
-            <td>String</td>
-            <td>No</td>
-            <td>–</td>
-            <td>Exam language code. Use when image should be included only in certain language version.
-            </td>
-          </tr>
-          <tr>
-            <td>class</td>
-            <td>CSS class</td>
-            <td>No</td>
-            <td>-</td>
-            <td>CSS class name</td>
-          </tr>
-        </tbody>
-      </table>
-
-      <h4>Example</h4>
-      <pre class="code"><![CDATA[<e:image src="example.jpg">
-  <e:image-title>Optional image title text</e:image-title>
-</e:image>]]></pre>
-      <div class="example">
-        <e:image src="example.jpg">
-          <e:image-title>Optional image title text</e:image-title>
-        </e:image>
-      </div>
-    </e:question>
-    <e:question>
-      <e:question-title>image-overlay</e:question-title>
-      <e:question-instruction>
-        <p>
-          <code>e:image-overlay</code>
-          element can contain one or more image elements. It can be used anywhere where
-        HTML is allowed. The images are rendered on top of each other, and an input slider
-        is added for each image to allow for the adjustment of the opacity (transparency) of
-        the image. The label for each input slider is taken from the text
-        inside each
-          <code>e:image</code>
-          element. The text can be localized.
-        </p>
-        <p>Make sure that all the images have the same width
-          and height in pixels. Differently sized images will cause unwanted layout effects.
-        </p>
-      </e:question-instruction>
-
-      <table class="e-table e-width-full">
-        <caption>Element attributes</caption>
-        <thead>
-          <tr>
-            <th>Attribute</th>
-            <th>Type</th>
-            <th>Mandatory</th>
-            <th>Default value</th>
-            <th>Description</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>lang</td>
-            <td>String</td>
-            <td>No</td>
-            <td>–</td>
-            <td>Exam language code. Use when image-overlay should be included only in a certain language version.
-            </td>
-          </tr>
-        </tbody>
-      </table>
-
-      <h4>Example</h4>
-      <pre class="code"><![CDATA[<e:image-overlay>
-  <e:image src="map-example-1.jpg">
-    <e:image-title>Topographic Map</e:image-title>
-  </e:image>
-  <e:image src="map-example-2.jpg">
-    <e:image-title>Public Transport Map
-  </e:image>
-  <e:image src="map-example-3.jpg">
-    <e:image-title>Bike Lanes Map<e:image-title>
-  </e:image>
-</e:image-overlay>]]></pre>
-      <div class="example">
-        <e:image-overlay>
-          <e:image src="map-example-1.jpg">
-            <e:image-title>Topographic Map</e:image-title>
-          </e:image>
-          <e:image src="map-example-2.jpg">
-            <e:image-title>Public Transport Map</e:image-title>
-          </e:image>
-          <e:image src="map-example-3.jpg">
-            <e:image-title>Bike Lanes Map</e:image-title>
-          </e:image>
-        </e:image-overlay>
-        <p>Example maps © OpenStreetMap contributors</p>
-      </div>
-    </e:question>
-    <e:question>
-      <e:question-title>audio</e:question-title>
-      <e:question-instruction>
-        <code>e:audio</code>
-        element adds an audio to the exam. It can be used anywhere where
-          HTML is allowed.
-      </e:question-instruction>
-
-      <table class="e-table e-width-full">
-        <caption>Element attributes</caption>
-        <thead>
-          <tr>
-            <th>Attribute</th>
-            <th>Type</th>
-            <th>Mandatory</th>
-            <th>Default value</th>
-            <th>Description</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>src</td>
-            <td>String</td>
-            <td>Yes</td>
-            <td>–</td>
-            <td>Audio file name</td>
-          </tr>
-          <tr>
-            <td>times</td>
-            <td>Integer</td>
-            <td>No</td>
-            <td>∞</td>
-            <td>Maximum number of times the audio can be played by the examinee</td>
-          </tr>
-          <tr>
-            <td>lang</td>
-            <td>String</td>
-            <td>No</td>
-            <td>–</td>
-            <td>Exam language code. Use when audio should be included only in certain language version.
-            </td>
-          </tr>
-          <tr>
-            <td>class</td>
-            <td>CSS class</td>
-            <td>No</td>
-            <td>-</td>
-            <td>CSS class name</td>
-          </tr>
-        </tbody>
-      </table>
-
-      <h4>Example</h4>
-      <pre class="code"><![CDATA[<e:audio src="example1.webm" times="2">
-  <e:audio-title>Optional description</e:audio-title>
-</e:audio>]]></pre>
-      <div class="example">
-        <e:audio src="example1.webm" times="2"><e:audio-title>Optional description</e:audio-title></e:audio>
-      </div>
-    </e:question>
-    <e:question>
-      <e:question-title>audio-group</e:question-title>
-      <e:question-instruction>
-        <code>e:audio-group</code>
-        element can be used to group audio elements by adding
-        a separator before the group.
-      </e:question-instruction>
-      <h4>Example</h4>
-      <pre class="code"><![CDATA[<e:audio-group>
-  <e:audio src="example1.webm" times="2">
-    <e:audio-title>The whole recording<e:audio-title>
-  </e:audio>
-</e:audio-group>
-<e:audio-group>
-  <e:question>
-    <e:question-title>Kuuntelumonivalinta</e:question-title>
-    <e:choice-answer>
-      <e:choice-answer-option score="2">Lorem</e:choice-answer-option>
-      <e:choice-answer-option score="0">Ipsum</e:choice-answer-option>
-      <e:choice-answer-option>Dolor</e:choice-answer-option>
-      <e:choice-answer-option score="-1">Sit</e:choice-answer-option>
-    </e:choice-answer>
-  </e:question>
-  <e:question>
-    <e:question-title>Kuuntelumonivalinta</e:question-title>
-    <e:choice-answer>
-      <e:choice-answer-option score="2">Lorem</e:choice-answer-option>
-      <e:choice-answer-option score="0">Ipsum</e:choice-answer-option>
-      <e:choice-answer-option>Dolor</e:choice-answer-option>
-      <e:choice-answer-option score="-1">Sit</e:choice-answer-option>
-    </e:choice-answer>
-  </e:question>
-  <e:audio src="example2.webm" times="2">
-    <e:audio-title>The passage related to questions 11.1. and 11.2.</e:audio-title>
-  </e:audio>
-</e:audio-group>
-<e:audio-group>
-  <e:question>
-    <e:question-title>Kuuntelumonivalinta</e:question-title>
-    <e:choice-answer>
-      <e:choice-answer-option score="2">Lorem</e:choice-answer-option>
-      <e:choice-answer-option score="0">Ipsum</e:choice-answer-option>
-      <e:choice-answer-option>Dolor</e:choice-answer-option>
-      <e:choice-answer-option score="-1">Sit</e:choice-answer-option>
-    </e:choice-answer>
-  </e:question>
-  <e:audio src="example3.webm" times="2">
-    <e:audio-title>The passage related to question 11.3.<e:audio-title>
-  </e:audio>
-</e:audio-group>]]></pre>
-      <div class="example">
-        <e:audio-group>
-          <e:audio src="example1.webm" times="2"><e:audio-title>The whole recording</e:audio-title></e:audio>
-        </e:audio-group>
-        <e:audio-group>
-          <e:question>
-            <e:question-title>Listening comprehension choice question</e:question-title>
-            <e:choice-answer>
-              <e:choice-answer-option score="2">Lorem</e:choice-answer-option>
-              <e:choice-answer-option score="0">Ipsum</e:choice-answer-option>
-              <e:choice-answer-option>Dolor</e:choice-answer-option>
-              <e:choice-answer-option score="-1">Sit</e:choice-answer-option>
-            </e:choice-answer>
-          </e:question>
-          <e:question>
-            <e:question-title>Listening comprehension choice question</e:question-title>
-            <e:choice-answer>
-              <e:choice-answer-option score="2">Lorem</e:choice-answer-option>
-              <e:choice-answer-option score="0">Ipsum</e:choice-answer-option>
-              <e:choice-answer-option>Dolor</e:choice-answer-option>
-              <e:choice-answer-option score="-1">Sit</e:choice-answer-option>
-            </e:choice-answer>
-          </e:question>
-          <e:audio src="example2.webm" times="2"><e:audio-title>The passage related to the two sub-questions immediately above.</e:audio-title></e:audio>
-        </e:audio-group>
-        <e:audio-group>
-          <e:question>
-            <e:question-title>Listening comprehension</e:question-title>
-            <e:choice-answer>
-              <e:choice-answer-option score="2">Lorem</e:choice-answer-option>
-              <e:choice-answer-option score="0">Ipsum</e:choice-answer-option>
-              <e:choice-answer-option>Dolor</e:choice-answer-option>
-              <e:choice-answer-option score="-1">Sit</e:choice-answer-option>
-            </e:choice-answer>
-          </e:question>
-          <e:audio src="example3.webm" times="2"><e:audio-title>The passage related to the sub-question immediately above.</e:audio-title></e:audio>
-        </e:audio-group>
-      </div>
-    </e:question>
-    <e:question>
-      <e:question-title>video</e:question-title>
-      <e:question-instruction>
-        <code>e:video</code>
-        element adds an video to the exam. It can be used anywhere where
-          HTML is allowed.
-      </e:question-instruction>
-
-      <table class="e-table e-width-full">
-        <caption>Element attributes</caption>
-        <thead>
-          <tr>
-            <th>Attribute</th>
-            <th>Type</th>
-            <th>Mandatory</th>
-            <th>Default value</th>
-            <th>Description</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>src</td>
-            <td>String</td>
-            <td>Yes</td>
-            <td>–</td>
-            <td>Video file name</td>
-          </tr>
-          <tr>
-            <td>lang</td>
-            <td>String</td>
-            <td>No</td>
-            <td>–</td>
-            <td>Exam language code. Use when video should be included only in certain language version.
-            </td>
-          </tr>
-          <tr>
-            <td>class</td>
-            <td>CSS class</td>
-            <td>No</td>
-            <td>-</td>
-            <td>CSS class name</td>
-          </tr>
-        </tbody>
-      </table>
-
-      <h4>Example</h4>
-      <pre class="code"><![CDATA[<e:video src="example1.webm" />]]></pre>
-      <div class="example">
-        <e:video src="example1.webm"/>
-      </div>
-    </e:question>
-
-    <e:question>
-      <e:question-title>file</e:question-title>
-      <e:question-instruction>
-        <code>e:file</code>
-        element adds an external file to the exam. It can be used anywhere where
-        HTML is allowed.
-      </e:question-instruction>
-
-      <table class="e-table e-width-full">
-        <caption>Element attributes</caption>
-        <thead>
-          <tr>
-            <th>Attribute</th>
-            <th>Type</th>
-            <th>Mandatory</th>
-            <th>Default value</th>
-            <th>Description</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>src</td>
-            <td>String</td>
-            <td>Yes</td>
-            <td>–</td>
-            <td>Filename</td>
-          </tr>
-          <tr>
-            <td>lang</td>
-            <td>String</td>
-            <td>No</td>
-            <td>–</td>
-            <td>Exam language code. Use when file should be included only in certain language version.
-            </td>
-          </tr>
-          <tr>
-            <td>class</td>
-            <td>CSS class</td>
-            <td>No</td>
-            <td>-</td>
-            <td>CSS class name</td>
-          </tr>
-        </tbody>
-      </table>
-
-      <h4>Exmaple</h4>
-      <pre class="code"><![CDATA[<e:file src="example1.webm">Text of the file link</e:file>]]></pre>
-      <div class="example">
-        <e:file src="example1.webm">Text of the file link</e:file>
-      </div>
-    </e:question>
-  </e:section>
-
-  <e:section>
-    <e:section-title>Links to material</e:section-title>
-    <e:question>
-      <e:question-title>attachment-link</e:question-title>
-      <e:question-instruction>
-        Material on external material page can be linked to from exam page by using
-        <code>e:attachment-link</code>
-        element.
-      </e:question-instruction>
-
-      <table class="e-table e-width-full">
-        <caption>
-          Element attributes
-        </caption>
-        <thead>
-          <tr>
-            <th>Attribute</th>
-            <th>Type</th>
-            <th>Mandatory</th>
-            <th>Default value</th>
-            <th>Description</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>ref</td>
-            <td>String</td>
-            <td>Yes</td>
-            <td>–</td>
-            <td>
-              Value of the linked
-              <code>e:attachment</code>
-              's
-              <code>name</code>
-              attribute.
-            </td>
-          </tr>
-          <tr>
-            <td>type</td>
-            <td>
-              <code>long | short</code>
-            </td>
-            <td>No</td>
-            <td>
-              <code>long</code>
-            </td>
-            <td>Type of the reference, see example below.</td>
-          </tr>
-        </tbody>
-      </table>
-
-      <h4>Example</h4>
-      <pre class="code"><![CDATA[<e:attachment-link ref="test-material" />
-<e:attachment-link ref="another-test-material" type="short" />]]></pre>
-      <div class="example">
-        <code>long</code>
-        type reference:
-        <e:attachment-link ref="test-material"/>
-        <br/>
-        <code>short</code>
-        type reference:
-        <e:attachment-link ref="another-test-material" type="short"/>
-      </div>
-
-    </e:question>
-
-    <e:question>
-      <e:question-title>attachment-links</e:question-title>
-      <e:question-instruction>
-        Use
-        <code>e:attachment-links</code>
-        element to refere to multiple materials.
-      </e:question-instruction>
-
-      <h4>Example</h4>
-      <pre class="code"><![CDATA[<e:attachment-links>
-  <e:attachment-link ref="test-material" />
-  <e:attachment-link ref="another-test-material" />
-</e:attachment-links>
-<e:attachment-links type="short">
-  <e:attachment-link ref="test-material" />
-  <e:attachment-link ref="another-test-material" />
-</e:attachment-links>]]></pre>
-      <div class="example">
-        <e:attachment-links>
-          <e:attachment-link ref="test-material"/>
-          <e:attachment-link ref="another-test-material"/>
-        </e:attachment-links>
-        <br/>
-        <e:attachment-links type="short">
-          <e:attachment-link ref="test-material"/>
-          <e:attachment-link ref="another-test-material"/>
-        </e:attachment-links>
-      </div>
-    </e:question>
-  </e:section>
-
-  <e:section>
-    <e:section-title>Formulas</e:section-title>
-    <e:question>
-      <e:question-title>Adding formulas</e:question-title>
-      <e:question-instruction>
-        <p>
-          You can add
-          <e:formula>\LaTeX</e:formula>
-          formulas by using
-          <code>e:formula</code>
-          element. Formulas can be placed both
-          within text (
-          <code>inline</code>
-          ) and on their own line (
-          <code>display</code>
-          ).
-        </p>
-        <p>
-          By default, the
-          <e:formula>\LaTeX</e:formula>
-          source code of the
-          formula is displayed for screen readers. If you want to provide an
-          alternative screen reader representation of the formula, use the
-          <code>assistive-title</code>
-          attribute.
-        </p>
-      </e:question-instruction>
-
-      <table class="e-table e-width-full">
-        <caption>Element attributes</caption>
-        <thead>
-          <tr>
-            <th>Attribute</th>
-            <th>Type</th>
-            <th>Mandatory</th>
-            <th>Default value</th>
-            <th>Description</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>mode</td>
-            <td>
-              <code>inline | display</code>
-            </td>
-            <td>No</td>
-            <td>
-              <code>inline</code>
-            </td>
-            <td>Formula type</td>
-          </tr>
-          <tr>
-            <td>assistive-title</td>
-            <td>String</td>
-            <td>No</td>
-            <td>
-              The
-              <e:formula>\LaTeX</e:formula>
-              source code of the formula
-            </td>
-            <td>An alternative assistive title that describes the equation
-            for screen readers, perhaps using AsciiMath or Unicode
-            notation</td>
-          </tr>
-        </tbody>
-      </table>
-
-      <p>
-        Notice that certain characters in formulas require special notation.
-      </p>
-      <table class="e-table">
-        <caption/>
-        <thead>
-          <tr>
-            <th>Character</th>
-            <th>Notation</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>&gt;</td>
-            <td>
-              <code>&amp;gt;</code>
-            </td>
-          </tr>
-          <tr>
-            <td>&lt;</td>
-            <td>
-              <code>&amp;lt;</code>
-            </td>
-          </tr>
-          <tr>
-            <td>&amp;</td>
-            <td>
-              <code>&amp;amp;</code>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-      <p>
-        For longer formulas also
-        <code>
-          <![CDATA[<e:formula>]]>
-          &lt;![CDATA[ latex-code ]]&gt;
-          <![CDATA[</e:formula>]]>
-        </code>
-        may also be used. Inside a CDATA-block escaping is not required.
-      </p>
-
-      <h4>
-        Example of an
-        <code>inline</code>
-        formula
-      </h4>
-      <pre class="code"><![CDATA[<e:formula>\int_0^\infty e^{-x^2} dx=\frac{\sqrt{\pi}}{2}</e:formula>]]></pre>
-      <p>
-        <e:formula>\int_0^\infty e^{-x^2} dx=\frac{\sqrt{\pi}}{2}</e:formula>
-      </p>
-
-      <h4>
-        Example of a
-        <code>display</code>
-        formula
-      </h4>
-      <pre class="code"><![CDATA[<e:formula mode="display">\int_0^\infty e^{-x^2} dx=\frac{\sqrt{\pi}}{2}</e:formula>]]></pre>
-      <p>
-        <e:formula mode="display">\int_0^\infty e^{-x^2} dx=\frac{\sqrt{\pi}}{2}</e:formula>
-      </p>
-
-      <h4>
-        Example of a
-        <code>assistive-title</code>
-      </h4>
-      <pre class="code"><![CDATA[<e:formula assistive-title="10/36 &gt; 9/36 =1/4">\frac{10}{36}&gt;\frac{9}{36}=\frac{1}{4}</e:formula>]]></pre>
-      <p>
-        <e:formula assistive-title="10/36 &gt; 9/36 =1/4">\frac{10}{36}&gt;\frac{9}{36}=\frac{1}{4}</e:formula>
-      </p>
-    </e:question>
-  </e:section>
-
-  <e:section>
-    <e:section-title>CSS styles</e:section-title>
-
-    <e:question>
-      <e:question-title>Typography</e:question-title>
-
-      <h3>Title</h3>
-      <p>All common header levels are in use.</p>
-
-      <pre class="code"><![CDATA[<h1>h1. Title (40px, light)</h1>
-<h2>h2. Title (30px, normal)</h2>
-<h3>h3. Title (21px, semibold)</h3>
-<h4>h4. Title (18px, semibold)</h4>
-<h5>h5. Title (16px, semibold)</h5>
-<h6>h6. Title (16px, semibold)</h6>]]></pre>
-      <div class="example">
-        <h1>h1. Title (40px, light)</h1>
-        <h2>h2. Title (30px, normal)</h2>
-        <h3>h3. Title (21px, semibold)</h3>
-        <h4>h4. Title (18px, semibold)</h4>
-        <h5>h5. Title (16px, semibold)</h5>
-        <h6>h6. Title (16px, semibold)</h6>
-      </div>
-
-      <br/>
-
-      <h3>Text size</h3>
-      <p>
-        Text size can be modified using
-        <code>e-font-size-*</code>
-        classes.
-      </p>
-      <pre class="code"><![CDATA[<p class="e-font-size-xxxl">.e-font-size-xxxl: (40px)</p>
-<p class="e-font-size-xxl">.e-font-size-xxl: (30px)</p>
-<p class="e-font-size-xl">.e-font-size-xl: (21px)</p>
-<p class="e-font-size-l">.e-font-size-l: (18px)</p>
-<p class="e-font-size-m">.e-font-size-m: (16px, tekstin oletuskoko)</p>
-<p class="e-font-size-s">.e-font-size-s: (14px)</p>
-<p class="e-font-size-xs">.e-font-size-xs: (12px)</p>]]></pre>
-      <div class="example">
-        <p class="e-font-size-xxxl">.e-font-size-xxxl: (40px)</p>
-        <p class="e-font-size-xxl">.e-font-size-xxl: (30px)</p>
-        <p class="e-font-size-xl">.e-font-size-xl: (21px)</p>
-        <p class="e-font-size-l">.e-font-size-l: (18px)</p>
-        <p class="e-font-size-m">.e-font-size-m: (16px, tekstin oletuskoko)</p>
-        <p class="e-font-size-s">.e-font-size-s: (14px)</p>
-        <p class="e-font-size-xs">.e-font-size-xs: (12px)</p>
-      </div>
-
-      <h3>Typefaces</h3>
-      <p>
-        Typeface can be modified using
-        <code>e-semibold</code>
-        ,
-        <code>e-light</code>
-        ,
-        <code>e-italic</code>
-        , and
-        <code>e-normal</code>
-        classes.
-      </p>
-
-      <pre class="code"><![CDATA[<p class="e-semibold">.e-semibold: Lorem ipsum dolor sit amet</p>
-<p class="e-light">.e-light: Lorem ipsum dolor sit amet</p>
-<p class="e-italic">.e-italic: Lorem ipsum dolor sit amet</p>
-<p class="e-normal">.e-normal: Lorem ipsum dolor sit amet</p>
-<p class="e-underline">.e-underline: Lorem ipsum dolor sit amet</p>]]></pre>
-      <div class="example">
-        <p class="e-semibold">.e-semibold: Lorem ipsum dolor sit amet</p>
-        <p class="e-light">.e-light: Lorem ipsum dolor sit amet</p>
-        <p class="e-italic">.e-italic: Lorem ipsum dolor sit amet</p>
-        <p class="e-normal">.e-normal: Lorem ipsum dolor sit amet</p>
-        <p class="e-underline">.e-underline: Lorem ipsum dolor sit amet</p>
-      </div>
-
-      <h3>Text positioning</h3>
-      <p>
-        Text can be positioned both horizontally and vertically by using
-        <code>e-text-*</code>
-        classes.
-      </p>
-      <table class="e-table e-width-full">
-        <thead>
-          <tr>
-            <th>Class</th>
-            <th>Description</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>
-              <code>e-text-center</code>
-            </td>
-            <td>
-              <strong>Centers</strong>
-              text
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <code>e-text-left</code>
-            </td>
-            <td>
-              Aligns text to the
-              <strong>left</strong>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <code>e-text-right</code>
-            </td>
-            <td>
-              Aligns text to the
-              <strong>right</strong>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <code>e-text-justify</code>
-            </td>
-            <td>
-              <strong>Justifies</strong>
-              text
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <code>e-text-top</code>
-            </td>
-            <td>
-              Aligns text to the
-              <strong>top</strong>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <code>e-text-bottom</code>
-            </td>
-            <td>
-              Aligns text to the
-              <strong>bottom</strong>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-
-      <h3>Text helper classes</h3>
-      <table class="e-table e-width-full">
-        <thead>
-          <tr>
-            <th>Class</th>
-            <th>Description</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>
-              <code>e-nowrap</code>
-            </td>
-            <td>Prevent line wrapping</td>
-          </tr>
-          <tr>
-            <td>
-              <code>e-text-gap</code>
-            </td>
-            <td>
-              Create underlined gap within
-              <span class="e-text-gap">1.</span>
-              text.
-            </td>
-          </tr>
-        </tbody>
-      </table>
-
-      <h3>Quotes</h3>
-      <p>
-        Short quotes can be defined using
-        <code>blockquote</code>
-        element.
-      </p>
-      <pre class="code"><![CDATA[<blockquote>
-  <p>
-    Consectetur quis ad fugiat ad. Do consequat sunt sit non commodo. Fugiat
-    laborum Lorem sint laboris cupidatat ipsum eiusmod. Incididunt
-    exercitation nostrud duis nulla deserunt consectetur aliquip aliquip
-    cupidatat. In reprehenderit aliquip velit anim pariatur. Lorem cillum
-    irure cupidatat veniam non incididunt enim commodo. Cillum pariatur
-    tempor excepteur laboris tempor exercitation consequat laboris
-    adipisicing duis proident proident amet.
-  </p>
-  <p>—https://www.ylioppilastutkinto.fi</p>
-</blockquote>]]></pre>
-      <div class="example">
-        <blockquote>
-          <p>
-            Consectetur quis ad fugiat ad. Do consequat sunt sit non commodo. Fugiat laborum Lorem sint laboris cupidatat ipsum eiusmod.
-            Incididunt exercitation nostrud duis nulla deserunt consectetur aliquip aliquip cupidatat. In reprehenderit aliquip velit anim pariatur.
-            Lorem cillum irure cupidatat veniam non incididunt enim commodo. Cillum pariatur tempor excepteur laboris tempor exercitation
-            consequat laboris adipisicing duis proident proident amet.
-          </p>
-          <p>—https://www.ylioppilastutkinto.fi</p>
-        </blockquote>
-      </div>
-
-      <p>
-        Contents can also be highlighted using
-        <code>e-box</code>
-        class.
-      </p>
-      <pre class="code"><![CDATA[<div class="e-box">
-  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero
-  repudiandae sequi sapiente cumque necessitatibus ex voluptates
-  ullam eveniet consequuntur nulla suscipit laboriosam fugiat, soluta
-  repellat dolor quibusdam incidunt tempora. Suscipit.
-</div>]]></pre>
-      <div class="example">
-        <div class="e-box">
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero
-          repudiandae sequi sapiente cumque necessitatibus ex voluptates
-          ullam eveniet consequuntur nulla suscipit laboriosam fugiat, soluta
-          repellat dolor quibusdam incidunt tempora. Suscipit.
-        </div>
-      </div>
-
-    </e:question>
-
-    <e:question>
-      <e:question-title>Lists</e:question-title>
-      <e:question-instruction>There are helper classes for various ordered lists.</e:question-instruction>
-
-      <pre class="code"><![CDATA[<ol class="e-list-lower-alpha">
-  <li>Eka</li>
-  <li>Toka</li>
-  <li>Kolmas</li>
-</ol>]]></pre>
-      <div class="example">
-        <ol class="e-list-lower-alpha">
-          <li>First</li>
-          <li>Second</li>
-          <li>Third</li>
-        </ol>
-      </div>
-
-      <pre class="code"><![CDATA[<ol class="e-list-upper-alpha">
-  <li>Eka</li>
-  <li>Toka</li>
-  <li>Kolmas</li>
-</ol>]]></pre>
-      <div class="example">
-        <ol class="e-list-upper-alpha">
-          <li>First</li>
-          <li>Second</li>
-          <li>Third</li>
-        </ol>
-      </div>
-
-      <pre class="code"><![CDATA[<ol class="e-list-lower-roman">
-  <li>Eka</li>
-  <li>Toka</li>
-  <li>Kolmas</li>
-</ol>]]></pre>
-      <div class="example">
-        <ol class="e-list-lower-roman">
-          <li>First</li>
-          <li>Second</li>
-          <li>Third</li>
-        </ol>
-      </div>
-
-      <pre class="code"><![CDATA[<ol class="e-list-upper-roman">
-  <li>Eka</li>
-  <li>Toka</li>
-  <li>Kolmas</li>
-</ol>]]></pre>
-      <div class="example">
-        <ol class="e-list-upper-roman">
-          <li>First</li>
-          <li>Second</li>
-          <li>Third</li>
-        </ol>
-      </div>
-      <h4>Unordered list of words</h4>
-      <pre class="code"><![CDATA[<ul class="e-list-wordcloud">
-  <li>Sana</li>
-  <li>Moniosainen ilmaisu</li>
-  <li>Kolmas sana</li>
-  <li>Neljäs</li>
-  <li>Viides</li>
-  <li>Kuudes</li>
-  <li>Seitsemäs ilmaisu</li>
-  <li>Kahdeksas</li>
-  <li>Yhdeksäs</li>
-  <li>Kymmenes pidempi muoto</li>
-  <li>Yhdestoista</li>
-</ul>]]></pre>
-      <div class="example">
-        <ul class="e-list-wordcloud">
-          <li>Word</li>
-          <li>Multiword content</li>
-          <li>Third word</li>
-          <li>Fourth</li>
-          <li>Fifth</li>
-          <li>Sixth</li>
-          <li>Seventh word</li>
-          <li>Eighth</li>
-          <li>Ninth</li>
-          <li>Tenth longer word</li>
-          <li>Eleventh</li>
-        </ul>
-      </div>
-
-    </e:question>
-
-    <e:question>
-      <e:question-title>Floating</e:question-title>
-
-      <table class="e-table e-width-full">
-        <thead>
-          <tr>
-            <th>Class</th>
-            <th>Description</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>
-              <code>e-float-left</code>
-            </td>
-            <td>
-              Floats element to the
-              <strong>left</strong>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <code>e-float-right</code>
-            </td>
-            <td>
-              Floats element to the
-              <strong>right</strong>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <code>e-clearfix</code>
-            </td>
-            <td>Stops floating</td>
-          </tr>
-          <tr>
-            <td>
-              <code>e-width-full</code>
-            </td>
-            <td>
-              Sets element width to
-              <strong>100%</strong>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <code>e-width-threequarters</code>
-            </td>
-            <td>
-              Sets element width to
-              <strong>75%</strong>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <code>e-width-half</code>
-            </td>
-            <td>
-              Sets element width to
-              <strong>50%</strong>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <code>e-width-third</code>
-            </td>
-            <td>
-              Sets element width to
-              <strong>33%</strong>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <code>e-width-quarter</code>
-            </td>
-            <td>
-              Sets element width to
-              <strong>25%</strong>
-            </td>
-          </tr>
-
-        </tbody>
-      </table>
-
-      <h3>Example</h3>
-      <pre class="code"><![CDATA[<div class="e-clearfix">
-  <e:image src="example.jpg" class="e-width-half e-mrg-r-2 e-float-left" />
-  <p>Lorem ipsum dolor sit amet.</p>
-</div>
-<div class="e-clearfix">
-  <e:image src="example.jpg" class="e-width-third e-mrg-l-2 e-float-right" />
-  <p>Lorem ipsum dolor sit amet.</p>
-</div>]]></pre>
-      <div class="example">
-        <div class="e-clearfix">
-          <e:image src="example.jpg" class="e-width-half e-mrg-r-2 e-float-left"/>
-          <p>Lorem ipsum dolor sit amet.</p>
-        </div>
-        <div class="e-clearfix">
-          <e:image src="example.jpg" class="e-width-third e-mrg-l-2 e-float-right"/>
-          <p>Lorem ipsum dolor sit amet.</p>
-        </div>
-      </div>
-
-    </e:question>
-
-    <e:question>
-      <e:question-title>Illustration images</e:question-title>
-      <e:question-instruction>
-        For images aligned to the right there is a helper class
-        <code>e-illustration-right</code>
-        .
-        In addition to right alignment, it adds proper margins. The class does not restrict
-        image size, therefore
-        <code>e-width-*</code>
-        classes can be used simultaneously.
-      </e:question-instruction>
-
-      <h3>Example</h3>
-      <pre class="code"><![CDATA[<e:image src="example.jpg" class="e-illustration-right e-width-third" />
-<p>
-  Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos
-  dolores quam facere vel cum eos enim eaque soluta? Ullam doloribus
-  explicabo commodi numquam suscipit iste recusandae illum laboriosam
-  dolorum ducimus?
-</p>
-<p>
-  Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea
-  officiis adipisci odit neque quam corporis voluptatibus iste
-  veritatis libero tempora eius nihil facilis tempore, sit sunt enim
-  exercitationem. Suscipit, fugit?
-</p>
-<p>
-  Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed rerum
-  necessitatibus vero illo porro voluptatum fuga et quibusdam
-  voluptates adipisci veniam, quas natus exercitationem atque
-  voluptas tempora accusamus voluptate culpa!
-</p>]]></pre>
-      <div class="example e-clearfix">
-        <e:image src="example.jpg" class="e-illustration-right e-width-third"/>
-        <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos
-          dolores quam facere vel cum eos enim eaque soluta? Ullam doloribus
-          explicabo commodi numquam suscipit iste recusandae illum laboriosam
-          dolorum ducimus?
-        </p>
-        <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea
-          officiis adipisci odit neque quam corporis voluptatibus iste
-          veritatis libero tempora eius nihil facilis tempore, sit sunt enim
-          exercitationem. Suscipit, fugit?
-        </p>
-        <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed rerum
-          necessitatibus vero illo porro voluptatum fuga et quibusdam
-          voluptates adipisci veniam, quas natus exercitationem atque
-          voluptas tempora accusamus voluptate culpa!
-        </p>
-      </div>
-    </e:question>
-
-    <e:question>
-      <e:question-title>Margins and paddings</e:question-title>
-      <e:question-instruction>
-        <p>
-          For setting margin and padding there are own helper classes. The size set using
-          numbers, e.g. in
-          <code>e-pad-8</code>
-          the padding is 8 times larger than in
-          <code>e-pad-1</code>
-          .
-        </p>
-        <p>You can use numbers 1 to 8.</p>
-      </e:question-instruction>
-
-      <table class="e-table e-width-full">
-        <thead>
-          <tr>
-            <th>Class</th>
-            <th>Description</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>
-              <code>e-pad-*</code>
-            </td>
-            <td>
-              Padding to
-              <strong>every direction</strong>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <code>e-pad-l-*</code>
-            </td>
-            <td>
-              Padding to the
-              <strong>left</strong>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <code>e-pad-r-*</code>
-            </td>
-            <td>
-              Padding to the
-              <strong>right</strong>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <code>e-pad-l-*</code>
-            </td>
-            <td>
-              Padding to the
-              <strong>top</strong>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <code>e-pad-b-*</code>
-            </td>
-            <td>
-              Padding to the
-              <strong>bottom</strong>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <code>e-pad-x-*</code>
-            </td>
-            <td>
-              Padding to the
-              <strong>left and right</strong>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <code>e-pad-y-*</code>
-            </td>
-            <td>
-              Padding to the
-              <strong>top and bottom</strong>
-            </td>
-          </tr>
-
-          <tr>
-            <td>
-              <code>e-mrg-*</code>
-            </td>
-            <td>
-              Margin to
-              <strong>every direction</strong>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <code>e-mrg-l-*</code>
-            </td>
-            <td>
-              Margin to the
-              <strong>left</strong>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <code>e-mrg-r-*</code>
-            </td>
-            <td>
-              Margin to the
-              <strong>right</strong>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <code>e-mrg-t-*</code>
-            </td>
-            <td>
-              Margin to the
-              <strong>top</strong>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <code>e-mrg-b-*</code>
-            </td>
-            <td>
-              Margin to the
-              <strong>bottom</strong>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <code>e-mrg-x-*</code>
-            </td>
-            <td>
-              Margin to the
-              <strong>left and right</strong>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <code>e-mrg-y-*</code>
-            </td>
-            <td>
-              Margin to the
-              <strong>top and bottom</strong>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-
-      <pre class="code"><![CDATA[<div>
-  <span class="e-pad-1">e-pad-1</span>
-  <span class="e-pad-2">e-pad-2</span>
-  <span class="e-pad-4">e-pad-4</span>
-  <span class="e-pad-8">e-pad-8</span>
-</div>
-<div>
-  <span class="e-pad-l-1">e-pad-l-1</span>
-  <span class="e-pad-l-2">e-pad-l-2</span>
-  <span class="e-pad-l-4">e-pad-l-4</span>
-  <span class="e-pad-l-8">e-pad-l-8</span>
-</div>
-<div>
-  <span class="e-pad-r-1">e-pad-r-1</span>
-  <span class="e-pad-r-2">e-pad-r-2</span>
-  <span class="e-pad-r-4">e-pad-r-4</span>
-  <span class="e-pad-r-8">e-pad-r-8</span>
-</div>
-<div>
-  <span class="e-pad-x-1">e-pad-x-1</span>
-  <span class="e-pad-x-2">e-pad-x-2</span>
-  <span class="e-pad-x-4">e-pad-x-4</span>
-  <span class="e-pad-x-8">e-pad-x-8</span>
-</div>
-<div>
-  <span class="e-pad-y-1">e-pad-y-1</span>
-  <span class="e-pad-y-2">e-pad-y-2</span>
-  <span class="e-pad-y-4">e-pad-y-4</span>
-  <span class="e-pad-y-8">e-pad-y-8</span>
-</div>]]></pre>
-      <div class="example spacing-example">
-        <div>
-          <span class="e-pad-1">e-pad-1</span>
-          <span class="e-pad-2">e-pad-2</span>
-          <span class="e-pad-4">e-pad-4</span>
-          <span class="e-pad-8">e-pad-8</span>
-        </div>
-        <div>
-          <span class="e-pad-l-1">e-pad-l-1</span>
-          <span class="e-pad-l-2">e-pad-l-2</span>
-          <span class="e-pad-l-4">e-pad-l-4</span>
-          <span class="e-pad-l-8">e-pad-l-8</span>
-        </div>
-        <div>
-          <span class="e-pad-r-1">e-pad-r-1</span>
-          <span class="e-pad-r-2">e-pad-r-2</span>
-          <span class="e-pad-r-4">e-pad-r-4</span>
-          <span class="e-pad-r-8">e-pad-r-8</span>
-        </div>
-        <div>
-          <span class="e-pad-x-1">e-pad-x-1</span>
-          <span class="e-pad-x-2">e-pad-x-2</span>
-          <span class="e-pad-x-4">e-pad-x-4</span>
-          <span class="e-pad-x-8">e-pad-x-8</span>
-        </div>
-        <div>
-          <span class="e-pad-y-1">e-pad-y-1</span>
-          <span class="e-pad-y-2">e-pad-y-2</span>
-          <span class="e-pad-y-4">e-pad-y-4</span>
-          <span class="e-pad-y-8">e-pad-y-8</span>
-        </div>
-      </div>
-
-    </e:question>
-
-    <e:question>
-      <e:question-title>Tables</e:question-title>
-      <e:question-instruction>
-        Use classes
-        <code>e-table</code>
-        ,
-        <code>e-table--borderless</code>
-        , and
-        <code>e-table--zebra</code>
-        .
-      </e:question-instruction>
-
-      <pre class="code"><![CDATA[<table class="e-table e-width-full">
-  <caption>Table title</caption>
-  <thead>
-    <tr>
-      <th>First column</th>
-      <th>Second column</th>
-      <th>Third column</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>Lorem</td>
-      <td>Ipsum</td>
-      <td>Dolor</td>
-    </tr>
-  </tbody>
-</table>]]></pre>
-      <div class="example">
-        <table class="e-table e-width-full">
-          <caption>Table title</caption>
-          <thead>
-            <tr>
-              <th>First column</th>
-              <th>Second column</th>
-              <th>Third column</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>Lorem</td>
-              <td>Ipsum</td>
-              <td>Dolor</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
-      <pre class="code"><![CDATA[<table class="e-table e-table--borderless e-width-full">
-  <caption>Table title</caption>
-  <thead>
-  <tr>
-      <th>First column</th>
-      <th>Second column</th>
-      <th>Third column</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>Lorem</td>
-      <td>Ipsum</td>
-      <td>Dolor</td>
-    </tr>
-  </tbody>
-</table>]]></pre>
-      <div class="example">
-        <table class="e-table e-table--borderless e-width-full">
-          <caption>Table title</caption>
-          <thead>
-            <tr>
-              <th>First column</th>
-              <th>Second column</th>
-              <th>Third column</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>Lorem</td>
-              <td>Ipsum</td>
-              <td>Dolor</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
-      <pre class="code"><![CDATA[<table class="e-table e-table--borderless e-table--zebra e-width-full">
-  <caption>Table title</caption>
-  <thead>
-  <tr>
-      <th>First column</th>
-      <th>Second column</th>
-      <th>Third column</th>
-  </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>Lorem</td>
-      <td>Ipsum</td>
-      <td>Dolor</td>
-    </tr>
-    <tr>
-      <td>Ipsum</td>
-      <td>Dolor</td>
-      <td>Lorem</td>
-    </tr>
-    <tr>
-      <td>Dolor</td>
-      <td>Lorem</td>
-      <td>Ipsum</td>
-    </tr>
-    <tr>
-      <td>Lorem</td>
-      <td>Ipsum</td>
-      <td>Dolor</td>
-    </tr>
-  </tbody>
-</table>]]></pre>
-      <div class="example">
-        <table class="e-table e-table--borderless e-table--zebra e-width-full">
-          <caption>Table title</caption>
-          <thead>
-            <tr>
-              <th>First column</th>
-              <th>Second column</th>
-              <th>Third column</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>Lorem</td>
-              <td>Ipsum</td>
-              <td>Dolor</td>
-            </tr>
-            <tr>
-              <td>Ipsum</td>
-              <td>Dolor</td>
-              <td>Lorem</td>
-            </tr>
-            <tr>
-              <td>Dolor</td>
-              <td>Lorem</td>
-              <td>Ipsum</td>
-            </tr>
-            <tr>
-              <td>Lorem</td>
-              <td>Ipsum</td>
-              <td>Dolor</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
-      <p>
-        Cells can be formatted using e.g.
-        <code>e-pad-*</code>
-        or
-        <code>e-text-*</code>
-        classes.
-      </p>
-
-      <pre class="code"><![CDATA[<table class="e-table e-width-full">
-  <caption>Table title</caption>
-  <thead>
-    <tr>
-      <th class="e-pad-l-8">First column (padding to the left)</th>
-      <th class="e-text-center">Second column (centered)</th>
-      <th class="e-text-right">Third column (aligned to the right)</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td class="e-pad-l-8">Lorem</td>
-      <td class="e-text-center">Ipsum</td>
-      <td class="e-text-right">Dolor</td>
-    </tr>
-  </tbody>
-</table>]]></pre>
-      <div class="example">
-        <table class="e-table e-width-full">
-          <caption>Table title</caption>
-          <thead>
-            <tr>
-              <th class="e-pad-l-8">First column (padding to the left)</th>
-              <th class="e-text-center">Second column (centered)</th>
-              <th class="e-text-right">Third column (aligned to the right)</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td class="e-pad-l-8">Lorem</td>
-              <td class="e-text-center">Ipsum</td>
-              <td class="e-text-right">Dolor</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
-      <p>
-        If a table is very wide, you can prevent it from overflowing and make
-        it scrollable by wrapping it in an
-        <code>.e-scrollable-x</code>
-        element.
-      </p>
-
-      <pre class="code"><![CDATA[<div class="e-scrollable-x">
-  <table class="e-table">
-    …
-  </table>
-</div>]]></pre>
-      <div class="example">
-        <div class="e-scrollable-x">
-          <table class="e-table">
-            <thead>
-              <tr>
-                <th>Heading</th>
-                <th>Heading</th>
-                <th>Heading</th>
-                <th>Heading</th>
-                <th>Heading</th>
-                <th>Heading</th>
-                <th>Heading</th>
-                <th>Heading</th>
-                <th>Heading</th>
-                <th>Heading</th>
-                <th>Heading</th>
-                <th>Heading</th>
-                <th>Heading</th>
-                <th>Heading</th>
-                <th>Heading</th>
-                <th>Heading</th>
-                <th>Heading</th>
-                <th>Heading</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>Cell</td>
-                <td>Cell</td>
-                <td>Cell</td>
-                <td>Cell</td>
-                <td>Cell</td>
-                <td>Cell</td>
-                <td>Cell</td>
-                <td>Cell</td>
-                <td>Cell</td>
-                <td>Cell</td>
-                <td>Cell</td>
-                <td>Cell</td>
-                <td>Cell</td>
-                <td>Cell</td>
-                <td>Cell</td>
-                <td>Cell</td>
-                <td>Cell</td>
-                <td>Cell</td>
-              </tr>
-              <tr>
-                <td>Cell</td>
-                <td>Cell</td>
-                <td>Cell</td>
-                <td>Cell</td>
-                <td>Cell</td>
-                <td>Cell</td>
-                <td>Cell</td>
-                <td>Cell</td>
-                <td>Cell</td>
-                <td>Cell</td>
-                <td>Cell</td>
-                <td>Cell</td>
-                <td>Cell</td>
-                <td>Cell</td>
-                <td>Cell</td>
-                <td>Cell</td>
-                <td>Cell</td>
-                <td>Cell</td>
-              </tr>
-              <tr>
-                <td>Cell</td>
-                <td>Cell</td>
-                <td>Cell</td>
-                <td>Cell</td>
-                <td>Cell</td>
-                <td>Cell</td>
-                <td>Cell</td>
-                <td>Cell</td>
-                <td>Cell</td>
-                <td>Cell</td>
-                <td>Cell</td>
-                <td>Cell</td>
-                <td>Cell</td>
-                <td>Cell</td>
-                <td>Cell</td>
-                <td>Cell</td>
-                <td>Cell</td>
-                <td>Cell</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-
-    </e:question>
-
-    <e:question>
-      <e:question-title>Text columns</e:question-title>
-      <e:question-instruction>
-        <p>
-          Text columns can be added using
-          <code>e-columns</code>
-          class. Ever child element within it must have
-          <code>
-          e-column</code>
-          class
-        </p>
-        <p>There is some empty space between columns.</p>
-      </e:question-instruction>
-
-      <h4>Example</h4>
-
-      <p>By default columns have equal width</p>
-      <pre class="code"><![CDATA[<div class="e-columns">
-  <div class="e-column">e-column</div>
-  <div class="e-column">e-column</div>
-  <div class="e-column">e-column</div>
-  <div class="e-column">e-column</div>
-</div>]]></pre>
-      <div class="example grid-example">
-        <div class="e-columns">
-          <div class="e-column block">e-column</div>
-          <div class="e-column block">e-column</div>
-          <div class="e-column block">e-column</div>
-          <div class="e-column block">e-column</div>
-        </div>
-      </div>
-
-      <p>You can also use a 12 column system</p>
-      <pre class="code"><![CDATA[<div class="e-columns">
-  <div class="e-column e-column--6">e-column--6</div>
-  <div class="e-column e-column--3">e-column--3</div>
-  <div class="e-column e-column--3">e-column--3</div>
-</div>
-
-<div class="e-columns">
-  <div class="e-column e-column--8">e-column--8</div>
-  <div class="e-column e-column--2">e-column--2</div>
-  <div class="e-column e-column--2">e-column--2</div>
-</div>
-
-<div class="e-columns">
-  <div class="e-column e-column--2">e-column--2</div>
-  <div class="e-column e-column--8">e-column--8</div>
-  <div class="e-column e-column--2">e-column--2</div>
-</div>]]></pre>
-      <div class="example grid-example">
-        <div class="e-columns">
-          <div class="e-column e-column--6 block">e-column--6</div>
-          <div class="e-column e-column--3 block">e-column--3</div>
-          <div class="e-column e-column--3 block">e-column--3</div>
-        </div>
-
-        <div class="e-columns">
-          <div class="e-column e-column--8 block">e-column--8</div>
-          <div class="e-column e-column--2 block">e-column--2</div>
-          <div class="e-column e-column--2 block">e-column--2</div>
-        </div>
-
-        <div class="e-columns">
-          <div class="e-column e-column--2 block">e-column--2</div>
-          <div class="e-column e-column--8 block">e-column--8</div>
-          <div class="e-column e-column--2 block">e-column--2</div>
-        </div>
-      </div>
-
-      <p>
-        To make column as narrow as possible, use
-        <code>e-column--narrow</code>
-        class.
-      </p>
-      <pre class="code"><![CDATA[<div class="e-columns">
-  <div class="e-column">e-column</div>
-  <div class="e-column e-column--narrow">e-column--narrow</div>
-</div>]]></pre>
-      <div class="example grid-example">
-        <div class="e-columns">
-          <div class="e-column block">e-column</div>
-          <div class="e-column e-column--narrow block">e-column--narrow</div>
-        </div>
-      </div>
-    </e:question>
-  </e:section>
-
-  <e:references/>
-  <e:exam-footer>
-    <p>
-      For more information about using this format, see
-      <a href="https://github.com/digabi/exam-engine">https://github.com/digabi/exam-engine</a>
-    </p>
-    <p>
-      <a href="https://abitti.dev/abitti-trademark.html">Use of Abitti Trademark policy</a>
-    </p>
-  </e:exam-footer>
-</e:exam>