SD Draw: A State Diagram Tool including Elm Code Generation for Interactive Applications

Abstract

To make computational thinking appealing to young learners, initial programming instruction looks very different now than a decade ago, with the increasing use of graphics and robots both real and virtual. After the first steps, children want to create interactive programs, and they need a model for this. State diagrams provide such a model, as observed previously by other researchers.

This thesis documents the design and implementation of a Model-Driven Engineering tool, SD~Draw, that allows even primary-aged children to draw and understand state diagrams, and create modifiable app templates. We have tested this with grade 4 and 5 students. In our initial test, we discovered that children very quickly understand the motivation and use of state diagrams using this tool, and will independently discover abstract states even if they are only taught to model using concrete states. To determine whether this approach is appropriate for children of this age we asked three questions: do children understand state diagrams, do they understand the role of reachability, and are they engaged by them. We found that they are able to translate between different representations of the state diagrams, strongly indicating that they do understand them. We found with confidence p=0.001 that they do understand reachability by refuting the null hypothesis that they are creating diagrams randomly. And we found that they were engaged by the concept, with many students continuing to develop their diagrams on their own time after school and on the weekend.