Moodle Makeover

Moodle Makeover:

Moodle Makeover

In this article by Ian Wild, we will change the look of our Moodle website. Specifically, we will use our resources within Moodle to make our topics more visually appealing. We would include an animated character. We will take a good look at different tips and tricks to make our courses more interesting for students.

What we will do, is:

* Do more than make each topic a long list of resources. Use the label resource and Moodle's indenting tool to change this:

To this:

* Find out where we can get lots of free images for our courses.
* Explore different ways to use HTML to make our courses even more engaging.
* Include a talking character—an animated avatar—using Voki.com:

Arrange Your Resources

Why is it important to spend a little time arranging resources in a topic? Isn't it all eye candy? Let's take a look at my Topic 1:

I've got a nice colorful title, some text to introduce the topic, and then a long list of resources—which, quite honestly looks just like the list of files in the shared drive I already use to distribute my documents and handouts to students. What if the topic looked like this:

This is much more the effect we need. I've reordered my resources and included some labels, so that it is much easier for students to find a resource. In this section, we're going to learn how to bring some order into our topics.
Putting Your Resources in Order

One obvious difference between a shared drive and Moodle is that in Moodle, you can put the resources in the order you want, not the order the computer insists on (usually, numerical/alphabetical). However, in Moodle, any new resources you add are simply queued on to the end of the topic. This has meant that resources in my Getting Things Flying topic aren't exactly ordered in a sensible way—just the way I added them. I'm going to take action to remedy that now...
Time for Action – Arrange Your Resources

1. Remember that you need editing turned on before you start.

2. Choose the resource you want to move. I'm going to move my Backyard ballistics links resource to the end of the topic. To start the process, I need to 'pick up' the resource. I click on the Move icon:
3. This causes two things to happen. Firstly, the resource I want to move disappears. Don't worry—imagine you have it in your hand and you are ready to place it back into your course. Secondly, the boxes that have now appeared represent all the places to which you can move the resource that you are holding:

4. Choose where you want to move the resource to. I want my list of links at the end, so I'm going to click on the box at the bottom. The boxes disappear and my resources have been shuffled:

What Just Happened?

A list o f resources in Moodle isn't simply a list of files, like you would find on a shared drive. One obvious difference is that in Moodle, you can arrange your resources to be listed in the order you want, and we've just seen how easy it is to achieve this.

You can't find the Move icon?
Your site may be configured so that you can drag and drop resources. In that case, instead of the Move icon you will see crosshairs next to your resource. To move the resource, click on the cross hairs and, keeping your finger pressed down on the left mouse butt on, drag the resource to its new location. Look for the line in the background—this tells you where your resource is going to be dropped to—then let go of the mouse butt on when you have found the spot.

Now I've got my resources in the order I wanted, I have to say that my topic looks like just another resource dump—which is what I am trying to avoid.

My resources would be much easier to use if I could introduce each of them with a short piece of text:

Introducing a resource with a short introduction is a great way of improving the visual appeal of your course. The tool to achieve this is called a Label resource, and here's how to use it...
Time for Action – Insert a Label

I'm going to start the process of arranging my resource by having a short piece of text introducing the Backyard ballistics links resource.

1. Make sure editing is turned on, click on Add a resource, and choose Insert a label.
2. In the Editing Label page, enter your label text. When you are done, press the Save and return to course button.
3. The new label is added to the end of the list of resources—which is obviously the wrong place for it. Click on the Move icon, next to the label you have just added:

4. The page is re-displayed. Your new label disappears and lots of boxes have appeared. These boxes represent the places where your new label can go:

5. Click on the relevant box to place your label. You're done!

Remember: If you don't have a Move icon, you'll have crosshairs next to the label that you can click on to drag it to the right place.


What Just Happened?

After all the experience we have had with Moodle so far, using the label resource will be fairly straightforward. Judicious use of labels means our course topics don't have to be simply a long list of resources. Remember to treat labels as a way of leading the student towards and into a resource. Labels are not designed for content, so try to keep labels short—perhaps two or three sentences at the most. Labels are like the glue that holds topics together. You don't want your glue to be too thick.

It's looking better, but my topic is still looking a little flat. You can indent your resources by clicking on the Move right icon next to the resource:

Below is how things now look with a little indenting:

Seeing the course from a student's point of view
As a teacher, you will see a lot of options on the screen that your students won't. To get a clear idea of how a student will see the course, use the Switch role to… option at the top right of the screen. Choose Student from this list, and you will see the course as students see it.
When you're done, click Return to my normal role and you'll get your normal view back. You will also need to Turn editing on to get the edit controls back.


Moodle Course Conversion: Beginner's Guide

Moodle Course Conversion: Beginner's Guide Taking existing classes online quickly with the Moodle LMS

* No need to start from scratch! This book shows you the quickest way to start using Moodle and e-learning, by bringing your existing lesson materials into Moodle.
* Move your existing course notes, worksheets, and resources into Moodle quickly then improve your course, taking advantage of multimedia and collaboration.
* Moving marking online – no more backbreaking boxes of assignments to lug to and from school or college.
* Requires no prior knowledge of Moodle; but even experienced Moodlers will find this useful for converting 'paper' resources and face-to-face lessons into Moodle.

http://www.packtpub.com/moodle-course-conversion/book

Hypnotic HTML—Finessing to Your Web Pages and Descriptions

You can see that my Getting Things Flying topic is still mostly words. The only pictures I have in there are the Moodle icons, used to indicate the resource or activity type. I really want to liven it up with pictures and animations, but where can I get the graphics from and what's the best way of including them?
Finding Decorative Images

The Internet has some fantastic resources for free images to include in our courses. Here are just a few of the more popular ones...
Google Image Search

...is great for finding a picture on just about anything. Be careful about copyright (more on that later). The pictures are of mixed quality and you have to be prepared to hunt around. But they are good fun and wonderful for livening up an otherwise dry course.

Visit http://images.google.com/ for the Google Image Search main page.

I'm going to look for a picture of a do-it-yourself rocket. I type in the words "DIY Rocket" into the search box and hit the Search Images button. I'm presented with a page full of miniature versions of the original pictures Google has found:

Next, if you want to, you go to the web page containing the full sized version. Then, right click on the image to save it (if you're happy with the thumbnail then you can save that instead). Firefox has the slight edge here, as Internet Explorer only allows you to save an image either in the format it is already, or as a BMP (bitmap). It is a good idea to speak to your technician or IT help desk about converting any images you save in this way to a JPEG(if it isn't already) or PNG.

Once you've saved the image on your computer and converted it to a suitable format (JPEG or PNG), then you need to upload it to, and include it in, your course.

Of course, other image search websites are available. AltaVista (www.altavista.com/image/) is another good search tool for images because it also allows you to search for images that are a specific size.
Flickr

...holds quality original photography, and you can restrict the search to creative commons so you don't have to worry about copyright issues. You're relying on someone else posting a picture of something you are interested in, but if you find one the quality is usually excellent. For example, there are plenty of rocket images taken by many amateur enthusiasts—who are also enthusiastic photographers. Once you've found your image, then you can right-click on it to save it.
General Clipart Libraries

Line drawings, stick figures, and more. Usually, good quality but you oft en find yourself trawling through a good many unimaginative images before you find a good one. A free and frequently used clip art resource is from Discovery Education (http://school.discoveryeducation.com). The discovery education site contains a comprehensive clipart gallery, all from the pen of illustrator Mark A. Hicks (I'm specifically citing Mark's work because it is where the image of the rocket in Topic 0 of my course came from).

www.alamy.com is another huge resource of 'royalty free' images that is well worth a visit.
Microsoft Office Clipart Library

Microsoft has packed a fantastic range of clip art images into Office. So in Word 2003, for example, click on Insert in the main menu, slide down to Picture and then slide across to Clip Art... to open the Clip Art side bar. My search in there for "rocket" found me a myriad of clip art images, actual pictures, and animations. You can limit your search to specific types of media. To add the clip art to your document, simply double-click on the thumbnail. This way, we can put together a single document just containing the clip art images we need for our course.

Now, we've got our clip art gathered together in a Word document, what's the best way of grabbing the images? You've got the same problem if you already have a document, or a PowerPoint presentation, that contains an image (including animated pictures) you want to grab...
Time for Action – Grab an Image from a Word Document

1. In Word 2003, select File from the main menu and slide down to Save As... The Save As dialog is displayed.
2. At the bottom of the Save As dialog, click on the Save as type: drop-down list. SelectWeb Page, Filtered (*.htm; *.html).
3. Make sure you are happy that Word is about to save your document to the right folder and that you are happy with the name. Press the Save button.
4. Don't worry about what the next dialog says. Click Yes.
5. Go to the folder you just saved your document to. In there, you should find a folder ending with "_files". In there, will be your images:

What Just Happened?

Oft en you'll already have a Word document or a PowerPoint presentation containing an image that you want to include in your course. We've just created a new Word document, collected images from the Office clip art library, and then we've seen how easy it is to grab images by saving the document as a web page. You can easily do the same for PowerPoint presentations.
Copyright Caution

Let's take a look at the copyright issues.

Because we are working in the education sector, and as long as we aren't planning on making money out of someone else's pictures, copyright shouldn't be that much of a problem. In fact, I've never had a problem with copyright—if it isn't obvious what you can and can't copy off a website then all you have to do is ask the copyright holder. In my experience, asking for images from the larger corporations oft en prompts them to send you even more images. If you still aren't sure, and are fortunate enough to have a librarian working in your establishment then they should be aware of what you can and can't copy and how it can be used.

Another issue to think about is that of including photographs of staff and students (or just people generally). Will you need their permission to include their likeness in your course?
HTML Editor Tips and Tricks—Smilies and Other Gimmicks

If you really want to set your course apart from the crowd and you are looking for the right tool to do it, then look no further than the HTML Editor we have been using all along. The Editor does a good job of making it very easy for us to improve the look and feel of our courses, and in helping us to create engaging Moodle pages. Let's spend the rest of this section spending a little time exploring some new ideas.
Smilies

Have you checked out the Insert Smiley button yet? It's a really simple way of putting a little bit of expression in your text. Want to be sarcastic but you don't want students to get the wrong end of the stick? Add a:

Want to show how happy you are? Insert a:

Just the inclusion of a few little graphics like this helps to give our courses a much more friendly face, because, let's face it, oft en students are put off by seeing too many words. Here's one way of remedying that problem...
Create Imaginary Dialog

Turn your course into a story and have a dialog between the characters. Imagine that there's an emergency in space...



Arranging Your HTML

While I've been bus y sorting and arranging the thought struck me that up to now, I haven't given much thought to how text and pictures are arranged on a page (although that thought may well have struck you). At the moment, I've got text then pictures, text then pictures, one under the other. It doesn't have to be so, because I can also arrange my pictures side-by-side using borderless tables:

Time for Action—Displaying Things Side by Side

1. After you have created a new web page, we first need to insert a table. Click on the Insert Table butt on to display the Insert Table dialog:

2. You can now specify the number of columns and rows your table will have. Don't worry if you aren't exactly sure how many you will need as you can always change things later on. I'm going to have two pictures side by side, each with a fragment of text underneath. That means two rows and two columns. When you first insert a table, the border has a thickness of 1. If you want a borderless table, then you must set the border to be 0.
3. Insert an image into each of the two cells in the top row of the new table:

4. If you want a full view of the page so that you can position the images then remember you can click on the Enlarge Editor button to open the Fullscreen view. Click on that button now.
5. The Fullscreen editor window opens. You will see a new row of buttons in the Fullscreen editor. (These are specifically for configuring tables. They only appear in the Fullscreen editor.)

6. Those additional butt on s help to configure the table so that the images are positioned where you want them. Try experimenting with those buttons now. Remember: you won't break anything!
7. I'm then going to enter some text into the cells underneath each picture and that's it! I'm done:

What Just Happened?

By using borderless tables to arrange our HTML, we can vastly improve the visual appeal of our web pages. Rather than having text, then a picture, then text, then a picture repeated down the page, we can arrange items in cells in a table which, as we have seen, is very easy to add in. It's also easy to reconfigure the table later on, if you find that your content needs to change.

Remember: when you first insert a table, the border has a thickness of 1. If you want a borderless table, then you must set the border to be 0.

Getting Animated—Add a Talking Character

Multi media these days isn't just limited to audio and video. How about having your own custom designed animated character included in your course? Not for everyone but a good deal of fun is the free online service Voki.

Voki characters are animated, on-screen avatars that can talk—either using computer generated speech, or from a recording or uploaded file. Check out http://www.voki.com for more information.

You will ultimately need to create a Voki.com account, but if you visit Voki.com, you can start creating an animated character straight away. Voki provides you with a fragment of web page code, and we can embed that code into any HTML we add to our course.

Showing you how to create a Voki character is beyond the scope of this article, but the Voki website contains lots of guidance on how to do this.

In the following screenshot, I've edited the Topic 0 summary and added in a Voki of me (kind of!) giving out an important safety warning:

HTML Blocks—A Bit on the Side

Let's use an HTML block to create a welcome message for our students.
Time for Action – Add a Welcome Message

1. Making sure you've got editing turned on, scroll down the course main page and look for the Blocks Add... block, usually under the last block on the right-hand side of the page:

2. Click on Add... and select HTML from the list. Moodle will add a new HTML block to the page:

3. To configure the new HTML block, click on the Configuration icon:

4. ... and you're taken to the Configuring an HTML block page. Give your new block a title and then add in your content. When you're done, press the Save changes butt on. Here's my new welcome message (including an animated GIF):

5. But a welcome message is no good hiding down in the bottom right-hand corner of my course main page. Let's move it to the top left using the Move left and Move up icons:

6. Click on the move icons and I can get my message positioned just where I want it:

What Just Happened?

We've added a new HTML block to the course main page to provide a welcome message to our students. Any HTML can be added in there. What's great is that you can add as many HTML blocks to your course front page as you like…
Summary

In this article, we have covered:

* Arranging resources within topics to make topics look more visually appealing. We used the Label resource as the glue to holds resources together.
* We took a comprehensive look at tips and tricks we can use to make our courses more engaging for students.
* We included an animated character using Voki.com—more practice at using embeddable code. Other free, animated characters are available(e.g. http://gizmoz.com).
* We used an HTML block to provide a welcome message to our students.


Moodle Course Conversion: Beginner's Guide

Moodle Course Conversion: Beginner's Guide Taking existing classes online quickly with the Moodle LMS

* No need to start from scratch! This book shows you the quickest way to start using Moodle and e-learning, by bringing your existing lesson materials into Moodle.
* Move your existing course notes, worksheets, and resources into Moodle quickly then improve your course, taking advantage of multimedia and collaboration.
* Moving marking online – no more backbreaking boxes of assignments to lug to and from school or college.
* Requires no prior knowledge of Moodle; but even experienced Moodlers will find this useful for converting 'paper' resources and face-to-face lessons into Moodle.

http://www.packtpub.com/moodle-course-conversion/book

About the Author

Ian Wild

A physicist by profession, Ian's career has always focused primarily on communication and learning.

Fifteen years spent in private industry designing communication systems software eventually saw Ian concentrate on the development of accessibility and learning aids for blind, partially sighted, dyslexic, and dyscalculic computer users – whilst also working part-time as a math and science tutor.

Teaching only part-time meant not spending as much time with his students as he would have wanted. This and his background in learning and communication technology seeded his interest in virtual learning environments.
Books from Packt

Building Websites with Joomla! 1.5
Building Websites with Joomla! 1.5


Moodle 1.9 E-Learning Course Development
Moodle 1.9 E-Learning Course Development


Moodle Administration
Moodle Administration


Building Powerful and Robust Websites with Drupal 6
Building Powerful and Robust Websites with Drupal 6


Moodle Teaching Techniques
Moodle Teaching Techniques


Alfresco Developer Guide
Alfresco Developer Guide


OpenCms 7 Development
OpenCms 7 De