Image
Images are one of the most used components in the units.
Each author license allows different actions to be performed with images
Easy Mode:
- Edit images
- Modify general image properties
- Add markers
- Add areas
- Modify completeness requirements
- Adding automatic events.
Professional Mode:
- Add new images within rows
- Move images in position
- Duplicate and delete images
- Modify image visibility
- Modify the visibility of areas and markers
- Activate or deactivate areas and markers.
Edit images
When you click on an image on the screen, its properties tab is enabled in the side area.
Here you can:
- Replace the image with another one by clicking on the blue button. In this way, you will access the resource folder of the unit.
- Define an alternative text describing the image. This is important to meet web accessibility criteria.
-
Apply filters to the image. After choosing the filter you want to apply, you can modify its graduation in the bottom bar.
Additionally you can change the size and placement of the image.
Double-click on it and you can enlarge it using the bar. You can also move it to adjust it to a certain area by dragging it with the mouse pointer. When you are done, click the button to save the changes.
Modify image properties
When you click on an image, the panel with its properties is enabled.
Here you can modify:
- Its title. It will be useful to customize it to recognize the image from the breadcrumb trail.
- Its identifier. This is an auto-generated data by the system, but you can customize it. If you customize it, you will help the trace that sends the unit to the platform to be clearer (it is not the same for the content to send to the platform "student1 interacted 29cb85cfg44" than to send, for example, "student1 interacted image1"). Remember that the Identifiers must be different, you cannot repeat any identifier of any element within the unit, so you must be careful when modifying them and not repeat them.
- Set the completeness requirements. See below how to set them.
Add markers
Bookmarks are interactive buttons that you can place over images to link them to any element (an external link, a document, a pop-up...).
To add them, click "Add bookmark". Depending on the chosen theme, you will have different types of bookmarks available.
Then, you can move it on the image by clicking on this area.
Once you have selected a marker, you can modify its properties. The main action you will have to configure is its link.
Group
Property
Description
GENERAL
Title
Marker title. You can customize it to better recognize it in the list of markers in the image.
GENERAL
Identifier
This is an auto-generated data by the system, but you can customize it. If you customize it you will help the trace that sends the unit to the platform to be clearer (it is not the same for the content to send to the platform "student1 interacted 29cb85cfg44" than to send, for example, "student1 interacted marker1"). Remember that the Identifiers must be different, you cannot repeat any identifier of any element within the unit, so you must be careful when modifying them and not repeat them.
LINK
Action
Destiny
In the "Action" menu you can choose which action will be executed when the student clicks on the marker.
And depending on the action chosen, you can select a different destination, as follows:
- Go to... It will allow to choose as destination a page of the unit or an external url.
- Show... the navigation menu. a popup or a notification.
- Hide... the navigation menu.
- Check... all quizzes on the page or all quizzes in the unit.
- Retry... This action is associated with the questionnaires. It allows you to run a new attempt at the questionnaire and to decide whether to reset the answers or to keep the options of the previous attempt checked.
- End... the questionnaires of the page or of the whole unit.
- Change the language of the unit.
- Open a resource (e.g. a pdf) in a new browser tab.
- Download a resource (e.g. a pdf).
- Save (i.e. send to the LMS all trace data) and exit the content (i.e. close the browser tab with the unit). Remember that whether the unit is closed will depend on the browser itself and the LMS. If, for example, the LMS opens the content in an iframe (something common in some platforms in SCORM publications, or in LC6 if you configure the content to open "full screen") the content will not be able to close.
Remember that if you want to delete a marker, within the image properties, you will see a 3-dot menu associated with each marker. When you open it, you will be able to delete it.
Add areas
Areas are interactive zones that can be added on top of images, similar to a marker.
The difference is that you can modify both the position and the size (width and height) of the area to "cover" the whole area you are interested in marking.
Select the image and click "Add area". You will be able to add the types of areas that have been defined for the theme.
Areas have the same properties as markers. See the description of their properties in the previous section of the article.
Remember that if you want to delete an area, within the image properties, you will see a 3-dot menu associated to each marker. When you open it, you will be able to delete it.
Modifying the image completeness requirements
For an image to be considered complete, students must complete a series of "tasks" called objectives, in this case, interacting with the markers or areas that have been added. If an image has no areas/markers, there will be no objectives to fulfill.
As an author you can decide to specify generic targets for all unit images that have areas/markers in the unit configuration area, or you can define these targets in a more detailed way, image by image.
In this case you will be able to decide:
- It is not objective. The image is not a unit target. If you do not interact with its areas/markers, it will not be taken into account in the unit completeness calculation.
- Interact with one. The image objectives will be completed as soon as the student interacts with at least one of the markers or areas of the image.
- Complete them all. The image objectives will be completed as soon as the student interacts with all the markers or areas of the image.
- As configured at the unit level. This option "delegates" the decision whether it is an objective or not to the overall unit configuration.
Add events
Events are automated actions that you want to occur after a specific trigger.
Select the image and click the "Add event" option in the "Properties" tab.
The trigger is "Completion requirements have been met", i.e. when the completeness requirements configured for the image are met.
When this trigger is executed, the following can occur:
- A pop-up window is displayed.
- A notification is displayed.
Remember that, after configuring the event, you must press the "SAVE" button.
Add new images within rows.
With the Professional author license you can add any additional components you may need on the screen.
To add a new image you have the + button located in the lower left area.
You will be able to choose from the image templates that have been determined for the theme you are using.
Remember that any component you add will always be inside a row, so you have two ways to add the new image.
- Select an existing element on the screen (a row, a text, an image...). Then, just add the desired component by clicking on it. It will be added below the selected element (or as the last element of the row).
- Drag the component to the screen. Moving the mouse pointer over the elements on the screen you can decide where to place the component. To help you, a color-coded bar will be displayed:
Move images to a different position
With the Professional author license you can move an image to a different position
All you have to do is select the image by clicking on its label and use the start icon to drag the element.
Remember that to help you choose the desired position, color-coded bars will be displayed:
- Blue: will move creating a new section.
- Orange: will move creating a new row.
- Green: will move creating a new column.
- Gray: will move under another existing element.
Duplicate or delete images
Select the image and, from its label, you can duplicate or delete it.
Modify image visibility
You can decide whether an image is visible or not according to the condition you decide. Click on "Add condition".
Here you can decide which object/component will be used as a referent and then you can decide which trigger will make the image visible. Depending on the object you choose, you will have different triggers. For example, you could make one image visible when the learner passes an activity and another image visible when the learner fails. This way you can set up positive and negative feedback on the questions...
Modifying the visibility of areas and markers
You can decide whether an area or a marker is visible or not according to the condition you decide. Click on "Add condition". Here you can decide which object/component will be used as a referent and then you can decide which trigger will make the text visible. Depending on the object you choose, you will have different triggers. For example, you could have a marker displayed after clicking on a previous marker.
Activating or deactivating areas and markers
You can decide whether an area or a marker is inactive and under what circumstances it will be activated. Click on "Add condition". Here you can decide which object/component will be used as a referent and then you can decide which trigger will make the text visible. Depending on the object you choose, you will have different triggers. For example, you could make a marker visible when answering a question.
