Active Learning • Computational Thinking • Instructional Technologies • Tools and Tool Use
1. Current Solutions
1.1 For Other Languages
As previously stated the biggest visual analogy programming platforms out there are Scratch and Turtle. Scratch is a block-based programming language/environment developed out of the MIT Media Lab. It has just undergone a huge upgrade into a third version. It is undoubtedly the most used Computer Science Education (CSEd) tool at 40 million users . Turtle started out as LOGO, then was ported into Python and exists as a standard module in the language.
1.1.1 Drawbacks of Scratch
Scratch is a great programming language for learning basic Computational Thinking principles and the general concepts behind coding. This being said, it does not teach anything about text-based languages which are used in subsequent Computer Science curricula and in industry.
1.1.2 Drawbacks of Turtle
Turtle is great because it allows the student to navigate the syntax of Python, but using a simplified, easy-to-follow API. However, Turtle is quite isolated of an API and not very integrable with other parts of Python. You can use control structures, branching, and functions and any other normal features, but the projects are all variations of just drawing shapes.
2. New Solution
Mosaic was designed to be as frictionless as possible to ensure that it is incredibly easy to start programming. Nothing has to be installed or configured unlike the setup process for Python or any other language, then the IDE setup process on top of that. The editor and execution visualizations are displayed side-by-side with a draggable resizer to allow the user to customize it to their liking. This also makes it so that the user does not have to switch back and forth between windows. The Mosaic that is created is displayed prominently on the right side directly above the Console textarea. Console.log() calls are captured and displayed in the coding environment so the student doesn’t have to navigate the browser developer tools.
2.1 Top Menu
The interface has a top menu with four important elements for interaction. The first is the Code Samples navigation item which when clicked displays a modal full with commented code that each highlight different functions in the Mosaic API with a fun and engaging code functionality. Some examples of Code Samples include: an animated scrolling text billboard, an animated rain cloud, and an 8-bit heart mosaic. The second navigation item is labeled Help which when clicked displays the documentation for the APIs that are provided as a part of Mosaic. Then on the right side, there are two buttons: Run Code and Stop Running. These enable and disable autorun functionality if the user needs to toggle autorun for any reason.
There is a Mosaic object but not a Tile object because when a Mosaic object the table HTML element is automatically generated. This means that the Tiles are already created, so to track them from a 2D array of Tile objects within the Mosaic would be an unnecessary complexity.
3. Future Work
3.1 Tile Selection Tool
In order to reduce the workload of picking tiles to set the color of, the interface would have a Tile Picker Button. This button would enable Tile Picking Mode, and whenever the users clicks a tile, it would automatically get the coordinate and append it to the editor.
3.2 Linting and Error Detection
With some modifications, the editor would be able to lint and find common Mosaic-related errors that would further help the students during the debugging process.
 Butler, M. & Morgan, M. (2007). Learning challenges faced by novice programming students studying high level and low feedback concepts. In ICT: Providing choices for learners and learning. Proceedings ascilite Singapore 2007. http://www.ascilite.org.au/conferences/singapore07/procs/butler.pdf.
 Kris Powers et al. 2006. Tools for teaching introductory programming. ACM SIGCSE Bulletin 38, 1 (2006), 560. DOI: http://dx.doi.org/10.1145/1124706.1121514.
 Anon. Scratch Statistics. Retrieved July 26, 2019 from https://scratch.mit.edu/statistics/.