How to add a Facebook Comments Box to your Moodle site

Posted on by Admin

Adding a Facebook Comments Box enables users to easily make comments, which is a nice way to enhance the social media aspects of your site. In this tutorial, I’m going to show you how to add the Comments Box to your Moodle site’s side column, which, in my opinion, is the best place to hold it.

To see an example, you can visit the live demo for our premium Moodle themes here.

Below is a preview of the end result on our theme demo site (themes used from left to right: Ace, Brizzle and Cantata).

screenshot

Before we do anything in Moodle, we need to get the Comments Box from Facebook first.

Get Facebook Comments Box

1) Go to the Facebook developers plugin page:
https://developers.facebook.com/docs/reference/plugins/comments/

2) Configure the Comments Box settings depending on your specific needs.

screenshot

3) Once you are happy with the settings, you can click the “Get Code” button to generate the code. Keep the page open because you’ll need it later on.

screenshot

Ok, now it’s time to do something in Moodle – log into Moodle as an administrator. (Here I’m using our premium theme Cantata as an example in the tutorial).

Step 1

Turn editing on and add a HTML block to your Moodle site by selecting the “HTML” option from the “Add a block” drop down menu as shown in the figure below.

screenshot

Step 2

Now you should see that a new HTML block has been added. Click the configuration icon, which is the second icon, as shown in the figure below (your Moodle site’s configuration icon will look different).

screenshot

Step 3

On the “Configuring a (new HTML block) block” page, turn on the HTML Source Editor for the “Content” text field by clicking the HTML icon in the editor menu as shown below.

screenshot

Step 4

Copy and paste the code from the previous Facebook page into the HTML Source Editor.

screenshot

Step 5

Since Moodle’s source editor will try to automatically strip out the required empty markup we are adding, we need to apply a little trick here. Otherwise, the Comments Box will not show up on your Moodle site but luckily the trick is very simple. All you need to do is to add an HTML space “ ” (without the quotation marks) inside of the empty div to trick Moodle to keep the empty div – see the figure below.

screenshot

Step 6

Enter a block title and configure the other options before saving, and you are done.

screenshot

Moodle Themes – “Ace” and “Brizzle”

Posted on by Admin

We have launched our first two premium Moodle Themes “Ace” and “Brizzle” and they have proved to be very popular. I thought I’d write a quick guide to illustrate options available in their theme settings page for our old and future customers alike.

The two themes all have their own Theme Settings page (located under: Settings > Site administration > Appearances > Themes) where you can make the following theme-related customisatons.

1)Customisable logo

Upload your logo to your web server and then enter the logo URL into the logo form field as shown in the figure below.

2)Header widget area

There is a block space in the page header for customised HTML content – see the figure below.

This widget area is best for social media elements such as Twitter and Facebook. You can follow another tutorial here to learn how to do so.

3) Footer widget area

There is  a block space in the page footer for customised HTML content – see the figures below.

This widget area is ideal for putting in your site copyright note – you can customise the HTML code below to have a similar copyright notices to the ones shown in the figures below. Remember you need to use the HTML source editor for entering any HTML code.

<p style="text-align: center;">&copy; Company Name.</a></p>

If you are interested in our premium Moodle Themes and would like to find out more, you can visit the themes page for more information and live demos.

We are planning to make more premium Moodle Themes in the near future, so watch this space or follow us on Twitter to get notified of any theme related news or updates. All our premium Moodle themes (current and in the future) will include the following as standard:

  • Customisable logo
  • Header widget area – ideal for social media (tutorial)
  • Footer widget area – ideal for copyright notice
  • Moodle custom menu (tutorial)
  • Compatible with all modern web browsers.
  • Free future updates for the theme’s major Moodle release (we’ll always provide 2.x updates for Moodle v2 themes)

6 User Experience related new features in Moodle v2.3 – A quick visual guide

Posted on by Admin

Moodle v2.3 was released on 25th June 2012. Below is a quick visual guide I put together to illustrate the 6 new features in this release which, in my opinion, greatly improve Moodle’s user experience.

The screenshots used in this visual guide were taken from our premiere Moodle theme Ace, which is fully compatible with the Moodle 2.3 release.

1) Drag and drop files


Please Note:

This feature only works in browsers which support the HTML5 “Drag and Drop” and “File” APIs (this means it will not work in Internet Explorer versions 9 and below).

From your computer directly into Moodle’s course.

screenshot

From your computer directly into Moodle’s file picker

screenshot

2) Drag and drop to re-arrange Moodle course sections or Moodle side blocks

Rearrange course sections.

screenshot

Rearrange side blocks.

screenshot

3) Quick and easy re-naming

You can edit the course activity/resource names without leaving the course page.

screenshot

4) New way to add an activity/resource

A nice popup window is used to present all the available Moodle activities/resources in a much more user friendly way.

screenshot

5) New course layout – defeat Moodle’s “scroll of death”

Now in the course settings, you can tell Moodle to “show one section per page” to avoid the “scroll of death” issue.

screenshot

6) New file picker


The new file picker can display not only the file names but also the relevant file thumbnails as well. This new feature provides users with better visual clues when they need to identify certain uploaded files.

screenshot

How to generate and issue a course certificate to learners using the Moodle certificate module

Posted on by Admin

Not long ago I was asked if it is possible for Moodle to generate and email a certificate to learners who have passed a particular exam (Moodle Quiz). After looking into the matter, I’ve found a way to do just that by using a great Moodle module called “Certificate”

Scenario:

You’ve set up a Moodle training course where you have added an exam using a Moodle quiz. The pass mark for the quiz is 60%. A course certificate will be generated and emailed to learners who get a score equal to or greater than 60%.

Solution:

Step 1

Download and install the Certificate module to your Moodle site.

Step 2

Go to the desired course as a course teacher/manager, and click “Editing settings” under “Course administration” as shown in the figure below.

screenshot

Step 3

On the “Editing course settings” page, enable completion tracking. Save the changes.

screenshot

Step 4

Turn editing on and update the existing exam (Moodle quiz). Make sure the “Activity completion” section is configured as shown in the figure below. Save the changes.

screenshot

Step 5

Go back to the course page and add “Certificate” as a Moodle activity.

screenshot

Step 6

Configure the certificate. There are lots of settings available for you to customise based on your needs, but I’m not going to cover everything here. For comprehensive information, you can check out Moodle’s official documentation here

In the figures below you can see some of the settings I used for making this tutorial.

screenshot
screenshot
screenshot

Step 6

Based on the scenario, we need to make sure the “Grade condition” and “Activity completion condition” are configured correctly as shown in the figure below.

screenshot

Step 7

Now it’s testing time – you need to log out and log back in as a student. Take the exam. If you pass the exam you should be able to see the certificate link.

screenshot

Step 8

Click the certificate link and you should see the instruction as shown in the figure below.

screenshot

Step 9

Click the “Get your certificate” button and your certificate will be generated and emailed to you.

screenshot
screenshot

Conclusion

I hope you find this tutorial useful. For the certificate design, there are quite a few default options which come with the module to get you started. However, if you are feeling adventurous you can also customise the design by following the Moodle documentation here

How to add Twitter and Facebook buttons to your Moodle site

Posted on by Admin

Adding Twitter and Facebook like buttons to a website is always a good idea if you’d like to spread the word about your site through social networking. In this tutorial I will walk you through how to add the commonly seen buttons to your Moodle site.

First things first. Before we do anything in Moodle, Let’s get the buttons from Twitter and Facebook’s official websites.

Get Twitter “Share a link” button

1) Go to Twitter’s official buttons page: http://twitter.com/about/resources/buttons

2) Select “Share a link” and enter the desired options as shown in the figure below.

screenshot

3) Once you are happy about the button’s preview, you can keep the page open for later use.

Get Facebook “like” button

1) Go to the Facebook developers plugin page: http://developers.facebook.com/docs/reference/plugins/like/

2) Configure the like button as shown in the figure below. For the like button to work in Moodle you can only use the IFRAME version rather than the HTML5/XFBML version.

screenshot

3) Once you are happy with the button’s preview, you can click the “Get Code” button. In the popup window you need to choose the IFRAME option as shown in the figure below. Keep the page open for later use.

screenshot

Ok, now the buttons are ready for use we can dive into Moodle to add the buttons.

Step 1

In a new window, Log into Moodle as an administrator. Select the “HTML” option from the “Add a block” drop-down menu.

screenshot

Step 2

Now you should see that a new HTML block has been added. Click the configuration icon, which is the second icon, as shown in the figure below. (Your Moodle site’s configuration icon will look different )

screenshot

Step 3

On the “Configuring a (new HTML block) block” page, turn on the HTML Source Editor for the “Content” text field by clicking the HTML icon in the editor menu as shown below.

screenshot

Step 4

Copy and paste the relevant buttons’ code from the previous Twitter and Facebook pages into the HTML Source Editor and click the “Update” button.

screenshot

Step 5

Enter a block title and configure other options before saving.

Step 6

You need to turn off editing to see the changes.

screenshot

Conclusion:

Using a Moodle HTML block to add Twitter and Facebook buttons is only one way of doing it. If your Moodle theme offers you extra block/widget areas to enter HTML code you can take advantage of those as well.

For example, in our premium Moodle Theme “Ace”, you can go to the theme settings page and add the Twitter and Facebook buttons to the page’s header as shown below.

screenshot

How to add a promotional banner to your Moodle front page

Posted on by Admin

If you have seen our new premium Moodle Theme’s demo site, you will notice that there is a promotional banner placed on the Moodle’s front page. By default, Moodle’s front page is the site landing page, and landing page is always an ideal place for a promotional banner to attract immediate attention from visitors.

In this tutorial I will show you how to add a banner on your Moodle front page.

Step 1

Log into Moodle as an administrator and navigate to the “Front page settings” page.

Settings > Front page settings > Editing settings.

screenshot

Step 2

On the “Front page settings” page you will find an option called “Include a topic section”. Make sure the box for this option is ticked. Save the changes.

screenshot

Step 3

Navigate to the front page. Click the “Turn editing on” link which is located right underneath the “Front page settings”.

screenshot

Step 4

Now you should see the “Add a resource…” menu appear on the top of the front page content area. Select the “label” option from the menu as shown in the figure below.

screenshot

Step 5

In the “Label text” editor you can upload and insert your banner image by clicking the image icon in the menu bar.

screenshot

Step 6

Click the “Save and return to course” button and you should see your banner appear on the front page.

screenshot

Hopefully you find this tip useful. In fact, you can not only add a banner image but also text/video/flash to the front page using this method. So just play around with it and you might develop some creative ideas for your site’s landing page.

How to use Dropbox as a Moodle file repository

Posted on by Admin

Dropbox is a popular online file storage app. Imagine it as a type of online USB drive, which you can access anywhere in the world as long as you have a computer and internet connection. If you have a Dropbox account and also use Moodle, you will be glad to know that in Moodle 2.x you can connect the two together and use Dropbox as a Moodle file repository.

Step 1

Sign up for a Dropbox account if you don’t already have one here: https://www.dropbox.com/

Step 2

Log into your Dropbox account and go to the “Dropbox for Developers” page by following the link here – https://www.dropbox.com/developers

screenshot

Step 3

Navigate to the “My apps” page and create your Dropbox app by clicking the “Create an App” button.

screenshot

Step 4

Enter an app name, description and select the access level to be “Full Dropbox” and click the “Create” button.

Note: the app name needs to comply with Dropbox’s branding guide, otherwise your app won’t be approved later when you apply for production status.

screenshot

Step 5

Now you should be directed to the app’s configuration page, where you can find the App Key and App secret as shown in the figure below. later you will need to enter the key and secret in Moodle.

screenshot

Step 6

Log in to Moodle as an administrator and navigate to the “Manage repositories” option and enable Dropbox.

screenshot

Step 7

Once Dropbox is enabled, you will be directed to the configuration page where you can enter the Dropbox app key and secret from Step 5. Click “save” and you are done.

screenshot

Step 8

Now you need to go back to the Dropbox Developers page and apply for production status for the app.

Step 9

Upon Dropbox’s approval (you should get an email from them), you can start using Dropbox as your Moodle’s file repository.

screenshot

How to use Google Docs as a Moodle file repository

Posted on by Admin

Google Docs is another wonderful free online service provided by Google. It can be used as an online office suite where you can easily create or edit documents, spreadsheets and presentations. It can also be used as an online file repository, which enables you to access your docs from any computer with an internet connection.

In this tutorial, I am going to show you how to use Google Docs as your Moodle file repository.

Important: If you are using a Moodle 2.1.1 installation, the Google Docs repository may not work due to a known bug which affects this version. To be safe, it is recommended to upgrade your Moodle to the latest version. There is a forum post on the official Moodle site about this where you can find out more about this issue for Moodle 2.1.1.

Step 1

You need to have an account with Google to be able to use Google Docs, so sign up for one, if you don’t already have a Google account.

Since only files in Google Docs format will show up in Moodle’s File Picker later, you need to make sure all the uploaded files (eg. Word, PowerPoint, PDF) are converted to Google Docs format. Google Docs will do the conversion for you when you are uploading the files, as long as you remember to tick the two options as shown in the figure below.

screenshot

Step 2

Log in to Moodle as an administrator and navigate to the “Manage repositories” option and enable Google Docs.

Site administration > Plugins > Repositories > Manage repositories

screenshot

Once Google Docs is enabled, you will be directed to the configuration page where you can enter a new name for the repository.

screenshot

Step 3

Go to a course and turn editing on. Select “File” from the “Add a resource” drop-down list.

Note: Only “File” supports Google Docs.

screenshot

Step 4

On the “Adding a new File” page, click the “Add…” button. A Moodle File Picker will appear and Google Docs should be listed as one of the available repositories. Select Google Docs as the repository and click the “Login” button to log into your Google account.

screenshot

Step 5

You will need to grant Moodle access to your Google account by clicking the “Grant access” button.

screenshot

Step 6

Now you should see all your Google docs as shown in the figure below, and you can select any file you like for using in the course.

screenshot

How to use Flickr as a Moodle image repository

Posted on by Admin

Like Youtube is known as a great online video repository, the Yahoo-owned service Flickr has gained it’s popularity as a great online image repository. It is reported that there are now 6 billion images hosted on Flickr and the number is still growing.

And again, just like Youtube videos, Flickr images can be used to enrich your teaching / training material. In this tutorial, I’m going to show you how to use Flickr as your Moodle site’s image repository. This tutorial has three parts – Part One is about things you need to do in Flickr; Part Two contains all the Moodle-related steps; In Part Three, a test is carried out to check everything is working as it should.

Part One : Flickr

Step 1

If you don’t already have a free Flickr account, you need to sign up for one.

Step 2

Make sure you are logged into Flickr, and follow the link here to get a Flickr API key for your Moodle site.

Step 3

Once you click the link provided above, you should see a screen like the one shown below. Click the “Get Another Key” button to proceed.

screenshot

Step 4

Now you should arrive at the “App Garden” page, and you need to click the “APPLY FOR A NON-COMMERCIAL KEY” button.

screenshot

Step 5

On the “Tell us about your app” page, fill in the form and submit.

screenshot

Step 6

Ok, now the API key is generated for you! Copy the key. (Ctrl+C on PC or Cmd+C on Mac)

screenshot

 

Part Two: Moodle

Step 1

Log into your Moodle site as an admin user, and navigate to the “Manage repositories” option:

Settings > Site administration > Plugins > Repositories > Manage repositories

screenshot

Step 2

On the “Manage repositories” page, find “Flickr public” (NOT “Flickr”) and choose “Enable and Visible” from it’s options drop-down list.

screenshot

Step 3

On the “Flickr public configuration” page, paste the API key into the relevant box as shown below. Save and you are all good to go.

screenshot

 

Part Three: Testing

Congratulations, you have just set Flickr up as your Moodle site’s image repository! Now let’s test it out by adding a Flickr image to a course.

Step 1

Go to a course and turn editing on. Choose “Label” from the “Add a resource…” drop-down list.Click the image icon on the editor menu bar like shown below.

screenshot

Step 2

After clicking the “Find or upload an image…” button, another popup window called “File picker” will appear where you will see “Flickr public” as a repository option. Click the “Flickr public” button and you can start searching the images using the search form on the right-hand side pane.

screenshot

Step 3

I’ve done a search for “Moodle” and I got 126 pages of related images!

screenshot

Step 4

I decided to pick a poster about new features in Moodle 2.0. By default, when you save the image, the image will be stored in your Moodle site. However, if you have limited server space or bandwidth you might want to check the “Link external” option and let Flickr host the image. The drawback of the latter method is that if the image is deleted from Flickr by the user, it will also disappear from your Moodle site as you are only providing a shortcut pointing to the image on Flickr, so if the actual image gets deleted/moved the shortcut would no longer work.

screenshot

Step 5

Click the “Select this file” button and the image should be inserted into the editor. Save and return to the course and you will see the Flickr image has been inserted into the course.

screenshot

And that’s it. Now you know how to use Flickr as your image repository for Moodle – we hope you enjoyed our tutorial.

How to visually track student progress in a Moodle course

Posted on by Admin

Recently, I was asked if there is a way for students and teachers to track the progress in a Moodle course. After some looking around on Moodle.org, I discovered a wonderful third party plugin called “Progress Bar” which does exactly just that, and even better, the progress data is visualized so it is very intuitive for users. This plugin is contributed by Michael de Raadt and he has made a great video demonstration about the plugin as well.

I’ve installed the plugin on our Moodle demo site, so if you are interested you can log into Demo Course 01 to have a look (Username: user2 Password: user2demo).

The progress bar on our Moodle demo site looks slightly different from the original one, as I tweaked the plugin so it fits in better with our Moodle site’s style.

Below are the steps you can take to make the progress bar work for your Moodle site:

Step 1

Download the plugin and install. You can follow the instruction on the Moodle official website page for this plugin.

Step 2

Log in as an admin user. Go to a course you’d like to track progress, and turn on editing.

Step 3

Once editing is on, you should see a block called “Add a block”. Choose “Progress Bar” from the drop down list, and the block will be added. Click the configuration button.

screenshot

Step 4

Now you should see the configuration page for the Progress Bar block, where you can customise the settings according to your needs. The settings are pretty much self-explanatory, but if in doubt you can always click the (?) help icons to get more instructions.

screenshot
screenshot

Step 5

Save the configuration and logout. Log in again as a student who is enrolled on the course. The figure below shows you what happens to the progress bar before and after the student interacting with one of the course resources/activities.

screenshot

Step 6

Log in as the site admin or the course teacher, you can also check all of your students’ progress by clicking the “Overview of students” link in the Progress Bar block as shown below.

screenshot

How to use Google Analytics for your Moodle 2.0 site

Posted on by Admin

Do you want to obtain detailed statistics about the visitors to your Moodle site? If the answer is yes then you need to use Google Analytics to track the site traffic. Google Analytics is a free yet very powerful web analytics tool, and is widely used by all types of websites nowadays.

Essentially there are only two steps involved to start gathering information : Step 1 – Get your tracking code from Google Analytics. Step 2 – Add the tracking code to your Moodle site.

Ok, let’s get cracking!

Step 1

You need to have an account with Google to be able to use Google Analytics, so sign up for one here if you don’t already have Google account for your organisation. Once you’ve got a Google account, you can create your website profile in Google Analytics and get the tracking code for your Moodle site.

screenshot
screenshot

The tracking code should look something like below, where “UA-xxxxxxxx-x” is your site ID.

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-xxxxxxxx-x']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

Step 2

Log into your Moodle site as an admin user, and navigate to the Additional HTML option:

Settings > Site administration > Appearance > Additional HTML

Paste the tracking code into the first box which is called “Within HEAD” and save.

screenshot

Ta da! All done. Now you can sit back and relax. Give it 24 hours, and Google Analytics will work it’s magic and give you insight of your Moodle site traffic.

How to install a new Mahara Theme

Posted on by Admin

We have just released our first free Mahara theme – Orange. The theme is developed to be consistent with our free Moodle theme – Mandarin, so you can use them together to form a seamless “Mahoodle” setup.

You can get the theme zip file from the freebies page, and the following steps will show you how to install the theme for your Mahara 1.4 site.

Step 1

Download our free Mahara theme Orange here.

Step 2

Unpack the theme zip file and extract the /orange/ folder and the files.

Step 3

Upload the /orange/folder to your hosting server’s Mahara theme directory. You can use an FTP program to do so.

screenshot

Step 4

Log into your Mahara site as an admin, and navigate to the Site Settings:

Site Administration > Configure Site > Site Options > Site Settings

Step 5

Select the “Orange” theme from the Theme’s drop-down list as shown on the figure below.

screenshot

There you have it – the new theme is activated.

screenshot