Customer Success Center

Login Sign up

Components | External animation

Modified on: Thu, 21 Dec 2023 2:01 PM

"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.

  1. First, we should select a size percentage under 100% in "Width" property (25%, for instance).
  2. "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).
  3. We use arrows to move the component and put it on the text.
Was this answer helpful?