A decade ago, I had the pleasure of organise DressCode — an online competition designed spark teenage students’ interest in computer science. Its participants completed a series of programming challenges one of which was to implement a few sorting algorithms. To make it more engaging, I’ve created a JavaScript harness which visualised the algorithm by animating a clowder of longcats. Feedback was positive, I was told, with students appreciating the visual element.
I’ve finally dusted off and updated the code hoping it will be useful to, for example, computer science teachers. After all, learning sorting algorithms through an interactive animation is more engaging than working with static lists of numbers. Following video shows that animation which can also be seen live.
Show me the code
The code is available in the dresscode-sorting repository. It includes en_GB and pl_PL directories, each containing HTML file (to display the visualisation in a web browser) and a JavaScript file with placeholder algorithms and usage documentation. All fully localised in English and Polish respectively.
The harness is in the js alongside a solutions.js file that implements a handful of algorithms: Insertion sort, Selection sort, Bubble sort, Quick sort and Heap sort.
Demonstration vs task
The repository can be used either to demonstrate the algorithms or as a task for participants to complete:
- For a demonstration of sorting algorithms, remove the
<script src="algorithms.js"></script> line from the HTML file to avoid polluting the interface with placeholder entries. - For usage as a task for students, remove the
js/solutions.js file and the <script src="../js/solutions.js"></script> line from the HTML file.