Structured Visual Play

Keep in mind that this is still a Work in Progress.

A lot of my previous work has been in making STEM education, Computer Science Education in particular, more fun and engaging.

Gamification

• https://github.com/reeshuffled/syntax-tutor
• Change Maker
• Graph Guesser
• Speedy Math/Math Slayer
• Math Matrix
• Type Shooter/Type Racer

Visualization + Interactivity

• Binary Explorer
• https://github.com/reeshuffled/mosaic
  • Code can be hard to visualize. Print statements is a kind of visualization because otherwise you can have no insight into the execution of your program.

Synthesis

• https://github.com/tecanal/ar-turtle
  • Turtle has been around since Logo, Jeroo is just an iteration of it
• https://github.com/reeshuffled/parsons2play
  • Building on the idea of play is video games and trying to hijack student motivation/interest

https://github.com/tecanal/htmlearn

1. Meme Maker

• The student uses HTML and CSS to modify the image source and top and bottom caption texts of a meme.
• Student Actions:
  • Modify the text content of existing tags. (i.e. changing the text of the meme)
  • Modify the attributes of existing tags. (i.e. changing the src to another image)
  • Modify the existing tags to transform them to different tags. (i.e. changing <h1> to <h3>)

2. Comic Creator

• The student uses HTML and CSS to create a multi-paneled webcomic with images and differently styled caption boxes.
• Student Actions:
  • Use <div>, <p>, <u>, <i>, <b> tags. (i.e. making a comic panel with a rich text caption)
  • Use inline CSS styling. (i.e. changing the color of a caption)

3. Blog Publisher

• The student uses HTML and CSS to create a mock blog about one of their interests.
• Student Actions:
  • Use <div>, <table>, <ul>, <ol>, <p>, <h?>, and other ways of organizing information. (i.e. making a chart)