Netex learningMaker | Express Template v2.5.3 [En]

Express Template

Version 2.5.3

2

Index

1. Introduction ................................................................................................................................ 4

2. Pages ........................................................................................................................................... 6

2.1 Introduction page ................................................................................................................................................ 7

2.2 Content page ....................................................................................................................................................... 7

3. Pop-ups ....................................................................................................................................... 9

3.1 Pop-up Single....................................................................................................................................................... 9

3.2 Pop-up Books .................................................................................................................................................... 11

3.3 Pop-up Docs ...................................................................................................................................................... 11

3.4 Pop-up Glossary ................................................................................................................................................ 12

3.5 Pop-up Links ...................................................................................................................................................... 12

3.6 Pop-up Gallery ................................................................................................................................................... 13

3.7 Pop-up Tutor ..................................................................................................................................................... 13

4. Widgets ..................................................................................................................................... 15

4.1 Widget “Normal” ............................................................................................................................................... 16

4.2 Widget “Do you know” ...................................................................................................................................... 16

4.3 Widget “Tutor” .................................................................................................................................................. 17

4.4 Widget “Audio” ................................................................................................................................................. 18

4.5 Widget “PDF” .................................................................................................................................................... 18

5. Components .............................................................................................................................. 20

5.1 Header of the course ......................................................................................................................................... 20

5.2 Background image ............................................................................................................................................. 21

5.3 Objectives .......................................................................................................................................................... 22

5.4 Activity ............................................................................................................................................................... 22

5.5 Audio ................................................................................................................................................................. 22

5.6 Video ................................................................................................................................................................. 23

5.7 Flash .................................................................................................................................................................. 23

5.8 Image ................................................................................................................................................................. 24

5.9 Image in highlight .............................................................................................................................................. 25

5.10 “Tutor” image .................................................................................................................................................... 25

5.11 Image gallery ..................................................................................................................................................... 26

5.12 Multimedia gallery ............................................................................................................................................ 27

5.13 Quote ................................................................................................................................................................ 28

5.14 Highlight ............................................................................................................................................................ 29

3

5.15 HTML ................................................................................................................................................................. 29

5.16 Resource link ..................................................................................................................................................... 30

5.17 Link FootReference............................................................................................................................................ 31

5.18 Link Glossary ...................................................................................................................................................... 33

5.19 External Link ...................................................................................................................................................... 34

5.20 External content ................................................................................................................................................ 34

5.21 Quizzes .............................................................................................................................................................. 36

5.22 Click map ........................................................................................................................................................... 36

5.23 Slider.................................................................................................................................................................. 36

5.24 Accordion group ................................................................................................................................................ 37

5.25 Tabs group ......................................................................................................................................................... 37

6. Resources .................................................................................................................................. 38

A. Appendix .......................................................................................................................................... 39

A.1. Image sizes and external content ............................................................................................................................ 39

A.2. Video encoding with HandBrake ............................................................................................................................. 40

A.2.1. Encoding process .................................................................................................................................................................. 40

4

1. Introduction This template is designed to include simple content in a single page. It is especially appropriate for concise content

which can be subdivided into brief sections or in which all the content revolves around a support element (video,

infography…).

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

o Chrome 15+

o Android 4.0+

o Safari 5.1+

Resolutions:

o 240x320

o 320x480

o 480x800

o 768x1024

o 720x1280

This template follows the generic structure of a learningMaker project:

Pages: they symbolise each of the screens which are visible in the content. There are different types of pages

depending on the template, such as cover, introduction and content pages.

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. Depending on the template, there are different

types of pop-up windows which are linked from the pages through the components.

Components: each element which can be used in the pages and pop-ups. 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 or pop-ups).

5

Resources: each file which can be used in a project. The files which can be used will depend on the

components supported by the template.

All the elements that compose this template are defined in detail throughout this document.

6

2. Pages This template has the following types of page:

Introduction page (Page Introduction): it is a page which 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.

7

2.1 Introduction page

The editorial block of the project is modified from this page. The editorial block consists of the header of the course

(title and subtitle) and the cover (images and pedagogical objectives). The navigation menu is created by default when

content pages are added to the project.

The properties which can be established from the editor for the introduction page are the following:

Name Type Mandatory Description

Title Text Yes Title of the project.

Subtitle Text Yes Subtitle of the project.

As we have seen, it is possible to include the following components in this page:

Name Number Mandatory Description

Background

image

1 Yes Background image of the cover.

Objectives 1 Yes It is the component of the text which includes the pedagogical objectives.

Image/video 1 Yes Presentation image/video of the project.

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:

Header

Cover

Menu

8


Index Numerical Yes Number shown before the title of the page.

Title Text No Title displayed on the page.

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.

Footnote

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.

9

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

different pop-ups and 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 Express 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.

10

Pop-up miniature

Pop-up display

The property which can be established from the editor for this type of pop-ups is the following:


Title Text No Title displayed in the pop-up.

The components which can be included in this type of pop-ups are the following:


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.

11

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:


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:


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.



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:


Downloadable 1..N Yes Additional documents which provide more information.

12

3.4 Pop-up Glossary

The pop-up “Glossary” allows you to add several html to introduce definitions of words. This window is usually

launched from the side widgets menu. We will be able to link a word with its definition located in this pop-up from the

content pages.




The component which can be included in this type of pop-ups is the following:


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.



Title Text Yes Title displayed on the pop-up window.

13

The component which can be included in this type of pop-ups is the following:


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.






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

14






Image 0..1 No Full-size image of the author or expert.

HTML 1 Yes Biography of the author or expert.

15

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.

16

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:


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

17

The properties which can be established from the editor for this type of pop-ups are the following:


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


18

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.



Resource .MP3 format.

resource

Yes File with the audio summary.


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.

19

The propertt which can be established from the editor for this type of pop-ups is the following:


Title Text Yes Title displayed on the widgets menu. E.g.: PDF of the unit

20

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

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.

21

The properties which can be established from the editor for this component are the following:


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.

Alternative

text

Text No Text displayed when an image is not properly displayed (due to a

slow connection speed, for example).

Title

Subtitle

Introduction

image Objectives

Introduction background

22

The components which can be included inside this component are the following:


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



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:


HTML 1 Yes Text displayed on the highlight.

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


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

This component is used to introduce an audio resource (.MP3). We recommend using this type of resource to give

examples. It is important to take into account that all audio-visual resources generate interest in the user.


23


Title Text No Title displayed on the tool to recognise the audio.

Audio .MP3 format resource Yes .MP3 file reproduced by the component.


This component does not contain any other components.

5.6 Video

This component is used to introduce a video. We recommend the use of videos with 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:


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.


In order to know how to encode videos with the tool HandBrake, consult appendix A.2.

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



Title Text No 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).

24


5.8 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 aligns to the right and its width resizes to 320px. If there is a text

before the image, it will be located on the left of the image.



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 component can contain the following component:


Footnotes 1 No Text located at the bottom of the image over a grey background. It describes the image.

25

5.9 Image in highlight

The image in highlight goes with the text of the component “Highlight”.



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.10 “Tutor” image

It is the image that goes with the pop-up “Tutor”.


26


Image .GIF, .PNG,

.JPEG format

resource


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

This component cannot contain any other components.

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


Title Text Yes Title to identify the image on the authoring tool.

This component has the following component:


Image 1..N Yes All the images are included inside the image gallery.


27

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



Title Text Yes Title to identify the video on the authoring tool.

Width and

height

Index Yes The image 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.6

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

28

These are the properties panel displays:

This component can contain the following components:


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

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



Author Text No Shows the author of the quote in italics and aligned to the right.

This component contains the following component:

29


HTML 1 Yes Text of the quote.

5.14 Highlight

It is very useful to clarify and 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 curious data to motivate the user to

continue reading.

The editable properties are the following:


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

The components which can be included inside this component are the following:

Component Type Mandatory Description

HTML Text Yes Image 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.15 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.

30

On the other hand, this component cannot include any other component.

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

The editable property is the following:


Link .ZIP or .PDF

format resource

Yes It allows you to select the needed .ZIP or .PDF in each case.


31

No other component can be added to this component.

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

Component display in the authoring tool

Reference mark display

32

Footnote reference display

It can be used to make bibliographic references or clarifying notes.

The editable property is:


Reference List Yes The reference to which the word is linked is chosen from that list.


No other components can be added to this component.

33

5.18 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. The word is chosen from Glossary Link in the authoring tool in order to

link it to the word.

The editable properties are the following:


Title Text Yes Text which appears when sliding the mouse over a linked word.

Link word List Yes List from which the word of the glossary to be linked is selected.


No other components can be added inside this component.

34

5.19 External Link

The “External link” is used to link a word of the central text to an external link.

The editable properties are:


Link URL Yes Indicates the website.

Title Text Yes Text which appears when sliding the mouse over a linked word.


No other components can be added inside this component.

5.20 External content

This component allows us to use HTML content created by other authoring tools (flashes, activities…).

35



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.


36

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



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.

Background

colour

Colour Yes Header background colour.

Border colour Colour Yes Question border colour.

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.

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


Resource .GIF, .PNG, .JPEG

or .JPG format

resource


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.

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

37

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


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.


Component Number Mandatory Description Accordion 1 Yes It contains the components you want to display.

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


Component Number Mandatory Description Tab content 1..N Yes It contains the components you want to display.

38

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

39

A. Appendix

A.1. Image sizes and external content

40

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.

41

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.

42

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.

43

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.

Netex learningMaker | Express Template v2.5.3 [En]

Business

slow connection

jpeg format

mp3 format

properties

alternative

zip format

side widgets

left dropdown