The Interactive Protractor is a sophisticated educational geometry tool developed as a custom CTAT (Cognitive Tutor Authoring Tools) component. This HTML5 interface provides students with an intuitive, interactive way to learn angle measurement and geometric concepts through hands-on manipulation of virtual protractor elements. The tool combines advanced SVG graphics, real-time calculation, and educational best practices to create an engaging learning experience.
Try the interactive protractor below. You can drag the rays by grabbing the circles at the end:
Vanilla JavaScript with SVG manipulation, DOM event handling, and real-time calculations
Custom component architecture compatible with Carnegie Mellon's tutoring framework
Precise trigonometric calculations with degree/radian conversion and angle validation
Students can drag protractor rays to explore angle relationships, with real-time feedback and smooth animations that enhance understanding of geometric concepts.
Supports both direct manipulation and numerical input, allowing students to work with specific angle values or explore through experimentation.
Configurable display options including degree/radian conversion, adjustable increments, and snap-to-grid functionality for different learning scenarios.
Built as a reusable component within the CTAT ecosystem, enabling integration with intelligent tutoring systems and automated assessment tools.
Solution: Implemented robust trigonometric algorithms with floating-point precision handling and edge case management. Developed custom angle normalization functions ensuring accurate calculations across all angle ranges with proper rounding and validation.
Solution: Worked with existing CTAT engineering team to ensure all event handling integrated with CTAT framework for step tracing and Java backend support.
The Interactive Protractor has been successfully deployed in educational environments with measurable impact on student learning:
Understanding of learning theory, user experience design for education, and pedagogical best practices
Implementation of complex trigonometric calculations, geometric algorithms, and numerical precision handling
Advanced SVG manipulation, event handling, animation, and responsive user interface development
Custom component development within existing educational frameworks and API design
JavaScript ES6+, SVG graphics, CSS3 animations, responsive design principles
Trigonometric calculations, degree/radian conversion, angle validation, precision handling
Thorough explanation in CTAT component library with examples.