"Table" component is a text including a preset table where the primary colour of the unit is applied by default. This helps us to make tables more appealing and edit them quickly. Remember all the components are added within the screens (See here) and pop-ups (See here), but they can also be included in other components (for example, a Highlight, an Accordion, a Row, etc.) This component is included in the group of "Text" components. When adding a table, we can choose different preset tables: Setup process After choosing a table and clicking on it, a text editor is enabled. This editor has a specific bar that allows setting up and customising the table. For further information, see here. Additionally, we can access the "Properties" tab and choose those we would like to set up. PROPERTY DESCRIPTION View Standard: applies unit colours to the table. Customised: applies customised colours to the table (borders, header, even rows, odd rows, etc.). Style This property only applies when selecting "Standard" view. Primary colour: primary colour of the unit will be applied. Secondary colour: secondary colour of the unit will be applied. (See here to know how to configure unit colours). 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. 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%. Row width It allows deciding if we want rows to be wide or narrow. Image of the table for PDF (optional) If creation of an automatic PDF including all unit contents like text in tables is configured (See here), table layout might be cut and split into two pages. We can prevent this from happening if we add an image of the table to this property. This way, the table with text will be replaced by this image and will not be cut when creating the PDF.

"Quote" component is designed to show a content or phrase from an author. Quote layout is different from other normal texts. Quotes are added within the screens by default (See here) and pop-ups (See here), but they can also be added inside other components (for example, a Highlight, an Accordion, a Row, etc.). This component is included in the group of "Text" components. A quote has two editable texts: one includes the famous phrase and the other shows the author. Moreover, we can configure its 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. 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%. Icon colour By default, icons that surround the quote apply the main colour of the unit (See here), but we can modify and customise the colour of this property (if needed).

"Highlight" allows us to create and highlight content to make it aesthetically different from the rest of contents displaying on the screen. 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 Highlight, an Accordion, a Row, etc.). This component is included in the group of "Text" components. Setup process 1.When we add a Highlight, a "Text" component is inserted inside by default. Then we can add more components if we want. Access the "Add" tab and you will see that you can "Insert inside" the panel many other components like images, audios, videos, rows, etc.). It is important to make sure we have selected the Highlight component because we can insert components inside, but we have also the "Insert after" option. 2.  This property allows changing the type of panel: PROPERTY DESCRIPTION View Slanted to the left Slanted to the right Standard. It does not have any slanted side Show headline It allows to show or hide the default headline of the highlighted content. Background colour This property allows adding a background colour for the highlighted content. 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%. 3. Set up Highlight contents like the headline, texts, and other components. 4. Optionally, you can add an upper icon to the highlighted content. In order to do so, select Highlight, go to the “add” tab, “Insert inside”, and select “Highlight icon”. 5. After adding the icon, click on it, go to properties, and you will be able to choose some preset icon or add a customised icon (if preferred). Icon size should not exceed 125x125px.

"Teacher content" component allows adding additional information and contents that are only visible to teachers. This information will only be available in teacher publication setting (See Section 5. ). A button with the shape of a mortarboard will be added to the upper Interface of this type of publication. This component is included in the group of "Text" components. Teacher content does not have specific properties. We will be able to add this content almost anywhere (in sections, pop-ups, highlights, inside rows, drop-down menus, and activities). This content includes educational guidelines and activity answers. When some teacher content is added, it includes a text inside it. Any type of component from the template can be added to the teacher content (texts, images or multimedia files).

The "Code" compost is specially designed for training content related to programming languages (HTML, JavaScript, Python....). This component allows you to add programming code from different languages without interfering with the proper functioning of the unit. The component automatically recognizes the following languages: Apache Css HTTP Javascript Objective-C Python Bash CoffeeScript Ini, TOML Makefile Php Ruby C# Diff Json Markdown Perl Sql C HTML, XML Java Nginx Properties Shell Session You will find this component in the "Text" component group. This component has no properties. All we have to do is write inside the programming code that we want to show students. It is recommended that you compose the code or pre-pass it through a txt, and not copy and paste it from other sources (Word or others) because the text styles that the source text has (font, color, etc.) will be applied. It should be noted that in the editing area you do not see any style for the built-in code. You need to preview the course to really see what this component looks like. View in edit mode: Preview mode view

The "Instruction" is a component that describes to the user what action to take. You can add it from a component block of type"Text". In its properties you can configure the following items: PROPERTY DESCRIPTION Style Defines which color will be applied to the statement's representative icon: -  Primary color -  Secondary color Arrow position Indicates where the arrow on the icon points. - Top - Botton - No arrow If the date points down or is without an arrow, it will be placed closer to the component below it. If the arrow points upwards, it will be placed closer to the immediately upper component. 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%.

The "Image" component allows us to insert an image in the content. Images are added within the screens by default (See here) and pop-ups (See here), but they can also be added inside other components (for example, a Highlight, an Accordion, a Row, etc.). You will find this component in the group of "Image" components. Internal components An image can have three components: An Instruction located over the image. Credits offering specific properties to define image colours and position (up, down, right, left, etc.) A Caption located under the image. This component has the same specific properties than the "Text" component. (In order to learn how these properties work, visit here) Image properties PROPERTY DESCRIPTION Style This property allows adding the image position with respect to the central column of contents: Center on content. Overflows right Overflows left Content width Overflows both. Title Image title. Alternative text Text used to describe the image. This text will be shown when the user places the cursor over the image. It will appear also when the image does not load. Resource Image file that will be displayed. We will click on "Examine" to access the Resources folder in the unit (see here) and select the image we want to show. Supported image formats: jpeg, png, and gif. Link to popup It allows converting the image of an interactive element when linking it to a pop-up (See how to create and manage pop-ups here). This is a selective property, which means that if an image is linked to a pop-up, we will not be able to link it to a resource at the same time, for instance. Link to resource It allows linking the image to a PDF or ZIP file. We will click on "Examine" to access the Resources folder in the unit and select the file we want to link with the image. This is a selective property, which means that if an image is linked to a resource, we will not be able to link it to a pop-up at the same time, for instance. External link It allows linking the image with a URL. This is a selective property, which means that if an image is linked to a website, we will not be able to link it to a pop-up at the same time, for instance. Link icon position If we have added a link to the image (pop-up, resource or URL), an icon will be automatically added to the image to mark it as interactive. With this property, we can choose the position of the icon: on the left-upper corner, right-upper corner, left-lower or right-lower corner. Link icon (40x40px) By default, when we add a link to an image, the following icon appears: This property will help us to replace it by another image (if preferred). The new icon must have 40x40 pixels maximum, and we recommend using a .png file with a transparent background so the icon fits well on the image. 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 the image and show it "wrapped" by 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 image (on the right or on the left of the text). We use arrows to move the image a place it on the text. 

"Before / After" is a component that includes two images. Students can move a central bar to show one image or the other. This action allows showing an image in a certain way, showing it differently when moving the bar. You will find this component in the group of "Image" components. 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 Highlight, an Accordion, a Row, etc.) It is a complex component that contains two images. "Before / After" component and its images have specific properties. In order to configure it correctly, we should select each element individually. We can select elements from the breadcrumb trail and from the "Structure" tab. Breadcrumb trail "Structure" tab Setup process 1. Configure general "Properties" of this component (See the table at the bottom of this page). 2. Select the image on the left. Access its properties, go to "Resource" and click on "Examine" to browse and select an image from the unit Resources folder (see here). Optionally, we can configure two additional properties in this image: "Alternative text": a text that is shown when placing the cursor over the image or when the image cannot be loaded. "Credits": if we click on the left-upper area over the image, we can add a text that shows authorship credits. This property allows adjusting text contrast depending on the background, so you can put a black text ("Positive" option) or a white text ("Negative" option). 3. Select the image on the right and repeat actions of step 2. 4.  Optionally, you can select "Before /After" component and access the "Add" tab. You will be able to add a "Caption" or an "Instruction" (if the instruction was deleted before). Properties PROPERTY DESCRIPTION Style This property allows adding the image position with respect to the central column of contents: Center on content. Overflows right Overflows left Content width Overflows both. Width This property allows changing the space occupied by a component inside a central column of contents. This property 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.

"Image exchanger" is a component that shows an image and, when students click on it, another image is shown. 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 Highlight, an Accordion, a Row, etc.) You will find this component in the group of "Image" components. It is a complex component that contains two images. The component and its images have specific properties. In order to configure it correctly, we should select each element individually. We can select elements from the breadcrumb trail and from the "Structure". Breadcrumb trail "Structure" tab Setup process 1. Configure general "Properties" of this component. 2. Select the first image and access the "Properties" tab. You should at least go to "Resource" and click on "Examine" to browse and select an image from the unit Resources folder (see here). We can configure an "Alternative text", which will be shown when placing the cursor over the image or when the image cannot be loaded. Additionally, we can use the "Add" tab, we can add: Credits offering specific properties to define image colours and position (up, down, right, left, etc.) 3.Select the second image and repeat the same process. 4. Finally, we will be able to add a Caption to the component. Image exchanger Properties PROPERTY DESCRIPTION Style This property allows adding the image position with respect to the central column of contents: Center on content. Overflows right Overflows left Content width Overflows both. 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.

"Image gallery" is a component that shows one or various images. It is possible to add an "explanatory text" in the caption. 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. When creating an image gallery, we can choose between two presets: Standard gallery. It is a common image gallery, which has Next and Back buttons to see all the images included in it. Thumbnail gallery. This type of gallery shows a list on top including miniatures of the images included in it. Setup process 1. When we add the "Image gallery", a component including two images is created by default. You can add more images clicking on "Image" inside the "Add" tab. 2. Enter the "Properties" and set up gallery properties. 3. Click on each image and access the "Properties" tab. Go to "Resource" property, click on "Examine" to find and associate an image from the unit Resources folder (see Section 4.10. in the Author's Guide to learn how to manage the Resources folder). Optionally, set up the rest of properties of each image in the gallery (see here to review the properties for each image). 4. Optionally, access the "Add" tab, where you can add two components: Credits offering specific properties to define image colours and position (up, down, right, left, etc.) Caption located under the image. This component has the same specific properties than the "Text" component. (In order to learn how these properties work, visit here) Image gallery 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.