Implementing a raffle in JavaScript

At two recent occasions, there were copies of “Speaking JavaScript” to be raffled off. This blog post describes two ways of drawing winners via JavaScript.

There is a list of the attendees’ names

If there is a list of the attendees’ names, drawing a winner is relatively easy. In my case, it was a MunichJS meetup and a list of names was online, as a web page. In a browser console, I accessed the DOM to make a random pick:

// Once:
var nameElements = document.querySelectorAll('span.D_name');
var names = [].map.call(nameElements, function (elem) { // (1)
return elem.textContent.trim();
});
// Repeatedly:
names[Math.floor(Math.random() * names.length)] // (2)


At (1) I invoke map() generically, because the result of querySelectorAll() is not an array and does not have that method.

At (2), I use Math.random() and Math.floor() to compute an integer in the range [0, names.length).

You don’t know the attendees’ names

If you don’t have a list of the attendees’ names then you need figure out a way to pick a place. For many seating arrangements, there is an aisle in the middle. In such a case, I find a triple easy to understand as a coordinate:

1. Row number (starting at zero)
2. Column number (starting at zero, relative to left/right side of auditorium)
3. ‘left’ or ‘right’

#2 and #3 mean that you stand in the aisle and start counting chairs either to your left or to your right, once you are at the right row. The following function computes a random coordinate, if you provide it with the number of rows and the number of columns (in each side of the auditorium).

function raffle(rowSize, colSize) {
return {
row: Math.floor(Math.random() * rowSize),
colDir: (Math.random() < 0.5 ? 'left' : 'right'),
column: Math.floor(Math.random() * colSize)
}
}


Using the function looks like this:

> raffle(10, 5)
{
row: 3,
colDir: 'right',
column: 3
}