DIY Random Student (Spinner Wheel)

Spin it! Play with the live demo here.

A warm tool (for cold-calling)

Students generally DO NOT LIKE being cold-called (being asked to answer a question in front of the class, without volunteering). So, we must warm up the practice. We can establish the practice of cold-calling as an expected routine (so that students can prepare), and we can build a supportive classroom that puts positive, collective pressure on the the routinized task of retention for certain knowledge.

This tool is a colorful wheel that you can spin to randomly choose one person from a group.

How does it work?

Click to spin the wheel. When a chosen student gives an answer, the facilitator can press the 1 key to reward a correct answer with a 🎉 emoji and an upbeat chime, or press 0 to invite another student’s attempt. The score is not saved.

Design specifications

Like this soundboard, the spinner is designed to stimulate neurochemicals (dopamine, oxytocin, and acetylcholine) to enhance students’ attention, engagement, social bonding, and retention.

The spinner is designed to be…

1. Random – to avoid teachres’ unconscious bias.
2. Non-duplicative – so each student may be selected only once.
3. Non-verbal – to engage students’ sensory processing.
4. Adaptible – so teachers can switch between multiple groups.
5. Private – to keep students’ names unpublished (offline).

Who created it?

Original creators like schellenberg and Q published ‘spinning wheel’ sketches on p5js, which ChatGPT likely ingested to understand my original prompt:

Write a p5js app that takes a list of names (any length) and generates a circle with that number of multicolored slices, with each name written inside a slice with the baseline of the text following a line from the center of the circle to the edge. The last letter of each name should be 6px from the circle’s outside edge. put a black triangle pointing at the very top of the circle in the center.

When the user hits any key or clicks on the screen, the circle and names should spin clockwise quickly at first, and then slowly, ultimately stopping with one specific name at the top. there should be a clicking noise that plays every time 5 names pass the black triangle.

I did about two days’ work refining the app while on summer vacation, and then published the repo on GitHub and posted the working demo.

Atrributions for the 4 sounds are as follow:

• Correct chime – collect.wav by Wagna
• Incorrect chime – Dat’s Wrong! by Beetlemuse
• Spin click – Cartoon sounds for Google Assistant
• Selection sound – Cartoon sounds for Google Assistant

Anyone can use this tool. It costs nothing to download, copy, publish or modify.

Random Student (Spinner Wheel) © 2025 by Dom Brassey (@domlet) is licensed under CC BY-NC 4.0

Instructions for use

1. The easiest way is to replace the names in this p5js sketch and run the tool in your web browser. But that is not best practice for keeping student information (like first and last names) private. Compromising our students’ privacy can risk the safety of children and families with citizenship or other insecurities in a surveillance state. (So please don’t.)

2. The safest way is to follow these steps (watch this video)…

   1. Download the project from p5js or the GitHub repo and save it your computer. You can run the app locally, even without an Internet connection.

   2. Then, open sketch.js and add each of your groups at the top of that file as lists (arrays), like this example, which shows two lists called period1 and period2:

      const period1 = ["Aaliyah", "Mateo", "Nia", "Kenji"];
      const period2 = ["Jana", "Mahlia", "Scott", "Eduardo"];
      

   3. When you want to switch to a specific group, scroll down to find where the value of names is assigned. It will look like this:

      let names = period1;
      

   4. On that line, change only the value on the right side of the equals sign (=), like this:

      let names = period2;
      

   5. When you save your changes to sketch.js and reload your index.htm file in your web browser, your spinner should show the updated group of names.

   6. To run the app, I use Visual Studio Code IDE with the Live Server extension – but you can also use these options:

      Python:

      python3 -m http.server
      

      Node.js:

      npx http-server
      

   7. Need help? Here’s a short video demonstrating how to follow the steps above.

      

Further development

Thinking about adding…

1. Battle mode: Ability to recognize teams within the group (such as Team 1 vs Team 2).
2. Enhanced scoring: Ability to track students’ points over the term – probably with a simple SQL database.

However, the app without these features hits the sweet spot of being dead simple and easy to use or make simple changes to. So I may change nothing!

Questions or comments?

Leave a comment below!