CC Creator - Image

Last modified:


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.

Image 47285


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. 

Image 47286



    Modify image properties

    When you click on an image, the panel with its properties is enabled.

    Image 47287


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

    Image 47288

    To add them, click "Add bookmark". Depending on the chosen theme, you will have different types of bookmarks available. 

    Image 47290

    Then, you can move it on the image by clicking on this area.

    Image 47291

    Once you have selected a marker, you can modify its properties. The main action you will have to configure is its link.  

    Image 47294



    GroupPropertyDescription
    GENERALTitle

    Image 47295

    Marker title. You can customize it to better recognize it in the list of markers in the image. 

    Image 47296

    GENERALIdentifier

    Image 47297

    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.
    LINKAction
    Destiny

    Image 47359

    Image 47299

    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. 

    Image 47385

    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. 

    Image 47363

    Select the image and click "Add area". You will be able to add the types of areas that have been defined for the theme. 

    Image 47365

    Areas have the same properties as markers. See the description of their properties in the previous section of the article. 

    Image 47366


    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. 

    Image 47386

    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.

    Image 47374


    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.

    Image 47089

    Image 47381

    You will be able to choose from the image templates that have been determined for the theme you are using.

    Image 47382



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

    Image 47094


    - 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:

    Image 47093


    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.

    Image 47383

    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.

    Image 47455



    Modify image visibility

    You can decide whether an image is visible or not according to the condition you decide. Click on "Add condition".

    Image 47371


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

    Image 47027

    Image 47028




    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.

    Image 49339




    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. 

    Image 47362


    Is this article helpful for you?
    © 2022 Netex Knowledge Factory. All Rights Reserved. Disclaimer | Privacy policy | Cookie Policy.
    -