I've made use of Dynamic Drive's Shake Image Script to make the images, avatar icons and activity icons on my Moodle 1.9.15+ site go all wiggly. This is my innovation to make the Moodle interface more interesting and visceral.
Demo site:
http://www.moodurian.com
Username: student
Password: sudent
If you move your mouse cursor over your avatar's icon, it will come alive...I mean, wiggle.
The window below is LIVE. Do a mouseover on any one of the blue round icons.
See what I mean? Good.
Below is a screenshot not a live window. Just in case you didn't know.
And everywhere your Avatar icon appears, the icon will wiggle. Like in a forum posting at http://www.moodurian.com/mod/forum/view.php?id=1585
Imagine the possibilities of having wiggly icons or even perhaps in future, Moodle activity icons that animated when mouse-overed. I think that is one way of making the interface come alive.
Not clear enough? Okay to show you what it looks like to have an icon wiggle in Moodle, here's a quick and silent Youtube video:
I'll post the code solution of this 'innovation' on this blog in the near future.
Maybe in a week's time. Anyone interested?
[One day later]
Right, I figured that I wouldn't keep you in suspense any longer. So I'm going to explain to you, in detail, how, you too, can make your Moodle icons do the wiggle.
Step 1: Insert the below code into the <head> section of your theme's header.html page:
Step 2: Add the below inside
the <img> tag of all of the images you want the effect applied to:
Next, ftp to your Moodle site's lib folder and edit the weblib.php file. Be sure to backup the file first!
Go to somewhere around line 4572 (for Moodle 1.9.15!) and you should be able to locate the code:
$output .= "<img class=\"$class\" src=\"$src\" height=\"$size\" width=\"$size\" title=\"".s($imagealt)."\" alt=\"".s($imagealt).'/>';
Here's what that line looks like on my Moodle production site:
Comment that line out (use the double frontslashes //) and then insert these two lines above it:
$size = 25;
$output .= "<img class=\"shakeimage\" onMouseover=\"init(this);rattleimage()\" onMouseout=\"stoprattle(this);top.focus()\" onClick=\"top.focus()\" class=\"$class\" src=\"$src\" height=\"$size\" width=\"$size\" alt=\"".s($imagealt).'" />';
Your weblib.php code should now look like this:
Save your weblib.php file and then check out your Moodle site. The user avatar icons should now wiggle!
As for the login_logout block, how did I get that user icon to wiggle?
Well, all I did was to modify the code in the block_login_logout.php file of that block. I edited 87 line in that Php file by inserting the purple coloured code into it:
$this->content->text .= '<div class="logoutuserimg"><img src="'.$CFG->wwwroot.'/user/pix.php?file=/'.$USER->id.'/f1.jpg" width="100" height="100" alt="Imagen" class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);top.focus()" onClick="top.focus()"/></div>';
You can download my wiggly-icon-modified block_login_logout.php file from here.
Enjoy!
[Important breakthrough update on Christmas Sunday morning 25/12/2011, 1am Malaysia Time.]
YES!!! I've managed to get ALL Moodle activity icons to wiggle! The key to this, in Moodle 1.9.15, is to edit the /course/lip.php file. How I did it was to open the file YourMoodleSite/course/lib.php and to insert the "Wiggle code" inside line 1436 like this:
$linkcss = $mod->visible ? "" : " class=\"dimmed\" ";
echo '<a '.$linkcss.' '.$extra. // Title unnecessary!
' href="'.$CFG->wwwroot.'/mod/'.$mod->modname.'/view.php?id='.$mod->id.'">'.
'<img src="'.$icon.'" class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);top.focus()" onClick="top.focus()" class="activityicon" alt="" /> <span>'.
$instancename.$altname.'</span></a>';
Line 1436 is important because it is the line that displays all your Moodle activity icons on screen. I'm so excited about this that, at the risk of repeating myself, I'm going to explain AGAIN how this works.
What I did was to insert the 'Wiggle code' class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);top.focus()" onClick="top.focus()" into line 1436, just before the class="activityicon" part of the code.
Still not clear enough? Let me show you in the two image screenshots below.
This is how line 1436 of YourMoodleSite/course/lib.php looks like before I inserted the Wiggle code:
This is how line 1436 of YourMoodleSite/course/lib.php looks like after the inserted Wiggle code:
Note that the inserted code extends all the way to the right (in the image above, you can't see the rest of the code which is past the vertical scrollbar).
So, here's the effect of the edited line in the form of another short and silent Youtube video:
In conclusion, I've achieved what I wanted to do, which is to have ALL activity icons on ALL course pages of my Moodle production site, do the Wiggle. You can do the same too, by following the instructions in this blog post. Merry Christmas!
If you use the methods given in this blog post to make your Moodle site icons do the wiggle, then I'd like to hear from you. About what the effect of the wiggling had on your students' learning experience.
Is there any way we can leverage on this wiggling of Moodle icons to make the learning experience better? If you can create a pedagogically useful derivation of innovation, please, please do share with me and with the rest of the Moodle community.
Regards
Frankie Kam
Melaka, Malaysia
No comments:
Post a Comment