Skip to content
/ spinner Public

Interactive web app to spin a colorful wheel and choose random students (no duplicate selections). Sound effects.

domlet/spinner

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Random Student (Spinner Wheel)

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.

How does it work?

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

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.

Colorful wheel with student names

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:

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

Video tutorial

Watch a 2-minute video that shows how to follow the steps outlined above. Here's the video transcript.

video thumbnail

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 is dead simple and that's part of its value. I will probably change nothing – but that shouldn't stop YOU from hacking on it! :)

Questions or comments?

Comment box on this blog post.

About

Interactive web app to spin a colorful wheel and choose random students (no duplicate selections). Sound effects.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published