Google Breadcrumb Challenge

Challenge

In groups of 2-4, write a web app that can be used to make a decision about which laptop speaker system should be purchased.

Create one page of sources (Best Buy, Future Shop, The Source, etc.), with links.

Determine a list of specific criteria (such as low price, small size, ???), and create a series of pages allowing the user to browse specific products based on these criteria.

Here is a working program stub to get you started. Note that it is just an example program; your program does not have to look like this.

Following is the source code for that program, to show you how a little about how Google Breadcrumb works.

(Main)

#Main Menu

1. [Stores](Stores)

2. Best Prices

3. Smallest Size

4. Best Features

5. Best Reviews

---

(Stores)

stuff here...

[Back to Main Menu] (Main)

Strategy

Start buy identifying who will be the "coder", since only one of you can do this.

Create a Google Doc to collaborate on the research, named "Team # Google Breadcrumb Challenge". Share the Google Doc with your team and with your instructor. Organize your Google Doc to make it easy to identify store, price, size, ratings, etc. so that the results will be easier to plug into your program.

At the top of your Google Doc, put your team # and the names of your team members. Also put the link to your working program (from the QR Code link).

Notes

    • To create a link to a website, use the following code:

    • <a href="http://www.whatever.com">Link text</a>

    • To create a link to another page, use the following code:

    • [text to display] (NameOfPage)

    • Page names cannot have spaces in them.

    • "---" in the left column produces a horizontal rule. So does "<hr>".

    • HTML tags such as <b>bold</b> and <i>italics</i> work.

    • A single pound sign "#" is used for a heading. Two # signs are a subheading. Etc.

    • To display an image, use the following code:

    • <img src="http://imageAddress.png">

    • Be careful about sharing the link to the working web app, because your email address is shown in the page source code.

    • The programs don't seem to like the TM symbol, so make sure you don't copy and paste them in with the product names!

[ teacher link ]