Implementing a raffle in JavaScript

[2014-05-23] example, dev, javascript
(Ad, please don’t block)

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 = [], 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 }