Last month we organized an internal competition around The Advent of Code 2023. Some 70 colleagues participated, Six had completed all puzzles at New Year’s Eve Midnight – our self imposed deadline. Two prizes are available that are to be allocated based on a fair, unbiased drawing. Those were the rules specified in early December. And now we can proceed to the fair drawing. But how exactly? Put six marbles with different colors in a high hat and ask the CEO of Conclusion to pick two marbles to determine who to give the prizes to? Well, that would work. However, can this not easily be done digitally?
It kept me awake very early this morning and I thought up (or dreamed up?) the following very simple web app:
- the names of the candidates are defined in an array
- from this array, an array of candidate objects is created; each object has a name, an identifier and a color assigned to it
- for each element in the array, a circle (“marble”) is drawn – all marbles lined up horizontally
- add functionality to shuffle the marbles – change their order randomly:
- add a circle on top of each of these “marbles” to cover them as to make them anonymous to the CEO when she or he does the draw:
Now with the marbles covered, they can still be shuffled – without anyone knowing which order they are in. Note: by clicking the button labeled Cover and Uncover we can hide and show the marbles at any time, for example to walk the audience through all steps to explain how the process works and how fair it is. - When the button “Start and Stop the Wheel” is pressed, the marbles are organized in a circle and they start to rotate (40 revs/minute). The prize drawer can stop and restart this marble dance as she or he sees fit:
- When the rotation of the wheel is stopped, each marble is marked with a letter (A through E in this example):
At this point, no one knows exactly which colleague is hiding under which marble. - It is now up to the person perform the draw to select one of these marbles. When it is subsequently clicked upon – the marble is removed from the circle and it is revealed at the bottom of the page: In the figure, marble marked with B was indicated,. It turned out to represent Matthijs.
- More of the marbles can be selected now, depending on how many prizes we can hand out:
The web application is implemented as a single HTML file that contains some CSS and JavaScript (including d3.js). You can easily try it out yourself. You can find the code in a GitHub Repository.
The code is quite simple, as you would expect:
1. Define Candidates and Line Up Marbles in Horizontal Row
2. Add covering circles that can be turned on and off – by manipulating the opacity property of the cover style class:
and the style class
and the button to toggle the covers on and off:
3. To shuffle the marbles – create a function shuffleCandidates that is invoked from a second button
4. A third button to line up the marbles in a circle and start the rotation:
Check in the GitHub Repo for the code that lines up the marbles in a circle.
5. When a marble in the circle is clicked, the corresponding colleague is added to an array that holds the drawn candidates and removed from the candidates array from which the spinning marble circle is composed. The drawn candidates are displayed (without cover) at the bottom of the page.
Resources
Git Hub Repository with code for this article: https://github.com/lucasjellema/draw-winning-candidates/blob/main/index.html
