In this project I have a little fun with some random number generation paired up with some revealing mask effect that gives a glimpse of what is underneath.

Let’s take a closer look at how this was done.

The Elements

This project is made up of 14 items.

1. The ‘Reveal Next’ button
2. Twelve white boxes
3. The image under the boxes

There is a single variable that I named nextBox to track which box will fade to reveal a portion of the hidden image.

The Code

All of the code is on the button and it is pretty repetitive. Since there are 12 boxes – we have similar blocks of code for each box.

Let’s break it down in small chunks.

function getNextBox () {
nextBox=Math.floor(Math.random() * 12) + 1;
cp.disable(“getNextBtn”);
}

This first block of code defines a function that I have called getNextBox. It does two things:

1. Assigns a random number from 1 thru 12 to our nextBox variable.
2. Disables the button you just pressed

I chose to disable the button so that you could not cheat by clicking the button super fast to get a better reveal of the image underneath.

getNextBox ();

The next small line simply calls the function we defined.

if (window.nextBox==1) {
reveal1();
}

Then we have 12 if statements – one for each of the 12 boxes. Basically – if the random generator assigns a 1 – we call the reveal1() function. If it assigns a 12 we call the reveal12() function.

Then we have the 12 functions themselves that get called based on the random number assignment.

function reveal1() {
setTimeout(function() {
$(“#box1c”).fadeOut(500);
$(“#box1c”).fadeIn(500);
}, 50);

setTimeout(function() {
cp.enable(“getNextBtn”);
}, 1000);
}

So what we are doing is fading out the numbered box and fading it back in over the course of one second. Then you will notice that we immediately enable the button again so that we can call the next box reveal.

Some Fun Ideas

So think about what you could do with this sort of idea.

• Maybe some sort of guess the image game with the fewest number of reveals. You could easily add another variable to track the number times you hit that button.
• Maybe use this in reverse with a shown image and small circles that fade in and out to reveal a clue on an image like some of those hidden picture games. You could use that to help someone find all the safety hazards in the picture and track how many times they use a hint.
• Maybe use two pictures with missing things where the learner has to spot the differences and you could have the different elements fade in and out as clues.

Share some ideas you have in the comments and ask any questions that you might have.