Use Scratch to Make Interactive History Timelines

An 8th grade history teacher I work with wanted his students to make their own timelines of world historical events as a way of tying events together over great spans of time and constructing their own trends. It took a while to find the right software platform because I didn't think Scratch would be capable of representing such a dense amount of visual and text information. He also wanted them to use a slider as a tool to navigate through the information and I thought that would be hard in Scratch. But after playing with it I found it was absolutely possible.

I will share here the template I shared with the students and had them remix for themselves. The template is functional enough that students don't actually have to do any scripting if they don't want to. But if they want to present the information in a different way Scratch's high ceiling and wide walls allows them to do so.
Here is the template project.
To complete their projects students have to make 10 backdrops with different maps and informational text boxes (making sure to change their uploaded map images to vector), and change the dates on the timeline sprite.
Here is my completed example I showed them first.

Slider Algorithm

The algorithm for this is basically that the x position of the button maps to a range of 1-10 as it is dragged across the timeline, and that mapped value is used to set the number of backdrop shown. I did not invent this but adapted it from Scratch user Alex Ruthmann's Sensor Value Mapping Function project, which I learned about from Jaymes Dec at a wonderful Scratch Day session using analog sensor input to play music at Teachers College years ago. 

To break it down, here are the components of the project:

The Slider Button

The mapping script takes the extreme left and right X positions of the timeline as the minimum and maximum input values, and the first and last backdrop numbers as the minimum and maximum  output values. I did have a couple students who wanted to include more than 10 dates in their timelines so they just had to change the OUT_MAX setting to their number of dates.

Those 4 values are then used to calculate the mapping and set the "map" variable. 

The Mapped Backdrop

The script in the stage simply sets the backdrop to the value of the map variable. For this to work the backdrops have to be named a number from 1 to 10.

Curious Excursions

A few students are making some really neat adaptations of this format. One is to have a character sprite say the informational text for each date. We figured this out together and came up with this:

At first it wasn't working, and we figured out that is because the value of map is a decimal so it is never equal to the integers we were testing for.

This made me wonder why the backdrop setting to the map variable value worked. I'm guessing the "switch backdrop to" block automatically converts floats to integers. But to get this sprite to change its behavior based on the map variable we added a rounding block to the mapping script:

This is how it works now:

Another student is taking the slider to a whole new level by incorporating other input options, such as a button that can toggle between two ranges of dates, and keyboard controls for zooming in and out and panning around on the map. Just amazing!

Toggle Timeline Ranges

Zooming and Panning

Here is this project if you want to explore how she is doing it (all invented on her own!). I think we have a software developer in the making...