Polymorphism Visualiser

Published As

Mills, N., Wang, Y., and Giacaman, N. (2021). Visual Analogy for Understanding Polymorphism Types. In Proceedings of the 23rd Australasian Computing Education Conference 2021 (ACE 2021).

Analogy

The analogy is at the heart of the Polymorphism Visualiser application. The context of the analogy revolves around a mechanical machine that needs to read information off sheets of paper. To accomplish this, the machine needs to be guided by a screen to determine where to find the information it expects. The screen represents a variable, which allows access to certain sections through it. Instances themselves are represented as the sheets of paper that contain the necessary information on them.

The screens and sheets have been designed in such a way that they visually match up in terms of shape: a variable and an instance of the same class type visually appear correct identical to show they are "the same type". To allow for inheritance, the shapes are such that the extensions are again visually evident (each "extended section" of a screen or sheet is immediately linked to the class type inherited from).

Classes and Inheritance

Each class is represented by a distinct shape to easily differentiate between them. The shape of a child class will contain the shape of its parent class to illustrate the child inheriting its parent's properties, as well as a new shape to illustrate properties unique to the child class.

Variable-to-Instance Assignment

The analogy consists of two main components, the screen and the instruction sheet. First a screen is set, and then instruction sheets are passed into the screen. A machine would then read the information off the instruction sheets, using the screen as guide for where to find the pieces of information. The shapes of the screen represents the variable type, while each instruction sheet is an object instance. The act of sliding an instruction sheet into a screen represents assigning an instance to a variable. The visual cues provided by the analogy reflect the validity of any corresponding assignment.

An example of a visual cue is provided on the left, where the bottom of the screen has an open slit to indicate that an instruction sheet may exceed its screen. It also makes sense on a contextual level, as the machine needs to know the instructions for all the methods defined for the screen type, but any additional instructions are just ignored.

Methods and Fields

Not only are methods and fields relevant to the context of the analogy, they are included to ensure that the analogy does not deviate too much from the underlying OOP concepts. They are carefully incoporated into the analogy so as to not violate any rules of polymorphism while maintining its intuitive nature.

As an example, the scenario on the left is a valid one: child instance type is assigned to parent variable type. The windows on the screen represent all the methods known to the machine. While the sheet contains additional instructions, they cannot be executed because the machine does not have a framework for reading them.

❮ ❯

Application

Polymorphism Visualiser uses analogies and visualisation techniques to present polymorphism to students. The application is split into modules, with each subsequent one introducing new polymorphism concepts. The targeted concepts were derived from the common misconceptions students have with polymorphism found during research phase. Within each module, students are presented with a tutorial session which teaches the concepts as well as how the analogy applies. Students are then required to answer several quiz questions about the topics covered in that module. The analogy and visual components are integrated in the questions which students are encouraged to interact with to aid their understanding and performance.

Take me to the app!

Interface

The user interface is kept as simple as possible. The components representing the variables and instances are placed on opposite sides, with the interactive area in the middle where components are dragged onto it. Questions appear at the top, with their respective code snippets appearing at the bottom. There is also an option to view the inheritance tree for the classes should it be needed.

Modules

There are currently three modules available in Polymorphism Visualiser. The notable difference between these modules is the level of inheritance involved. The first module contains no inheritance, while the latter modules introduce a single level inheritance at a time. While these modules are similar, each new level of inheritance introduces new concepts. As a result, each module contains new questions to be solved. Even for questions present in a previous module, they will inherently become more complex as inheritance is introduced.

Questions

Questions are presented in two parts: the actual question and the corresponding code snippet. There are several types of questions such as asking you to replicate a code snippet using the visual components, or asking whether a snippet is valid. Questions cannot be answered straight away without replicating the scenario first, and applying the analogy to solve it. The questions are designed this way to provide a way to apply the analogy. The emphasis on code snippets hopes to help a smooth transition from learning the concepts to actually programming it.