Pop Quiz, Hot Shot!

N00B Challenge 2.4 [104pts]


The Web is made up of really just 3 things: text, media and hyperlinks. They live in pages or connect them to make up everything on the internet. You will use these three building blocks to build a Pop Quiz for your friends using Mozilla’s Webmaker app for Android.

   Download the Webmaker App

You will brainstorm your design, prototype it, build it and then test it out to see if it works.

STEP 1: Storyboards

A Pop Quiz is a simple multiple choice quiz. There are two or more answer and one of them is right. You win by making the right choice! So, what kind of question would you ask you friends? Before we're ready to make this quiz a digital make for the web, we're going to assemble all the pieces first. Start with the first tile.

  1. Grab a paper storyboard template and a crayon; start with the first tile;
  2. What's your quiz question? Is it about rivers, donuts, anime? Fill it in;
  3. Decide what your three answer choices will be. Frogs, bunnies and squirrels? Pleanes, trains and automobiles?

Before we move on to the next two tiles... take a moment to consider: how is this different from the Would You Rather Quiz? If there are more than two possible choices, why do we still only have two tiles for the results?

  • Got it? Now take a minute to sketch out the ideal images you'd like see on the next two pages;
  • Add a little factoid abou the correct answer to make winning it all the more worth it!

For example: What is the world's longest river? The Mississippi, The Amazon, or the Nile?

Would You Rather Storyboard Template

STEP 2: Image Search

A storyboard helps you get creative and plan for your digital make. The next step is to pull together all of the digital pieces that you will use for the final product. So, let's grab those images first.

  1. Use Google to search for images on the tablet;
  2. When you find an image you like, click and hold down until you're prompted to save it;
  3. Save your images to the tablet for use in the next step;
  4. See the images below for two examples: Would You Rather Drink... Coffee or Tea?
Would You Rather Storyboard Template


Would You Rather Storyboard Template


STEP 3: Remix a Prototype

Now that you have a design and the building blocks, it's time to build a prototype. Follow the steps below to find the Would You Rather Webmaker App template online, open it up in Webmaker, and make it your own!

The buttons in this remixable Pop Quiz template are deactivated! As part of your remix, you will need to link them all to the right pages. We'll do that in the next step, so for now let's focus on text and images.

  1. Click on the menu on the top-right corner of the screen and select Remixto create your own copy;
  2. When your remix loads, Click on the menu again and go to the options to give it a title;
    • Name your remix Your Name and Partner's Name Pop Quiz;
  3. Use the button to edit the make; click on buttons, text, or images to edit them;
  4. Replace the words and images to make them your own!

STEP 4: Link Logic

So, how does this quiz even work, really? What connects the first page with the option buttons to the other two pages with the results? You may have guessed it: hyperlinks. The web is constructed from text, media and hyperlinks, which connect pages. Sometimes these can appear as highlited text or sometimes they can be buttons.

  1. Use a pencil, pen or crayon to go back to your paper prototype and draw lines between the buttons and the pages they connect to. If you get stuck, go back to the Would You Rather quiz Challenge 2.3 to see an example.
  2. Once you think you've got the link logic all right on the paper prototype, go back to Webmaker and edit the buttons to link them to the right pages.

STEP 5: Share Your Work!

Awesome! Belive it or not, wou've made your first website or web app!

  • Take a pic of your storyboard using the tablet and make sure to save it to the drive;
  • Share your Pop Quiz with a friend... what do they think? Does it work?
  • Use the menu to Share your make by email to get the link;