Introduction
This is a simple DHTML page that allows you to play meeting bingo with your
favourite marketing nonsense-speak. It displays a 5-by-5 matrix of vacuous
marketing phrases. Each time you load or reload the page, you will get a
new set of randomized phrases. The idea is to check each phrase you hear
during the meeting, and when you check all in a row, all in a column, or all on
a diagonal, you're a winner. (How you want to announce your victory is up
to you.) You can play it online with your laptop (each time you click on a
cell, it changes color), or print out the matrix
and play on paper -- your choice.
You can easily customize the application by editing the MeetingBingo.xml
file. That is, the data is nicely separated from the code. See the Add Your Own Phrases section below.
Requirements
This is a DHTML application that requires Microsoft Internet Explorer,
Version 4.0 or higher.
The ability to run JScript in your browser is also required.
Unfortunately, it has only been tested with IE 5.0 and IE 6.0.
Hopefully, it will work with IE 4.0 and above.
Using the code
The application consists of three files:
- MeetingBingo.htm -- this is the main HTML page. To execute
the application, just display this page in the browser.
- MeetingBingo.js -- this is the JScript code behind the HTML page.
- MeetingBingo.xml -- this is the data file containing the worthless
phrases. You can add to this file in any way you like as long as you
adhere to its extremely simple syntax (see below).
The HTML code MeetingBingo.htm is extremely simple and is shown
here:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Meeting Bingo</title>
<meta content="Microsoft Visual Studio.NET 7.0" name="GENERATOR">
<style type="text/css" media="all">
BODY {font-family:Arial}
td {CURSOR: default; FONT-SIZE: 10pt; FONT-FAMILY: Arial;
TEXT-ALIGN: center; HEIGHT: 1in; WIDTH: 1in;
BORDER-RIGHT: black thin solid; BORDER-TOP: black thin solid;
BORDER-LEFT: black thin solid; BORDER-BOTTOM: black thin solid}
</style>
</head>
<body>
<table id="tbl1" style="BORDER-RIGHT: black thin solid;
BORDER-TOP: black thin solid; BORDER-LEFT: black thin solid;
BORDER-BOTTOM: black thin solid" cellSpacing="0" cellPadding="0"
border="0">
</table>
<span id="hBingo" style="BORDER-RIGHT: black solid; PADDING-RIGHT: 15px;
BORDER-TOP: black solid; PADDING-LEFT: 15px; FONT-WEIGHT: bold;
FONT-SIZE: 32px; LEFT: 2in; VISIBILITY: hidden;
PADDING-BOTTOM: 15px; BORDER-LEFT: black solid;
COLOR: white; PADDING-TOP: 15px; BORDER-BOTTOM: black solid;
POSITION: absolute; TOP: 2in; BACKGROUND-COLOR: navy">
BINGO!!!</span>
<script src="MeetingBingo.js" language="JScript">
</script>
</body>
</html>
The things to note in this code are the following:
- We use global style sheets to define the font used for the main table
<td>
elements. - You should note that the
<table>
element with id="tbl1"
has no rows or columns. These are added dynamically by the JScript
code. This allows you to create a table with less than 5 or more than
5 rows if you want. - We use a hidden
<span>
element to pop the word BINGO!!! when there
is a bingo match by selecting all boxes in a row, a column or on a diagonal. - The JScript code MeetingBingo.js is included using a
<script>
element with a src
attribute indicating the code behind the HTML page.
The guts of the application lie in the MeetingBingo.js file.
At the very top of the file are the following lines:
var NROWS = 5;
var NCELLS = NROWS * NROWS;
var gbBingo = false;
if (BrowserCheck())
DoWork();
The BrowserCheck()
function simply checks that you are running with
Internet Explorer 4.0 or greater. Not very elegant.
The real work is done in the DoWork()
function. This function does the
following things:
- Creates an instance of the MSXML2.DOMDocument object. Note
that the MSXML DLL must be installed, but this should already be present
with IE 4.0 and higher.
- Next it loads and parses the MeetingBingo.xml file. This
loads the file into the DOM and determines how many
<Phrase>
elements
are present. Remember, you can add as many <Phrase>
elements as
you like and 25 of them will be chosen at random. - From here, we build the
<table>
rows and cells using DHTML insertRow()
and insertCell()
methods. Once the cell has been created, we randomly
select a <Phrase>
node using a simple XPath query, get its text and
set it to the innerText
property of the <tc>
element. Then we
remove the node from the DOM so it will not be reused for this game.
Finally, we set up an onclick handler for each cell (OnCellClick()
).
This code looks like the following:
</font>var tbl = document.all.tbl1;
for (r = 0; r < NROWS; r++) {
var tr = tbl.insertRow();
for (c = 0; c < NROWS; c++) {
var tc = tr.insertCell();
tc.id = "Cell" + r + c;
nNodes = root.childNodes.length;
// Generate random number
var nRand = Math.floor(Math.random() * nNodes) + 1;
var node = root.selectSingleNode("Phrase[" + nRand + "]");
if (node == null) {
window.alert("ERROR: Stupid programmer error: nRand = " + nRand +
"\nnNodes = " + nNodes);
return(false);
}
tc.innerText = node.text;
root.removeChild(node);
tc.onclick = OnCellClick;
}
}
The rest of the code consists of helper functions such as the OnCellClick()
onclick handler, and a helper function to determine if we have a bingo.
Add Your Own Phrases
By editing the MeetingBingo.xml file, you can completely customize the
set of phrases that appear each time you reload the page. The syntax of
this file is trivial. All you need to do is create <Phrase>
elements
containing the text you desire. A snippet of this file is shown here:
<?xml version="1.0" encoding="utf-8" ?>
<MeetingBingo>
<Phrase>synergy</Phrase>
<Phrase>strategic fit</Phrase>
<Phrase>core competencies</Phrase>
<Phrase>best practice</Phrase>
<Phrase>bottom line</Phrase>
. . .
<Phrase>time to market</Phrase>
</MeetingBingo>
Points of Interest
This was a fun little evening project motivated by an email recently received
from a friend. One thing I don't like about it, however, is the fact that
it is limited to Internet Explorer only (because of the use of MSXML DOMDocument
object loaded via new ActiveXObject()
JScript call). If anyone can come up
with an alternative solution that doesn't use MSXML, I'd love to hear about it.
It
might be nice to try an XSLT solution. I know nothing about XSLT, but the
only sticky part I can think of would be how to randomly select nodes to include
in the table. Any ideas out there???
History
This is the first version of this article.
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.