65.9K
CodeProject is changing. Read more.
Home

Meeting Bingo - A simple DHTML application to ease the pain of boring meetings

Peter Moss
starIconstarIconstarIconstarIconstarIcon

5.00/5 (2 votes)

Oct 23, 2002

4 min read

viewsIcon

94050

downloadIcon

631

Meeting 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.

Sample Image - MeetingBingo.gif

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:
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.