4. 4
1. Introduction
The elements which form the Multi-page template in the authoring tool Netex learningMaker are described throughout
this document. This template is used to include a large volume of content, because its navigation is performed from a
front page, the introduction page, with a menu to navigate the different content pages. You can go to the different
sections by clicking on this menu. This way, it is possible to introduce a larger amount of information by sections,
without affecting the clarity of the project.
This template has a side widget menu (special components which provide additional information) in each content page
to include the additional resources (glossary, image gallery, author biography...) visible in each one of the pages. It has
also a top navigation menu where the language selector is located.
The customisation of the template can be hired to include, this way, your corporate image.
1.1 Project structure
Before starting to create the project, it is important to know its structure, because the use of learningMaker is based on
it.
1
st
level. Properties and general components
These are the characteristics and generic elements which are repeated in all the projects. Depending on the template,
these generic properties are the following:
Widgets: it is a specific type of special component to introduce information and additional files to the content.
Header of the course: title and subtitle of the course.
Page introduction: it is a specific type of page where the pedagogical objectives, the presentation and the
introduction images of the project are.
2
nd
level. Content pages
They symbolise each of the visible screens inside the project. They are one level below these generic characteristics.
They have, in turn, pop-ups and components.
5. 5
3
rd
level: pop-ups
They represent the windows which open over the pages when the user interacts. They are normally used to show
videos, images, external content or activities. Pop-ups are inside the content pages or generic elements and they have,
in turn, components.
4
th
level. Components
These are each of the elements which can be used in the pages and in the generic elements. There are components
which can be containers of others, acting as “father”. In turn, components are in charge of showing the resources
associated to a project or linking the different elements of a template (pages and pop-ups).
The components are introduced inside the elements of all the higher levels. This is, there are components which are
included in content pages, pop-ups or generic elements of the project.
5
th
level. Resources
Each of the files the components include and which can be used in a project. The types of supported files will depend
on the components used on the template.
This is the last level: components include resources with a specific format.
1.2 Multi-page template specifications
There is an introduction page which contains the navigation menu through the different sections, a header,
the presentation and the pedagogical objectives.
Widgets are located on the right side of the project.
6. 6
Support for the following elements is added:
Main menu: it is the menu shown on the introduction page and it allows the access to the different content
pages.
Top menu: it is the menu shown on the header of the content pages and it allows the user to navigate through
the different content pages.
Lower menu: it allows the “Previous”/“Next” navigation type to continue viewing the course or to go back.
Top menu
Main menu
7. 7
Lower menu
The devices, browsers and resolutions supported by this template are the following:
Devices:
o Android 4+
o Any other device compatible with the specified browsers
Browsers:
o IExplorer 6+
o Firefox 19+
o Chrome 15+
o Android 4.0+
o Safari 5.1+
Resolutions:
o 240x320
o 320x480
o 480x800
o 768x1024
All the elements that compose this template are enumerated, described and specified throughout this document.
8. 8
2. Pages
This template has the following types of page:
Introduction page (Page Introduction): it is the homepage shown when opening the project. It can be edited
and it is created by default when the project is registered in the authoring tool.
This page has a header (title and subtitle) which is also present in the content pages, a box with the
pedagogical objectives and the start-up images (cover of the project) and the presentation with the main
navigation menu.
Content page (Page Content): this type of page is used to include all the central content of the project. The
authoring tool automatically includes a page of this type when the project is created.
The management of the pages is performed from the editor through the upper-left dropdown menu which gives access
to the “Manage pages” interface.
You can change the order of the pages, add new pages, delete the already existing pages or duplicate them from here.
The properties of each type of page and the components they can contain are described below in detail.
2.1 Introduction page
This is the first page to be viewed when opening the project. The main menu and the presentation of the project, the
header of the course (title and subtitle) and the cover (images and pedagogical objectives) are shown in this page.
9. 9
The properties which can be established from the editor for this type of page are:
Name Type Mandatory Description
Title Text Yes Title of the navigation menu.
Short title Text No Title shown on the top menu.
Subtitle Text Yes Title’s subtitle shown on the top menu.
As we have seen, it is possible to include the following components in this page:
Name Number Mandatory Description
Cover 1 Yes It is the component with the header images and the pedagogical objectives.
Presentation 1 Yes It is the component with the presentation of the project and the menu (automatically
created).
2.2 Content page
The content page includes the central content of the project. The properties which can be established from the editor
for this type of page are the following:
Name Type Mandatory Description
Index Numerical Yes Number shown before the title of the page.
Title Text No Title shown on the page.
Short title Text No Title shown on the top menu.
Subtitle Text No Text shown on the main menu, below each section.
Presentation
Cover
Header
10. 10
This is the properties menu display where the fields of the text can be edited:
You can use the following components inside the content pages:
Component Number Mandatory Description
Audio 0..N No .MP3 format document.
Quote 0..N No Text for adding the opinion of an expert or highlighting a part of the text
itself.
Highlight 0..N No Component for clarifying or highlighting information.
HTML 0..N No Text added to the different sections.
Image 0..N No It shows an image anywhere on the content. If you choose the “all” option,
the image aligns to the left and if you choose the “right” option, it aligns to
the right and its width is modified to 320px.
Text activity 0..N No Activities derived from a text.
Video 0..N No Video that will play inside the component.
Quiz 0..N No Series of questions which have to be answered.
Footnotes
reference
0..N No Footnotes linked to numbers located next to a word.
External content 0..N No It allows to use HTML content created by other authoring tools (flashes,
activities...).
Click map 0..N No It allows you to insert links to pop-ups “Single” when clicking on specific
areas within an image.
Slider 0..N No It allows you to include several images which will be viewed individually,
one after the other.
Accordion group 0..N No It shows content on a dropdown accordion which remains folded until you
click on an HTML component.
Tabs group 0..N No It shows content on several tabs which will be viewed individually when
clicking on each tab.
11. 11
3. Pop-ups
The management of pop-ups is performed in a similar way to that of the management of pages. We can access the
“Manage pop-ups” interface from the upper-left dropdown menu.
We can add new pop-ups and delete those previously created from this management interface.
There are several types of pop-ups in the Multi-page template.
3.1 Pop-up Single
The pop-up “Single” allows you to add the following components:
Image: it can be used to introduce a large image. A miniature of the image will be shown in the content and
the full-size image will be viewed by clicking on the pop-up.
Text: it is useful when we want further information with additional data.
Image + text: a combination of both components is also possible by including an image with an explanatory
text. For example, an additional graph with statistics and a text explaining its variables.
Flash: you can also include an interactive animation. For example, a step-by-step animation which explains a
process.
12. 12
Pop-up miniature
Pop-up display
The property which can be established from the editor for this type of pop-ups is the following:
Name Type Mandatory Description
Title Text No Title displayed in the pop-up.
The components which can be included in this type of pop-ups are the following:
Component Number Mandatory Description
Image 0..1 No Image displayed inside the pop-up.
Flash 0..1 No Animation displayed inside the pop-up.
HTML 0..1 No Text displayed inside the pop-up.
13. 13
3.2 Pop-up Books
The pop-up “Books” allows you to add several html texts to include the recommended bibliography or sources used in
the production of the content. This window is usually opened from the side Widgets menu.
The property which can be established from the editor for this type of pop-up windows is the following:
Name Type Mandatory Description
Title Text Yes Title displayed in the pop-up.
The component which can be included in this type of pop-up windows is the following:
Component Number Mandatory Description
HTML 1..N Yes Text displayed inside the pop-up.
3.3 Pop-up Docs
The Pop-up “Docs” (Documents) allows you to create several .ZIP or .PDF documents (without the need for
compression). The use of this window is recommended to include files which complete the exposed information. It is
also useful to compile the documents which appear throughout the content. This window is usually opened from the
side widgets menu.
The property which can be established from the editor for this type of pop-ups is the following:
Name Type Mandatory Description
Title Text Yes Title displayed on the pop-up.
The component which can be included in this type of pop-up windows is the following:
Component Number Mandatory Description
Downloadable 1..N Yes Additional documents which provide more information.
14. 14
3.4 Pop-up Glossary
The pop-up “Glossary” allows you to add several html texts to introduce definitions of words. This window is usually
launched from the side widget menu. We will be able to link a word with its definition located in this pop-up from the
content pages.
The property which can be established from the editor for this type of pop-ups is the following:
Name Type Mandatory Description
Title Text Yes Title displayed on the pop-up.
The component which can be included in this type of pop-ups is the following:
Component Number Mandatory Description
Keyword 1..N Yes A word with its definition.
3.5 Pop-up Links
The Pop-up “Link Group” (Links) allows you to add several web addresses. It can be used to recommend the user to visit
external links for further information or to reinforce the contents of the project. This window is launched from the side
widget menu.
The property which can be established from the editor for this type of pop-ups is the following:
Name Type Mandatory Description
Title Text Yes Title displayed on the pop-up window.
15. 15
The component which can be included in this type of pop-ups is the following:
Component Number Mandatory Description
Link 1..N Yes Desired web address.
3.6 Pop-up Gallery
The pop-up “Gallery” (Multimedia gallery) allows you to add two blocks: one of them can show videos and animations
and the other one, images. There is no need to include both of them. You can access all the images, videos and
animations of the project from one same place. It is launched from the side widget menu.
The property which can be established from the editor for this type of pop-ups is the following:
Name Type Mandatory Description
Title Text Yes Title displayed on the pop-up.
The components which can be included in this type of pop-ups are the following:
Component Number Mandatory Description
Image gallery 0..1 No It includes all the desired images.
Multimedia gallery 0..1 No It includes all the desired videos and animations (in order to know how to encode a
video, consult appendix A.2).
3.7 Pop-up Tutor
The pop-up “Tutor” allows you to add the biography of the expert who has worked in the creation of content or the
author who has created it. To include a pop-up of this type you have to click on “New pop-up”.
16. 16
The property which can be established from the editor for this type of pop-ups is the following:
Name Type Mandatory Description
Title Text Yes Title displayed on the pop-up.
The components which can be included in this type of pop-ups are the following:
Component Number Mandatory Description
Image 1 No Full-size image of the author or expert.
HTML 1 Yes Biography of the author or expert.
17. 17
4. Widgets
The widgets are located on the right side of the project. They are blocks of content to introduce further information or
to collect resources used on the content pages. They are very useful to facilitate the user the access to certain
resources from one place.
There are six different types of widgets available to add to the project, which are grouped inside a Widget container
depending on the needs of each user.
18. 18
4.1 Widget “Normal”
It allows you to add the content of pop-ups such as “Book”, “Docs”, “Glossary” or “Links”.
The properties which can be established from the editor for this type of pop-ups are the following:
Name Type Mandatory Description
Title Text Yes Title displayed on the widgets menu.
Subtitle Text No Title displayed on the widgets menu below the title. It is used for adding
information about what that widget contains.
Associated pop-up List Yes Pop-ups such as “Book”, “Docs”, “Glossary” or “Links” can be added in the
widget “Normal”.
This is the properties panel display:
4.2 Widget “Do you know”
This widget is used to include a generic question and its response in the widgets menu. In this way the key contents are
highlighted or additional information which increases the interest of the user is shown. This widget has its own
“container”.
19. 19
The properties which can be established from the editor for this type of pop-ups are the following:
Name Type Mandatory Description
Title Text Yes Title displayed on the widgets menu (it is the title of the Widget container). We
recommend using the title Do you know…
Subtitle Text No Title displayed on the widgets menu located below the title. It is used to
complete a question that starts with “Do you know…”.E.g.: ... there are
strategies to manage employees?
Associated pop-up List Yes A “Single” pop-up window is associated to the widget “Do you know”.
4.3 Widget “Tutor”
This widget is used to add the bibliography of the author of the project or the expert which collaborates on the creation
of the content.
The properties which can be established from the editor for this type of pop-up windows are:
Name Type Mandatory Description Characteristics
Title Text Yes Title displayed on the widgets menu (it is the title of the Widget
container).
Resource .GIF, .PNG,
.JPEG format
resource
No Miniature image of the author or expert. 60 x 51px
Associated
pop-up
List Yes A “Tutor” pop-up window is associated to the widget “Tutor”.
This is the properties panel display:
20. 20
4.4 Widget “Audio”
This widget is used for the audio summary of the project. We recommend adding it in a single widget container to
visually organise this menu.
The property which can be established from the editor for this type of pop-ups is the following:
Name Type Mandatory Description
Resource .MP3 format.
resource
Yes File with the audio summary.
This is the properties panel display:
4.5 Widget “PDF”
This widget is used for adding the printable version of the project. We recommend adding it in a single widget container
to visually organise the menu.
21. 21
The property which can be established from the editor for this type of pop-ups is the following:
Name Type Mandatory Description
Title Text Yes Title displayed on the widgets menu. E.g.: PDF of the unit
22. 22
5. Components
The components which can be used in this template, whether they are primary components inside the pages or they
are included inside other components, are the following:
Header of the course
Cover
Presentation
Objectives
Introduction image
Introduction video
Activity
Audio
Video
Flash
Image
Image in highlight
“Tutor” image
Image gallery
Video and flash gallery
Quote
Highlight
Html text
Downloadable
Resource PDF Link
Footnote reference
Glossary word
Link
Quiz
External content
Click map
Slider
Accordion group
Tabs group
The properties of each of these components, their possible use and the components they can contain are described
below.
5.1 Header of the course
The header of the course is the component located on top of the project. This component is edited from the
introduction page or from the content pages and shows the title and subtitle.
Normally, the subtitle is the name of the whole course and the title is the name of that particular project. E.g.: Title:
Management of people; Subtitle: Distribution.
The subtitle can be also used to simply provide other perspective. E.g.: Title: Management of multiple priorities;
Subtitle: Distribution.
23. 23
The properties which can be established from the editor for this component are the following:
Name Type Mandatory Description
Title Text Yes Title of the project.
Subtitle Text Yes Title of the block where that project belongs to.
Logo .GIF, .PNG, .JPEG
format resource
No Image shown next to the title and subtitle.
Logo position List No If you select “Right”, it aligns to the right, and if you select “Left”, it aligns to the
left.
Include logo List No If you select “True”, the logo is shown, and if you select “False”, it is not shown.
Header/Footer
colour
Colour No Header and footer background colour.
Background
introduction
colour
Colour No Introduction background colour.
Close button List No If you select “True, the “Close” button is shown for closing the project, and if you
select “False”, it is not shown.
5.2 Background image
This is the ensemble of the introduction image (or introduction video) and the objectives. It is located just below the
header of the project and they are visible on the introduction page.
The property which can be established from the editor for this component is the following:
Name Type Mandatory Description
Resource .GIF, .PNG, .JPEG format resource Yes It is the background image.
Title
Subtitle
Introduction
imageObjectives
Background image
24. 24
The components which can be included inside this component are the following:
Component Number Mandatory Description
Objectives 1 Yes A highlight with the pedagogical objectives of the project.
Image 1 No It is the image located on the introduction page on the right side of the objectives.
The project must contain an introduction image or video.
Video 1 No It is the video located on the introduction page on the right side of the objectives.
The project must contain an introduction image or video (in order to know how to
encode a video, consult appendix A.2).
5.3 Cover
It is the component located on the left side of the menu. It is visible on the introduction page and is used to put the
project content in context.
The property which can be established from the editor for this component is the following:
Name Type Mandatory Description
Title Text Yes Title shown on the component.
The component which can be included inside this component is the following:
Component Number Mandatory Description
HTML 1 Yes Text shown on the component.
5.4 Objectives
The objectives are located on the left of the introduction image or video. They are a summary of the main aspects of
the project. It is a component inside the Cover component.
The property which can be established from the editor for this component is the following:
25. 25
Name Type Mandatory Description
Title Text No Title displayed on this highlight. E.g.: In this Learning Coffee you will learn:
The component which can be included inside this component is the following:
Component Number Mandatory Description
HTML 1 Yes Text displayed on the highlight.
5.5 Introduction image
It is the image located on the introduction page, on the right of the pedagogical objectives. It is a component inside the
Cover component.
The properties which can be established from the editor for this component are the following:
Name Type Mandatory Description Characteristics
Image .GIF, .PNG,
.JPEG format
resource
Yes Image 450 x 380px
Alternative
text
Text No Text displayed when an image is not properly displayed (due to a
slow connection speed, for example).
This component does not contain any other components.
5.6 Activity
An activity is a component that can be introduced in each of the sections. They are interactive exercises which reinforce
the content of the project. At the moment, activities are performed with other Netex authoring tool. You can hire its
production.
The activities have the following properties:
Name Type Mandatory Description
Select an
activity
List Yes All the performed activities are shown on the list and you have to select the
corresponding one in each case.
Assessable List Yes You have to choose on the list if the activity will be assessable or not.
5.7 Audio
This component is used to introduce an audio resource (.MP3). We recommend using this type of resource to give
examples based on everyday situations, conversations between commercial and customer, tell a story, a case... It is
important to take into account that all audiovisual resources generate interest in the user.
26. 26
The properties which can be established from the editor for this component are the following:
Name Type Mandatory Description
Title Text No Title displayed on the tool to recognise the audio.
Audio .MP3 format resource Yes .MP3 file reproduced by the component.
This is the properties panel display:
This component does not contain any other components.
5.8 Video
This component is used to introduce a video. We recommend the use of videos with a motivational or informative
purpose: to describe the steps of a process, to tell a case study to exemplify the theory or to give an example.
These are its properties:
Name Type Mandatory Description Characteristics
Title Text No Title to identify the video on the authoring tool.
Disposition List Yes If you select the “all” option it aligns to the left and if you
select the “right” option it aligns to the right.
Video .MP4 format resource Yes Video which will be reproduced inside the component. 640 x 480 px
Cover
image
.GIF, .PNG, .JPEG format
resource
Yes Image displayed before playing the video. 640 x 480 px
Resource .ZIP format resource No .ZIP file which contains the video to be downloaded.
This component does not contain any other components.
In order to know how to encode videos with the tool HandBrake, consult appendix A.2.
5.9 Flash
It is an animation in .SWF format which can be inside a pop-up “Single”. It can be used, for example, to explain a
process with an interactive animation.
These are its properties:
Name Type Mandatory Description
Title Text Yes Title to identify the video on the authoring tool.
Width and height Index Yes The flash width and height specifications. They are introduced 640 x 360px by
default, but they can be introduced manually.
Resource .SWF format
resource
Yes Flash that will be played.
Image .GIF, .PNG, .JPEG
format resource
No Image displayed before viewing the flash.
Alternative text Text No Text displayed when an image is not properly displayed (due to a slow connection
speed, for example).
27. 27
This component does not contain any other components.
5.10 Image
This component is used to introduce an image in different parts of the content. Images provide dynamism to the
project and reinforce the information. Nevertheless, we do not recommend the use of too many images because they
can degrade the information. Each image should go with a text and have a specific objective. E.g.: a synopsis which
summarises the steps of a process or an image of a work group accompanying a text describing a good teamwork.
There are two types of images according to the disposition you select:
1. All: when selecting this option the image expands or aligns to the left.
2. Right: when selecting this option the image is located on the right of the component in a smaller size.
The properties which can be established from the editor for this component are the following:
Name Type Mandatory Description
Resource .GIF, .PNG,
.JPEG format
resource
Yes Image resource displayed on the component.
Disposition List Yes If you select the “all” option it aligns to the left and if you select the “right” option it aligns
to the right and its size changes to 320px.
Tooltip Text No Text displayed when sliding the mouse over the image.
Alternative
text
Text No Text displayed when an image is not properly displayed (due to a slow connection speed, for
example).
Associated
pop-up
List No It can be associated to a pop-up “Single” which will display when clicking on .
This is the properties panel display:
This component can contain the following component:
Component Number Mandatory Description
Footnotes 1 No Text located at the bottom of the image over a grey background. It describes the image.
5.11 Image in highlight
The image in highlight goes with the text of the component “Highlight”.
28. 28
The properties which can be established from the editor for this component are the following:
Name Type Mandatory Description
Image .GIF, .PNG,
.JPEG format
resource
Yes Image that will be displayed.
Width and
height
Index Yes The image width and height specifications. They are introduced by default.
Tooltip Text No It is the text displayed when sliding the mouse over an image.
Alternative
text
Text No Text displayed when an image is not properly displayed (due to a slow connection
speed, for example).
This component cannot contain any other components.
5.12 “Tutor” image
It is the image that goes with the pop-up “Tutor”.
The properties which can be established from the editor for this component are the following:
Name Type Mandatory Description
Image .GIF, .PNG,
.JPEG format
resource
Yes Image that will be displayed.
Width and
height
Index Yes The image width and height specifications. They are introduced by default when
selecting the image.
Tooltip Text No It is the text displayed when sliding the mouse over an image.
Alternative
text
Text No Text displayed when an image is not properly displayed (due to a slow connection
speed, for example).
29. 29
This component cannot contain any other components.
5.13 Image gallery
Component located inside the pop-up “Gallery”. The miniatures of the images are displayed on the side menu and they
will be full-size displayed on the pop-up left side.
This is its properties:
Name Type Mandatory Description
Title Text Yes Title to identify the image on the authoring tool.
This component has the following component:
Component Number Mandatory Description
Image 1..N Yes All the images are included inside the image gallery.
This is the properties panel display:
5.14 Multimedia gallery
Component located inside the pop-up “Gallery”. The miniatures of the videos and flashes are displayed on the side
menu and they will be full-size displayed on the pop-up left side.
30. 30
These are its properties:
Name Type Mandatory Description Characteristics
Title Text Yes Title to identify the video on the authoring tool.
Width and
height
Index Yes The video width and height specifications. They are
introduced by default but they can be introduced manually.
640 x 360px
Video or
flash
.MP4 (video) or .SWF
(flash) format resource.
Yes Video or flash that will be played inside the component.
The video will have a miniature image in this section, in
addition to the properties it usually has (see section 5.8
and appendix A.2).
640 x 480 px
Cover
(video)
.GIF, .PNG, .JPEG format
resource
No Image displayed before playing the video. 640 x 360px
Alternative
text
Text No Text displayed when an image is not properly displayed
(due to a slow connection speed, for example).
These are the properties panel displays:
This component can contain the following components:
Component Number Mandatory Description
Flash 1..N No All the animations included inside the multimedia gallery.
Video 1..N No All the videos included inside the multimedia gallery (see appendix A.2).
31. 31
5.15 Quote
It is a component which allows us to highlight a part of the text and to add the opinion of an expert. The quote provides
dynamism to the structure of the project and reinforces the content. In this template, it is located on the right of the
central text.
The property which can be established from the editor for this component is the following:
Name Type Mandatory Description
Author Text No It shows the possible author of the quote in italics and aligned to the right.
This component contains the following component:
Component Number Mandatory Description
HTML 1 Yes Text of the quote.
5.16 Highlight
It is very useful to clarify or to highlight information throughout the project. For example, it is used to give key points
about a particular subject, to give an example about an idea or just to give a curious data to motivate the user to
continue reading.
The editable properties are the following:
Name Type Mandatory Description
Title Text No Title of the “Highlight”.
Disposition List Yes If you select the “all” option it aligns to the left and if you select the “right” option it
aligns to the right
32. 32
The components which can be included inside this component are the following:
Component Type Mandatory Description
HTML Text Yes Text displayed inside the highlight.
Image .GIF, .PNG, .JPEG format
resource
No Image which can go with the highlight.
Audio .MP3 format resource No Audio file which can be included to give an example of the content.
5.17 HTML
This component allows the direct introduction of text in HTML format, which can include:
Text with format: you can select the paragraph format, the font, the size, the letter space and the line height.
Images
Mathematical formulas
To edit mathematical formulas in a visual way, click on in the edition bar. You can copy or paste your formulas from
Microsoft Word and it is compatible with MathML.
The text in HTML is included in many components already mentioned (highlights, sections, quotes…). In addition to the
HTML content itself, this component has no other properties which can be modified from the editor.
On the other hand, this component cannot include any other components.
There is a series of components which are assigned from the project text edition bar because they are linked to words.
The components which are edited from this edition bar are the following:
5.18 Resource link
The “Resource link” is used to link a .ZIP or .PDF file to a word. The .ZIP can contain, in turn, a .PPT, an .XLS, a .DOC, an
.MP3..., whereas the .PDF may contain an additional document (activities, more information about a subject,
summaries…).
These components are linked from the tool bar of the HTML components, on the dropdown menu “Links”.
33. 33
The editable property is the following:
Name Type Mandatory Description
Link .ZIP or .PDF
format resource
Yes It allows you to select the needed .ZIP or .PDF in each case.
This is the properties panel display:
No other component can be added to this component.
5.19 Link FootReference
The “Footnotes reference” link is used to put a reference mark in a word towards a reference located at the end of the
content page.
34. 34
Component display in the authoring tool
Reference mark display
Footnote reference display
It can be used to make bibliographic references or clarifying notes.
35. 35
The editable property is:
Name Type Mandatory Description
Reference List Yes The reference to which the word is linked is chosen from that list.
This is the properties panel display:
No other components can be added to this component.
5.20 Link Glossary
The “Glossary link” is used to link a word from the central text to a word located on the pop-up window “Glossary”.
Linked word display
It is used to link a defined word on the glossary.
36. 36
The editable properties are the following:
Name Type Mandatory Description
Title Text Yes Text which appears when sliding the mouse over a linked word.
Keyword List Yes List from which the word of the glossary to be linked is selected.
This is the properties panel display:
No other components can be added inside this component.
5.21 External Link
The “External link” is used to link a word of the central text to an external link.
37. 37
The editable properties are:
Name Type Mandatory Description
Link URL Yes It indicates the website.
Title Text Yes Text which appears when sliding the mouse over a linked word.
This is the properties panel display:
No other components can be added inside this component.
5.22 External content
This component allows us to use HTML content created by other authoring tools (flashes, activities…).
38. 38
The editable properties are:
Name Type Mandatory Description
Resource
(ZIP)
.ZIP format resource Yes HTML content which will be displayed.
Name Index Yes Name of the HTML file of the external content index. It has to be located in
the root of the included zip, that is, without being contained in a folder.
Width and
height
Index No The content width and height specifications.
Overflow_x List Yes It indicates if horizontal scroll bars will be used in the external content.
Overflow_y List Yes It indicates if vertical scroll bars will be used in the external content.
This is the properties panel display:
39. 39
5.23 Quizzes
A quiz is a component which can be included in each one of the sections. They are a group of questions organised which
are used for getting information from the person who answers them. Each quiz can include different types of questions
(single answer, matching, text blank...).
The editable properties are:
Name Type Mandatory Description
Title Text Yes Title displayed on the header of the quiz.
Use ponderate
score
List Yes If you select “False”, the total score will standardise to 100 points by default, so that
all questions have the same value. If you select “True”, you will have to set the
points for each question (see the Author guide).
Assessable List Yes In this list you decide if the quiz will be assessable (True) or not (False).
Score to
success
Numerical Yes Score required to pass the quiz (it can be also modified at the project level).
Randomise
Quiz
List Yes If you select “True”, the questions will be shown randomly to the user. If you select
“False”, they will be shown in the order you have selected.
Question Poll Numerical No Number of questions which will be shown when answering the quiz. If “True” is
selected for the “Randomise Quiz” property, the indicated number of questions will
be shown randomly. If “False” is selected, the indicated number of questions will be
shown but in the order in which they are in the project.
Background
colour
Colour Yes Header background colour.
Border colour Colour Yes Question border colour.
Quiz
background
colour
Colour Yes Quiz main body background colour.
Title header
visible
List Yes If you select “True”, users will see the title on the header. If you select “False”, users
will not see it.
Report button
visible
List Yes If you select “True”, users will see the button in order to see the quiz report. If
you select “False”, users will not see it.
Pagination
visible
List Yes If you select “True”, users may see the page of quiz in which they are. It is located
below the title on the header. If you select “False”, users will not see it.
Score question
visible
List Yes If you select “True”, users will see the score for each question below the title on the
header or the pagination. If you select “False”, users will not see it.
To obtain more information about how to create a quiz and about the different types of questions that can be included,
consult the Author guide (section 4.7).
5.24 Click map
This component is used to insert links to pop-ups “Single” when clicking on specific areas within an image.
The properties which can be established from the editor for this component are:
Name Type Mandatory Description
Resource .GIF, .PNG, .JPEG
or .JPG format
resource
Yes Image that will be displayed.
Areas Yes Sections over the image that have to be configured so that a pop-up “Single” is
displayed when clicking on them. You can add as many as you wish.
This component does not contain any other component.
40. 40
5.25 Slider
This component is used to include several images which will be viewed individually, one after the other, when clicking
on the arrows shown on the right ( ) and on the left ( ) of the image or on the points in the image footer ( ).
This component does not have any editable properties, but it contains the following component:
Component Type Mandatory Description
Image .GIF, PNG, .JPEG
format resource
Yes Image resource displayed on the component. You can add as many as you wish.
5.26 Accordion group
This component allows us to show content on a dropdown accordion. This accordion remains folded until you click on
an HTML component. It can include the following components: activity, audio, quote, HTML, image, text activity, video,
quiz, external content and click map.
The property which can be established from the editor for this component is:
Name Type Mandatory Description
Auto Collapse List No When there are several accordions, if you select “True”, each time you unfold one
of them, the one you had previously displayed will fold. If you select “False”, the
accordions you unfold will remain that way until you fold them.
This component has the following component:
Component Number Mandatory Description
Accordion 1 Yes It contains the components you want to display.
5.27 Tabs group
This component allows us to show content on several tabs which will be viewed individually when clicking on each tab.
You can include any component from the ones available in the tool.
The property which can be established from the editor for this component is:
Name Type Mandatory Description
Title Text Yes Title shown on each tab.
This component has the following component:
Component Number Mandatory Description
Tab content 1..N Yes It contains the components you want to display.
42. 42
6. Resources
The types of file which can be used as resources inside the pages are:
.PNG format images
.JPEG format images
.GIF format images
.MP3 format audios
.OGG format audios
.MP4 format videos
.PDF format documents
External content compressed in .ZIP format (.DOC, .PPT, .XCL, .PDF, .XLS…)
44. 44
A.2 Video encoding with HandBrake
HandBrake is a tool for converting video from nearly any format to a selection of modern, widely supported codecs.
The main reasons to use this tool are:
It converts videos from nearly any format
Free and Open Source
Multi-Platform (Windows, Mac and Linux)
Once HandBrake is downloaded, and depending on the compression settings, the resulting videos can be viewed on
desktop computers or mobile devices (iPhone, iPod Touch, iPad, Smartphones, Android Tablets, etc.).
A.2.1. Encoding process
The steps to encode videos with HandBrake are described in this section:
1. Launch HandBrake, click on “Source/Open File” and select the file you want to convert.
45. 45
2. After you select the file, information will appear on the right-hand side of “Source”.
3. Select the “Picture” tab to configure the dimensions of the video.
The recommended size for videos which are going to be viewed on mobile devices is 640x360.
To do so, you have to configure the following parameters as it is shown in the image:
Cropping: Automatic
Anamorphic: None
Width: 640
Keep Aspect Ratio: check this parameter so that the height is automatically adjusted to the indicated
width.
46. 46
4. Select the destination and the name of the file by clicking on “Browse”.
A characteristic to take into account is that the output format of the video has to be MP4. In case that
HandBrake converts it to another format, it can be forced by changing the extension of the output file.
5. Select the “Video” tab and configure the video conversion as it is shown in the image, paying special attention
to the following parameters:
a. Web optimized: this parameter has to be selected.
b. Video Codec: select codec H.264 (X264). This gives much better quality and lower file sizes than
the MPEG-4 and VP3 encoders. Besides, as most devices support this format, it is becoming a
standard.
c. H.264 Profile: select Baseline profile.
d. H.264 Level: select level 3.1.
47. 47
6. Click the “Start” button to begin the compression.
Once the process has finished, the video is ready with the appropriate characteristics to be viewed correctly on mobile
and desktop devices.
You only have to add the video to the resources area and use it within your project.
