Click & Reveal

This week I faced a frustration which I’m sure can’t have been for the first time: I had a Word document to use as a “fill in the gaps” style handout, but I had already filled the gaps. I was looking for a way to display the document using the classroom projector, but to easily toggle the gaps between filled and blank.

Screen Shot 2017-01-19 at 20.57.33.png

This situation must surely arise up and down the country quite frequently. I put the call out on Twitter and asked a few colleagues in school as well. It turns out there isn’t a straightforward solution (that I’ve come across so far).

The shortlist seemed to be:

  • Use interactive whiteboard software with white boxes covering gaps (downside: I need to create a lot of covering boxes and I don’t finish up with a nicely printable Word document. I also don’t have an IWB…)
  • Use Powerpoint and animations (downside: in addition to the above, without clever VBA coding, you can only reveal the gaps in the order in which you animated them)
  • Change the colour of the text in Word (downside: need to select all of the text beforehand to make it white, then go through and slowly change the colour of different pieces to reveal them)
  • Change the colour in Word using a style – this is the best so far, and the purpose of styles. If every gap is formatted to have the whole style then it’s relatively easy to change that style from white to blue for example. This could even be automated using some VBA and a keyboard shortcut. Thanks to @SamHartburn for help cracking this approach! (Downside: it’s an all-or-nothing reveal and hard to adapt to revealing one gap at a time.)

There must be another way

I’ve done a fair amount of programming in years gone by, and learned my fair share of HTML, CSS and Javascript. So in a free lesson this morning, I sat down to hack something together and, within an hour, I had a fully working prototype!

Here’s a (silent) video screencast showing how my mocked up page responds:

The Sorcery

Essentially, each gap (which is typically either a span or div) is given the class reveal. As the page loads, a Javascript onclick function is assigned to every document element with class reveal. The Javascript simply changes the CSS for that element: toggling the colour and toggling the mouse pointer style.

I also found some sample code online that styles the page to mimic an A4 page (in appearance and dimensions) and I include a Google font (PT Sans) as the closest match to the one I always use with my classes (Myriad Pro) – all my handouts have this same style!

So from now on, maybe I’ll switch to HTML over Word documents. We’ll see. Creating equations becomes tedious, and I have yet to fully get the print CSS correct for printing a blank version of the document. That will have to wait until I have another spare hour.. probably half term!


3 thoughts on “Click & Reveal

  1. You should have a look at MathJax if you haven’t already, that should make putting equations into your HTML pages much less tedious – once you’ve learnt the syntax it’s faster than using Word. I’d also suggest checking out LaTeX if you like maths and HTML/CSS, it takes some getting used to at first but it can be a very powerful tool when it comes to producing handouts/tests.

    • I’ll certainly take a look at MathJax. Latex is great – I’ve used it a lot in the past – but I think I’m the only one in my dept who knows it, so not ideal for sharing resources!

  2. Pingback: Click & Reveal (Part 2) | sxpmaths – the PROcrastinator

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s