Quiz

Summary

• Description
• Actions within Compositeur Digital UX
• Content extension
• Questions : questions.xml
  • Sections
  • Pages
  • Page Order
  • Page Types
    • Question Page
    • Page
    • Info Page
    • Numeric Slider Page
    • Label Slider Page
    • Image Slider Page
    • Document Page
    • Order Page
    • Scores result Page
• Create a quiz
• Download a sample

Description

This type of content allows you to display interactive Quiz, that will help you understanding your user needs.

Actions within Compositeur Digital UX

Quizzes support the following action. To have a complete overview of each action, see the section Actions

Actions menu

Interaction with the item

Content extension

To use a quiz, put all the items you need in a folder, and add the extension .quiz at the end of the name of your folder.

Inside your folder, provide a file called _questions.xml, and a folder called _meta which will contain all the images used inside the quiz.

Questions : _questions.xml

The quiz file must contains two parts: sections and pages. Generic file structure:

<quizz>
    <sections>
        list of sections
    </sections>ˋ
    <pages>
        list of pages
    </pages>
</quizz>

Each pages will describe a question. Sections will let you group pages that have the same section name.

Sections

Set the section display name in a section tag and optionnaly define the id attribute if you need to create a reference to this section.

<section id="intro">1. INTRODUCTION</section>

Pages

You can create a quiz with different page types but all pages should have the following items in common:

• a sectionId attribute that assigns a page to a section. The section name will appear on top of the page.
• an optional id attribute to be used as an identifier if a reference to that page is needed.
• a nextPageId attribute: optional reference to the page that shoud be displayed next. If not set, the following page described in the file will be used.

Page order

The first page described in the list will always be the first page displayed. The last page described will be by default the last page displayed, To force a page to finish the quiz, set the nextPageId attribute value to @end.

Page types

questionPage

This type lets you create a question with multiple answers. Please note that an answer must be selected before going to the next page.

Here are the attributes for questionPage:

The content of the questionPage is the list of answers, which can be of various types:

• texted answers, with the tag answer: ```xml

 - visual answers, with the tag `imageAnswer`. Set the `visual` attribute to the name of the targeted image (without extension) in the `_meta` folder:
   ```xml
   <imageAnswer visual="image 2"/>

optionally you can set a caption:

   <imageAnswer visual="image 2">my caption</imageAnswer>

It is not possible to mix text answers with visual answers in the same question.

You can define conditional questions based on answers provided by the user. To do so, use the nextPageId attribute to jump to a specific page for a given answer :

<questionPage id="Q1" sectionId="section 2" label="To which question do you wish to answer ?" >
	<answer>The next question</answer>
	<answer nextPageId="Q1">This one again</answer>
	<answer nextPageId="Q3">Skip one please</answer>
</questionPage>

<questionPage id="Q2" sectionId="section 3" label="The next question">
	...
</questionPage>	
	
<questionPage id="Q3" sectionId="section 3" label="The last question">
	...
</questionPage>

page

Describes a simple page to display with either text or image:

<page sectionId="intro" label="This is a test"/>

infoPage

Displays a simple form in which the user can type in texted answers.

Set the label attribute of the info tags to define a name for the text box.

<infoPage sectionId="intro" label="Please fill out your identity">
	<info label="Name"/>
	<info label="Surname"/>
</infoPage>

numericSliderPage

Displays a page with a single slider that lets the user choose a (rounded) numerical value:

Some possible format:

• N0: rounded value
• C0: rounded monetary value according to the current regional setting (i.e. uses €, £, $, etc. where relevant)

<numericSliderPage id="funds" sectionId="section 3" label="Your available funds" min="0" max="5000000" stepSize="5000" format="C0" valueKey="finance.budget" />

labelSliderPage

This displays a page with a slider with predefined values.

Add answer tags to add predefined values, the fisrt being the minimum and the last being the maximum.

example :

<labelSliderPage sectionId="section1" label="Faites vous souvent des achats en ligne ?">
	<answer>Jamais</answer>
	<answer>Parfois</answer>
	<answer>Souvent</answer>
	<answer>Toujours</answer>
</labelSliderPage>

imageSliderPage

This type offers the same functionality as the previous labelSliderPage but using images for predefined values.

<imageSliderPage sectionId="part 1" label="What characterizes you most:" leftVisual="image1" rightVisual="image2" stepQuantity="10"/>

documentPage

Displays a link to open a document in the Compositeur Digital.

<documentPage text="Loan simulator" nextPageId="@end" document="Loan simulator"/>

orderPage

Displays a lists of values to be ordered by the user.

Add a list of answer or imageAnswer for available choices. The two types cannot be mixed.

<orderPage sectionId="section 1" label="Prioritize your projects" answerNumber="3">
    <answer>Renovating</answer>
    <answer>Buy a house</answer>
    <answer nextPageId="tousLesBiens">Buy a car</answer>
    <answer nextPageId="tousLesBiens">Prepare retirement</answer>
</orderPage>

<orderPage sectionId="section 1" label="I would rather live in a" answerNumber="2">
    <visualAnswer visual="house" visualChecked="test1">House</visualAnswer>
    <visualAnswer visual="flat" visualChecked="test2">Flat</visualAnswer>
</orderPage>

scoresResultPage

Displays a message based on the addition of answer’s scores. A scoreResultPage contains a scoreResult element for each result to display.

The message itself is content written between the opening and closing scoreResult tags. Note that the minimum score will be the highest lower scoreMax amongst the others scoreResult.

<questionPage label="Hello !">
    <answer score="1" >answer A</answer>
    <answer score="2" >answer B</answer>
    <answer score="3" >answer C</answer>
</questionPage>
	
<questionPage allowMultiple="true">
    <answer score="-1" >answer A</answer>
    <answer score="0" >answer B</answer>
    <answer score="3" >answer C</answer>
</questionPage>

<scoresResultPage>
    <scoreResult title="A profile" scoreMax="0">
        You seems to have answered only A to all questions...
    </scoreResult>
    <scoreResult title="B  profile" scoreMax="2">
        If you see this message, there is three possible scenarios :
        - you have answered A then B
        - you have answered B then A or B
        - you have answered C then A
    </scoreResult>
    <scoreResult title="C profile" scoreMax="6">
        Every other case should displays this message.
    </scoreResult>
</scoresResultPage>

Create a quiz

1. In your environment folder, create a folder named <Name of your sequence>.quiz (e.g. My quiz.quiz).
2. In this folder, add a file named _questions.xml.
3. (Optional) If you need graphical resources for your quiz, create a folder named _meta.
4. (Optional)Put all the images you need in this folder.
5. (Optional) If you want to link documents from your quiz, put these documents inside the .quiz folder.
6. (Optional) If you want to add a preview to your quiz, add a file named _preview.jpg or _preview.png in your folder.

Note : By default, a quiz does not have a preview. Don’t forget to create one if you need one.

Download a sample

A Demo Universe which contains a sample for a quiz is available, give it a try! 😄

Next : Search Interface (Compositeur Digital UX format)

Back to Supported Content