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.

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.

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

CharacterNotation
NBSP (non-breaking-space)&#xA0;
SHY ­ (soft-hyphen)&#173;
>&gt;
<&lt;
&&amp;

Notice, that e.g. &nbsp; and &shy; does not work.

2. Exam 0 p.

Top-level exam element.

Element attributes
AttributeTypeMandatoryDefault valueDescription
exam-schema-versionVersion stringNoSchema version, only 0.1 for now
dateYYYY-MM-DDNoExam date
exam-codeexam code stringNoExam code used for exam specific translations
day-codeexam day code stringNoExam day code used for exam specific translations
exam-stylesheetcustom CSS stylesheet file nameNoCSS file with this name must exist in attachments directory
max-answersIntegerNoNo limitMaximum number of questions student should answer

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.dev/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 "yarn 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.

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.

CAS applications can be disabled for a section by setting cas-forbidden="true" 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.

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...
</e:question>

5. Example question title 0 p.

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

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

There are two 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.

Examinee can also attach screenshots to rich-text answers.

Element attributes
AttributeTypeMandatoryDefault valueDescription
max-scoreIntegerYesMaximum score
max-lengthIntegerYesMaximum 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-instructionBooleanNofalseWhether 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 No single-line Type
classCSS classNo-CSS class name

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.

 

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 )
AttributeTypeMandatoryDefault valueDescription
ordering random | fixed NorandomOrdering of options
direction vertical | horizontal NoverticalDirection of options
classCSS classNo-CSS class name
Element attributes ( e:choice-answer-option )
AttributeTypeMandatoryDefault valueDescription
scoreIntegerNo0Score for option
classCSS classNo-CSS class name

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>

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 )
AttributeTypeMandatoryDefault valueDescription
ordering random | fixed NorandomOrdering of options
classCSS classNo-CSS class name
Element attributes ( e:dropdown-answer-option )
AttributeTypeMandatoryDefault valueDescription
scoreIntegerNo0Score for option
classCSS classNo-CSS class name

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

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 )
AttributeTypeMandatoryDefault valueDescription
max-scoreIntegerNo0Maximum score
classCSS classNo-CSS class name
Element attributes ( e:accepted-answer )
AttributeTypeMandatoryDefault valueDescription
scoreIntegerYes-Score for answer

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, dolor sit amet consectetur adipisicing . Aliquam, explicabo. Ut, ? Exercitationem eos unde possimus , consectetur cum perspiciatis aut 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"/>
\frac{4{\pi}}{2} simplified: 3 p.

Osa 5: Material

11. 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
AttributeTypeMandatoryDefault valueDescription
nameStringNo Name of the material. Used only when material is linked to from e:attachment-link or e:attachment-links element.
langStringNoExam language code. Use when material should be included only in certain language version.
Sub-elements of e:reference
ElementTypeMandatoryDefault valueDescription
authorStringNoAuthor of the material
titleStringNotitle of the material title
publisherStringNoPublisher
publicationStringNoReference to the original source, e.g. "Youtube service"
howpublishedStringNoRelease channel, e.g. "Genius web service"
urlStringNoInternet address
publication-dateDateNoPublication date, e.g. 2019-03-01 or 2019
reference-dateDateNoRefernece date, e.g. 2019-05-01 or 2019
translatorStringNoName of the translator
modified-byStringNoName of the modifier
noteStringNoFree 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
  1. Title 1
  2. Title 2

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

12. image 0 p.

e:image element adds an image to the exam. It can be used anywhere where HTML is allowed.
Element attributes
AttributeTypeMandatoryDefault valueDescription
srcStringYesFilename of the image
langStringNoExam language code. Use when image should be included only in certain language version.
classCSS classNo-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

13. 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
AttributeTypeMandatoryDefault valueDescription
langStringNoExam language code. Use when image-overlay should be included only in a certain language version.

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

14. audio 0 p.

e:audio element adds an audio to the exam. It can be used anywhere where HTML is allowed.
Element attributes
AttributeTypeMandatoryDefault valueDescription
srcStringYesAudio file name
timesIntegerNoMaximum number of times the audio can be played by the examinee
langStringNoExam language code. Use when audio should be included only in certain language version.
classCSS classNo-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ä.

15. 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>
00:05
The whole recording
2 kuuntelukertaa jäljellä.

15.1 Listening comprehension choice question 2 p.

15.2 Listening comprehension choice question 2 p.

00:05
The passage related to the two sub-questions immediately above.
2 kuuntelukertaa jäljellä.

15.3 Listening comprehension 2 p.

00:05
The passage related to the sub-question immediately above.
2 kuuntelukertaa jäljellä.

16. video 0 p.

e:video element adds an video to the exam. It can be used anywhere where HTML is allowed.
Element attributes
AttributeTypeMandatoryDefault valueDescription
srcStringYesVideo file name
langStringNoExam language code. Use when video should be included only in certain language version.
classCSS classNo-CSS class name

Example

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

17. file 0 p.

e:file element adds an external file to the exam. It can be used anywhere where HTML is allowed.
Element attributes
AttributeTypeMandatoryDefault valueDescription
srcStringYesFilename
langStringNoExam language code. Use when file should be included only in certain language version.
classCSS classNo-CSS class name

Exmaple

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

Osa 6: Links to material

18. attachment-link 0 p.

Material on external material page can be linked to from exam page by using e:attachment-link element.
Element attributes
AttributeTypeMandatoryDefault valueDescription
refStringYes Value of the linked e:attachment 's name attribute.
type long | short No long Type of the reference, see example below.

Example

<e:attachment-link ref="test-material" />
<e:attachment-link ref="another-test-material" type="short" />
long type reference: (aineisto 11.A)
short type reference: 11.B

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

Osa 7: Formulas

20. 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
AttributeTypeMandatoryDefault valueDescription
mode inline | display No inline Formula type
assistive-titleStringNo The \LaTeX source code of the formula An alternative assistive title that describes the equation for screen readers, perhaps using AsciiMath or Unicode notation

Notice that certain characters in formulas require special notation.

CharacterNotation
> &gt;
< &lt;
& &amp;

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}

Osa 8: CSS styles

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

Text size

Text size can be modified using e-font-size-* classes.

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

ClassDescription
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

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

22. 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>
  1. First
  2. Second
  3. Third
<ol class="e-list-upper-alpha">
  <li>Eka</li>
  <li>Toka</li>
  <li>Kolmas</li>
</ol>
  1. First
  2. Second
  3. Third
<ol class="e-list-lower-roman">
  <li>Eka</li>
  <li>Toka</li>
  <li>Kolmas</li>
</ol>
  1. First
  2. Second
  3. Third
<ol class="e-list-upper-roman">
  <li>Eka</li>
  <li>Toka</li>
  <li>Kolmas</li>
</ol>
  1. First
  2. Second
  3. 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

23. Floating 0 p.

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

Lorem ipsum dolor sit amet.

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

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

ClassDescription
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

26. 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 columnSecond columnThird column
LoremIpsumDolor
<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 columnSecond columnThird column
LoremIpsumDolor
<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 columnSecond columnThird column
LoremIpsumDolor
IpsumDolorLorem
DolorLoremIpsum
LoremIpsumDolor

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

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

27. 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
e-column
e-column
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--3
e-column--8
e-column--2
e-column--2
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

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

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

Use of Abitti Trademark policy