News, Information and Resources for the World's Leading LMS
  • follow us in feedly
Wednesday August 27th 2014
Registration today WIRIS: Maths for Education

Motivating students through Badges with the Stamp Collection module (Moodle 2.2.x)

Totara LMS supports the work of Frankie Kam as he explores the many possibilities of Moodle for fun and to improve his college’s course site.

William Arthur Ward, an American author, pastor and teacher once said,

“The mediocre teacher tells. The good teacher explains.
The superior teacher demonstrates. The great teacher inspires.”

In this post, you will know how to use a brilliant module to motivate and inspire your students. I’m talking about David Mudrak’s Stamp Collection Module for Moodle 2.2.

I have blogged on this topic before here, but for Moodle 1.9.x. The Moodle 2.2 version was released in 2011. Since then it has been enhanced. If you are currently using the  module to reward your students, boy, are you in for a treat!  In this post I will tell you the THREE EXTRA FEATURES I have done to the module, and HOW you too can enable them for your own test or production Moodle 2.2. site.

Basically a few weeks ago, I looked at the Stamp Collection module for Moodle 2.2, and I asked myself these 3 questions:

Q1: How can I modify the code so that more than one type of stamp be given?
Q2: How can I create an HTML block that will display to the student his stamps?
Q3: How can I write the code so that an E-mail notification is sent to the student whenever a stamp is awarded by the teacher or Course Administrator?

Today, I am happy to announce that, through David Mudrak’s well written and tidy code, I have managed to answer all three questions with code that has been tested and is now working. That same code is what I want to share with you today.

If you want to cut to the chase, you can go straight to the Appendix section at the bottom of this post, and login to my demo Moodle 2.2 site.

Learning Outcomes

At the end of this post, you will be able to know

  • how to award multiple stamps to students;
  • how to set up a “block” where students can see the stamps awarded so far;
  • how to customise your own set of stamp icons
  • where the E-mail notification code is located.

One word of instruction to you, dear reader. If you find the images on this page unclear or too small, just right-click on an image and choose “View Images” for a clearer view. Okay now that’s out of the way, we shall begin.

The game’s afoot, Watson!

SECTION I – 3 NEW FEATURES

NEW FEATURE #I.  Multi-Stamp awards

By default, the stock version of the module by David Mudrak allows you to award only one kind of stamp: a gold star.


You’re probably very familiar with this image icon because until now, this is the only icon that the module allows you to award. That is now changed! You can now award multiple stamps. This means that you can now reward students for different occasions or for different levels of achievements. Isn’t that neat? Every educational institution, or faculty member for that matter, will have their own set of pet icons to dish out to their young nurturing charges. Don’t worry! I’ll show you how you can customise your OWN icons later in this post. Read on!

The image below shows three participants of the course aaa, and their stamps collected thus far. A nice touch is to do a mouse over and to see a tool-tip with the a display of text explaining the reason for the award.

Next, click on Settings | Stamp Collection Administration | Manage Stamps to go to the Manage Stamps screen.

 

To award a stamp, click inside the Text edit box of a student. Type your message. In order to award the default Gold Star stamp, just type in  your message without and prefix code. To award a different stamp, type a text message according to this simple syntax format: [prefix code][colon][text]. There is a set of  prefix codes that you can use.

You probably have your own set of pet icons to dish out to your young nurturing charges. The good news is that you can also modify the code and change the corresponding image stamp file! More on that later down in this post.

In the meantime, see the example below the where meaning of the prefix codes is explain:

pnc: for Punctuality, sil: for silver award or second placing, and thm: for thumbs up, gld: for Gold award or first placing, j: for joke told in class for the benefit of (keeping others awake and entertained for education’s sake that is) and lastly, frm: stands for good and beneficial forum post.

The GREAT THING about the Stamp Collection module for Moodle 2.2 is that you can edit multiple text boxes and then just click the Update Stamps button once to update all text and stamp awards. This is a great time-saver that is not available in the Moodle 1.9 version.

To see what stamps are at your disposal to be awarded to a student, click the Help link at the bottom of the page.

You will then be greeted by this new browser tab that displays a Stamp Codes Index. This is simply a list of all available  single character and three-character codes, together with their corresponding stamp icons:

Click the Close button to close the window.

NEW FEATURE #II.  Stamps Pseudo-block

This is, in my humble opinion, a very useful “block”. It is actually an HTML block that has an iframe embedded in it. Upon logging in, the student will see:

  • the number of stamps earned
  • the stamp icons themselves and
  • the description of each stamp earned when a mouse over is done.

So now the student can just take a cursory glance at his or her block on the right and know exactly how many stamps have been awarded so far. A mouse over reveals the purpose of each award. The one thing I don’t know how to do is to change the default font of the message that reads “You have N stamps”. Perhaps you know the how to do this. Please share in the comments section if you do.

NEW FEATURE #III.  Automatic E-mail Notification

Once the Course Administrator awards a stamp, an E-mail will automatically be sent to the recipient’s E-mail address. I thought that it would be a nice touch to send a notification. That way the student will be informed and it might even shape the student’s behaviour. You know, cause and effect theory.

For example, let’s say that you’ve just graded the class assignments. You praise and highlight a student, named Rowen, for handing in outstanding work. Absolutely first class work. You inform Rowen that you will award him with a stamp this very evening. After the class, you scurry to your study room and log into the Moodle system. You then award a stamp as promised.

 Later in the night, when Rowen Neab checks his E-mail, he is greeted with this message:

Rowan clicks on the new E-mail message and reads this:

Rowen  smiles to himself, knowing that you meant what you said, and you had kept your word. He goes on to get a Masters In Electrical Engineering, and later on in life, becomes a highly successful comedian making money acting in satirical sketch comedy shows. And you had a part to play in it.

 

SECTION II – INSTALLATION INSTRUCTIONS

1. If you already have an existing stampcoll folder in your Moodle server, then first BACKUP your original /mods/stampcoll folder to your local computer. Otherwise go to Step 4.
2.  Uninstall  (delete)your existing stampcoll block and database.
3.  Clear your Web browser’s cache.

4.  DOWNLOAD THE MODIFIED STAMPCOLL ZIP FILE BELOW!


Important note: DO NOT, I repeat, do NOT download the http://moodle.org version of stampcoll.zip. INSTEAD, you can either click the blue icon above, or you can download the “modified-for-multistamps-with-pseudoblock” stampcoll Moodle2.2 ZIP file from HERE!

5.  Extract  Frankie_stampcoll_Moodle22_with_pseudoblock.zip to the folder Frankie_stampcoll_Moodle22_with_pseudoblock.
6.  Rename  the folder to stampcoll.
7.  Go to Settings | Site Administration | Notifications to install the Stamp Collection module.
8. Then click on Notifications followed by the “Upgrade” button to install the stamp collection module (which has the enhanced code and image files inside it).
9. The next step is crucial! Mouseover on the Stamp Collection module and write down its id value. In the example below, the module has an id of 30.

10. Create an HTML block.
11. Edit the contents of block and go to HTML mode. Type this code:

<iframe width="98%" height="120" frameborder="0"
src="http://moodurian.com/m2/mod/stampcoll/viewblock22.php?id=30">
</iframe>

Make sure you use the same id value as what was written earlier. Save your HTML block. The block, with some stamps awarded looks like this (note that the image below uses the Logged in user block to display the user avatar and information):

 

Now isn’t that a sight for sore eyes?

SECTION III - WHAT TO DO IF YOU WANT TO USE YOUR OWN SET OF STAMPS (ICONS)

1. You need to edit the file named stampicons.php. It contains this:

|^||^|defaultstamp.gif|^|Default stamp. No suffix code or colon is required.|^|
 g:|^|gol:|^|gold.png|^|1st placing in a quiz, assignment or activity|^|
 s:|^|sil:|^|silver.png|^|2nd placing|^|
 b:|^|brz:|^|bronze.png|^|3rd placing|^|
 j:|^|jok:|^|joke.png|^|Student has shared a joke that benefits all|^|
 c:|^|lab:|^|lab.png|^|Student is useful and helpful|^|
 k:|^|ide:|^|lightbulb.png|^|Student has shared a useful or brilliant idea|^|
 l:|^|log:|^|logbook.png|^|Student's logbook is well maintained|^|
 m:|^|moo:|^|moodle.png|^|Student is helpful to others in the Moodle environment|^|
 p:|^|pnc:|^|punctuality.png|^|Student is punctual for class|^|
 f:|^|frm:|^|active_forum.png|^|Student participates in the forum postings|^|
 q:|^|que:|^|active_class_participation.png|^|Student is active in class, asks questions or contributes to the discussion|^|
 t:|^|thm:|^|thumbs_up.png|^|Student has done something exceptional or praise-worthy|^|
 s:|^|spn:|^|superpunctual.png|^|Student is SUPER punctual - arrives at computer lab or classroom before the lecturer|^|
 |^|pnd:|^|pending.png|^|A stamp has been awarded but will only be shown when the student changes avatar icon to own face|^|
 Sample>>>|^||^|sample1.png|^|Or>>> pnc: Attended class on time|^|

The |^| symbol acts as a delimiter symbol that separates the different elements of the line.
E.g.,
<one character code>|^|<three character code>|^|<descriptive text of the reason for the awarding of the stamp>|^|
Later an explode() function will separate each part among the different elements of an array, for us to make use of.
Get it?

The contents of stampicons.php only affects the help.php webpage which displays the codes and the corresponding icons to the user or teacher.

2. You will need to edit the renderer.php file.

See those sections in magenta? They will probably need to be customised. This is where the most important coding that enables a teacher to assign multiple stamps is contained.

Note: If logo.jpg was located in a subfolder e.g. pix/images/logo.jpg.
then the corresponding pix_url code is pix_url(‘images/logo’, ‘mod_stampcoll’);

Here’s the code in renderer.php.

/**
 * Stamp collection module rendering support
 *
 * @package    mod
 * @subpackage stampcoll
 * @copyright  2011 David Mudrak
 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 */
 //Multi-stamp code added by Frankie Kam (Melaka, Malaysia)
 //
 //If logo.jpg was located in a subfolder e.g. pix/images/logo.jpg.
 //then the corresponding pix_url code is pix_url('images/logo', 'mod_stampcoll');
 define('STAMPCOLL_IMAGE_URL', 'defaultstamp');
 define('STAMPCOLL_IMAGE_URL_GOLD', '/images/gold');
 define('STAMPCOLL_IMAGE_URL_SILVER', 'images/silver');
 define('STAMPCOLL_IMAGE_URL_BRONZE', 'images/bronze');
 define('STAMPCOLL_IMAGE_URL_1ST', 'images/1ST');
 define('STAMPCOLL_IMAGE_URL_2ND', 'images/2ND');
 define('STAMPCOLL_IMAGE_URL_3RD', 'images/3RD');
 define('STAMPCOLL_IMAGE_URL_SHARE_JOKE', 'images/joke');
 define('STAMPCOLL_IMAGE_URL_HELPING_COMPUTER_LAB', 'images/lab');
 define('STAMPCOLL_IMAGE_URL_LIGHTBULB', 'images/lightbulb');
 define('STAMPCOLL_IMAGE_URL_WELL_RECORDED_LOGBOOK', 'images/logbook');
 define('STAMPCOLL_IMAGE_URL_HELPFUL_MOODLER', 'images/moodle');
 define('STAMPCOLL_IMAGE_URL_PUNCTUALITY', 'images/punctuality');
 define('STAMPCOLL_IMAGE_URL_ACTIVE_FORUM', 'images/active_forum');
 define('STAMPCOLL_IMAGE_URL_QUESTIONS_IN_CLASS', 'images/active_class_participation');
 define('STAMPCOLL_IMAGE_URL_THUMBS_UP', 'images/thumbs_up');
 define('STAMPCOLL_IMAGE_URL_SUPERPUNCTUALITY', 'images/superpunctual');
 define('STAMPCOLL_IMAGE_URL_PENDING', 'images/pending');
 defined('MOODLE_INTERNAL') || die();

/**
 * Stamp collection module renderer
 */
 class mod_stampcoll_renderer extends plugin_renderer_base {
/**
 * Renders a stamp image
 *
 * @param stampcoll_stamp $stamp
 * @return string HTML
 */
 protected function render_stampcoll_stamp(stampcoll_stamp $stamp) {
 if (empty($stamp->stampcoll->image))
 {
   $pieces = explode(":",$stamp->text);
   $frontStr = strtolower(trim($pieces[0])).":";
   $comment = trim(format_string($stamp->text));
 //Single character codes switch ($frontStr) { case "g:" : case "gld:": $source = STAMPCOLL_IMAGE_URL_GOLD; $comment = str_replace($frontStr,"Gold: ",$comment); break; //For getting 1st prize or placing case "s:" : case "sil:": $source = STAMPCOLL_IMAGE_URL_SILVER; $comment = str_replace($frontStr,"Silver: ",$comment); break; //For getting 2nd prize or placing case "b:" : case "brz:": $source = STAMPCOLL_IMAGE_URL_BRONZE; $comment = str_replace($frontStr,"Bronze: ",$comment); break; //For getting 3rd prize or placing case "j:" : case "jok:": $source = STAMPCOLL_IMAGE_URL_SHARE_JOKE; $comment = str_replace($frontStr,"Good joke: ",$comment);
        break; //For sharing a joke for benefit of all
    case "k:" :
    case "ide:":
        $source = STAMPCOLL_IMAGE_URL_LIGHTBULB;
        $comment = str_replace($frontStr,"Great idea: ",$comment);
        break; //For contributing a great idea
    case "c:" :
    case "lab:":
        $source = STAMPCOLL_IMAGE_URL_HELPING_COMPUTER_LAB;
        $comment = str_replace($frontStr,"Lab helper: ",$comment);
        break; //Helpful to other students in the computer lab
    case "l:" :
    case "log:":
       $source = STAMPCOLL_IMAGE_URL_WELL_RECORDED_LOGBOOK;
       $comment = str_replace($frontStr,"Logbook: ",$comment);
       break; //For keeping good records in the student logbook
    case "m:" :
    case "moo:":
       $source = STAMPCOLL_IMAGE_URL_HELPFUL_MOODLER;
       $comment = str_replace($frontStr,"Helpful Moodler: ",$comment);
       break; //Helpful user (Moodle)
    case "p:" :
    case "pnc:":
       $source = STAMPCOLL_IMAGE_URL_PUNCTUALITY;
       $comment = str_replace($frontStr,"Punctuality: ",$comment);
       break; //For punctuality
    case "f:" :
    case "frm:":
       $source = STAMPCOLL_IMAGE_URL_ACTIVE_FORUM;
       $comment = str_replace($frontStr,"Forum: ",$comment);
       break; //For active forum participation and postings
    case "q:" :
    case "que:":
       $source = STAMPCOLL_IMAGE_URL_QUESTIONS_IN_CLASS;
       $comment =  str_replace($frontStr,"Participation: ",$comment);
       break; //For active class participation
    case "u:" :
    case "spn:":
       $source = STAMPCOLL_IMAGE_URL_SUPERPUNCTUALITY;
       $comment =  str_replace($frontStr,"SUPER Punctual!: ",$comment);
       break; //Super Punctual!
    case "t:" :
    case "thm:":
       $source = STAMPCOLL_IMAGE_URL_THUMBS_UP;
       $comment =  str_replace($frontStr,"Thumbs up!: ",$comment);
       break; //Thumbs up!
    case "p:" :
    case "pnd:":
       $source = STAMPCOLL_IMAGE_URL_PENDING;
       $comment =  str_replace($frontStr,"Pending: ",$comment);
       break; //Pending. Show padlock since student got an icon
       //but icon shows padlock until student does something.
    default:
      $source =  STAMPCOLL_IMAGE_URL;
      break; //The default icon - Gold Star
 } //switch
$src = $this->pix_url($source, 'mod_stampcoll');
} else {
  $src = moodle_url::make_pluginfile_url($this->page->context->id,
  'mod_stampcoll', 'image', 0, '/', $stamp->stampcoll->image);
 }
$attributes = array('src' => $src, 'alt' => s($stamp->text),
 'title' => s($comment), 'class' => 'stamp');
 $stampimg   = html_writer::empty_tag('img', $attributes);
return $stampimg;
 }

3. E-MAIL NOTIFICATION CODE

The code is found inside addstamps.php from lines 84 to 95.

Credit is given to  Italian Moodle, Matteo Scaramuccia, for generously providing me with the E-mail PHP code here.


4. USING YOUR OWN BADGE IMAGES

If you wish to use your own badge icons and image files, you will need to store your image files inside the pix/images subfolder. That’s mainly it!

The other files that I edited were view.php and managestamps.php.  In both files, I merely added one line of code at the end of the file, which was:

echo ‘<center><a href=”help.php” target=”_new”>Help</a></center>’;

That line of code allows the Help link to appear. Clicking on the link is what you will do since the system that I inbuilt into David Mudrak’s code involves physically typing in a prefix code before the stamp description text. Nobody bothers to memorize code like that and so we usually provide a means of referring to a webpage like help.php which opens up as a separate window.

Hope you got managed to understand that. Any questions? Please do not hesitate to contact me!

On a final note, if you managed to use the modified Stamp Collection module successfully one day, please send me a screenshot of your stamp icons so I can have a glimpse of how you are using the module to motivate students. Please share your ideas with me and the community.

Regards
Frankie Kam
Melaka, Malaysia

P.S., a big thanks to Paul Rayner for his requests for the enhancements on  Stamp Collection for Moodle 2.2! It was due to his interest in these developments that this post is now a reality. Thanks Paul!

APPENDIX

Demo site: http://moodurian.com/m2/course/view.php?id=3
Username: student
Password: student
The course will already be in Editing Mode, so feel free to award stamps in the “Earn your Stamps” activity.

 

How to Moodle

Reader Feedback

10 Responses to “Motivating students through Badges with the Stamp Collection module (Moodle 2.2.x)”

  1. Frankie Kam says:

    My apologies, initialy the zip download file did not include the pseudoblock file named viewblock22.php. That has now been corrected. Thanks to Paul Rayner for pointing this out to me.

    For those who dowloaded the earlier zip file, the LATEST zip file is found here:
    http://dl.dropbox.com/u/17797520/Frankie_stampcoll_Moodle22_with_pseudoblock.zip
    It contains exactly the same files as my Production Moodle 2.2 site, including the viewblock22.php file.

    I’ll put the files on Github soon.

    Enjoy!
    Frankie Kam

  2. Lisa says:

    Just testing this out as we’re probably going to switch to Moodle 2 over the summer. Works great and so much easier with being able to award/update in one go. Thanks again, Frankie :)

  3. Bas Siebring says:

    Guys, I only get the star icon, nothing else. The entire multi stamp module is not working :-S. Any thoughts why?

  4. Bas Siebring says:

    ok. working now. You really want to make sure that everybody understand they have to download your zip file. Put it on top of the page somewhere, since I was using the version of moodle.org. Yours is awesome! Love it. Working now. This is going to improve Moodle usage of my students, no doubt about it!

  5. Frankie Kam says:

    Hi Bas Siebring!

    Boy, am I glad you managed to get it get it working on your site. I keep a blogpage that shows how Moodlers (like you!) from around the world are using the Multistamp version of the stampcoll module here: http://moodurian.blogspot.com/2012/02/stamp-collection-module-development.html
    I would sure love to see the stamp icons that you are using for your educational institution. Hope you can send me a screenshot.

    Regards Frankie Kam.
    Email: boonsengkam@gmail.com

  6. Frankie Kam says:

    Bas Siebring

    MANY THANKS for your great suggestion to make the download link clearer to everyone. I have done just that! NOW, you cannot help but notice that BIG BLUE icon in the centre of this post. I just screams for your attention!

    regards
    Frankie Kam,
    Melaka, Malaysia

  7. Ralf says:

    Hi,
    I can`t find any informations. I have changed now to Moodle Version 2,5.
    Does it work with it?
    Thanks for your wonderfull work.

    Regards
    Ralf

  8. Frankie Kam says:

    Hi Ralf! I’m using Moodle 2.5. So I am sure that it works. Only thing, whenever you go to Site administration | Notifications, the system will suggest that you update to the latest contrib version of the plugin. If you do that you will lose my customised features.

  9. Frankie Kam says:

    Hi Ralf, if you managed to get it working on your site, all I ask as a favour is if you could email me a sample screenshot of your own stamps in action. I mean, you will be designing your own stamp icons, right? Of course you are always free to use mine. Frankie Kam. boonsengkam@gmail.com

  10. Ralf says:

    Hi,
    thanks for the quick answer.
    It works!
    But one step I didn`t do:

    2. Uninstall (delete)your existing stampcoll block and database.

    I didn`t delete something in the database, because there are more than 5000 stamps.

    But one question:
    The stamps are very big.
    I remember, I asked you the same question 2012 for moodle 1.9.
    But I can´t find the answer (if it`s the same for the new version)

    PS: Sure, I can send you a screenshot, but the pictures are very big at the moment.

Leave a Reply