The current state of JavaScript is much different than when it first began as a fledgling language. Instead of just adding interactivity to web pages, it is now also used on the backend to serve those web pages. Much of the curriculum that serves to teach JavaScript is pigeonholed into either focusing on front-end or back-end. The fact that the lessons are deeply siloed into the context of front or back end applications creates a dependency on other knowledge. Knowing HTML and CSS is necessary to begin front-end JavaScript or understanding HTTP and databases for back-end work. Mosaic (https://tecanal.org/mosaic) decouples JavaScript from the frontend/backend dichotomy so that JavaScript is taught as a language with no clear preference towards a use case. Mosaic is about manipulating cells within a table (tiles in a mosaic). With this, students can create pixel art, animations, or even games. This provides a visual analogy, or a frame of reference to understand and conceptualize the code in a visual space. Traditional console-based Computer Science learning offers several challenges such as hard to pin down bugs or understanding the results of individual lines of code. Since students receive immediate visual feedback in Mosaic, these traditional sorts of problems fade away because they can see the results of the code executing in a more visual manner.

CCS Concepts

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 [3]. 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.

1.2 For JavaScript

In terms of visual feedback, there is the obvious js-turtle which is just a JavaScript port of the Python port. A more established framework would be Processing.js, however, that is more geared toward creative artists and has no scaffolding for first-time programmers learning. Mosaic aims to strike a balance between the easy-to-digest syntax and API of js-turtle while maintaining a more broad and advanced feature set like that of Processing.js.

2. New Solution

2.1 Overview

Mosaic is a learning and development environment that leverages JavaScript’s unique qualities like DOM Manipulation and being able to run in a browser. It provides deeper insight into JavaScript’s behavior, syntax, and general programming than Turtle does for Python. Code auto-executes so the student gets instantaneous visual feedback. Additionally, code automatically saves each time it executes so no work is lost.

2.2 Interface

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.

2.3 API

The Mosaic object is a way of interacting with a table element called mosaic in the HTML. Each tile corresponds to a table cell which can be represented as a 2D array in JavaScript. The user modifies tiles through x, y coordinates, which are transformed into 2D array indices. Getters and setters have been created to abstract away DOM Manipulation with 2D arrays of the Mosaic tiles with a clean and consistent API for the CSS JS accessors.

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.

References

[1] 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.

[2] 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.

[3] Anon. Scratch Statistics. Retrieved July 26, 2019 from https://scratch.mit.edu/statistics/.