 |
Web Development »
HTML / CSS »
General
Intermediate
Meeting Bingo - A simple DHTML application to ease the pain of boring meetingsBy Peter MossMeeting Bingo is a simple DHTML application that lets you play bingo while wasting away countless hours in those marketing presentations. It features DHTML, JScript and the MSXML DOM. |
Win2K, WinXP, Dev
|
|
Advanced Search Add to IE Search |
|
|
|
||||||||||||||||
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.
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.
The application consists of three files:
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:
<td> elements.<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.<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.<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:
<Phrase> elements
are present. Remember, you can add as many <Phrase> elements as
you like and 25 of them will be chosen at random.<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: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.
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>
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???
This is the first version of this article.
| You must Sign In to use this message board. | ||||||||||||||||||||||
|
||||||||||||||||||||||
|
||||||||||||||||||||||
|
||||||||||||||||||||||
|
||||||||||||||||||||||
General 
News 
Question 
Answer 
Joke 
Rant 
Admin
|
PermaLink |
Privacy |
Terms of Use
Last Updated: 22 Oct 2002 Editor: James Spibey |
Copyright 2002 by Peter Moss Everything else Copyright © CodeProject, 1999-2009 Web18 | Advertise on the Code Project |
