HackShop Mascot

Level 2:
Intro to Software with Mozilla

Other Levels

Would You Rather?

N00B Challenge 2.3 [40pts]

omnignorant

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 Would You Rather style 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 Would You Rather quiz is the most basic quiz. There are only two answers, and neither of them is right or wrong. You win no matter which choice you make! So, what's your would you rather? Before we're ready to make this quiz a digital make for the web, we're going to assemble all the pieces first.

  1. Grab a paper storyboard template and a crayon; start with the first tile;
  2. What's your action phrase? Is it eat? Watch? Buy? Play? Fill it in;
  3. Decide what your two choices are. Frogs or Bunnies? Cars or Planes? Pick two;
  4. Now, take a minute to sketch out the ideal images you'd like see on the next two pages;

For example: Would You Rather Drink... Coffee or Tea?

 
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?
 
A cup of coffee.

Coffee

A cup of tea.

Tea

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!

  1. On the tablet, use a web browser to navigate to bit.ly/webmaker-wldurather
  2. Play the example: Would You Rather Drink... Coffee or Tea?
  3. Click to Open App button to open the template in the Webmaker App.
  4. Click on the menu on the top-right corner of the screen and select Remixto create your own copy;
  5. When your remix loads, Click on the menu again, click on Settings and rename your remix app;
    • Name your remix Your Name and Partner's Name Would you rather Quiz;
  6. Use the button to edit the make; click on buttons, text, or images to edit them;
  7. 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.

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, click below to reveal the a completed example.
Would You Rather Storyboard Link Solution
 

These connections have a certain logic to them and as your web design talents get more advanced, so will the logic.

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 Would You Rather quiz with a friend... what do they think? Does it work?
  • Use the menu to Share your make by email to get the link;