Smile... Changing Moodle's Default Emoticons

Just following up from my previous post about engaging learners and Richard Clark's keynote at #mootustx10, I have been pondering the use of emoticons in Moodle courses. When I'm giving Moodle training sessions I always make a point of showing delegates Moodle's emoticons and here's why...

A few years back I had to give some pastoral support to one of my students who was in tears because of something that was said by one of her friends on her Facebook wall. My immediate reaction was to tell my student to give her friend a call on her mobile. "I can't do that - not after what she's said" was the response. The situation quickly resolved itself when we could bring the two girls face to face. I can't even remember what the Facebook conversation was about but what caused all the upset was just two words: "yeah right".

Try saying "yeah right" to yourself positively - with a sing-song, shrill intonation.

Now try saying "yeah right" negatively - with a deep, sarcastic intonation.

Very different.

Do the same but now also imagine looking at a happy, smiling face (say a close friend) happily saying "yeah right" and a dark, angry face (perhaps someone you don't particularly get on with) for the slow, sarcastic, negative "yeah right".

The contrast between the two is even more pronounced: it's very, very different

One way of overcoming this problem is to use 'smilies', or 'emoticons', in your text :)

The only issue I have... and I guess this is personal preference... is that Moodle's default smiley set is not very expressive. I have a set of animated (but not too busy) emoticons I use in my Moodles and I'll describe now how you can switch over to using them - or, of course, a set of your own.

Click here for sample files

1. Locate the folder containing the smilies Moodle is currently using. This is usually the /pix/s folder. Note that custom themes can also contain custom smilies so you might need to also look for /pix/s in the theme folder for your custom theme. Make a backup copy of the 's' folder (e.g. 's_back') and replace the emoticons with your set.
2. You might have guessed that the emoticon file names are used to identify what the icon represents so the next step is to rename the files accordingly (you can specify the names in Moodle's source code but this way is easier).

You might need to resize the Insert Smiley dialog. Here's how:

1. Look in /lib/editor/htmlarea/ for the file dialog.js and make a backup of this file.
2. Search for the line beginning case "dlg_ins_smile": x = and alter the x and y numbers accordingly (check out the copy of dialog.js in the sample files and see how this differs from your original dialog.js

Do you want to include extra smilies in the Insert Smiley dialog?

1. ...if you do then it is best to copy your new emoticons to /pix/s. We'll definitely need to make changes to Moodle's core code (don't worry: it's not complicated) and that will pick up files from /pix/s - as well as in custom themes - if you switch to using one of Moodle's standard themes, e.g. standardwhite.
2. Look in /lib/editor/htmlarea/popups for the file dlg_ins_smile.php and make a backup copy of this file.
3. Search down dlg_ins_smile.php for the line $emoticons = array ( 'smiley' => ':-)',

4. At the bottom of the $emoticons array add references to the extra emoticons you want to include (again, see the example file for details).

If you're complimenting Moodle's smilies with some of your own then you'll also need to modify the help files for your language:

1. Look in /lang/*your language*/ - for example /lang/en_utf8 - for the file pix.php. This contains the emoticon "tooltips" - the helpful text that appears above an emoticon when you hover the mouse over it. Make a backup copy of this file.
2. Add new tooltips for your extra smilies to the end of pix.php (the the sample files for an example).

If you already have the HTML editor open in your browser then refresh the page, press the insert smiley button and your new emoticons will be displayed. Try inserting them into some text:

Reconfigure the HTML Editor

The editor can recognise ASCII emoticons and replace them with GIF images. We can, if we wish, include our newly specified smilies.

1. Ensure you are logged in as a Moodle administrator. From the Site Administration block click on Appearance HTML Editor.
2. Add your new emoticons to the list. The desired ASCII smiley is specified on the left and the name of the GIF image (not including ".GIF") is specified on the right
3. Press the Save Changes button at the bottom of the page and you're done!

More ideas

In December - in the run up to the festive season - I switch to using a "Santa" smiley set - bascially the emoticons you can see in the previous screen captures but all wearing Santa hats.

Further Thoughts

Have you ever had experience of your students reading a comment online and taking it the wrong way? How was the misunderstanding resolved?