The browser rulez or another reason why PirateBox is boss

One thing that is easy to miss when considering the benefits of PirateBox is that it works via the web browser hence whatever you can run in a browser you can run in PirateBox.

An ex-colleague of mine made up a great vocabulary game that we use a lot in one of the places where I work. It is a 6 by 10 grid of words that is normally used as an end of course revision activity. Students are given various definitions for rows and columns that they have to cross out e.g. Col 1 cross out all the words to do with sporting equipment, Row 1 cross out all the words containing /ai/ sound etc. At the end they have 6 words not crossed out and they are asked to find the common link to these words. Inevitably everyone has more than six words left!

As I mentioned my main reason in using PirateBox is cutting down on paper so this game as it is used a lot is a great candidate to Box-ify (stop groaning at the back). A google search on HTML5 bingo brought me this program HTML5-bingo on GitHub sweet now I just needed to modify it to a 6 by 10 grid with the words I want.

The three files we need are js/script.js, js/data.js and css/style.css

To get more than the default 25 squares generated I found that I needed to adjust the variable i in script.js to whatever number I wanted:

for (i=0; i<24; i++)

so I modified it to i<60 (it is 60 and not 59 due to commenting out the freesquare, see below).

I  commented out //shuffle(JSONBingo.squares); since I did not want to randomize the squares.

I also commented out:

//$('#header').html(winText);
//$('#header').addClass("win");
//winSnd.play();

since I did not want a winner sign to pop up if some rows or columns were filled.

I also did not want the free square in the middle so I commented out the first line after if (i==12) { that starts with $('#board').

Next I needed to adjust the CSS so that my 60 squares would appear this meant adjusting the width of the #board to 768px.

Then I added the 60 words to the data.js files e.g.
var JSONBingo = {"squares": [
{"square": "regards"},
{"square": "paddle"},

Voilà, though the above took some fiddling, I was done in a couple of hours. Now I have this resource for ever. Plus I can adapt it to other words quite easily. Have a look at this screen capture which shows me crossing out words found in emails and terms in electronics:

The only issue is that on handheld devices the squares don’t all render so I need to spend more time figuring out why. But it works perfectly on a laptop computer. I used it as a whole class exercise where one of the students had a laptop which I connected to the projector. The following class I simply copied over the files onto the desktop computer and projected it from there (so admittedly no need for PirateBox in this case!)

By the way if anyone can help me figure out why it is not rendering properly on handhelds, do let me know.

Thanks for reading.

Penny for your thoughts

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s