Navigation and hotspots in interactive content

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. Which link takes the viewer to another page called quiz.html?

A <a href="quiz.html">Start quiz</a>

B <a src="quiz.html">Start quiz</a>

2. Which statement about interactive content is true?

A The viewer must always follow one fixed order from the first page to the last.

B The viewer chooses their path by clicking links, buttons or hotspots.

3. A section on your page has the id "results". Which link jumps to it?

A <a href="#results">See results</a>

B <a href="results#">See results</a>

4. Where should a Home button or menu link usually go in an interactive project?

A On every page, so the viewer can always get back to the start

B Only on the last page, so the viewer can't leave early

5. Which line makes a section the target of an anchor link?

A <h2 href="tips">Study tips</h2>

B <h2 id="tips">Study tips</h2>

Match the Pairs

Draw a line connecting each item on the left to its match on the right.

Left column		Right column
1<a href="page2.html">Next</a>		A<a href="index.html">Home</a>
2<a href="#quiz">Go to quiz</a>		BA link that jumps the viewer to another page called page2.html when they click it
3A home button that sends the viewer back to the start page from any slide		CThe link name and the id do not match, so the link cannot find the section. Both must be exactly quiz.
4Marking a section with an id so a link can jump straight to it		DA link that jumps to the section on the same page that has the id quiz
5<a href="#quiz">Quiz</a> with <h2 id="Quiz1">		E<h2 id="results">Results</h2>
6<a>Next slide</a>		FThe link has no href attribute, so it does not know where to send the viewer. Add href="slide2.html".

Definitions

Fill in the Blanks

Complete each line of code by filling in the missing parts.

<a ____="page2.html">Next slide</a>

<_ href="slide3.html">Go to slide 3</a>

<___> <a href="home.html">Home</a> </nav>

Spot the Error

Shade in the letter of the line that contains an error.

Question 1

A <nav>

B <a href="home.html">Home</a>

C <a src="quiz.html">Quiz</a>

D </nav>

Question 2

A <h2 id="rules">Rules</h2>

B <a href="rules">Rules</a>

C <p>Read before you play.</p>

Question 3

A <h1 id="menu">Game Menu</h1>

B <h2>Level 2</h2>

C <a href="#menu">Menu</b>

Question 4

A <body>

B <h1>Space Quiz</h1>

C <a href="index.html">Home

D </body>

Question 5

A <a href="slide1.html>Start</a>

B <p>Pick a path to begin.</p>

C <a href="slide2.html">Skip</a>

Answer Key

Navigation and hotspots in interactive content

Section A: Quick Questions

A — <a href="quiz.html">Start quiz</a>

B — The viewer chooses their path by clicking links, buttons or hotspots.

A — <a href="#results">See results</a>

A — On every page, so the viewer can always get back to the start

B — <h2 id="tips">Study tips</h2>

Section B: Match the Pairs

<a href="page2.html">Next</a> → A link that jumps the viewer to another page called page2.html when they click it

<a href="#quiz">Go to quiz</a> → A link that jumps to the section on the same page that has the id quiz

A home button that sends the viewer back to the start page from any slide → <a href="index.html">Home</a>

Marking a section with an id so a link can jump straight to it → <h2 id="results">Results</h2>

<a href="#quiz">Quiz</a> with <h2 id="Quiz1"> → The link name and the id do not match, so the link cannot find the section. Both must be exactly quiz.

<a>Next slide</a> → The link has no href attribute, so it does not know where to send the viewer. Add href="slide2.html".

Section C: Definitions

<a href="page2.html"> — A link that jumps the viewer to another page or section when clicked, so they choose their own path through interactive content. Use #id to jump to a section.

Section D: Fill in the Blanks

<a href="page2.html">Next slide</a>

<h2 id="quiz">Quiz</h2>
<a href="#quiz">Jump to quiz</a>

<a href="slide3.html">Go to slide 3</a>

<h2 id="menu">Menu</h2>
<a href="#menu">Back to menu</a>

<nav>
  <a href="home.html">Home</a>
</nav>

Section E: Spot the Error

C — A link uses the href attribute to say where to jump. src is for images and media, so this link goes nowhere. It should be href="quiz.html".

B — To jump to a section on the same page, the href needs a # before the id. It should be href="#rules", otherwise the browser looks for a page called rules.

C — The link is opened with <a> so it must be closed with </a>. Closing with </b> leaves the link unclosed and breaks the menu button.

C — The home link is missing its closing </a> tag, so the link never ends properly. It should be <a href="index.html">Home</a>.

A — The href value is missing its closing quote mark. It should be href="slide1.html" so the browser knows where the address ends.