Author Legacy (v5.x): Tokyo
-
Components | Parallax
"Parallax" is an aesthetic resource that allows including an image in full-size, shown as background screen. The image does not move when scrolling, but the rest of contents do. This feature can be useful to graphically separate different content sections within the same page. This component can only be added inside the screens (See here). You will find this component in the group of "Image" components. After adding this component to a screen, we only need to configure two properties: PROPERTY DESCRIPTION Resource Image file that will be displayed. We will click on "Examine" to access the unit Resources folder (check here), and select the image we want to show. Supported image formats: jpeg, png y gif. Height It allows adjusting maximum image height (in pixels) for this image.
-
Components | Divider
The "Divider" component is designed to incorporate a graphic element that allows you to visually separate the contents on the screen. This component is located in the "Image" group and can be added within the screens. This component has two views that have different properties: Linear separator Image separator Linear separator properties PROPERTY DESCRIPTION Color By default, the linear separator will be a line that will apply the main color of the unit. With this property you can customize its color. Thickness This property allows you to modify the thickness of the line in pixels. Width This property allows changing the space occupied by a component inside a central column of contents. This component occupies 100% of the space by default. Text size can be reduced to other preset percentages or can be displayed in full-size. For some quote styles, "Full" width makes quotes lay over the central column. Alignment This property allows placing the component on the right, on the left or on the centre of the central column where contents are shown. It can only be used when applied "Width" is less than 100%. Image separator properties PROPERTY DESCRIPTION Width This property allows changing the space occupied by a component inside a central column of contents. This component occupies 100% of the space by default. Text size can be reduced to other preset percentages or can be displayed in full-size. For some quote styles, "Full" width makes quotes lay over the central column. Alignment This property allows placing the component on the right, on the left or on the centre of the central column where contents are shown. It can only be used when applied "Width" is less than 100%. Resource (SVG) Image that will act as a divider. It must be an image in SVG format.
-
Components | Video
"Video" component allows us to add a local video (which is added to the content and can be played off-line) or an on-line video (which requires an Internet connection, as it is hosted in YouTube, Vimeo or other streaming platforms). This component is added within the screens by default (see here), but it can also be added inside other components (for example, inside a Pop-up, a Row, etc.). You will find this component in the group of "Multimedia" components. Setup process 1. Access to the "Properties" tab. Go to "View" property and select if you want to add a local video (saved in the unit Resources folder) or an on-line video. 2. If you choose "Local video", you will be required to configure at least the following properties: Resource: mp4 video file. Cover: This property allows adding a cover image that will be shown while the video is not being played. Additionally, you can configure other properties (see the list at the bottom of this page). 3. If you choose an "On-line video", you will have to configure at least a "URL address" from YouTube, Vimeo or other streaming platforms like Brightcove. Additionally, you can configure other properties (see the list at the bottom of this page). 4. Additionally, you can go to the "Add" tab to include a "Caption" for the video. Video properties PROPERTY DESCRIPTION Title Video title. This property is used when adding the video to the "Carousel" component (See here) View This property allows adding the type of video: a local video (included in the unit Resources folder) or an on-line video (hosted by YouTube, Vimeo or other streaming platforms like Brightcove). Resource (.mp4) This property is only enabled when we select "Local video" inside "View". It is the video file that will be displayed. We will click on "Examine" to access the unit Resources folder (check here), and select the video we want to show. Only mp4 files are supported. Cover This property allows adding a cover image that will be shown while the video is not being played. It is used for local videos and on-line videos. Lock fast forward It allows to decide if the user can advance or rewind freely through the video or if the reproduction will be automatic and will not be able to interact with it. Subtitles This property is only enabled when we select "Local video" inside "View". This property allows associating video subtitles to each available language. Click on the "+" button to add a subtitle file. Then select the language and associate it with the subtitle file. File must have vtt format. Optionally, you can define if the subtitle will be the one loaded by default. If the unit is multi-language, a default subtitle can be assigned for each language. URLaddress This property is only enabled when "On-line video" is the option selected inside "View". It allows adding the URL address of the video. Width This property allows changing the space occupied by a component inside a central column of contents. The component occupies 100% of the space by default, but size can be reduced to other preset percentages or can be displayed in "full-size". Some quote styles may overlap the central column if "Full" width is chosen. Align This property allows placing the component on the right, on the left or on the centre of the central column where contents are shown. It can only be used when applied "Width" is less than 100%. Float It allows inserting a component and "wrap" it with a text. First, we should select a size percentage under 100% in "Width" property (25%, for instance). "Float" property allows us to decide where we would like to put the floating component (on the right or on the left of the text). We use arrows to move the component and put it on the text. Overcome goal It allows to modify the configuration of the overcoming of the objectives of this concrete component. We can choose between: Inherited: aply the default value defined in the Completion Objectives Area (See here). Non objetive: this video will not an objetive to complete the unit. Play: the video playback is required to complete the unit. Complete: to complete the unit, the video must be displayed.
-
Components | Interactive video
"Interactive video" is a component that allows adding interactive elements inside a video (texts, links, and activities). This component is added within the screens by default (see here), but it can also be added inside other components (for example, inside a Pop-up, a Row, etc.). You will find this component in the group of "Multimedia" components. Setup process 1. Access the "Properties" tab, go to "Resource (.mp4)" property, and select the mp4 file that you want to play and the video cover. 2. Play the video and stop it to choose the video point where you want to add an element. 3. Access the "Add" tab and click on elements that you want to add inside a video (texts, links or activities consisting of Multiple choice or Simple answer). 4. After adding a component, access to its properties and configure them. Each component has specific properties. Read the list of properties at the bottom of this article. 5. If you need to add more components to a video point, you just need to continue playing it and stop it at the appropriate moment. Interactive video properties PROPERTY DESCRIPTION Title Video title. Resource (.mp4) Video file that will be displayed. We will click on "Examine" to access the unit Resources folder (check here ), and select the video we found. Only mp4 files are supported. Cover Video cover. Subtitles This property is only enabled when "Local video" is the option selected inside "View". This property allows associating video subtitles to each available language. Click on the "+" button to do so. Then select the language and associate it with the subtitles file. File format must be vtt format. Width This property allows changing the space occupied by a component inside a central column of contents. This component occupies 100% of the space by default, but size can be reduced to other preset percentages or changed to "full-size". Some quote styles may overlap the central column if "Full" width is chosen. Align This property allows placing the component on the right, on the left or on the centre of the central column where contents are shown. It can only be used when applied "Width" is less than 100%. Float It allows inserting a component and "wrap" it with a text. First, we should select a size percentage under 100% in "Width" property (25%, for instance). "Float" property allows us to decide where we would like to put the floating component (on the right or on the left of the text). We use arrows to move the component and put it on the text. Lock fast forward It allows to decide if the user can advance or rewind freely through the video or if the reproduction will be automatic and will not be able to interact with it. Overcome goal It allows to modify the configuration of the overcoming of the objectives of this concrete component. We can choose between: Inherited: aply the default value defined in the Completion Objectives Area (See here). Non objetive: this video will not an objetive to complete the unit. Play: the video playback is required to complete the unit. Complete: to complete the unit, the video must be displayed. Link and text properties Remember The activities added in the interactive video are not evaluable. They are not taken into account for the calculation of the student's score. They are only reinforcement activities incorporated throughout the video. PROPERTY DESCRIPTION Title Field to insert the link title. This title will be used to put the cursor over the interactive element of a video. Text Text that will be displayed over the video. Link to resource (Specific property for links). This link can be associated with a file. Click on "Examine" to select the link in the unit Resources folder. External link (Specific property for links). This link can be associated with an external URL. Start Indicate the exact time, minute, and second (HH:mm:ss) when the link will start to display. By default, the link is shown at the exact time where the video was stopped. However, we can change this manually. Duration This is the time during which the link will be displayed on the screen. It is a useful property if we do not want the video to stop and fade out after X seconds when the link appears. Pause the video This property allows choosing if the video stops when the link appears. Position We can decide where the link will appear: top, centre or bottom area of the video. Activity properties PROPERTY DESCRIPTION Title Field to insert the link title. This title will be used to put the cursor over the interactive element included in a video. Start Indicates the exact time, minute, and second (HH:mm:ss) when the link will start to display. By default, the link is shown at the exact time where the video was stopped. However, we can change this manually. Mastery Minimum score required to pass the activity. Mastery required to pass simple answer activities will always be 100%, as there is only one correct answer. However, this score can be adjusted for Multiple choice activities. Weight This property allows giving a specific value or weight to certain questions. This means some questions count more towards the total score. Randomize Each time we open an activity, the order of the questions is randomised with this property.
-
Components | Audio
"Audio" component allows adding a mp3 audio file as a podcast. Highlighted text is added within the screens by default (see here), but it can also be added inside other components (for example, a Pop-up, an Accordion, a Row, etc.). You will find this component in the group of "Multimedia" components. Setup process 1. Access the "Properties" tab, go to "Resource (.mp3)" and click on "Examine" to find and select the file from the unit Resources folder (see here). 2. Set up the rest of properties within the component. 3. Optionally, access the "Add" tab. You can add a "Caption" to the audio file.According to the "View" that has been chosen, it may be added: "Caption". Allows you to add a short description to the audio. Available in the "View" type "Large" and "Small". "Text". It allows to add a text with the transcription of the audio. Available in the "View" type "Audio with transcription". This text will be seen when the student clicks on the associated icon. Properties PROPERTY DESCRIPTION Title Audio title. Adding a title to each component included in the "Carousel" will be useful to identify resources gallery components when rolling the cursor over them. (See here) View This property is used to choose how the audio player is displayed: Big. Full player including progress bar and time indicator. Small. Reduced player including the Play/Pause button only . This view helps to add various audio files, as we can put them in columns and rows. (See how to use rows in here). Audio with transcription. This view allows you to add a text with the audio transcription. The student will have this button to the right of the playback bar and it will allow you to activate or deactivate the transcription. Style Allows you to customize the appearance of the player: - Standard: Applies the colors defined in the common properties for the buttons. - Custom: Allows you to apply a custom color to the player. Resource Audio file that will be displayed. We will click on "Examine" to access the unit Resources folder (check here), and select the audio we want to show. Only mp3 files are supported. Alternative text Text that describes the video. If the audio file does not load, this text will be displayed instead. Vertical align Property only available with "View" of type "Small". Allow you to aling the audio icon on the top of the photo footer or in the middle. Width This property is only available if the chosen type of "View" is "Big". This property allows changing the space occupied by a component inside a central column of contents. This component occupies 100% of the space by default, but size can be reduced to other preset percentages or changed to "full-size". Some quote styles may overlap the central column if "Full" width is chosen. Align This property is only available if the chosen type of "View" is "Big". This property allows placing the component on the right, on the left or on the centre of the central column where contents are shown. It can only be used when applied "Width" is less than 100%. Float This property is only available if the chosen type of "View" is "Big". It allows inserting a component and "wrap" it with a text. First, we should select a size percentage under 100% in "Width" property (25%, for instance). "Float" property allows us to decide where we would like to put the floating component (on the right or on the left of the text). We use arrows to move the component and put it on the text. Lock fast forward It allows to decide if the user can advance or rewind freely through the audio or if the reproduction will be automatic and will not be able to interact with it. Overcome goal It allows to modify the configuration of the overcoming of the objectives of this concrete component. We can choose between: Inherited: this option aply the default value defined in the Completion Objectives Area (See here). Non objetive: this audio will not an objetive to complete the unit. Play: the audio playback is required to complete the unit. Complete: to complete the unit, the audio must be displayed.
-
Components | Screen audio
This component allows you to add an audio file that can be played automatically as soon as the screen is accessed. It is also anchored to the top of the screen. In the Tokyo template, an audio can be added for each screen. In Berlin template, the component is added at the page level, not associated with the sections. This component has only three properties: PROPERTY DESCRIPTION Resource Mp3 file with the audio you want to play. Autoplay Decides whether the audio will play automatically when you enter the screen or not. Overcoming goal Allows you to modify the goal overcoming settings for this particular component, making it behave differently from the general settings you set. We can choose between: Legacy: Applies the default value that is defined in the unit's target settings area (See here). It is not objective: the component will not be a target to overcome to finish the unit. Interact: You need to tap on the image to exceed the target. Remember: this functionality is only useful if the image is interactive, that is, clicking it opens a popup, a document or a web page.
-
Components | Carousel
"Carousel" is a type of component that shows images, audios and videos. It is like the "Image Gallery" component, but this component also supports different types of resources apart from images. This component is added within the screens by default (See here), but it can also be added inside other components (for example, inside a Row). You will find this component in the group of "Multimedia" components. Setup process 1. We will include resources in the "Add" tab, using the following buttons: "Image", "Video", "Audio", "External animation" or "educaPlay". 2. We use the "Properties" tab to configure the parameters of our carousel. 3. Click on each of the resources included in the "Properties" tab to adjust parameters. Remember you will need to give a title to each component, so you can distinguish it quickly when rolling the cursor over its miniature. 4. Each element included in the carousel can have a caption. In order to do so, select the resource, go to the "Add" tab and click on "Caption". Properties PROPERTY DESCRIPTION Width This property allows changing the space occupied by a component inside a central column of contents. The component occupies 100% of the space by default, but size can be reduced to other preset percentages or can be displayed in "full-size". Some quote styles may overlap the central column if "Full" width is chosen. Align This property allows placing the component on the right, on the left or on the centre of the central column where contents are shown. It can only be used when applied "Width" is less than 100%. Float It allows inserting a component and "wrap" it with a text. First, we should select a size percentage under 100% in "Width" property (25%, for instance). "Float" property allows us to decide where we would like to put the floating component (on the right or on the left of the text). We use arrows to move the component and put it on the text. Type of miniature This property allows us to choose the type of miniature we want to add to the carousel navigation bar. There are two types of miniatures: Images: we can choose an image for each resource. Standard icons for each resource. Remember: If you choose Image miniatures, images will be automatically shown when selecting the "Image"component; a cover will appear instead when selecting the "Video" component. You will need to access to the rest of components (Audio, External animation and educaPlay) and configure their "Miniature image". Miniatures per page Only avaliable in Tokyo Template. This property allows choosing the number of miniatures included in each carousel page. Position of miniature This property allows ordering miniatures within the carousel. There are three possibilities: Top: miniatures are located on top of the carousel. Bottom: miniatures are located at the bottom of the carousel. None: miniatures are deleted from the carousel. Show navigation arrows This property allows us to decide whether we want to show navigation arrows within the carousel Show border Only avaliable in Tokyo template. Show a border around the component.
-
Components | External animation
"External animation" component allows inserting external contents and HTML5 animations created with other tools. This way we can add games, animations, and other elements. This component is added within the screens by default (see here), but it can also be added inside other components (for example, inside a Pop-up, a Row, etc.). You will find this component in the group of "Image" components. Remember This type of component is frequently used, but we should bear in mind that this is an external component, so we do not have any control over it. This means: We cannot block the next content, regardless of whether students interact with it or not. We do not keep any information regarding this interaction (i.e. we do not save answers provided by students, for instance). This component does not alter total score or unit progress. If this component is an activity, we cannot know the answers given by students. We will not record results (whether questions are right or wrong), so this score will not count towards the average score. For that reason, we recommend using this component for animations or additional games. We recommend using the "Reinforcement activity" component (See here) or "Quiz" component (See here) whenever we want to create and manage specific activities. These components allow knowing the score, saving answers provided, inserting questions to unlock students' progress, etc.) Setup process 1. Access the "Properties" tab, go to "Resource (.zip)" and click on "Examine" to find and select the file from the unit Resources folder (see here ). 2. When adding the .zip file, the animation should instantly appear on the screen. If it doesn't, you should make sure the boot file is correct. In order to do so, add the right name in the "Launcher name" property. 3. Configure the rest of properties for this component. 4. Finally, write a text to include it in the instruction. If you do not want to include the "Instruction" component, select it and delete it. Properties PROPERTY DESCRIPTION Title Animation name. When adding components to the "Carousel", this property helps to identify them when they are shown in miniature within the Resources gallery. (See here) Resource (.zip) This property allows adding the .zip file that contains the animation. Click on "Examine" to find the file in the unit Resources folder (see here ). If we want to modify the animation that will be shown within this component, we should click on "Examine" and select the new .zip file. Then, we should click on "Update" so that the new content is loaded. Launcher name This property indicates boot file name and extension for the animation. We should change the name if appropriate, as "index.html" is just a sample text. Aspect ratio This property allows adjusting the height-width ratio (16:9, 8:5 o 4:3). Width This property allows changing the space occupied by a component inside a central column of contents. This component occupies 100% of the space by default, but size can be reduced to other preset percentages or changed to "full-size". Some quote styles may overlap the central column if "Full" width is chosen. Align This property allows placing the component on the right, on the left or on the centre of the central column where contents are shown. It can only be used when applied "Width" is less than 100%. Enable fullscreen It allows viewing the animation in full screen, showing at its maximum size. That is, if the animation size is small, it is selected seeing small, center on the fullscreen. Float It allows inserting a component and "wrap" it with a text. First, we should select a size percentage under 100% in "Width" property (25%, for instance). "Float" property allows us to decide where we would like to put the floating component (on the right or on the left of the text). We use arrows to move the component and put it on the text.
-
Components | Timeline
"Timeline" component allows creating timelines that help to explain a process (and its stages) or facts and landmarks during a time period. A timeline can be defined by two texts: one opening plus one closing text 1 that we can configure. We can use the Next/Back button or click on the timeline points to move between different landmarks 2 . The content of each landmark is shown inside a window located over the row 3 . We can see a landmark is active thanks to the content shown over the row 4 and the legendin the navigation menu 5. When two landmarks have the same date, we will see them grouped vertically 6 This component can be added within a screen, a pop-up or other components (like a column, for instance). You will find this component in the group of "Cataloguer" components. Setup process 1. After adding the component, click on it and access to the "Properties" tab. You should configure: Number of positions. This property shows the parts we will create when dividing a timeline. For example, we could divide a timeline into 10 parts to represent a decade, and 100 parts to represent a century. Start text and final text. These are the texts that will help us to represent the starting point and ending point within a timeline. These points can be numbers or texts (i.e. Quaternary period). Colours. Its main color and background color can be customized. Hide header. If desired, you can create the timeline without headlines. Overcome goal.Optional property. It allows to modify the configuration of the overcoming of the objectives of this concrete component. We can choose between: Inherited: this option aply the default value defined in the Completion Objectives Area (See here). Non objetive: this audio will not an objetive to complete the unit. Interact: It is necessary interact with the component to reach the objective. Complete: it is necessary to visit all the items of the to overcome the goal. 2. When created, a timeline includes 3 facts or landmarks by default. If needed, we can add more events from the "Add" tab. 3. Click on each event, access the "Properties" tab and adjust settings: Position of the event. Point where you want to put the event, according to parts or phases created within the timeline. So, if we have 10 parts (years within a decade), the second position would be "year 2" and will appear in a certain position (this position differs from timelines including 100 parts that represent years in a century). Event text. Text that will be shown as the legend of a landmark. Event text. Text to be displayed as a legend for the milestone. Colors: you can configure the color of the milestone and the background color of the event. 4. After configuring the events and its properties, you can: a. Write a title and subtitle for each timeline. b. Write a title for each event. c. Write a text for each event. d. Additionally, you can add an image that will be displayed next to the event.
-
Components | Acordion
"Accordion" is a component that groups contents in a drop-down menu. This component is added within the screens by default. (See here), it can also be added inside a row or a pop-up. You will find this component in the group of "Cataloguer" components. When creating the "Accordion" component, three "Accordion items" are included by default. Each "Accordion item" is organised in two areas: A title. A content area including a sample text. We can include more components within this area. This component has a complex structure, as it consists of many items with their own specific properties. When configuring this component, we should pay attention and select the right item. We can select items from the breadcrumb trail and from the "Structure" tab. Breadcrumb trail "Structure" tab Setup process First, we should choose a type of accordion. There are two types available (numeric accordion and non-numeric accordion). Next steps: 1. When creating this component, three elements are included by default. We can add new "Accordion items" to the "Add" tab, if required. 2. Go to the "Properties" tab and configure the parameters of the accordion. 3. Write a title for each item included in the accordion. 4. Select the content area within the "Accordion item" and configure its content. A sample text is added by default, but we can add other components from the "Add" tab. Accordion properties PROPERTY DESCRIPTION Style It allows modifying the graphic layout of the accordion: Standard: primary and secondary colours can be applied to the unit, if this is appropriate to the chosen view (See here to learn how to configure the unit colours). Customised: customised colours can be applied to the accordion. New properties will be enabled to modify the border, background and title colours. Order type This property is only available when choosing the numeric accordion. This field helps us to decide how we want to number the accordion tabs. Decimal Roman numerals (lower case) Roman numerals (upper case) Alphabet (lower case) Alphabet (upper case) Start of order We can use this property to choose a number to start numbering the tabs. Width This property allows changing the space occupied by a component inside a central column of contents. The component occupies 100% of the space by default, but size can be reduced to other preset percentages or can be displayed in "full-size". Some quote styles may overlap the central column if "Full" width is chosen. Align This property allows placing the component on the right, on the left or on the centre of the central column where contents are shown. It can only be used when applied "Width" is less than 100%. Overcome goal It allows to modify the configuration of the overcoming of the objectives of this concrete component. We can choose between: Inherited: this option aply the default value defined in the Completion Objectives Area (See here). Non objetive: this audio will not an objetive to complete the unit. Interact: It is necessary interact with the component to reach the objective. Complete: it is necessary to visit all the options of the accordion to overcome the goal.