CC Creator - Image

Images are one of the most used components in the units. 

Each editing mode 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:

1. Replace the image with another one by clicking on the blue button. In this way, you will access the resource folder of the unit. 
   
2. Define an alternative text describing the image. This is important to meet web accessibility criteria. 
   
3. 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 learningCloud 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 new images within rows.

With the Professional editing mode 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 editing mode 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.