Games that Teach the Web | Color Picker Snake Game Challenge

• Preparation

  Read through the activity to review the instructions for each step.

  Play the Color Picker Snake Game 3-5 times to learn how it works and records the hex codes and rgb values for the colors displayed on the screen.

  Using the list of colors you assembled suring your playthroughs, try to change the color values on The Super Bland Webpage project in Thimble using the embedded tutorial as a support.

  If you are preparing for the alternate offline activity,

  • Gather together a collection of magazines, color newspapers, or other forms of print media your learners can cut and paste during the activity.
  • Print out HTML color charts for participants to share. You can laminate these or keep them in plastic sleeves or folders for re-use.
  • Print out phone templates for your learners that they can draw on during the alternate offline activity.

  Note that this activity asks learners to play a game that uses keyboard controls in response to on-screen cues. As learners play, the game generates and displays HTML color codes for them. The alternative offline activity also requires coordination in cutting (or tearing) and pasting patches of color from magazines. If you work with learners who have difficulty with fine motor control or seeing color, think about how you can make this activity more accessible with assistive devices or alternate ways to pick design elements. For example you might

  • Invite learners to pick pieces of different colored paper randomly out of a bucket to create a design palette.
  • Put together a set of 30-50 colors that learners can pick 5 colors from to create their own design palettes.
  • Teach learners how hex codes work and ask them to share out random letters (a-f) and numbers (0-9) to create a shared set of colors for a design palette.
  • Teach learners how rgb values work and ask them to share out random numbers (0-255) to create a shared set of colors for a design palette.
  • Change the activity so it's about another mode of sensory design for online media. For instance, you could have learners visit a free sound-effect site like Freesound to pick 5-10 sounds that can intentionally communicate a feeling or idea online.

• Alternate Offline Activity

  40 minutes

  If you are teaching and learning with little or no access to the internet, try this offline activity about color and design on the web.

  1. First, welcome your learners. Explain that today we'll think about how we can use color to communicate feelings and ideas in media and on the web.
  2. Hand out magazines or other forms of full-color print media to your learners along with paper, scissors, and glue or tape. Learners can also rip the magazines if there aren't enough scissors to share.
  3. Use the next 10 minutes for learners to go through the magazines and to cut out 10-15 patches of color that they like. Each patch should have a different color. The patches should be big enough to glue or tape to the paper. Each patch should be about the same size as the others - say, 4cm (2") wide by 2cm (1") tall.
  4. After learners have cut out their patches, ask them to pick 5 colors that go well together. These five colors will be their color "palettes" - or collections - for the rest of the activity.
  5. Ask learners to glue or tape their palettes on to their pieces of paper.
  6. Take about 5 minutes for learners to share their palettes with a neighbor to the right or left. Learners should explain why they like each color and what they think each color makes a person feel or think.
  7. Take another 5 minutes for 2-3 volunteers to share their palattes and thoughts about their colors with the whole group.
  8. Next, share copies of the HTML color code chart with your learners. Explain that the chart labels each color with a "hex code" - a color code used in webpages. These are the codes that begin with the number sign: #. Ask learners to match the colors in their palettes with the closest colors on the chart and to write their colors' hexcodes either on their patches of color or next to them on the piece of paper that has their palette on it.
  9. After that, pass out copies of the phone template. Give learners about 10 minutes to sketch their favorite app or to draw their own app on the template. Then ask them to use only the colors from their palettes to color in different parts of the app like the background, fonts and different buttons or sections of the app, which are all parts of apps and pages made on the web.
  10. Finally, have your learners share their apps and color choices with their neighbors or the whole group before going on to the reflection step of this activity.

• Introduction

  15 minutes

  Welcome your learners and explain that today we'll think of how people use color to communicate feelings and ideas through media on the web. To begin

  1. Give each learner a piece of paper.
  2. Ask each learner to visit the website of a favorite app or game that's appropriate for your learning space and community.
  3. Ask each player to identify the most important colors on the site - these are part of the site's design palette, the collection of colors it uses to communicate feelings and ideas about its app or game.
  4. Invite each learner to grab markers that match the important colors on the site.
  5. Ask each learner to sketch a quick palette of blocks or patches of color on the paper you passed out earlier.
  6. Give learners another 5 minutes to repeat the process for another site.
  7. Use the last few minutes of this step to have neighbors share their palettes and talk about the feelings and ideas that they think the colors communicate. You can model this by talking about the colors on one of your favorite app or game sites and by providing prompts like this:

     "I think they designers use a color like this one to make you feel/think __________ about their app/game because _________. I think the colors work well together because _________."

  8. Finish this step by asking 2-3 volunteers to share their palettes and thinking with the class.

• Play the Color Picker Snake Game Challenge

  10 minutes

  Next, explain that we're going to develop our own color palettes for a super-bland and boring webpage by collecting colors in the Color Picker Snake Game

  Demo the game for students and make sure they understand

  • The controls.
  • Where their color codes display.
  • The differences between the hex codes and rgb values.

  As you talk about the different kinds of color codes, you can point out their superficial differences or go into more detail about how each character in a hex code or rgb value corresponds to different values of red, green, and blue in a color.

  The game has sound effects and learners will probably figure out that they can toggle the game's music using the alt key. Be prepared with earbuds, headphones, or some shared norms about noise level in your learning space. Not every learner can do their best work at the same level of volume or distraction.

  Share today's challenge with your learners: they will play the Color Picker Snake Game three times each. The colors they earn during each playthrough will stay on the left side of the screen so long as they don't refesh the page. They should hit space to start a new game, instead.

  After everyone finishes playing, they will have to brighten up a super-bland and boring webpage, but they can only use the colors they've earned in their games. The longer they survive, the more color choices they will have.

  Once everyone understands the rules, give your learners the rest of the time in this step to play their games and collect their colors!

• Brighten Up The Super-Bland Webpage

  15 minutes

  After your learners finish their playthroughs, have them pick and write down or otherwise record and save five of their colors that they think go well together as a design palette. Ask them to pick colors that work together to communicate the same kind of feeling or idea or to pick colors that pop and stand out against one another to communicate a feeling or idea.

  Then ask them to open a new tab in their browsers. Make sure they don't close their game window until they have somehow saved the color codes for their palettes!

  Invite learners to visit The Super-Bland Webpage in their new tabs. Here's a shortened URL:

  http://bit.ly/28My3o1

  Have learners click on the "Remix" button in the upper right-hand corner of the screen. This will take them into Thimble, Mozilla's online code editor. They can edit the colors on the webpage by following the embedded tutorial and changing values on the file called style.css.

  Ask learners to click on the "Tutorial" pane on the right-hand side of the screen. It will take them through the changes they need to make and show them how to publish their remix to share online!

  Give learners about 10 minutes to make their edits and publish their pages. Take more time as needed!

• Reflection

  5 minutes

  Take the last few minutes of the activity to reflect with your learners. You can create your own questions or use questions like these:

  • What did you learn about color or coding today?
  • How would you explain the way designers use color to communicate feelings and ideas through apps, games, and websites?
  • How did you decide which colors to include in your own design palette? What made you think they'd work well together? What feelings and ideas did you want to communicate with them?
  • How would you explain the way HTML color codes work to display colors on the web?
  • What seemed easiest about today's activity? Most difficult? Why?

  You can also use questions like these - or your own questions - to assess participants' learning. Just be ready to capture learners' responses in a variety of ways so each everyone can express themselves fully regardless of any difficulties they experience with one medium or another such as hand-writing or public speaking.