Creating one Puzzle Box is pretty easy. But, to have enough Puzzle Boxes to play the game, you will need at least 12 boxes – to ensure that you have enough boxes for opening and closing tags. In total, for a pair of players, you need to build 24 boxes. So, to build all 24 boxes, you need to print 12 sheets of the papercraft pattern.
It is preferable to print the Puzzle Box with thick paper, so it will be easier to assemble and will have a better build.
If you are limited on time, you can do this activity by writing on pieces of paper or post-its instead of making boxes.
Introduction: Make the Boxes
15 minutes
This is a pretty fun but time-intensive thing. Learners first assemble their boxes. Bonus: If time permits, mentor plays HTML Corners using the boxes to signal the stations.
HTML Puzzle Box Challenge
20 minutes
First assemble the tags in the right order in a small group. You can model this build for the whole group. Then have learners or groups take down their boxes and "scramble" them up in front of them. Tell participants that their new goal is to stack the blocks into the correct order for building a webpage. Then let them race to see who can build a webpage the fastest!
This is the right combination of HTML tags structure.
As you finish your introduction, explain that today you'll be working with pairs of tags that "open" and "close" to set the boundaries of different parts of a webpage. In the future, you'll also look at standalone tags, like the image tag, called img, that are self-sufficient. They have an opening tag, but no closing tag. Most, but not all tags, open and close.
Reflection: Review the Tags
10 minutes
Repeat the HTML Corners game if time permits. You can also just have learners shout out what each tag means.
Bonus: If time permits, show the tags in action by clicking "View Source" or using the X-Ray Goggles on a webpage.
Bonus: Tag your environment by putting remixed HTML Puzzle Boxes or post-it notes around the room a la Markup Mixer. That is to say, create tags for the objects in your room, like <door> and </door> and then put them before and after the objects they describe to mark-up the room as if it was a webpage.
Conclude by asking the group to reflect on what they found. You can use prompts like these or create your own!
In your own words, can you describe the structure of a web page?
How would you explain the idea of tags and the way they work to friends or family?
Can you explain how and why some tags fit inside others?
What do you think might be some of the most common tags used to structure a webpage? Which ones seem most important or like you couldn't do without them?
Why do you think giving a webpage some structure might be important in general?
Questions? Comments? Suggestions for improvement? Email Chad Sansing, curriculum developer at the Mozilla Foundation.
5. Optional: Badging
You will race to sequence the paper boxes labeled with HTML tags, becoming familiar with the most common HTML tags and learning how to structure a web page and how to code and remix.
If you successfully complete the above, you will practice the following skills:
Creativity
The skills that you have learned through this activity can be recognized and validated by earning credentials or badges.
Through a partnership with the Open Badges Academy (OBA), you can earn over 15 Web Literacy and 21st Century Skills credentials or badges. Once you earn them, you can share the credentials/badges via your social media or resume or use them to connect with others.
If you are interested in applying for badges, visit the OBA and/or reach out to Matt Rogers or DigitalMe to schedule a demonstration.
