Set multimedia in eXelearning | Starting eXeLearning

Publish date: 2024-05-05

For multimedia contents we refer to images, videos, audio and animations also or not interactive. To treat multimedia contents with eXelearning there are two main options:

  • to use special functions of the Rich Text Editor in a Free Text object.
  • to use the iDevices properly conceived for multimedia contents
  • Here followings we introduce some general consideration regarding both possibilities: 

    The use of the Rich Text Editor

    Included with the eXelearning software, the Rich Text Editor is a good tool to publish multimedia contents. Here followings, its specific functions related to manage multimedia: 

    LINK

    Using the Free Text iDevice, the most simple way to publish a multimedia resource existing on Internet is to create a hyperlink. This solution is fast and easy, but we have to remember that the link doesn't show it's content until the learner activates the link, clicking on it, and navigates with the Internet browser. You can link pictures, video file, audio or any other resource available on the web that owns a URL to be accessed with the learner browser. Setting the link you can decide if the navigation must be performed opening an additional browser page or window or remaining in the same browser page where the user is navigating in the eXelearning package.

    Usually we think that a link asks obligatory the connection to Internet, but this aspect in eXelearning can be treated adding other considerations and results. When you export the learning package as a whole website, the navigation of the eXelearning package resources will be local apart the link to Internet resources. This means that, apart for the links to Internet resources, the learners doesn't need to have an Internet connection. This is also valid for the other exporting options of eXelearning.

    Exporting the eXelearning training package the teacher distributes a folder named with the name of the course and containing all the necessary files of the learning package and, most important to know, one file called index.html that is the file to start the navigation in the training package. To use the e-learning package, the learner has to open the main folder and double click on the index.html file.

    Launched the index.html file, the browser will be opened and the learner will be able to navigate the e-learning package and to find two kind of links: 

    Clicking on any of these links, the learner will not note any difference and will navigate with its Internet browser to the indicated resource (remember that if the link is to an Internet address, the learner will have to own the Internet connection otherwise he will get a related advise of not reachable resource/page).

    If the link is instead to an internal address, the content will be always available even without Internet connection. To set this option during the design of the link, you have a window that allows you to select an internal resource. When you proceed, eXelearning execute two different actions:

  • it copy the selected file and past it in a folder that will be exported with the learning package
  • it creates a dynamic link in the Free Text iDevice that will work independently to the folder where the user will store, in its computer, the eXelearning folder and resources.
  • Here we have an example of the two kind of possible links:

  • EXTERNAL LINK: https://www.google.com/ (this link require Internet connection and doesn't change because the external address is the same indipendently where the user will store his training package)
  • LOCAL LINK: file:///C:/...../course_5/Chrysanthemum.jpg  (this link do not ask for any Internet connection because the image file 'Chrysanthemum.jpg' will be provided in the eXelearning package, but the link will be different for any user being related to the folder where the user save his training package in his computer.
  • In the first case, the link point to an address that is external to the computer and it's reachable with the internet connection. To work in the learner computer, the https://www.google.com/ resource has to be 'published' by a 'web server'. In the second case, the file 'Chrysanthemum.jpg' is not published by an external web server because it is the same computer used by the learner that will let to see the content. The blank part of the address (here represented by:'/...../') it is just our representation because in the normal use it is not blank and it is dynamically created by eXelearning to let reach the file 'Chrysanthemum.jpg' in the folder where the learner has stored his e-learning package.

    Here below is shown how to set the internal link to the file 'Chrysanthemum.jpg' image. The file is selected from the local computer and eXelearning adds it to a folder that will be included in the export of the whole learning package. The designer can't see this operation did by eXelearning and can only set the desired file. Click the green button to proceed with the animated pictures:

    To simplify this process there is the Multimedia button.

    IFRAME - Inline Frame

    The IFRAME is a 'TAG' text, a special instruction, hidden in the html text code, given to a browser to let to show a resource that it is in another web page.

    The IFrame HTML element is often used to insert content from another source, such as an advertisement, into a Web page. Although an IFrame behaves like an inline image, it can be configured with its own scrollbar independent of the surrounding page's scrollbar.

    A Web designer can change an IFrame's content without requiring the user to reload the surrounding page. This capacity is enabled through JavaScript or the target attribute of an HTML anchor. Web designers use IFrames to embed interactive applications in Web pages, including those that employ Ajax (Asynchronous JavaScript and XML), like Google Maps or ecommerce applications.

    Respect to the link, the IFRAME, instead to provoke  a navigation experience and to open a new browser page or to move inside of the current one to a new address shows, in the same page where it is, but in a frame, what is the content of the link. If the link is to a multimedia resource, it shows the multimedia content.

    The IFRAME instruction can be created using the 'External Web Site' iDevice and in this case its code will be not viewable by the learning package designer, but it could be also created within the Reach Text Editor switching to the HTML code view with the HTML button image:Exe-rte-html.png.

    An example of the code that can be insert is the following:

    <p><iframe widtht="320" height="480" with="640" src=" https://www.google.com" frameborder="0" allowfullscreen=""></iframe></p>

    iframe chart

    EMBED concept

    With 'embedding' we means to put a code in the page that shows some multimedia content published in another web page. The meaning is the same already explained for the IFRAME instruction and in fact if for example we get an embedding code, ready for his publication, from a YouTube video, we will find in it the same IFRAME instruction: <iframe width="560" height="315" src="https://www.youtube.com/embed/emY52KNG1KI" frameborder="0" allowfullscreen></iframe>.

    Anyway, the iframe instruction is not the only one possible. In html5, for example, you can have this: <video id="sampleMovie" src="HTML5Sample.mov" controls></video>

    The embedding of a resource in an eXelearning training package web page can be commonly done using the code given by the online publisher of the multimedia content like YouTube, Vimeo etc. Now a day, on Internet, the embedding is larged diffused and the platforms that provide multimedia sevices, like video, audio or pictures, give to the users the possibility to publish the contents providing the code for the embedding.

    In this way, it's very easy to embed a multimedia content because the necessary code is provided by the platform where the multimedia resource is stored. It's important to remember that embedding a code taken from a web platform, the learner will be able to get the multimedia content only having access to Internet navigation. 

    The options available to embed, for example, a video with the Free Text editor are two:

  • coding HTML
  • using the image:Exe-rte-media.png Media button
  • In the first case, you have to take the embedding code ready to be paste in your project from the media provider, for example the YouTube code: <iframe width="560" height="315" src="https://www.youtube.com/embed/emY52KNG1KI" frameborder="0" allowfullscreen></iframe>. Then you have to switch the free text to the HTML mode using the HTML button image:Exe-rte-html.png. Then you have to past the code and to save the resource.

    here the example to add the youtube video https://www.youtube.com/watch?v=emY52KNG1KI. Click on the green buttons to proceed:

    CLICK HERE TO ENLARGE

    In the second case, with the Media button image:Exe-rte-media.png, it is also more simple because is the Media button that provide the right code for you.

    Click on the Media button: you get the media dialog that offers different options including the iframe method.  

    media button dialog

    Click on the iFrame and then past the link to the video. In this case the link will be only a part of the previous YouTube embedding code because the rest of the iFrame code is created by the media button. Her ein yellow the link to be inserted in the media dialog:  <iframe width="560" height="315" src="https://www.youtube.com/embed/emY52KNG1KI" frameborder="0" allowfullscreen></iframe>

    Here following, the video that shows the procedure.

    Click HERE TO ENLARGE and click on the green arrow buttons to proceed:

    Local media

    As for the links, the Media Button allow to insert video that can be attached to the e-learning package. This method allow the user to have the media without the need of an Internet connection.

    Just using the same Media dialog allows to set the right code and to copy the media file in the package. The Media dialog allow to select wat kind of file we are going to upload. This is necessary because the Media button writes the necessary HTML code that can change between different media file: 

    media button dialog

    The file that can be included in the e-learning package are various:

    Here following an example of a Macromedia Flash animation produced with the software Wink. Click HERE TO ENLARGE and on the green button arrows to proceed:

    Additional iDevices

    To publish the multimedia learning contents with eXelearning there are various more way apart the free Text iDevice. As we have seen before, the free Text Editor allow to access to the HTML code and to insert the embed code and the iframe instruction, but eXelearning provides also some other way to publish multimedia contents. All the following structural elements, in the iDevice (instructional device) pane can be used in addition to the Free Text:

    iDevicesDescription
    External website

    The external website iDevice allows to include an external website to the learning content. This feature allows learners to browse the external website without the need to open a new browser window and in case that the external website contains multimedia resources, the result will be to have these multimedia published in the learning package.

    This solution is very fast, but must be used being conscious of the following crucial aspects:

    1) it requires a working Internet connection for the learner

    it is not the best one because, in our opinion, it doesn't allow to maximize the window in case of need to enlarge the view and keep the second site constrained in the learning window. When the multimedia of the origin site is too large, for the given window, the user will have to move in it using the scrolling bar and the experience will be not the best.

    In such cases, will be very useful to provide also the link to the website to geve the learners the possibility to navigate directly to the resources.

    NOTE
    Using this iDevices means that the learners will have to own an internet connection otherwise the zone of screen occuped by this iDevice will be blank

    Image GalleryThe gallery iDevice allows you to upload and label multiple images.
    Image MagnifierThe image magnifier allows the learner to view parts of an image in a magnified state.
    Java appletThis is iDevice that allows users to load simple java applets into the eXe content.

     

    ncG1vNJzZmirY2KytnnWnqqtZWFjrq6t2ailmq%2BjY7CwuY6wnJtmk6iwtHrIrWaPfYN5lop7wqisq6uVlIJwv8StlqatnKm2rrHDopiYoZ6Usrmxy56Yq6aZo7RvtNOmow%3D%3D