It was July 2011 in Pattaya, Thailand. While guiding the Singaporean team at the International Olympiad for Informatics (IOI), Dr Steven Halim was struck by an idea to improve the teaching of algorithms to students—by creating a website where many different algorithms can be learnt through animation.
At that time, there were a few existing websites containing algorithm animations on the Internet. However, most of them only had animations of a few algorithms. It was close to impossible to find animations of rarer, ‘non-classical’ algorithms.
“It was also inconvenient for students to visit many websites in order to learn different algorithms,” said Dr Halim.
He brought three other people on board the project—his brother, Felix Halim, who was pursuing a PhD at NUS Computing, as well as Koh Zi Chun and Victor Loh, undergraduate students at NUS Computing and the NUS Faculty of Science respectively.
In the next five months, the four of them worked tirelessly to code the website from scratch using JavaScript. While Zi Chun, Felix, and Victor were well-versed in JavaScript, Dr Halim had no prior knowledge in the web programming language, and had to learn along the way.
“It was like a hackathon, where we had a burning idea and worked relentlessly to create our prototype,” said Dr Halim.
That, was how the algorithm visualisation website they created, now known as VisuAlgo, was born.
‘Heaven’ for visual learners
A bright, colourful homepage greets you when you visit VisuAlgo, which contains animations of 23 algorithms—from basic ones like sorting, to rarer ones like graph traversal.
The website was designed to be a learning tool that addresses the pitfalls previously observed by Dr Halim when teaching algorithms.
While teaching algorithm modules to undergraduates at NUS Computing, he often noticed students scrambling, frantically racing to finish copying examples written on the board during lectures.
He also found it difficult to demonstrate many new examples outside of those already in textbooks or lecture slides, as that would mean spending majority of the limited lecture time writing them out on the board.
“If there are many ‘steps’ in the algorithm, and especially if it is a complex algorithm that you haven’t prepared for in advance, it is possible to make mistakes. A lot of time is wasted as you’ll have to erase the mistakes and draw again,” he said.
Engagement with students would also be low, he added, as their attention would be focused on copying all the ‘steps’ in the algorithm, instead of trying to understand how it works during class.
With all the ‘steps’ of the algorithm being animated on the website, teachers can use it to quickly demonstrate algorithm examples in class, instead of spending time painstakingly drawing them on the board.
Students can also learn at their own pace through e-lecture slides in VisuAlgo, which explain key information about the algorithms. After learning the theory behind the algorithm, they can see how it works by watching an animated example.
As the animation plays, an explanation of what’s happening is displayed at the bottom-right hand corner, along with pseudocode, which consists of short English phrases (resembling programming code) that explain how the algorithm works.
There’s also the option to rewind, fast forward, play/pause, and change the speed of the animation through toggling the buttons at the bottom.
The website is designed to be interactive, so students can insert their own data in the examples and watch how the algorithm changes accordingly.
Teachers can also use this function of VisuAlgo in class, to create and demonstrate new examples using different datasets.
After learning the algorithms, students can test their knowledge by taking an online quiz.
No additional software is needed to use the site, and anyone can access it on any device that has an Internet connection.
Since its launch in January 2012, VisuAlgo has been used as a teaching tool in Dr Halim’s classes, and by other faculty and teaching staff in NUS Computing. He also frequently receives emails from teachers worldwide, who ask for permission to use VisuAlgo in their classes.
Of flipped classrooms and cliffhangers
The introduction of VisuAlgo has changed the structure and format of Dr Halim’s classes, especially in recent years.
He now adopts what is called a ‘flipped classroom’ method, where students are asked to go through the e-lectures and quizzes on their own to familiarise themselves with the algorithms before coming to class.
This is in sharp contrast with the traditional approach of learning, where students learn the material during class as the teacher explains the content.
The e-lecture slides on VisuAlgo contain discussion questions about algorithm concepts, the answers of which are locked in ‘hidden slides’ that are not accessible to learners.
The first half of Dr Halim’s classes is used to review the answers to these discussion questions, as well as the answers to the online quiz.
Then comes the highlight—the second half of the class, where students participate in activities that demonstrate how algorithms can be used in real life.
One game commonly used in Dr Halim’s classes involves sorting playing cards. In this game, a deck of playing cards is placed on a table, mixed up, and students are challenged to sort the cards as quickly as possible. The aim of this challenge is for students to apply one or more of the sorting algorithms they have learnt, to find the fastest and most efficient way to sort the cards in order.
“I find that students can better retain the knowledge they have learnt if they are able to see how it can be applied in their daily lives,” said Dr Halim.
He also does live coding demonstrations in class, using algorithms to solve sample problems on online websites in front of students.
However, he doesn’t show them the correct answer to the problems all the time.
“Sometimes I code a seemingly-correct answer, knowing that it is actually wrong, and I tell my students so. When the answer is expectedly marked wrong, I end the class by telling them to go back and think about why the solution is incorrect,” said Dr Halim.
With a chuckle, he added: “You know how TV dramas end their episodes with a cliffhanger that makes you want to watch the next episode as soon as possible? This is my version of a lecture cliffhanger. Every lecture of mine has a cliffhanger—it keeps students on their toes, keeps them engaged.”
The resolutions to Dr Halim’s ‘cliffhangers’ are, of course, discussed in the next lecture. In the meantime, students can discuss the solutions or anything else regarding the class, on a Facebook group and Discord channel specially created for the class.
It may seem like using the flipped classroom method requires less effort from teachers, as students learn the material before coming to class, but that is not the case in Dr Halim’s experience.
“It takes more effort to conduct flipped classrooms well, compared to traditional classrooms. You will be bombarded with questions and situations for which you may not be prepared,” he said.
Nonetheless, the results make all the effort worth it, said Dr Halim.
“When I see my students being engaged in class, when they understand the material and thank me for teaching them—these are the happy moments that keep me going,” he said.
A constant work-in-progress
Since incorporating VisuAlgo in his classes, Dr Halim has received several teaching awards at the faculty and university levels, as well as a steady improvement in his teaching feedback score.
He is not resting on his laurels, however. Throughout the years, Dr Halim has been consistently working on improving the usability of VisuAlgo as a learning tool.
The website has undergone many changes over the years, with improvements done by Dr Halim, as well as many student contributors.
Initially only in black-and-white, the current colourful interface was designed by one of Dr Halim’s students as her final year project. Another group of students helped translate parts of the site’s content into nine different languages, such as Mandarin Chinese, Bahasa Indonesia, Japanese, Spanish, and Russian.
The e-lecture and online quiz functions were not included in the initial website, and were added by Dr Halim over the years. The number of algorithm animations has also steadily increased over time, from an initial nine algorithms to the 23 it has at present.
That’s not the end of it, of course. Dr Halim mentioned that he has some new ideas in mind to further improve the website—but he quickly added that these ideas are a secret for now.
“You can look forward to it,” he said with a laugh.