Understanding Web-based Applications and Other Multimedia Forms

Exclusive offer: get 50% off this eBook here
Moodle 2.5 Multimedia

Moodle 2.5 Multimedia — Save 50%

Quick and easy ways to add multimedia to your Moodle courses with this book and ebook

$26.99    $13.50
by João Pedro Soares Fernandes | November 2013 | e-Learning Moodle Open Source

In this article by João P. Soares Fernandes, the author of Moodle 2.5 Multimedia, we will focus essentially on web-based applications for creating multimedia.

(For more resources related to this topic, see here.)

However, we will not look at blogs, wikis, or social networking sites that are usually referred to as web-based reference tools. Moodle already has these, so instead we will take a look at web applications that allows the easy creation, collaboration, and sharing of multimedia elements, such as interactive floor planners, online maps, timelines, and many others applications that are very easy to use, and that support different learning styles. Usually, I use Moodle as a school operating system and web apps as its social applications, to illustrate what I believe can be a very powerful way of using Moodle and the web for learning. Designing meaningful activities in Moodle gives students the opportunity to express their creativity by using these tools, and reflecting on the produced multimedia artifacts with both peers and teacher.

However, we have to keep in mind some issues of e-safety, backups, and licensing when using these online tools, usually associated with online communities. After all, we will have our students using them, and they will therefore be exposed to some risks.

Creating dynamic charts using Google Drive (Spreadsheets)

Assigning students in our Moodle course tasks will require them to use a tool like Google Spreadsheets to present their plans to colleagues in a visual way.

Google Drive (http://drive.google.com) provides a set of online productivity tools that work on web standards and recreates a typical Office suite. We can make documents, spreadsheets, presentations, drawings, or forms.

To use Google Drive, we will need a Google account. After creating our account and logging in to Google Drive, we can organize the files displayed on the right side of the screen, add them to folders, tag them, search (of course, it's Google!), collaborate (imagine a wiki spreadsheet), export to several formats (including the usual formats for Office documents from Microsoft, Open Office, or Adobe PDF), and publish these documents online.

We will start by creating a new Spreadsheet to make a budget for a music studio which will be built during the music course, by navigating to CREATE | Spreadsheet.

Insert a chart

As in any spreadsheet application, we can add a title by double-clicking on Untitled spreadsheet and then we add some equipment and cost to the cells:

After populating our table with values and selecting all of them, we should click on the Insert chart button.

The Start tab will show up in the Chart Editor pop up, as shown in the following screenshot:

If we click on the Charts tab, we can pick from a list of available charts. Let's pick one of the pie charts.

In the Customize tab, we can add a title to the chart, and change its appearance:

When everything is done, we can click on the Insert button, and the chart previewed in the Customize tab will be added to the spreadsheet.


If we click on the chart, a square will be displayed on the upper-right corner, and if we click on the drop-down arrow, we see a Publish chart... option, which can be used to publish the chart.

When we click on this option, we will be presented with two ways of embedding the chart, the first, as an interactive chart, and the second, as an image. Both change dynamically if we change the values or the chart in Google Drive. We should use the image code to put the chart on a Moodle forum.

Share, comment, and collaborate

Google Drive has the options of sharing and allowing comments and changes in our spreadsheet by other people. On the upper-right corner of each opened document, there are two buttons for that, Comments and Share.

To add collaborators to our spreadsheet, we have to click on the Share button and then add their contacts (for example, e-mail) in the Invite people: field, then click on the Share & save button, and hit Done.

If a collaborator is working on the same spreadsheet, at the same time we are, we can see it below the Comments and Share buttons as shown in the following screenshot:

If we click on the arrow next to 1 other viewer we can chat directly with the collaborator as we edit it collaboratively:

Remember that, this can be quite useful in distance courses that have collaborative tasks assigned to groups.

Creating a shared folder using Google Drive

We can also use the sharing functionality to share documents with the collaborators (15 GB of space for that). In the main Google Drive page, we can create a folder by navigating to Create | Folder. We are then required to give it a name:

The folder will be shown in the files and folder explorer in Google Drive:

To share it with someone, we need to right-click the folder and choose the Share... option. Then, just like the process of sharing a spreadsheet we saw previously, we just need to add our collaborators' contacts (for example, e-mail) in the Invite people: field, then click on Share & save and hit Done. The invited people will receive an e-mail to add the shared folder to their Google Drive (they need a Google account for this) and it is done. Everything we add to this folder is automatically synced with everyone. This includes all the Google Drive documents, PDFs, and all the files uploaded to this folder. And it's an easy way to share multimedia projects between a group of people working on the same project.

Moodle 2.5 Multimedia Quick and easy ways to add multimedia to your Moodle courses with this book and ebook
Published: November 2013
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

Creating floor plans using Floorplanner

Designing spaces can be an interesting activity in several subjects, starting at the conceptual stage with digital prototyping, and including trial of solutions, without a great deal of effort. We could use a Floorplanner to design:

  • A new school laboratory
  • A photography studio
  • The school we want
  • A yard
  • An eco-friendly house
  • An activity for language teaching, where students have to name objects in different spaces
  • A set for a drama performance
  • A setting in which characters of a book move around, as a support for creative writing

In the good old days, when computers were rare, I built a music studio with an old friend of mine. At that time, we had neither the money nor the fancy digital floor planners, so we just used the usual techniques of buying cheap stuff, and trial and error, moving instruments and equipments repeatedly until we found the perfect configuration. We got egg boxes from a friend who had a cake factory, some old carpets from a neighbor, cork and Styrofoam for the doors, walls, and ceiling, and an old hatch to make a window in a previously-scary, dark, and humid basement. We were thrilled with the result—a decent studio from little money. I remember we called it Studio 2, as at that time I had a 1990 Mini of that model. That's where I got the idea for the following course activity.

Floorplanner (http://www.floorplanner.com) is an online planning tool that allows us to create one floor plan for free, which can be seen in 3D and embedded anywhere, including, in our Moodle courses.

After signing up and logging in, we are taken to Dashboard where we can manage our account and create our first project by clicking on Create new project as shown in the following screenshot.

We can then start entering the details for the floor plan, and, when done, hit the Create Project button as shown in the following screenshot:

Creating a room

We are then presented with the workspace, with a sidebar on the left and a drawing interface on the right:

The steps is to create our music studio are:

  1. Click on the draw room icon in the Construction toolbar present at the upper-right corner. The mouse pointer changes to a black cross.
  2. Click on the squared area, and drag the mouse to make a rectangle of the size that you want for your studio.

Adding a floor

Now, let's add a floor to our room. We need to double-click on the surface inside the room that we've just created, and then select one of the patterns for the floor of our room from the pop-up window:

Adding construction elements

We can now add doors, windows, and walls to the plan. For example, if we click on the door icon in the Construction toolbar, we will get a library of elements that we can drag onto the plan, such as doors and windows.

Adding furniture elements

To add furniture and other elements to the studio, we should use the search field in the sidebar, and enter the required furniture name.

We can then drag the elements to the plan and position them where we want them.

We can rotate the elements, move them around, and if we click on the furniture, we can also change its properties, duplicate, or delete them.

Saving and publishing

We have to make sure that we save our design before leaving the Floorplanner, by using the save changes notice located on top of the drawing area.

If we click on the 3D button above the Construction toolbar, we can see a three-dimensional view of the plan.

Once we're done, we have at least two options to add our floor plan to Moodle:

  • Export as image
  • Embed

Export as image

In the menu at the upper-right corner, above the Construction toolbar, the first button on the left allows us to export the plan as an image:

On a free account, the only image size allowed is 640 × 480 px. We can later upload this file to Moodle.


If we want to embed or link to it from within Moodle, we should go to the upper-right corner of the web page, and click on My account.

In the left menu, after clicking on the Projects item, there's a button Actions next to our project.

We can get the embed code provided, and add it to our course.

Creating mind maps using Mindomo

Mind maps are an excellent technique for students to perform connections among concepts and to help them think about subjects. They can be used as a nice revision tool as well. We will use a tool called Mindomo to create this mind map.

Mindomo (http://www.mindomo.com) is an online mind map software that we can use to create multimedia mind maps with text, videos, images, and hyperlinks.

With a basic free account, we can create three mind maps. After signing up, we can create a new mind map by clicking on the Create button on the dashboard.

We are then required to fill in some details about the map and when done, hit the Ok button.

Adding topics

The most important functions for a start are, to add topic and subtopic (present on the top toolbar), and add multimedia elements to the topics (present on the left toolbar).

For now, let's start by giving the main topic the name Music, and add some more subtopics by clicking on the Topic option and then on Subtopic:

We will get something like this:

Adding multimedia elements

To add videos, images, or hyperlinks, follow these steps:

  1. Click on one of the topics or subtopics in the workspace.
  2. Click on the required icon on the left toolbar.
  3. In the pop-up box, fill in the details and click on the Set button.

As an example, let's see how to add a YouTube video to the Harmony subtopic.

After clicking on the Add Multimedia button in the left toolbar, we can search for videos on YouTube (or Vimeo) or directly add the URL of the video:

We will get something similar to the following screenshot, with videos showing up inside the subtopic:

Besides videos, we can record audio notes, upload videos, add hyperlinks or images.


In this article we have learnt how to use web-based applications for creating multimedia. We saw how to create dynamic charts using Google Drive (Spreadsheets) and shared folder using Google Drive. We also used the Floorplanner to create floor plan for free, which can be seen in 3D and can be embedded into other applications.

Resources for Article:

Further resources on this subject:

Moodle 2.5 Multimedia Quick and easy ways to add multimedia to your Moodle courses with this book and ebook
Published: November 2013
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

About the Author :

João Pedro Soares Fernandes

João Pedro Soares Fernandes is a science teacher from Portugal, who has been working on Moodle since 2004. He has been involved in several Moodle initiatives at school, university, and government levels as a teacher, trainer, course and content developer, manager, consultant, designer, and researcher.

João's main interests range from education to multimedia, the Web, participation, democracy, and human development.

In a single year, he can be seen in several corners of the earth, either working, visiting schools, hiking, or taking photos in mostly non-touristic venues. He also loves music, old cheap cars, farming, cooking, and spending his time in nature.

Books From Packt

Moodle Course Conversion: Beginner's Guide
Moodle Course Conversion: Beginner's Guide

 Moodle 2.0 E-Learning Course Development
Moodle 2.0 E-Learning Course Development

Moodle 2.0 Course Conversion Beginner's Guide
Moodle 2.0 Course Conversion Beginner's Guide

Moodle 1.9 Extension Development
Moodle 1.9 Extension Development

 Moodle Administration
Moodle Administration

Moodle 1.9 Top Extensions Cookbook
Moodle 1.9 Top Extensions Cookbook

Moodle 1.9 Math
Moodle 1.9 Math

Moodle 1.9 Testing and Assessment
Moodle 1.9 Testing and Assessment

No votes yet

Post new comment

This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software