Visual Coding
A drag and drop coding user interface

Context

A visual coding interface is an alternative form of coding to the traditional text-based user interface. This uses drag and drop mechanics, where the user will be able to select an instruction from a list of instructions shown on the user interface. The user can then click and drag the selected instruction and place it inside scaffolding code, which is code with gaps in it where the user will have to input their chosen instructions from the drag and drop. This will complete the scaffolding code and solve the given problem, such as navigating a character from one side of a maze-like puzzle to another.

PROJECT GOALS

It was determined that the system had to be developed in a way that would be intuitive for the users to use, and that would help develop a visualization of recursion. It is important to represent the problem in a way that would prevent them from thinking about solving the problem using loops, so that they could focus on their visualization of recursion. This system would have to work fast, smoothly and seamlessly. The visualization should run immediately after the proceed button is pressed once the scaffolding code has been filled in.

partners

Levels

7 Pathing Problems:

img02

Level1

img02

Level2

img02

Level3

img02

Level4

img02

Level5

img02

Level6

img02

Level7

partners

RESULTS

All 20 students that were tested were content with the way the visual coding UI looked.

95% of the students tested said that they found the visual coding UI intuative and easy to use.

85% of the students said that they would have found this easier than text-based coding, with 15% of the students stating that they would have found it harder. For those who found it would be harder than text-based coding, they said it was because the visual coding added to the amount of effort that they would need to solve the problem, with responses saying that they would have found writing code themselves easier to learn and master recursion.

Resources

Visual Coding: Literature Review

Literature Review

Review of Teaching Recursion using Educational Games

Visual Coding: Final Paper

Final Paper

Three Visual Approaches to Aid the Teaching of Recursion: Visual Coding

Visual Coding: UML Diagrams

UML Diagrams

Design Documentation