"Drop-down" component allows adding a button that can be clicked to display more contents on the screen. By default, this component is added inside sections (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 "Cataloguer" components. This component does not include any property. We just need to add elements and components inside these components (texts, images, audios, etc.).

"Tab group" is a component that groups the content in a tab menu that we can explore. This component is added within the screens by default. (See here), and pop-ups (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 "Tabs"  (A). are included by default. Each "Tab" is organised in two areas: A title. A content area including a sample text. This area allows including new components within. This component has a complex structure, as it consists of many elements having their own specific properties. In order to configure it correctly, we should pay attention and select the right element. We can select elements from the breadcrumb trail and from the "Structure" tab. Breadcrumb trail "Structure" tab Setup process 1. When creating this component, three elements are included by default. Go to "Add" and include the "Tabs" we need. 2. Go to the "Properties" tab and configure the parameters for the Tab Group. 3. Write a title for each "Tab". 4. Select the content area within the "Tab" and add your own content. A sample text is added by default, but we can add the components we prefer to the "Add" tab. 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. Customised: customised colours can be applied to the accordion. New properties will be enabled to modify the border, background and title 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, 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%. 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 the options of the accordion to overcome the goal.

"Accordion" is a component that groups contents in a drop-down menu.  This component is added within the screens by default. (See here) and pop-ups (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" (A)   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 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. Customised: customised colours can be applied to the accordion. New properties will be enabled to modify the border, background and title colours. 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. 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.

"Row" is one of the most adaptable and interesting components offered by the Tokyo template. This component allows inserting "Columns" to order the rest of components. So, we can decide to display the information divided into columns. We would find a similar layout in newspapers, for instance. Rows can be divided into 12 columns. We can add "Columns" to occupy 1-12 out of all the spaces available. For instance, we can add two symmetrical columns (6 spaces each), three symmetrical columns (4 spaces each), etc. We can also create asymmetrical layouts consisting of columns with different layouts. Rows are added within the screens by default (See here), but they 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 "Cataloguer" components. When we add a row, we can choose different preset structures that will help us when editing contents. Setup process 1. Check the selected row (you can check this quickly from the breadcrumb trail), access the "Add" tab and, if needed, include new "Columns". 2. Access the "Properties" tab in the row and configure its properties (see the list of properties at the bottom of this page). Properties used to choose a background image or colour for the row are interesting. It is also possible to let the row width exceedthe central area of the screen. 3. Columns we created include a text by default, but there are also other components we can insert in the column. We select the column (the easiest way to do this is through the breadcrumb trail), access the "Add" tab and choose one of the components to "Insert inside" the column. Remember you can go to "Insert after" and add another column after this column. 4. Finally, access the "Properties" tab in the column. For example, this tab allows you to assign a width to each column included inside the row (1 to 12 spaces). Row properties PROPERTY DESCRIPTION Width The row occupies 100% of the available space by default, but size can be changed to "Full", that is, size can be adjusted to fit the central column width. Right margin This property allows defining where the right margin should finish. None: Default option. level 1: The margin is aligned to one side of the central column. level 2: The margin exceeds 50px the side of the central column. level 3: The margin exceeds 100px the side of the central column. If we combine the "Right margin" with the "Left margin" property, we can configure the same margin for both sides of a row. Left margin This property allows defining where the left margin should start. None: Default option. level 1: The margin is aligned to one side of the central column. level 2: The margin exceeds 50px the side of the central column. level 3: The margin exceeds 100px the side of the central column. If we combine the "Left margin" with the "Right margin" property, we can configure the same margin for both sides of a row. Background image This property allows adding a background image for the row. 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. Background colour This property allows adding a background colour for the row. If we add a "Background image", this will prevail over the background colour. Column properties PROPERTY DESCRIPTION Size This is the size occupied by a column inside a row. Columns can occupy 1-12 spaces. Offset This option allows creating a breaking space on the left of the column, which can be visually noticed. Offset can have 1-12 spaces. It's the last column This property allows marking a column as the last one within a row. This means that the second column will be placed below the first column, so that the third column appears as the last one within the row. This example shows that more options could have included in the first row, but we decided to insert them in the next row.

The "Timeline" component allows you to create time lines that allow you to explain a process (its phases) or facts and milestones within a period of time. The timeline can be defined by two texts, one start and one end  (1). We move through the different milestones by clicking on their points on the line or with the forward/backward button (2) The content of the milestone is displayed in the top area of the line (3) We see which is active by the indication on the line (4) and by the legend in the navigation menu (5). When there are two milestones at the same point, they are displayed on top of each other (6). By default, this component can be added on a screen, a popup, and within other components (e.g. in a column). We will find this component in the "Organizer" component group. Configuration process 1. After adding the component, tap on it and enter the "Properties"tab. Here you must configure:  Number of positions.  This property refers to the number of parts in which we are going to split the timeline. For example, if we want to represent data from a decade, we would divide it by 10; if it were a century, in 100. Start and final text. It will be the texts that help us to represent the starting point and end of our timeline. It can be numbers or any text (e.g. It was Quaternary). Background color of the header. Overcome goal:Optional property. 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. Interact: You need to interact with the component to overcome the goal.  Complete: You need to visit all items in the timeline to exceed the goal. 2. By default, the timeline is created with 3 events or milestones. If we need more events we can add them from the"Add"tab. 3. Tap on each event,go to the "Properties" tab and configure them:  Position of the event.  Point at which you want to place it, depending on the number of parts or divisions you've set up in the timeline. So, if there are 10 parts (a decade) if you mark 2, it will be the second year and it will appear in a different position than if you have divided the line into 100 parts. Event text. Text to be displayed as a milestone legend. Image size. If you add an image within the Event, you can decide how much space it can occupy (33% or 50% of the available width). 4. After setting up events and their properties, you can now: a. Write the title and subtitle of the timeline. b. Write the title of each event. c. Compose the text of each event. d. Additionally, you can add an image that accompanies the event text.

"EducaPlay" component allows adding games and activities created with the EducaPlay tool., Depending on the type of subscription chosen by users, this tool allows downloading and using activities shared inside the community in other platforms like Author. 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 "Activity" components. Remember It is important to remember that this is an external element, so we have limited control over it. That means: We can check whether students have completed an activity. This will allow us to turn EducaPlay components into goals that must be achieved and/or elements that limit progress with progressive navigation. We do not keep any data regarding this interaction (i.e. we do not save answers provided by students, for instance). This component does not count towards total score or unit progress. We do not know the answers and we will not record right/wrong results, so this score will not be included when calculating the average score. For that reason, we recommend using this component for animations and additional games.  Setup process 1. Access the "Properties" tab, go to "Resource (.zip)" and click on "Examine" to find and select the EducaPlay activity zip file in the unit Resources folder (see here). 2. Go to "Launcher name" property and select the boot file name and extension of the activity. If the downloaded EducaPlay zip file has not changed, there will be no need to modify this field. 3. Set up the rest of properties for this component. Properties PROPERTY DESCRIPTION Title Name of EducaPlay activity. Resource (.zip) This property allows adding the zip file that contains the activity. Click on "Examine" to find the file in the unit Resources folder (see here). If we want to modify the EducaPlay activity that will be shown within this component, we should click on "Examine"and select the new zip file. Then, we should click on "Update" to load the new content. Launcher name This property indicates boot file name and extension of the activity. If the downloaded EducaPlay zip file has not changed, there will be no need to modify this field. 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. 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.

"Activity block" is a component that includes one or more questions used to assess student knowledge. Each question inside the same block is answered and assessed independently, so this component is just a way of displaying activities together. An activity block can only be added inside a section (See here). You will find this component in the group of "Activity" components. Remember Questions of an activity block can be considered when marking a unit as complete, which means the score can imply that the unit is marked as passed or not passed.  In order to send quiz scores to the LMS, we must go to quiz properties and mark the activity block as "Assessable".  Setup process 1. Access the "Properties" tab to configure the main settings of style (Show/Hide icon) and features (random questions, assessable/non-assessable questions) of the activity block. 2. We access the "Add" tab and include the activities we need. For further information about available activities, please check here. Properties PROPERTY DESCRIPTION View There are two types of view: Quiz: This view consists of a traditional assessment quiz: once students have answered all the questions, the quiz is corrected. There is an opening screen, and a closing screen including feedback for students. When we answer a question, we go to the next question. Feedback appears after finishing the quiz. Activity block: This view is simply a group of questions shown together. It does not have an opening or closing screen and each question is answered individually, so you get some feedback as soon as you reply. Furthermore, different questions can offer more or less attempts to find the correct answer. Show icon By default, an icon appears in the left-upper area of the activity block. This property allows choosing to show/hide the icon. Icon (60x60px) Using this property, we can add a representative icoc in the top of the questionary. Icon size should be 60*60px. Moreover, the image loaded to the page will have rounded borders. Randomize This property allows showing the list of questions randomly. When this function is activated, a quiz is created, and a group of questions is created too. The number of questions depends on preset "Max. nº of questions" and questions will have a random order. Max. nº of questions This property allows deciding how many questions will be shown. So, we could create a quiz having 20 questions, but choose to show only 5 of them. This property is related to another one called "Randomize". If questions are not ordered randomly, they will appear according to their creation (So, in the previous example the first 5 questions would be shown). If we choose to randomize questions, X out of all questions will be shown randomly when creating the quiz. That means we will create a selection of questions, and each student will see a different group of questions. Assessable It is possible to define if you want the quiz to be assessed or not, that is, whether you would like to send the score obtained to the LMS. Mastery Functionality only available in the"View" type "Quiz".It is the minimum score required to pass the quiz. A 100% score is required by default to pass it. In the "View" type "Activity block" this property has no functionality. Attempts Functionality only available in the"View" type "Quiz".It allows to define the number of attempts that the student has to finish the quiz. In "Activity Block" view this property doesn't exist. The specific attempts are configured in the each activity. IMPORTANT: You can define unlimited attempts for a questionnaire: To do this you must mark 0 attempts Weight This property allows deciding how each question counts towards the total course score. Skills This property allows choosing what skills or academic goals are achieved when completing this activity block. This option is useful when the platform used to publish the unit keeps record of these data. Show button finish This property allows you to display a "Finish" button in the "Questionnaire" view. This button will be show on the final summary screen of the questionnaire, once the student has completed one of the available attempts. If the student has not spend all attempts, the student may: - Retry, to improve your score. - Finalize the questionnaire, keeping the score obtained (whether approved or not). It is useful when the student has passed the questionnaire but there are still attempts available. If you do not want to try again or improve your grade, at the end you can review the questionnaire and check its successes and failures. Show timer Time limit (seconds) These options allow you to activate a timer. - If in "Time limit (seconds)" we leave 0 seconds, a counter will be displayed that will record the time that the student uses to answer and finish the questionnaire. - When in "Time limit (seconds)" a time is marked (eg, 30 seconds), a countdown will be displayed and, once this time limit has expired, the questionnaire will end automatically, preventing the student from making more answers. With the countdown configuration, the students only will have 1 attempt. NOTE: If you leave the questionnaire before ending it (change the screen in the content, close the unit ...), when you return the counter will be stopped, keeping the last time recorded. The student will have to press Play to continue answering the questionnaire. Overcome goal A questionnaire will be completed based on what is selected in the "Overcome goal" property. Depending on the values of this property, its behavior will be as follows: Inherited: it is completed based on what is indicated in the course properties (more info here). It is not objective: it is not taken into account as the objective of the course. Send: is completed when done the first time (by clicking on the "Results" button). Overcome or complete: it is considered complete when approved or when exhausting attempts. In this way, if we link the objectives to navigation, the student will not be able to advance to the next screen or page until the questionnaire is approved. Thus, if we mark that it must "overcome or complete" and we have sequential navigation linked to objectives, the student will not be able to advance to the next screen as long as he does not approve or exhaust the attempts. If you have unlimited attempts, the advance will be unlocked as soon as you exceed the minimum score, although you can continue making infinite attempts until you reach 100% of the grade. Score calculation All the quiz scores are calculated as follows. However, remember that only the score of those quizzes marked as "Assessable" will count towards the final unit score. Quiz score calculation The equation to calculate the score of a quiz is as follows: This is the formula for a quiz having 5 questions (3 simple answers and 2 multiple choice) * *Each type of question has a specific formula to find its own score. Changing question weight in a quiz We can go to the Properties tab inside each question to modify the weight or importance we give to questions when calculating the final score. When we give weight to a question, the formula used to calculate the score is as follows: We should bear in mind that default weight is 1. For instance, we can take the previous quiz as an example and decide that the first question weight is 3, which means that it triples the default weight of the rest of questions (1). Score calculation would be: Quiz weight When a unit consists of various quizzes, the formula used to calculate the final score of this unit is like calculating the score of a single quiz: If we have 2 quizzes, 90% score for the first one and 50% score for the second one, the final score will be: Changing quiz weight We can change the weight or importance of a quiz or single activity when calculating the final score. When the weight of a quiz is changed, score is calculated with this formula: If we take the previous examples, we can decide to give a double weight (2) to the second quiz only and leave the weight of the first quiz as it is (1). The formula would be as follows:

"Non interactive activity" is a component that allows adding a type of activity that that does not require any interaction with students. They are required to complete an asynchronous task, such as watching a video, reading, writing, doing some group work, etc. These activities are not self-assessed. However, if the unit can be accessed from SmartClassroom, the teacher will be able to assess it and students will see their feedback. Activity blocks can only be added inside sections (See here). You will find this component in the group of "Activity" components. Setup process 1. First, we will write the activity wording. 2. Then, we go to the "Add" tab to include some additional elements within the activity: new texts, audios, videos, and other useful resources. 3. Finally, we access the "Properties" tab to configure some features of the activity. Properties PROPERTY DESCRIPTION Show title This allows showing or hiding the upper headline associated with the activity. Competencies This property allows choosing what skills or academic goals are achieved when completing this quiz. This option is useful when the platform used to publish a unit keeps record of these data.

A "Glossary" is an element that contains unit keywords. This element can only be added inside a pop-up (See here ). You will find this component in the group of "Structure" components. Setup process 1.  We enter the "Add" tab and include the "Glossary items" we need. 2. We access the glossary properties and, in the property "Order glossary elements". Here you can decide whether the elements of the glossary will be shown in the order of insertion or if they will be ordered alphabetically.  3. We select each "Glossary item" and access the "Properties" tab. Here we can include a key "Term identification" chosen from the glossary. This will allow us to link this term with a word included in the contents. We should remember to include this text, as we will use it whenever we want to create a direct link to the term included in the glossary. 4.Notice that each "Glossary item" consists of: A term, that is, a title. Each term includes an audio by default. A description including a sample text by default. Por lo tanto, debemos: a. Modificar texto del "Término" (es decir, el título de elemento de glosario) b. Seleccionar el "Audio" y configurarlo (Ver here) o eliminarlo. c.En la zona "Descripción", redactamos el texto correspondiente. d. Con la zona "Descripción" seleccionada, accedemos a la pestaña "Añadir", podrás añadir también, si queremos, una "Imagen". Link a complete glossary or one of its terms After creating a glossary, you can link it to various places (the whole glossary or only some terms): Link it to the top Toolbar of a unit. Check how to do this in here Link it to a text. In this case, you can choose a specific word from the glossary. Select the text that you want to link, open the "links" drop-down menu, and select "Glossary link". Then click again on the word, go to the "Properties" tab, and choose the Term identification key that you want to show (see step 6).

"Float content" component allows adding contents whose width exceeds width of the central column. This component can only be added inside a section (See here ). You will find this component in the group of "Structure" components. Setup process 1. Select the section, access the "Properties" tab and configure the component. 2. Access the "Add" tab to include all the components you need. Properties PROPERTY DESCRIPTION Lets you select from 3 possible views: - Standard. The content protrudes a little from the central column. You can determine how much is overflowing with the additional properties "Right margin" and "Left margin". - Full width content. The content occupies the entire width available on the screen (full screen). - Content adjusted to central lane. The bottom of the section occupies the entire width available on the screen (fullscreen) but the content (texts, images ...) adjusts to the width of the center lane. Background image Lets you add a background image for floating content. Type of background Defines how the image will behave (if it is repeated if it is smaller than the available space or if it is not repeated). Background colour This property allows adding a background colour for the float content. Right margin This property allows defining the end of the right margin: None: The margin ends inside the central column. level 1: The margin is aligned to one side of the central column. level 2: The margin exceeds 50px the side of the central column. level 3: The margin exceeds 100px the side of the central column. If we combine "Right margin" with "Left margin" property, we can apply the same settings to both sides. Left margin This property allows defining the start of the left margin: None: The margin ends inside the central column. level 1: The margin is aligned to one side of the central column. level 2: The margin exceeds 50px the side of the central column. level 3: The margin exceeds 100px the side of the central column. If we combine the "Left margin" with the "Right margin" property, we can apply the same settings to both sides.