More than a maths teacher

My adventures in maths and ICT teaching

Comments By Email Posts

Preparing for Paris: Engaging the Bloggers

Posted by: Lois Lindemann on: January 2nd, 2010

Posted in: 4. Reviews and Reflections

Tags for this post: blog | Paris trip | participation.

2 comments - more welcome!

I’ve used class blogs with several groups of students, but I’ve never been happy with the results.

When asked, my students say they like the blogs, in fact last year most of my Y9 ICT class immediately went online and opened their class blog at the start of each lesson. They loved using embedded slideshows and videos (not surprising – the videos were rather excellent, being mostly Commoncraft’s Plain English explanations) and they complained if there was nothing new on the blog. The blog was pretty useful, but it was really just a vehicle for conveying instructions: you need to do a, b and c to pass this task; this is how to do a, b and c.

I’ve found that getting students to engage with blogs in a more active way is much harder. Asking them to rate posts produced the first signs of resistance, there were surprisingly few takers. Almost no-one wanted to leave a comment. Moving on a step and asking students to write posts of their own will present real challenges.

I don’t think my students are in any way unusual. They enjoy online gaming, are active users of Facebook and spend hours chatting online, so you might assume that asking them to use a blog or wiki for learning would be something quite normal and natural, but evidently it isn’t.

I’ve been pondering the many reasons behind this for a while, but when Kevin Jarrett tweeted links to articles about the 90-9-1 rule, it really helped me to clarify some ideas. After reading this* I started thinking, especially about the suggestions for minimising the problem. (*You might like to follow that link before continuing.)

If I apply the 90-9-1 rule to a class of 30 students, I can expect maybe 2 or 3 of them to be intermittent contributors and one (if I’m lucky) to be a regular contributor. The figures may not be exact, but that’s not really important, it still means that the majority are happy to be passive consumers – which is exactly what I have experienced so far. Put in this context, the fact that one Y9 student left several comments and and another 4 or 5 rated posts or sent me a couple of emails doesn’t seem so bad, but it’s still not the level of engagement that I was aiming for.

I agree that I can’t remove this discrepancy in participation, but as a teacher it is essential that I find ways of minimising it, otherwise I’m simply creating a pretty website that has no real impact on learning.

We are hoping to use a blog on our Paris trip next July. The students all know about it, but getting them to start contributing is – as always – going to be a challenge. My aim is to have a group of students who are reasonably competent and confident bloggers by the time we set off on the trip. So how am I going to try to maximise participation?

Here’s my plan:

From past experience I know that students are very unlikely to use our Paris blog outside school unless they’ve already used it inside school, so starting next term we are going to have some blogging sessions during tutor time (registration). I will be meeting up with small groups of the students who are going on the Paris trip and helping them to create their first posts. Hopefully once the students have published something, they will start to feel some ownership of the blog.
I’m including polls and I’m going to add a rating function, so students can easily leave feedback with one click. I’ve noticed that many students don’t like to be the first to rate or vote on something, so I’ll vote first (a bit like the approach of a busker who puts the first coins in their own hat). I’ll be encouraging students to leave feedback on each other’s posts during in-school sessions.
Our school sessions will include commenting on other students’ posts. Obviously I’m going to leave comments as well; I’m hoping that I can persuade some other teachers and parents to join in.

Will it work? I hope so. If anyone has any advice or suggestions, I’d be very happy to hear from you.

Using Rollover Effects

Posted by: Lois Lindemann on: December 28th, 2009

Posted in: 1. Learning and Teaching | 3. Teacherhacker | Wordpress | e-learning

Tags for this post: image | rollover | Wordpress.

1. Engagement

Last term I sat with some students and asked them to show me things that they liked on various websites. There was no agreement whatsoever about preferred colour schemes, design styles or layouts, but almost everyone liked games, videos and interactive content. I am reliably informed that buttons which change when the mouse is rolled over them are ‘cool’.

If a set of buttons with rollover effects will encourage students to access the site I’ve set up for them, then it’s worth doing. (Yes I know, it’ll take much more than that, but it’s still worth it.)

2. Simple interactive content

Once you’veset up the use of rollover effects for the first time, it makes it possible to put some simple interactive content into web pages or posts in a class blog. Here’s a few examples:

Flashcards:

I’m going to ask Y10 to make some of these for the perimeter/area/volume formulae that they need to learn for their exam in January.

Revision prompts:

Can you name the sides in this triangle?
(Roll your mouse over the image to see the answer.)

Giving information or clues:

In a flowerpot in my garden I found 3 slugs, 2 spiders and 4 beetles.
How many legs were there altogether in the flowerpot?

Any more suggestions?

Creating Rollover Images in Wordpress

Posted by: Lois Lindemann on: December 27th, 2009

Posted in: 3. Teacherhacker | Wordpress

2 comments - more welcome!

My student website is long overdue for a major revamp. I decided to rebuild the site using Wordpress, which is going well, but some of the things I want to do are not automatically built in, so I thought I’d try to write some very simple guides as I work out how to do things.

My students all seem to like rollover images, so I wanted to incorporate them. Here’s how I did it:

You will need:

- A self-hosted Wordpress blog. This simply will not work for a blog that is hosted on Wordpress.com, because this process requires Javascript, which is not allowed on WordPress.com blogs. (That’s one of the many reasons I opted to go for the self-hosted option.)
- A folder somewhere on the web to hold your images.
- A text editor, such as Notepad.

Step One – Create some images

You will need two images – the basic image that will appear at first and the image that will replace it when the user hovers their mouse over. Obviously these images should be the same size! I created gifs, but pngs and jpegs will also work. You will need to stick to one format, don’t use a mixture of file types.

Your rollover image needs to have the same name as the basic image, but with an ending such as _over added at the end: e.g. my-image.gif and my-image_over.gif

Once you have finished, upload your images to the web. You must save the two images in the same folder.

Step Two – Create and upload a Javascript file

Actually, no knowledge of Javascript is required here, because Atlanta Jones has created and shared a tutorial and a script that works perfectly. If you have created gif files and used the _over ending on your file names, you can simply download and use this file: rollover.js. Alternatively you can copy and paste this script into a text editor (NOT MS Word – I used notepad) and save it as rollover.js:

jQuery(function($) {
$(document).ready(function() {

		// Preload all rollovers
		$("#hoverlink img").each(function() {
			// Set the original src
			rollsrc = $(this).attr("src");
			rollON = rollsrc.replace(/.gif$/ig,"_over.gif");
			$("").attr("src", rollON);
		});

		// Navigation rollovers
		$("#hoverlink a").mouseover(function(){
			imgsrc = $(this).children("img").attr("src");
			matches = imgsrc.match(/_over/);

			// don't do the rollover if state is already ON
			if (!matches) {
			imgsrcON = imgsrc.replace(/.gif$/ig,"_over.gif"); // strip off extension
			$(this).children("img").attr("src", imgsrcON);
			}

		});
		$("#hoverlink a").mouseout(function(){
			$(this).children("img").attr("src", imgsrc);
		});

	});
});

If you have changed filetypes or endings, you will need to edit the script with your text editor to change anything that says .gif to .png or .jpg, or to change anything that says _over to match the ending you used on your file names.

The script tells Wordpress to pre-load your rollover images and what to do when the mouse is rolled over and off. It is dependent on a tag called hoverlink (I made that name up, you can change it if you want). We’ll use this tag in step four.

Once you have your Javascript file, you need to upload it. It needs to go in the root folder for the theme that you are using in Wordress.

Step Three – tell Wordpress to use the file that you just created

The good news is that Wordpress comes bundled with JQuery, so all you have to do is tell it to use it. Even beter, Brian at frodesigns.com has kindly shared the code that is needed.

You will need to edit your header.php file, find this by clicking on Appearance, then Editor. First find the <head> tag. NB in some themes the the <head> tag may not look exactly like that, so you may need to look for something like this: <head with-some-extra-code-here>.
Once you’ve found the <head> tag, copy and paste this code under it:

    <?php
       wp_enqueue_script('jquery');
       wp_enqueue_script('jquery-core-ui');
       wp_enqueue_script('jquery-tabs-ui');
       wp_enqueue_script('hoverlink', get_bloginfo('template_directory').'/rollover.js');
       wp_head();
    ?>

You can see the penultimate directs Wordpress to the jQuery code for the image rollover effect that we are creating. It also refers to the hoverlink tag that we’ll use in the next step.

Step Four – putting your images into a post or page

Now you can actually put your images into a post or page. The last bit of technical trickery is to put your images inside a section tagged "hoverlink". To do this, use the html editor to create your page or post, rather than the visual editor.

This is the code that I used to create the image at the end of this post:

<div id="hoverlink"> <a href="http://www.morethanmaths.com/teacher"><img src="http://www.morethanmaths.com/teacher/sample-files/2009/12/my-avatar.gif" border="0" alt="My Avatar" width="220" height="220" /></a></div>

You can see that the code relating to the image is contained inside two tags: <div id="hoverlink"> and </div>. Obviously you will need to change the highlighted sections to match your own choice of hyperlink, image location and size.

Want a rollover image that isn’t hyperlinked? No problem:

<div id="hoverlink"> <a><img src="http://www.morethanmaths.com/teacher/sample-files/2009/12/my-avatar.gif" border="0" alt="My Avatar" width="220" height="220" /></a></div>

Want your rollover image in a sidebar? Add a text widget and put the code into that. Wordpress will recognise the code and display the image with the rollover effect enabled.

Here’s the finished product:

There’s also an example of a rollover image in the sidebar of this blog, try rolling your mouse over the juggler to see it action – it’s a fairly subtle effect this time.

I’m not a Javascript expert – in fact I know next to nothing – but I got this working with little more than copy and paste. I’ve tried this with Wordpress 2.9 and 2.8.6, using the Atahualpa and the Default themes. I tested the finished product in both Firefox and Internet Explorer. As far as I can tell, it’s working perfectly.