Vienna - Initial Setup Vienna - Page creation and setup Vienna - Page creation and setup | Reading page Vienna - Creating and configuring pages | Main menu Vienna - Components | Text Vienna - Components | Highlight Vienna - Components | Drop-down Vienna - Components | Image Vienna - Components | Video Vienna - Components | Audio Vienna - Components | Simple activity Traking Author | Authorship Units | Tracking and traceability of templates

Vienna template allows us to set up several visual elements: colours and typography. This way we can adapt contents according to our brand image. In order to adjust these elements, we need to access the "Common Properties" tab. PROPERTY DESCRIPTION Button areas Colours of buttons in the unit (retry, go back, etc.) Dropdowns Background colour of "Dropdown" component. Activities Background colour of "Activities" component. Primary multimedia Secondary multimedia Primary and secondary color for videos, audios and external animations.  Positive feedback Negative feedback Text colour for positive and negative feedback about activities. Background screen Background colour of the screen. Text fonts Typography chosen for general texts. Title fonts Typography chosen for titles. This typography will be applied to general titles, as well as all headlines (H1, H2, H3, etc.) in general texts.

Vienna template offers two types of basic pages: Reading page (reading). This page is designed for theoretical contents, especially texts, which can include images and training activities. Each unit must have at least one reading page. Please read aquí to learn how to configure this type of page. Main menu. This page is designed to act as a quick access menu for several pages within the same unit. There is no need to use this option if the unit has only one reading page. Please read aquí to learn how to configure this type of page. Create pages 1. Access "Pages" upper menu and click on "Manage pages". 2. Click on "Add" and select one of the two options available in the management window.

Reading pages consist of 3 parts: A. Cover. Enter the page that allows us to add a short presentation and a support image. This cover, by default, is inactive. If we want it, we must activate it in the properties area of the page with the option "Show cover". B. Content zone. General content space, where you can add texts, images, questions.... C. Close. When the student reaches the end of the content area, a "Finish" button will be activated that will show us the Close screen. Setup process 1. Select the page and go to the "Properties" tab. PROPERTY DESCRIPTION Title Page title. It will be displayed on the page and in the main menu. Estimated time (min) The time that is deemed necessary for reading the content of the page. Suggested lesson Lets you decide whether, at the end of the lesson, you want to suggest to the user to go to a specific lesson. Show cover Adds a page-specific cover. This is especially useful if you want to create a unit with a single page. Cover image Adds a representative image to the cover. Background color Allows you to customize the background color of the page. By default, it will assume the general color defined in the Common Properties of the unit. Background image Adds a background image, instead of applying only one color. background Mode If we have applied a background image, it allows you to decide whether to display the image once, to the entire screen width or if the image is repeated to its actual size, as many times as necessary to cover the entire screen. 2. Go to the "Add" tab and incorporate the content components you need for your Page. 3. At the bottom of the page you will see the closing screen. If you want, tap on the text and compose the one you want.

The main menu of the Vienna template is only necessary when we have two or more pages in one unit. This menu will give us access to the different pages or sections of content that we create. The menu has the following items: A. Indication of total time of dedication to the unit. This time is calculated by adding up the times that have been defined on each reading page in its "Estimated Time" property (See here) B. Header image.  Optional. C. Progress bar.  It is completed as we finish sections/pages of reading. D. Title and subtitle of the unit. E. Access card to each section/page of the unit. It shows your title, estimated time, and page type. Setup process 1. Select the page and go to the "Properties" tab. PROPERTY DESCRIPTION Page title This will be the title of the unit, which will be displayed on this menu page. Subtitle It is used to make an additional description of the unit (for your goals, for example). Header image Customizes the header image of the unit. Background color Allows you to customize the background color of the page. By default, it will assume the general color defined in the Common Properties of the unit. Background image Adds a background image, instead of applying only one color. Background mode If we have applied a background image, it allows you to decide whether to display the image once, to the entire screen width or if the image is repeated to its actual size, as many times as necessary to cover the entire screen This page has no associated components,so you don't have to configure anything else.

A piece of text is the most basic component you can add. You will find this component in the group of componentscalled "Text". Whenever you add a text, a text editor menu is enabled. Read Section 5.10. of the Author's Guide to know how to use all these functions.

A "highlight" is a specific component that we can use to add quotes from authors, highlight important sentences in the content, and include brief summaries to catch student's attention and make reading less heavy. You will find this component in the group of componentscalled "Text". After adding this component, you will only need to write and set up its text. Read Section 5.10. of the Author's Guide to know how to use all these functions.

This component allows us to create a drop-down menu to group secondary information, and to help students to interact with more contents. You will find this component in the group of components called "Text". After adding this component, you will see there are two types of elements in the "Add" tab that you can include: texts (check here) and images (check here).

The "Image" component allows us to insert an image in the content. You will find this component in the group of components called "Image". After adding the image, click on it to access the "Properties" tab and adjust image settings: PROPERTY DESCRIPTION Title Name of the image. Alternative text Text used to describe the image. This text will be shown when the user places the cursor on the image. It will appear also when the image does not charge. Resource Image file what will be displayed. We will click on "Examine" to access the Resources folder in the unit (check Section 4.10. in the Author's Guide), and select the image we want to show. Supported image formats: jpeg, png, and gif.

"Video" component allows us to add a local video (which is added to the content and can be played off-line) or an online video (which requires Internet connection to be played, as it is hosted in YouTube, Vimeo or other streaming platforms). You will find this component in the group of components called "Multimedia". Setup process 1. Access to the "Properties" tab. In the "View" property, choose if you want to add a local video (saved in Resources folder in the unit) or an online video. 2. If you choose a "Local video", you need to configure the following properties: Resource: mp4 video file. Cover: This property allows to add a cover image that will be shown while the video is not being played. Subtitles: This property allows to associate video subtitles with each available language. Click on the "+" button to add a subtitles file. Then select the language and associate it with the subtitles file. This file must have vtt format. 3. If you choose an "Online video", you need to configure the following properties: URL link: video link from YouTube, Vimeo or other streaming servers like Brightcove. Cover: This property allows to add a cover image that will be shown while the video is not being played.