MEX format documentation

27.1.2022

This exam describes the MEX XML format.

For more information about using this format, see https://github.com/digabi/exam-engine

Some of the features have limited support in Abitti . These are documented in warning boxes like this.

Sisällys

Osa 1: Exam structure
1. XML structure0 p.
2. Exam0 p.
3. Languages and localization0 p.
Osa 2: Sections
Vastaa tehtävään 4.
1. Example question title0 p.
Osa 3: Questions
1. Example question title0 p.
2. Second example question title0 p.
Osa 4: Answer types
1. text-answer7 p.
2. choice-answer 2 p.
3. dropdown-answer 2 p.
4. scored-text-answer 8 p.
5. dnd-answer 8 p.
Osa 5: Material
1. attachmentAineisto0 p.
2. image0 p.
3. image-overlay0 p.
4. audio0 p.
5. audio-group6 p.
6. video0 p.
7. file0 p.
Osa 6: Links to material
1. attachment-link0 p.
2. attachment-links0 p.
Osa 7: Formulas
1. Adding formulas0 p.
Osa 8: CSS styles
1. Typography0 p.
2. Lists0 p.
3. Floating0 p.
4. Illustration images0 p.
5. Margins and paddings0 p.
6. Tables0 p.
7. Text columns0 p.

Koe yhteensä33 p.

Aineisto

Exam-specific external material title

Osa 1: Exam structure

1. XML structure 0 p.

Exam structure is described in XML. It can contain also (X)HTML elements.

Exam <e:exam> 1 element

Root element of the exam. All other elements are its descendants.

Exam languages <e:languages> 1 element

Exam language <e:language> 1-n elements

Exam title <e:exam-title> 1 element

Exam introduction and instructions <e:exam-instruction> 1 element

Reference to exam introduction and instructions read from file <e:exam-instruction-ref> 1 element

Table of contents <e:table-of-contents> 1 element

Exam-specific external material <e:external-material> 0-1 elements

External material page is constructed based on e:external-material elements defined within e:exam and e:question elements. Contains e:attachment elements.

Section <e:section> 1-n elements

Section groups questions

Section title <e:section-title> 1 element

Section title can contain HTML elements. Section number is added automatically.

Section instructions <e:section-instruction> 0-n elements

Section instructions can contain HTML elements.

Question <e:question> 0-n elements

Questions can contain sub- e:question s

Question title <e:question-title> 1 element

Question title can contain HTML elements. Question number is added automatically.

Question instructions <e:question-instruction> 0-1 elements

Question instructions can contain HTML elements.

Question-specific external material <e:external-material> 0-1 elements

External material page is constructed based on e:external-material elements defined within e:exam and e:question elements. Contains e:attachment elements.

Internal material <e:attachment> 0-n elements

Internal material is displayed directly on exam page. Use e:external-material to display material on separate external material page.

Material title <e:attachment-title> 1 element

Audio material <e:audio> 0-1 elements

Image material <e:image> 0-1 elements

Video material <e:video> 0-1 elements

Material reference <e:reference> 1 element. See section Material below for details.

Answer type, e.g. <e:text-answer> 0-n elements

See section Answer types below for details.

Question number, <e:question-number> 0-n elements

To show parent question number as a prefix and fixed number as a suffix.

OR

Sub-question <e:question> 0-n elements

Material references <e:references> 0-1 elements

Exam footer <e:exam-footer> 0-1 elements

1.1 Special characters as entities 0 p.

Certain characters requires escaping as entities in exam XML documents


Character	Notation
NBSP (non-breaking-space)	` `
SHY (soft-hyphen)	``
>	`>`
<	`<`
&	`&`

Notice, that e.g.   and  does not work.

2. Exam 0 p.

Top-level exam element.

Element attributes
Attribute	Type	Mandatory	Default value	Description
exam-schema-version	Version string	No	—	Schema version, only 0.1 for now
date	YYYY-MM-DD	No	—	Exam date
exam-code	exam code string	No	—	Exam code used for exam specific translations
day-code	exam day code string	No	—	Exam day code used for exam specific translations
exam-stylesheet	custom CSS stylesheet file name	No	—	CSS file with this name must exist in attachments directory
max-answers	Integer	No	No limit	Maximum number of questions student should answer
meta	String	No	–	Metadata about element

exam-code and day-code attributes control exam-specific translations, e.g. the heading text of table of contents, and the exam title if specific e:exam-title element is missing. Currently supported exam and day code pairs can be found in https://github.com/digabi/exam-engine/blob/master/packages/mastering/src/i18n/exam_titles_fi-FI.json .

max-answers is ignored in Abitti grading.

2.1 Example 0 p.

<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.net/schema/exam.xsd"
  exam-schema-version="0.1"
  date="2018-09-29"
  exam-code="EA"
  exam-stylesheet="custom.css">

3. Languages and localization 0 p.

Content for multiple language versions of the same exam can be defined using localization elements.

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.

3.1 Example 0 p.

<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>

Älä jätä mitään merkintöjä sellaisen tehtävän vastaukselle varattuun tilaan, jota et halua jättää arvosteltavaksi.

3.2 Pre-defined translations 0 p.

There are some pre-defined translations that can be easily reused with the e:translation tag. For example this code

<e:translation key="audio-test.instructions" />

renders the following text: Koe sisältää kuullunymmärtämisen tehtäviä.

For a full list of available translations, see these files. 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)

Osa 2: Sections

Vastaa tehtävään 4.

Exam consists of sections. Each section is described in e:section element.

Section can define how many questions should be answered using max-answers attribute.

max-answers is ignored in Abitti grading.

Section attribute type can be user to describe how an exam should be packed.

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.

CAS applications can be disabled for a section by setting cas-forbidden="true" attribute.

Metadata can be added with meta attribute.

Example of simple section

<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>

4. Example question title 0 p.

Question instructions

…HTML code, answer types, materials, sub-questions...

Osa 3: Questions

Every section consists of questions defined using e:question 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 max-answers attribute.

Maximum score of question is calculated automatically using the answer types, optional sub-questions and the limits from max-answers attributes.

max-answers is ignored in Abitti grading.

Metadata can be added with meta attribute.

Simple question example

<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>

5. Example question title 0 p.

Question description

…HTML code, answer types, materials, sub-questions, question numbers (e.g. 5.1)...

Sub-question example

<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>

6. Second example question title 0 p.

Vastaa joko kohtaan 6.1 tai 6.2.

Second example question instructions

6.1 First sub-question title 0 p.

First sub-question instructions

…HTML code, answer types, materials, sub-questions...

6.2 Second sub-question title 0 p.

Second sub-question instructions

…HTML code, answer types, materials, sub-questions...

Osa 4: Answer types

7. text-answer 7 p.

There are three types of text answers. rich-text answer is intended for verbose essay-style answers, whereas single-line answer is intended for short, at most couple words, answers. integer answer is intended for integer answers.

Examinee can also attach screenshots to rich-text answers.

Element attributes
Attribute	Type	Mandatory	Default value	Description
max-score	Integer	Yes	—	Maximum score
max-length	Integer	Yes	—	Maximum answer length. Works only for `rich-text` answers. It won't prevent student from entering an answer that is too long but warns the student about it.
use-language-of-instruction	Boolean	No	false	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.
type	`single-line \| rich-text \| integer`	No	`single-line`	Type
class	CSS class	No	-	CSS class name
meta	String	No	–	Metadata about element

`single-line` answer example

<e:text-answer max-score="2" />

^{2 p.}

`rich-text` answer example

<e:text-answer type="rich-text" max-score="2" />

`rich-text` answer with maximum length

<e:text-answer type="rich-text" max-score="2" max-length="20" />

Vastauksen pituus on enintään 20 merkkiä. Ylityksestä seuraa pistevähennys.

`integer` answer example

The answer can only contain digits (0...9), and optionally a minus sign (-) at the beginning

<e:text-answer type="integer" max-score="1" />

^{1 p.}

8. choice-answer 2 p.

e:choice-answer answer type creates a group of option buttons. Answer options are defined within it using e:choice-answer-option elements.

By default options are shuffled.

Element attributes ( `e:choice-answer` )
Attribute	Type	Mandatory	Default value	Description
ordering	`random \| fixed`	No	random	Ordering of options
direction	`vertical \| horizontal`	No	vertical	Direction of options
class	CSS class	No	-	CSS class name
meta	String	No	–	Metadata about element

Element attributes ( `e:choice-answer-option` )
Attribute	Type	Mandatory	Default value	Description
score	Integer	No	0	Score for option
class	CSS class	No	-	CSS class name
meta	String	No	–	Metadata about element

Examples

<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>

Ipsum

Dolor

Lorem

Sit

Options can contain any HTML code, like images or formulas

<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>

Horizontal direction works well for images

<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>

9. dropdown-answer 2 p.

e:dropdown-answer creates a dropdown menu. Similarly to e:choice-answer , answer options are defined within it using e:dropdown-anser-option elements.

Element attributes ( `e:dropdown-answer` )
Attribute	Type	Mandatory	Default value	Description
ordering	`random \| fixed`	No	random	Ordering of options
class	CSS class	No	-	CSS class name
meta	String	No	–	Metadata about element

Element attributes ( `e:dropdown-answer-option` )
Attribute	Type	Mandatory	Default value	Description
score	Integer	No	0	Score for option
class	CSS class	No	-	CSS class name
meta	String	No	–	Metadata about element

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>

10. scored-text-answer 8 p.

e:scored-text-answer is like e:text-answer , but it is graded automatically based on a set of correct answers. To display answer hints on the right side of the page, group e:scored-text-answer elements within a e:hints element.

scored-text-answer grading must be done manually in Abitti.

Element attributes ( `e:scored-text-answer` )
Attribute	Type	Mandatory	Default value	Description
max-score	Integer	No	0	Maximum score
use-language-of-instruction	Boolean	No	false	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.
class	CSS class	No	-	CSS class name
meta	String	No	–	Metadata about element

Element attributes ( `e:accepted-answer` )
Attribute	Type	Mandatory	Default value	Description
score	Integer	Yes	-	Score for answer
meta	String	No	–	Metadata about element

Example of `e:scored-text-answer`

<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>

Lorem ipsum, ^1.^{1 p.} dolor sit amet consectetur adipisicing ^2.^{1 p.} . Aliquam, explicabo. Ut, ^3.^{1 p.} ? Exercitationem eos unde possimus ^4.^{1 p.} , consectetur cum perspiciatis aut ^5.^{1 p.} quas autem eaque impedit dolore. Blanditiis, eos doloribus.

Example without hints

e:scored-text-answer can also be used without hints, e.g. in mathematics exams.

<e:formula>\frac{4{\pi}}{2}</e:formula> simplified:
<e:scored-text-answer max-score="3"/>

simplified: ^{3 p.}

11. dnd-answer 8 p.

e:dnd-answer is a connect type of drag-and-drop element. The correct answer is defined by placing a question in the e:dnd-answer-title element and the correct answer option in the e:dnd-answer-option within the e:dnd-answer element. e:dnd-answer elements are placed within the e:dnd-answer-container element. Wrong answers are defined by placing e:dnd-answer-option elements within the e:dnd-answer-container element. e:dnd-answer-title and e:dnd-answer-option can contain text, images, formulas and audio.

e:dnd-answer is automatically graded based on a set of correct answers

Element attributes ( `e:dnd-answer-container` )
Attribute	Type	Mandatory	Default value	Description
dnd-type	`connect`	Yes	connect	Drag-and-Drop type

Element attributes ( `e:dnd-answer` )
Attribute	Type	Mandatory	Default value	Description
max-score	Integer	Yes	3	Maximum score

Element attributes ( `e:dnd-answer-option` )
Attribute	Type	Mandatory	Default value	Description
score	Integer	Yes	3	Answer score

Example of `e:dnd-answer`

<e:question>
          <e:question-title></e:question-title>
          <e:question-instruction></e:question-instruction>
          <e:audio-group>
            <e:attachment>
              <e:attachment-title>example audio</e:attachment-title>
              <e:audio src="example1.webm" times="1"><e:audio-title>Listen to the text as a whole first.</e:audio-title></e:audio>
            </e:attachment>
          </e:audio-group>
          <e:dnd-answer-container meta='dnd answer container' dnd-type='connect'>
              <e:dnd-answer max-score="2">
                  <e:dnd-answer-title>
                    What time suits Lars best?
                    <e:audio src="example1.webm" times="1"></e:audio>
                  </e:dnd-answer-title>
                  <e:dnd-answer-option score="2">Monday, 3:00 PM</e:dnd-answer-option>
              </e:dnd-answer>
              <e:dnd-answer max-score="2">
                  <e:dnd-answer-title>
                    What time suits Katarina best?
                    <e:audio src="example1.webm" times="1"></e:audio>
                  </e:dnd-answer-title>
                  <e:dnd-answer-option score="2">Tuesday, 1:00 p.m.</e:dnd-answer-option>
              </e:dnd-answer>
              <e:dnd-answer max-score="2">
                  <e:dnd-answer-title>
                    What time suits Marit best?
                    <e:audio src="example1.webm" times="1"></e:audio>
                  </e:dnd-answer-title>
                  <e:dnd-answer-option score="2">Monday, 4:00 PM</e:dnd-answer-option>
              </e:dnd-answer>
              <e:dnd-answer-option>Monday, 1:00 PM</e:dnd-answer-option>
              <e:dnd-answer-option>Monday, 2:00 pm</e:dnd-answer-option>
              <e:dnd-answer-option>Tuesday, 2:00 pm</e:dnd-answer-option>
              <e:dnd-answer-option>Tuesday, 3:00 pm</e:dnd-answer-option>
              <e:dnd-answer-option>Tuesday, 4:00 pm</e:dnd-answer-option>
          </e:dnd-answer-container>
      </e:question>

✲✲✲

00:05

Listen to the text as a whole first.

1 kuuntelukerta jäljellä.

What time suits Lars best?

00:05

1 kuuntelukerta jäljellä.

(Ei vastausta)

2 p.

What time suits Katarina best?

00:05

1 kuuntelukerta jäljellä.

(Ei vastausta)

2 p.

What time suits Marit best?

00:05

1 kuuntelukerta jäljellä.

(Ei vastausta)

2 p.

Vastausvaihtoehdot:

Tuesday, 2:00 pm

Tuesday, 4:00 pm

Tuesday, 3:00 pm

Monday, 3:00 PM

Monday, 2:00 pm

Monday, 4:00 PM

Tuesday, 1:00 p.m.

Monday, 1:00 PM

<e:question>
        <e:question-title></e:question-title>
        <e:question-instruction></e:question-instruction>
        <e:dnd-answer-container dnd-type='connect'>
            <e:dnd-answer max-score="2">
                <e:dnd-answer-title>
                  <e:attachment>
                    <e:attachment-title>example audio</e:attachment-title>
                    <e:audio src="example1.webm"></e:audio>
                  </e:attachment>
                </e:dnd-answer-title>
                <e:dnd-answer-option score="2">
                  <e:attachment>
                    <e:attachment-title>example.jpg</e:attachment-title>
                    <e:image src="example.jpg"/>
                  </e:attachment>
                </e:dnd-answer-option>
            </e:dnd-answer>
            <e:dnd-answer-option>
              <e:attachment>
                <e:attachment-title>example.jpg</e:attachment-title>
                <e:image src="example.jpg"/>
              </e:attachment>
            </e:dnd-answer-option>
            <e:dnd-answer-option>
              <e:attachment>
                <e:attachment-title>example.jpg</e:attachment-title>
                <e:image src="example.jpg"/>
              </e:attachment>
            </e:dnd-answer-option>
        </e:dnd-answer-container>
      </e:question>

(Ei vastausta)

2 p.

Vastausvaihtoehdot:

Osa 5: Material

12. attachment 0 p.

Questions can contain material like images, videos, HTML or files opened in external application. Reference data can be defined within the e:attachment by using e:reference element. Reference information is displayed by adding e:references element, usually at the end of the exam.

If material should be displayed on an external material page, the e:attachment element can be defined as a child of an e:external-material element.

e:external-material can be either a child of an e:exam or e:question element, depending on whether the material is exam-specific, or specific to a single question.

Element attributes
Attribute	Type	Mandatory	Default value	Description
name	String	No	–	Name of the material. Used only when material is linked to from `e:attachment-link` or `e:attachment-links` element.
lang	String	No	–	Exam language code. Use when material should be included only in certain language version.
meta	String	No	–	Metadata about element

Sub-elements of `e:reference`
Element	Type	Mandatory	Description
author	String	No	Author of the material
title	String	No	title of the material title
publisher	String	No	Publisher
publication	String	No	Reference to the original source, e.g. "Youtube service"
howpublished	String	No	Release channel, e.g. "Genius web service"
url	String	No	Internet address
publication-date	Date	No	Publication date, e.g. 2019-03-01 or 2019
reference-date	Date	No	Refernece date, e.g. 2019-05-01 or 2019
translator	String	No	Name of the translator
modified-by	String	No	Name of the modifier
note	String	No	Free text

Example of internal material

<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>

...HTML code...

...More HTML code...

Example of external material

<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>

Aineisto

Example of exam-specific external material

<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>
    ...

13. image 0 p.

e:image element adds an image to the exam. It can be used anywhere where HTML is allowed.

Element attributes
Attribute	Type	Mandatory	Default value	Description
src	String	Yes	–	Filename of the image
lang	String	No	–	Exam language code. Use when image should be included only in certain language version.
class	CSS class	No	-	CSS class name

Example

<e:image src="example.jpg">
  <e:image-title>Optional image title text</e:image-title>
</e:image>

Optional image title text

14. image-overlay 0 p.

e:image-overlay 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 e:image element. The text can be localized.

Make sure that all the images have the same width and height in pixels. Differently sized images will cause unwanted layout effects.

Element attributes
Attribute	Type	Mandatory	Default value	Description
lang	String	No	–	Exam language code. Use when image-overlay should be included only in a certain language version.
meta	String	No	–	Metadata about element

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>
  <e:image src="map-example-3.jpg">
    <e:image-title>Bike Lanes Map<e:image-title>
  </e:image>
</e:image-overlay>

Topographic Map

Public Transport Map

Bike Lanes Map

Example maps © OpenStreetMap contributors

15. audio 0 p.

e:audio element adds an audio to the exam. It can be used anywhere where HTML is allowed.

Element attributes
Attribute	Type	Mandatory	Default value	Description
src	String	Yes	–	Audio file name
times	Integer	No	∞	Maximum number of times the audio can be played by the examinee
lang	String	No	–	Exam language code. Use when audio should be included only in certain language version.
class	CSS class	No	-	CSS class name

Example

<e:audio src="example1.webm" times="2">
  <e:audio-title>Optional description</e:audio-title>
</e:audio>

00:05

Optional description

2 kuuntelukertaa jäljellä.

16. audio-group 6 p.

e:audio-group element can be used to group audio elements by adding a separator before the group.

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>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>

17. video 0 p.

e:video element adds an video to the exam. It can be used anywhere where HTML is allowed.

Element attributes
Attribute	Type	Mandatory	Default value	Description
src	String	Yes	–	Video file name
lang	String	No	–	Exam language code. Use when video should be included only in certain language version.
class	CSS class	No	-	CSS class name

Example

<e:video src="example1.webm" />

18. file 0 p.

e:file element adds an external file to the exam. It can be used anywhere where HTML is allowed.

Element attributes
Attribute	Type	Mandatory	Default value	Description
src	String	Yes	–	Filename
lang	String	No	–	Exam language code. Use when file should be included only in certain language version.
class	CSS class	No	-	CSS class name

Exmaple

<e:file src="example1.webm">Text of the file link</e:file>

Text of the file link (example1.webm)

Osa 6: Links to material

19. attachment-link 0 p.

Material on external material page can be linked to from exam page by using e:attachment-link element.

Element attributes
Attribute	Type	Mandatory	Default value	Description
ref	String	Yes	–	Value of the linked `e:attachment` 's `name` attribute.
type	`long \| short`	No	`long`	Type of the reference, see example below.
meta	String	No	–	Metadata about element

Example

<e:attachment-link ref="test-material" />
<e:attachment-link ref="another-test-material" type="short" />

long type reference: (aineisto 12.A)
short type reference: 12.B

20. attachment-links 0 p.

Use e:attachment-links element to refere to multiple materials.

Example

<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>

(aineistot 12.A–12.B)
12.A–12.B

Osa 7: Formulas

21. Adding formulas 0 p.

You can add \LaTeX formulas by using e:formula element. Formulas can be placed both within text ( inline ) and on their own line ( display ).

By default, the \LaTeX 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 assistive-title attribute.

Element attributes
Attribute	Type	Mandatory	Default value	Description
mode	`inline \| display`	No	`inline`	Formula type
assistive-title	String	No	The \LaTeX source code of the formula	An alternative assistive title that describes the equation for screen readers, perhaps using AsciiMath or Unicode notation
meta	String	No	–	Metadata about element

Notice that certain characters in formulas require special notation.


Character	Notation
>	`>`
<	`<`
&	`&`

For longer formulas also <e:formula> <![CDATA[ latex-code ]]> </e:formula> may also be used. Inside a CDATA-block escaping is not required.

Example of an `inline` formula

<e:formula>\int_0^\infty e^{-x^2} dx=\frac{\sqrt{\pi}}{2}</e:formula>

\int_0^\infty e^{-x^2} dx=\frac{\sqrt{\pi}}{2}

Example of a `display` formula

<e:formula mode="display">\int_0^\infty e^{-x^2} dx=\frac{\sqrt{\pi}}{2}</e:formula>

\int_0^\infty e^{-x^2} dx=\frac{\sqrt{\pi}}{2}

Example of a `assistive-title`

<e:formula assistive-title="10/36 &gt; 9/36 =1/4">\frac{10}{36}&gt;\frac{9}{36}=\frac{1}{4}</e:formula>

10/36 > 9/36 =1/4

Osa 8: CSS styles

22. Typography 0 p.

Title

All common header levels are in use.

<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>

h1. Title (40px, light)

h2. Title (30px, normal)

h3. Title (21px, semibold)

h4. Title (18px, semibold)

h5. Title (16px, semibold)

h6. Title (16px, semibold)

<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>

.e-font-size-xxxl: (40px)

.e-font-size-xxl: (30px)

.e-font-size-xl: (21px)

.e-font-size-l: (18px)

.e-font-size-m: (16px, tekstin oletuskoko)

.e-font-size-s: (14px)

.e-font-size-xs: (12px)

Typefaces

Typeface can be modified using e-semibold , e-light , e-italic , and e-normal classes.

<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>

.e-semibold: Lorem ipsum dolor sit amet

.e-light: Lorem ipsum dolor sit amet

.e-italic: Lorem ipsum dolor sit amet

.e-normal: Lorem ipsum dolor sit amet

.e-underline: Lorem ipsum dolor sit amet

Text positioning

Text can be positioned both horizontally and vertically by using e-text-* classes.

Class	Description
`e-text-center`	Centers text
`e-text-left`	Aligns text to the left
`e-text-right`	Aligns text to the right
`e-text-justify`	Justifies text
`e-text-top`	Aligns text to the top
`e-text-bottom`	Aligns text to the bottom

Text helper classes

Class	Description
`e-nowrap`	Prevent line wrapping
`e-text-gap`	Create underlined gap within 1. text.

Quotes

Short quotes can be defined using blockquote element.

<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>

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.

—https://www.ylioppilastutkinto.fi

Contents can also be highlighted using e-box class.

<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>

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.

23. Lists 0 p.

There are helper classes for various ordered lists.

<ol class="e-list-lower-alpha">
  <li>Eka</li>
  <li>Toka</li>
  <li>Kolmas</li>
</ol>

First
Second
Third

<ol class="e-list-upper-alpha">
  <li>Eka</li>
  <li>Toka</li>
  <li>Kolmas</li>
</ol>

First
Second
Third

<ol class="e-list-lower-roman">
  <li>Eka</li>
  <li>Toka</li>
  <li>Kolmas</li>
</ol>

First
Second
Third

<ol class="e-list-upper-roman">
  <li>Eka</li>
  <li>Toka</li>
  <li>Kolmas</li>
</ol>

First
Second
Third

Unordered list of words

<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>

Word
Multiword content
Third word
Fourth
Fifth
Sixth
Seventh word
Eighth
Ninth
Tenth longer word
Eleventh

24. Floating 0 p.

Class	Description
`e-float-left`	Floats element to the left
`e-float-right`	Floats element to the right
`e-clearfix`	Stops floating
`e-width-full`	Sets element width to 100%
`e-width-threequarters`	Sets element width to 75%
`e-width-half`	Sets element width to 50%
`e-width-third`	Sets element width to 33%
`e-width-quarter`	Sets element width to 25%

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>

Lorem ipsum dolor sit amet.

25. Illustration images 0 p.

For images aligned to the right there is a helper class e-illustration-right . In addition to right alignment, it adds proper margins. The class does not restrict image size, therefore e-width-* classes can be used simultaneously.

Example

<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>

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?

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?

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!

26. Margins and paddings 0 p.

For setting margin and padding there are own helper classes. The size set using numbers, e.g. in e-pad-8 the padding is 8 times larger than in e-pad-1 .

You can use numbers 1 to 8.

Class	Description
`e-pad-*`	Padding to every direction
`e-pad-l-*`	Padding to the left
`e-pad-r-*`	Padding to the right
`e-pad-l-*`	Padding to the top
`e-pad-b-*`	Padding to the bottom
`e-pad-x-*`	Padding to the left and right
`e-pad-y-*`	Padding to the top and bottom
`e-mrg-*`	Margin to every direction
`e-mrg-l-*`	Margin to the left
`e-mrg-r-*`	Margin to the right
`e-mrg-t-*`	Margin to the top
`e-mrg-b-*`	Margin to the bottom
`e-mrg-x-*`	Margin to the left and right
`e-mrg-y-*`	Margin to the top and bottom

<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>

e-pad-1 e-pad-2 e-pad-4 e-pad-8

e-pad-l-1 e-pad-l-2 e-pad-l-4 e-pad-l-8

e-pad-r-1 e-pad-r-2 e-pad-r-4 e-pad-r-8

e-pad-x-1 e-pad-x-2 e-pad-x-4 e-pad-x-8

e-pad-y-1 e-pad-y-2 e-pad-y-4 e-pad-y-8

27. Tables 0 p.

Use classes e-table , e-table--borderless , and e-table--zebra .

<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>

Table title
First column	Second column	Third column
Lorem	Ipsum	Dolor

<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>

Table title
First column	Second column	Third column
Lorem	Ipsum	Dolor

<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>

Table title
First column	Second column	Third column
Lorem	Ipsum	Dolor
Ipsum	Dolor	Lorem
Dolor	Lorem	Ipsum
Lorem	Ipsum	Dolor

Cells can be formatted using e.g. e-pad-* or e-text-* classes.

<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>

Table title
First column (padding to the left)	Second column (centered)	Third column (aligned to the right)
Lorem	Ipsum	Dolor

If a table is very wide, you can prevent it from overflowing and make it scrollable by wrapping it in an .e-scrollable-x element.

<div class="e-scrollable-x">
  <table class="e-table">
    …
  </table>
</div>

Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

28. Text columns 0 p.

Text columns can be added using e-columns class. Ever child element within it must have e-column class

There is some empty space between columns.

Example

By default columns have equal width

<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>

e-column

You can also use a 12 column system

<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>

e-column--6

e-column--3

e-column--8

e-column--2

e-column--8

e-column--2

To make column as narrow as possible, use e-column--narrow class.

<div class="e-columns">
  <div class="e-column">e-column</div>
  <div class="e-column e-column--narrow">e-column--narrow</div>
</div>

e-column

e-column--narrow

Kokeen tehtävät loppuvat tähän.

Lähteet

Lähde: YTL.
Lähde: YTL.
Lähde: Dolor Tempor. Qui ullamco non ut proident sit incididunt adipisicing. Culpa ex. MEB web service. Internet service. https://www.ylioppilastutkinto.fi/en/matriculation-examination. Julkaistu: 9.5.1983. Viitattu: 1.4.2019. Käännös: Travis Translator. Muokkaus: Mary Modifier. Free text field

Character	Notation
NBSP (non-breaking-space)	` `
SHY (soft-hyphen)	``
>	`>`
<	`<`
&	`&`

Character	Notation
NBSP (non-breaking-space)	` `
SHY (soft-hyphen)	``
>	`>`
<	`<`
&	`&`

MEX format documentation

Aineisto

Osa 1: Exam structure

1. XML structure 0 p.

1.1 Special characters as entities 0 p.

2. Exam 0 p.

2.1 Example 0 p.

3. Languages and localization 0 p.

3.1 Example 0 p.

3.2 Pre-defined translations 0 p.

Osa 2: Sections

Example of simple section

4. Example question title 0 p.

Osa 3: Questions

Simple question example

5. Example question title 0 p.

Sub-question example

6. Second example question title 0 p.

6.1 First sub-question title 0 p.

6.2 Second sub-question title 0 p.

Osa 4: Answer types

7. text-answer 7 p.

single-line answer example

rich-text answer example

rich-text answer with maximum length

integer answer example

8. choice-answer 2 p.

Examples

9. dropdown-answer 2 p.

Example

10. scored-text-answer 8 p.

Example of e:scored-text-answer

Example without hints

11. dnd-answer 8 p.

Example of e:dnd-answer

Osa 5: Material

12. attachment 0 p.

Example of internal material

Example of external material

Aineisto

Example of exam-specific external material

13. image 0 p.

Example

14. image-overlay 0 p.

Example

15. audio 0 p.

Example

16. audio-group 6 p.

Example

16.1 Listening comprehension choice question 2 p.

16.2 Listening comprehension choice question 2 p.

16.3 Listening comprehension 2 p.

17. video 0 p.

Example

18. file 0 p.

Exmaple

Osa 6: Links to material

19. attachment-link 0 p.

Example

20. attachment-links 0 p.

Example

Osa 7: Formulas

21. Adding formulas 0 p.

Example of an inline formula

Example of a display formula

Example of a assistive-title

Osa 8: CSS styles

22. Typography 0 p.

Title

h1. Title (40px, light)

h2. Title (30px, normal)

h3. Title (21px, semibold)

h4. Title (18px, semibold)

h5. Title (16px, semibold)

h6. Title (16px, semibold)

Text size

Typefaces

Text positioning

Text helper classes

Quotes

`single-line` answer example

`rich-text` answer example

`rich-text` answer with maximum length

`integer` answer example

Example of `e:scored-text-answer`

Example of `e:dnd-answer`

Example of an `inline` formula

Example of a `display` formula

Example of a `assistive-title`

Character	Notation
NBSP (non-breaking-space)	` `
SHY (soft-hyphen)	``
>	`>`
<	`<`
&	`&`