ASCII Art Spinners

Here’s a quick tip if you’d like to add a bit of flair to your activities. By switching between text strings you can create simple animations.

For example, try entering a value on this screen.


Which string should we show?

To make an animation like this, we need a function that can take time as an input and output which string to display. The \operatorname{floor} function can help us create discrete steps for our animation.

To define that function in CL, we can enter:

getFrame = simpleFunction(`\operatorname{floor}\left(8x\right)`)

If we combine our getFrame function with a math input’s timeSinceSubmit, we can can find out which string of our animation to display.

frame = getFrame.evaluateAt(this.timeSinceSubmit)

In this example, frame will be an integer that increases by one every eighth of a second.

Showing the string

Now that we have a frame number telling us which string to display, we need to show it! We can do this with a conditional statement:

spinner =
  when frame = 1 "⢀⢀⢀⢀"
  when frame = 2 "⠠⢀⢀⢀"
  when frame = 3 "⠐⠠⢀⢀"
  when frame = 4 "⠈⠐⠠⢀"
  when frame = 5 "⠐⠈⠐⠠"
  when frame = 6 "⠠⠐⠈⠐"
  when frame = 7 "⢀⠠⠐⠈"
  when frame = 8 "⢀⢀⠠⠐"
  when frame = 9 "⢀⢀⢀⠠"
  when frame = 10 "⢀⢀⢀⢀"
  otherwise ""

You can put that string in a note component, the suffix of a math input, or the suffix of a table cell.

When (not) to use a spinner

When providing feedback through text, it’s very easy to tell students they are right or wrong with an emoji (:white_check_mark:/:x:). Even if we wrap that emoji up in a fun animation, we are still giving evaluative feedback.

When making activities, be sure to consider if there is a way to provide interpretive feedback that attaches more meaning to a students’ thoughts. If there is, consider skipping the spinner.

Going further

You can see a complete (and adaptable) spinner example here. Can you make a cooler animation by replacing the dots with other characters? Maybe some emojis? If you do, share it in the comments!