Tangible-MakeCode: Bridging Physical Coding Blocks with a Web-Based Programming Interface for Collaborative and Extensible Learning

Research Background and Issues

• Problem or Challenge: The authors point out that existing tangible programming systems, while suitable for beginners and interactive, typically operate as standalone systems and lack integration with widely-used programming platforms such as MakeCode. For beginners, these platforms may present challenges such as complex interfaces and limited opportunities for collaborative learning, which restrict their application in education.

• Significance: Poor design can lead to frustration for beginners exploring programming, potentially decreasing their interest in the subject. This particularly impacts computer science education for middle school students and contributes to underrepresentation in STEM fields.

• Research Motivation and Related Work: Tangible-MakeCode (T-MC) aims to integrate physical programming blocks with MakeCode to address these issues. By simplifying interface design, supporting collaborative learning, and strengthening connections with mainstream educational tools, the study seeks to lower the entry barrier for beginners while supporting sustained learning.

Solution

• Proposed Approach:

  • T-MC consists of two core components: physical programming blocks and a web-based programming interface. Users arrange logic using colored paper blocks, which are then captured by a camera and converted into MakeCode code.
  • The physical programming blocks feature a puzzle-like design to enhance intuitiveness and reduce the learning burden for beginners.
  • The web interface employs computer vision technology to extract constructs from physical blocks, generating JavaScript code that integrates directly into the MakeCode environment.

• Innovations:

  • Integration of physical programming with digital platforms, overcoming the isolation of traditional tangible programming tools.
  • Simplified physical module design replaces screen-based drag-and-drop operations, reducing cognitive load.
  • Support for Bluetooth Low Energy (BLE) wireless communication, enabling students to explore everyday technologies.

• Implementation Steps and Techniques:

  • Physical programming blocks are categorized into control blocks, input blocks, output blocks, compiler blocks, and variable blocks, designed for easy assembly.
  • The web interface leverages the Google Vision API for image recognition, combined with a Python compiler to generate JavaScript code.
  • Full compatibility with the MakeCode environment allows code to be directly loaded onto micro:bit boards for execution.

Research Outcomes

• Specific Results:

  1. Development of the T-MC tool, designed to support physical programming without embedded electronic devices.
  2. Feasibility and engagement validated through a pilot study involving 21 middle school students.
  3. Experiments and interviews demonstrated that T-MC is particularly effective in attracting beginners and fostering collaborative learning.

• Advantages Over Existing Solutions:

  • Provides a lower entry barrier, enabling students with no programming experience to intuitively understand code logic through physical modules.
  • Combines MakeCode with tangible programming to support seamless progression from small projects to advanced programming tasks.
  • Facilitates collaboration among mixed-experience groups, reducing isolation for beginners.

• Experimental Results:

  • Pilot study groups successfully completed creative projects such as “Earthquake Detection System” and “Magic 8 Ball,” showcasing iterative improvement and sustained development capabilities.
  • T-MC encouraged long-term learning intentions, with some teams exploring advanced implementations through online resources.

• Limitations and Future Directions:

  • The current system offers a limited variety of physical blocks, restricting support for complex functionalities.
  • The Google Vision API has limitations in recognizing text on physical blocks, requiring optimization in background noise reduction and recognition accuracy.
  • Long-term research is incomplete, particularly regarding T-MC’s effectiveness in fostering advanced programming skills.

Conclusion and Insights

Tangible-MakeCode combines physical programming blocks with digital platforms to provide beginners with a low-barrier, highly interactive learning tool that supports collaboration and sustained learning. While there is room for improvement in functionality and recognition technology, the pilot study demonstrates its advantages in attracting beginners, promoting innovation, and encouraging teamwork. Future work will focus on expanding system capabilities, enhancing technical stability, and conducting long-term educational impact studies to explore T-MC’s adaptability and influence in real classroom environments.