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 (
/
). 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!