"Map of clicks" is a component that allows turning an image into an interactive element, adding clickable areas to open different elements (popups, documents, or websites). This component is added within the screens by default (See here) and pop-ups (See here), but it can also be added inside other components (for example, a Row). You will find this component in the group of "Image" components. Setup process 1. Access "Properties" tab, go to "Resource" and click on "Examine" to browse and select an image from the unit Resources folder (see here). Additionally, you can configure the rest of properties of this component. 2. Choose the type of panel you want to create: Standard. This type of click map allows you to add areas that can be linked to popups, documents or web links. With panels. This type of click map allows you to link the areas with panels, that is, areas of content that are displayed on the screen, preventing additional windows from opening. Check out this short video to see the differences between the two types: 3. Additionally, the rest of the properties of the Click Map can be configured (see properties in the table at the end of this article) 4. Access the “Add” tab and add as many “Areas” as you need. By default, areas are created on the left-upper area of the image. Their position can be changed as preferred.  5. If you have chosen a "With Panels" click map, you must add the "Panel Block" component. Then, inside, you can add as many panels as you need to  associate with the areas. At the end of this article you can review the  properties of the panel block and the panels. Text and images can be  added within the panels. 6. Click on each "Area" and move them to the area of the image you want and modify its size. Also, in its properties, select what action will happen when you click on the area: If it is a Standard click map, you can link them with "Link to popup", "Link to resource" or "External link". If it is a panel click type map, you can link them with "Panel link". 7. In addition, we can configure shape, position and size of clickable areas (see list of properties at the bottom of this page). 8. To finish, select the Click Map and, in the "Add" tab, you will see that you can optionally add the "Instruction" component or a "Caption". Map of clicks Properties PROPERTY DESCRIPTION View Lets you select the type of click map you want to create: - Standard. It will allow linking the areas with a popup, a document or a web. - With panels. It will allow linking the areas to panels. Style Property only available in "Click Map with Panels" view. It allows to decide the style or position of the panels: - Horizontal: they will be placed below the image. - Vertical: will be placed next to the image. 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, and gif. Title Title chosen for the Map of clicks. Optional Alternative text Text that describes the launcher. This text will be shown when the user places the cursor over the image. It will appear also when the image does not charge. 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. 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. Panels position Property only available in "with Panels" view. It allows to decide in which position the panels will be arranged, according to what has been chosen in the "Style" property: - Top / Left area: If it has Horizontal style, the panels will be placed on the image. If it is Vertical, they will be on your left. - Lower / Right area: If it has Horizontal style, the panels will be placed under the image. If you have a Vertical style, they will be on your right. 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 click on all the existing areas to exceed the goal. Clickable area Properties PROPERTY DESCRIPTION Link to popup This field allows selecting the popup we want to open when clicking on each image. Link to 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, and gif. External link If we want to link a website, we should include its URL in this field. Panel link Field only available in "with Panels" click map view. Lets you decide which panel will open when you select the area. Title Title chosen for the Map of clicks. Optional X Position (px) Horizontal position where the clickable area begins. It is measured in pixels. Y Position (px) Vertical position where the clickable are Panel Block Properties PROPERTIES DESCRIPTION Background color Defines the background color of the instruction area. Icon color Defines the color of the instruction icon Font color Sets the color of the instruction text. Panels properties PROPERTIES DESCRIPTION Title Panel title. It is important to give it a name in order to recognize the panel when linking it to the corresponding area. Background color Panel background color. Background opacity You can define a color opacity to make it more or less transparent. It will be useful if we also add a transparent PNG image. Background image You can replace the background color with a background image.

"Launcher" is a component that allows creating an interactive button whose status changes when placing the cursor over it. This component is added within the screens by default (See here), but it can also be added inside other components (for example, a Row). You will find this component in the group of "Image" components. There are two views for this component that are configured differently: Simple launcher Advanced launcher Simple Launcher Settings To create an interactive button effect when placing the cursor over it, we will use two images (one is shown by default; the other is shown when rolling the cursor over it). We will follow these steps: 1. Select the main image and the roll over image. Go to "Resource" and "Resource (roll over)". Click on "Examine" to find and select an image from the unit Resources folder (see here). 2. Define what will happen after clicking on the button. You can use different properties for that: "Link to popup", "Link to resource" or "External link". Remember these are selective properties, which means you can only use one at once. 3. Configure the rest of properties, if you wish. Simple Launcher properties PROPERTY DESCRIPTION Alternative text Text that describes the launcher. This text will be shown when the user places the cursor over the image. It will appear also when the image does not charge. 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, and gif. Resource (roll over) Image file that will be displayed when rolling over the button. We will click on "Examine" to access the unit Resources folder, and select the image we want to show. Supported image formats: jpeg, png, and gif. Link to popup It links the launcher to a popup (See how to create and manage popups in here). This is a selective property, which means that if a launcher is linked to a popup, we will not be able to link it to a resource at once, for instance. Resource link It allows linking the launcher to a PDF or ZIP file. We will click on "Examine" to access the unit Resources folder and select the file we want to link with the image. This is a selective property, which means that if a launcher is linked to a resource, we will not be able to link it to a popup at the same time, for instance. External link We can link the launcher to a URL. This is a selective property, which means that if a launcher is linked to a website, we will not be able to link it to a popup at once, for instance. 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. 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: 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. Advanced Launcher Settings The advanced launcher is designed to create an interactive button but allows you to add more elements inside, creating a more complex element. You can create a launcher that incorporates: A title. It is a text to which we can put a background color or a background image. A descriptive text. We can assign a background color to this text. One or several images. We can add several images, being able to decide in each one if they all have a rollover effect or only one of them has it, leaving the rest as still images. Therefore, we could create a launcher that has a title and an image with a rollover; or a pitcher that has a title, a description, a still image and another that performs the rollover effect; etc. To configure this advanced launcher: Start by configuring the properties of the launcher. Here it is mandatory to define what will happen when clicking on the launcher, so you must choose between opening a popup, link to a resource or an external link. Additionally, this component has the same properties common to the simple launcher, but it has other specific properties such as deciding the border style (with border or shadow) or the color of the border. Add the elements that you want to make up the launcher. You can add title, texts and images. Next, configure the properties of each added component: Title: You can set a background color and / or a background image. Text: Allows you to configure an initial indentation, the style of the numbered lists, color of the lists and a background color for the text. Image: Define a main image and / or a rollover image that will be displayed when the mouse is placed on the launcher. Additionally, you can configure the width of the image and its alignment.

The "Image Grid" is an element that allows us to create an image composition. Clicking on each image zooms in on each image. You can use this component, for example, to include in each image a link thus creating an interactive menu. By default, it is added within the sections although it can also be added inside other components (for example, within a highlight, a row, etc.). We will find this component in the "Image" component group. Configuration process 1. By default, when we add the "Image Grid" the component is created with four images. You can add more by clicking on the"Image" button inside the "Add"tab. 2. Go to the"Properties" tab and set the grid properties. 3. Click on each of the images and go to the "Properties"tab. Tap "Browse" in the  "Resource" field and associate an image from the Drive Resources folder (see here). We configure the other properties of each of the grid images (see  here to review the image properties). Remember It is very important that all images are the same height and width size.  Otherwise, the composition will be asymmetrical. 4. To finish, you can add links to each of the images, thus creating an interactive menu. Properties PROPERTY DESCRIPTION Images per row In this property we will indicate the number of images that we want to appear per row. The display of images per row is only visible in preview mode, not in edit mode. Fit to column In this field we indicate how we want to adjust the grid on the page. There are three positions: Normal: Set to the center of the screen.  Pasted to the right: aligned to the right of the screen. Pasted to the left: aligned to the left of the screen

The "Parallax" component is an aesthetic resource that allows placing a full-size image that is displayed as a screen background and that makes the effect that it does not scroll, although the rest of the content does when scrolling. This feature can be useful to graphically separate different content sections within the same screen. This component can only be added inside the screens (See here). You will find this component in the "Image" component group. After adding the component on the screen, just configure its only two properties: PROPERTY DESCRIPTION Resource Image file to be displayed. Click "Browse" to access the unit's Resources folder (see here) and select the desired image from there. Images in jpeg, png and gif format are supported. Height Allows you to define, in pixels, the maximum height of the gap in which the image will be displayed.

"Audio" component allows adding a mp3 audio file as a podcast. Highlighted text is added within the screens by default (see here) and pop-ups (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. From this tab, you can add a “Caption” to the audio file. This text will appear aligned to the audio when you use the “Audio icon” view. Properties PROPERTY DESCRIPTION Title Audio title. View This property is used to choose how the audio player will be displayed: Audio bar. Full audio player, including a progress bar. Audio icon. Small player, including the Play/Pause button only . This view helps to add various audio files, as we can organise them in columns and rows. (See how to use rows here). Moreover, as we can use a text aligned with the audio, we can create layouts like this: 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. 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. Alternative text Text that describes the video. If the audio file does not load, this text will be displayed instead. Activity details (Smart) If we use a unit inside SmartClassroom, audios and videos have a bar that shows details of student activities (number of views, hotspots…). This option allows choosing to show or hide this details bar. Vertical alignment This property only works when the “Audio icon” view is applied. We can modify the position of the audio icon with respect to its text: Up. The icon will be aligned with the first line of text. Centre. The icon will be centered and shown vertically with respect to its text. 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 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.

"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) and pop-ups (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. 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. 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. Completion mode This property DOES NOT WORK at this moment. We do not recommend using this property.  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.

"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) and pop-ups (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. Whenever we want to add and manage specific activities (to know the score, save answers, mark activities as compulsory), we recommend using the “Activity block” (See here) 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, you can access the “Add” tab to insert a “Caption”. Properties PROPERTY DESCRIPTION Title Animation name. 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 Allows you to view the animation in full screen, showing at its maximum size, that is, if the animation size is small, select it by viewing small, focusing 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.

This component allows you to add external content with traceability of type SCORM 1.2 or SCORM 2004. Thus, the details of overcoming or completitude sent by that content for the overcoming or completeness of the unit hosting it will be taken into account. It can even be configured to influence the unlocking of sequential navigation. PROPERTY DESCRIPTION Title The name of the content being added. Resource Allows you to add the zip file that hosts the animation. Tap "Browse" to locate the file in the Drive Resources folder (see here). If you are going to modify the animation to be displayed in this component, we must press "Browse" to select the new zip file and then press the "Update" button to load the new content. Launcher name The name and extension of the launcher file of the SCORM content. By default, we have entered the name"index.html",but if it is another, it must be changed. Height Allows you to limit the height of the content. Indicated in pixels. Aspect ratio Allows you to modify the height and width ratio of the animation (16:9, 8:5, or 4:3) Assessable If the SCORM content being added emits a score, you can decide whether that score will be sent to the LMS platform to define the unit note. Show icon Lets you decide whether to display the top icon of the component or not Icon (70px X 70px) Allows you to change and customize the component icon by another image of maximum size 70x70 px. Overcome goal Sets whether SCORM content will be taken into account in passing unit targets and whether it influences page unlocking during sequential navigation. We can choose between: Inherited: Applies the default value that is defined in the unit's goal settings area (See here).  Not objective: the component will not be a goal to overcome to finish the unit. Interact: You need to interact with SCORM content to exceed the goal.  Complete or exceed: You need to complete or exceed SCORM content (get the minimum score set). It will depend on how that SCORM content is configured.

"Audio gallery" is a component that shows various images with an audio. You will find this component in the group of "multimedia" components. Setup process 1. When we add the "Image gallery", the component including two "Gallery Item"by default. This items has three elements: a. Image. See here to configure this component) b. Audio. See here to configure the component) c. Text. Additionally, associated to the audio, you can add a text that can contain a description or the transcription of the audio. Any of the elements can be eliminated from the item, being able to configure the gallery as desired. 2. In the "Add" tab you can add more "gallery items". 3. Go to the "Properties" tab of the Audio Gallery to configure its 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. 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. 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: this option aply the default value defined in the Completion Objectives Area. 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 items in the gallery to exceed the goal.

"Interactive Video" is a component that allows you to add interactive elements within a video (texts, links and activities). By default, it is added inside the pages although it can also be added inside other components (for example, within a pop-up, a row, etc.). We will find this component in the "Multimedia" component group. Configuration process 1. Go to the "Properties" tab and select the mp4 file you want to play in the "Resource (mp4)" property, as well as the video cover orcover. 2. Start the video playback and stop it wherever you want to add something. 3. Go to the "Add" tab and tap on the items you want to add within the video (a text, a link or a single or multiple answer activity). 4. After adding a component, access its properties and configure it. Each of them has specific properties. Check out each one at the end of this article. 5. If you need to add more components at another point in the video, just continue playback and stop at the next point to add the corresponding item. Interactive video properties Property Description Title Video title. Resource (mp4) The video file to be displayed. Click "Browse" to access the Drive Resources folder (see here) and select the searched video. Only videos in mp4 format are supported. Cover Cover or cover of the video. Subtitles Property that is only activated in case you select "Local Video" in "View". This property allows you to associate the subtitles of the video in each of the available languages. To do we have to press the button +. Next, we need to select the desired language and associate the subtitle file. This file must be in  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. Width Allows you to modify the space occupied by the component within the central content column. By default, it takes up 100% of the available space, but can be reduced using other predefined percentages or can be arranged to "full-size". In some dating styles, the "Full" size causes the size to exceed the width of the center column. Align Places the right-aligned, left, or center-aligned component in the center column of contents. It only takes effect when we apply a "Width" less than 100%. Float Allows the component to be "framed" around a text. First, in the "Width"property, we mark a size less than 100% (for example, 25%). In the "Float" property we decide in what position we want the component to float (to the left or right of the text). Move the component with its arrows to place it over the text. Block fast forward It allows you to decide whether the user will be able to move forward or backward freely through the video or whether the playback will be automatic and will not be able to interact with it. Beat target Allows you to modify the goal completion settings for this particular component, making it behave differently than the general settings set. We can choose between: Inherited: Applies the default value that is defined in the unit's goal settings area (See here).  Not objective: the component will not be a goal to overcome to finish the unit.  Start playback: Completing the unit will require video playback to start. Complete Playback: To complete the unit, the video will be required to be fully displayed. Link properties and texts Property Description Title Field to indicate the link title. It will be used to display when hovering over the interactive element of the video. Text Text to be displayed on the video Link to recourse (Link-specific property). It can be linked to a file. Tap "Browse" to select it from the content resource folder. External link (Link-specific property). It can be bound to an external url. Home Indicates the time, minute, and second (HH:mm:ss) at which the link will start to be displayed. By default, it shows the second one we chose when snedding the video, but we can modify it manually. Duration Sets the time that will be visible on the screen. This is useful if you do not want the video to pause when the link appears and disappear after X seconds. Pause the video It allows you to decide whether, when the link appears in the video, it stops Position We can decide whether the link will be displayed in the top, center or bottom area of the video. Activity properties Remember Activities that are added to the interactive video are not evaluable,that is, they are not taken into account for the calculation of the student's score. These are only built-in booster activities throughout the video. Property Description Title Field to indicate the title of the question. It will be used to display when hovering over the interactive element of the video. Home Indicates the time, minute, and second (HH:mm:ss) when the question will start to be displayed. By default, it shows the second one we chose when snedding the video, but we can modify it manually. Cutting note Score needed to overcome the activity. In simple answer activities, it will always be 100% as there is only one right option. In multiple response activities you can modify them. Weight Determines a specific value or weight greater or lower for one question relative to another. Sort randomly Allows response options to be reordered each time the activity is played back.