CS can feel extremely inaccessible at times. There seems to be a bridge between those who "can code" and those who don't really have an idea and may feel intimidated. We created this tool to help curious new programmers or those who have felt discouraged in the past to be able to begin learning CS by identifying web components in the websites they visit.

What it does

Given a website, this chrome extension identifies different data types on the website and creates a small popup tag on mouseover which explains the point of the datatype. So far, it has been implemented for primitives, but could also be extended to arrays, stacks, queues, trees, etc. for further CS learning. At the end of each level, once the player has interacted with several websites that satisfy exposure to the learning concept, they can try an activity that will allow them to apply their newly acquired knowledge to create a miniproject!.

How we built it

We built it as a chrome extension in base JS, HTML, and CSS.

Challenges we ran into

Learning how chrome extensions work, and debugging effectively.

Accomplishments that we're proud of

Creating an independent, standalone chrome extension with minimal bugs and completely unobtrusive design.

What we learned

How chrome extensions work, how to write effective JS code, different chrome API tools to support extension development.

What's next for Code X-ray

Extending the software to identify more complex data structures and functional archetypes, as well as building out a progress and "gamification" aspect to it which allows students to get motivated to keep unlocking "levels". We will also want to implement our own Level-Up mini projects, ex: create a tic-tac-toe code template for users to fill for the Arrays level, or a madlibs game implementation for the If-Else Statements level.

Share this project: