Audio, Video & Rewards

createElement

events

audio

video

1

setTimeout or setInterval: which runs only once?

2

How does the memory game know two cards match?

3

What does a hit-test check?

4

How can you avoid picking the same item twice?

In the book’s quiz, the player matches countries to capitals. The blocks are created by code, move when clicked, change colour on success, and a video plays as the reward.

The lab’s presidentsClick.html uses the same ideas: it picks presidents at random, you click them in order, and a correct answer plays “Hail to the Chief” and a fireworks video.

Good rule from the book: give feedback for every player action.

FROM THE BOOK

Chapter 6 · Quiz
pp. 179–210

YOU WILL BUILD

• presidentsClick.html
• hail_to_the_chief.mp3 / .ogg
• sfire3.webm / .mp4 / .ogv

01

Embed media with <audio> / <video> and several <source> fallbacks.

02

Control playback: play(), currentTime, muted.

03

Show and hide elements with visibility and display.

04

Create elements at runtime with createElement and appendChild.

05

Add and remove event listeners.

06

Pick several unique random items from an array.

07

Validate an ordering with a comparison loop.

08

Position elements with CSS position and inline styles.

A knowledge base

Facts stored in an array of arrays.

Random questions

A different set each time, never the same fact twice.

Feedback

Colour and text change after every click.

A reward

Audio and video play natively in HTML5, with no plug-ins.

1

Create

document.createElement

2

Fill

innerHTML / textContent

3

Add and place

appendChild, style.top, style.left

CODE · boxes.html · script

var names = ["Ada", "Grace", "Alan", "Tim"];
names.forEach(function (name, i) {
  var box = document.createElement("div");
  box.textContent = (i + 1) + ". " + name;
  box.style.position = "absolute";
  box.style.left = (20 + i * 170) + "px";
  box.style.top = (20 + i * 100) + "px";
  box.style.border = "3px double teal";
  box.style.padding = "8px";
  document.body.appendChild(box);
});

document.createElement("div")

box.textContent = …

box.style.position = "absolute";

(20 + i * 170) + "px"

document.body.appendChild(box);

Six boxes appear, spaced further apart.

1

Record

Each pick stores the fact’s original position.

2

Compare

Is slots[i] > slots[i+1] anywhere?

3

Decide

Any drop: WRONG. No drop: CORRECT.

CODE · order.html · script

function inOrder(list) {
  for (var i = 0; i < list.length - 1; i++) {
    if (list[i] > list[i + 1]) {
      return false;        // found a drop
    }
  }
  return true;             // no drops at all
}
document.write("2,5,9,11 → " +
  inOrder([2, 5, 9, 11]) + "<br>");
document.write("2,9,5,11 → " +
  inOrder([2, 9, 5, 11]));

i < list.length - 1

list[i] > list[i + 1]

return false;

return true;

inOrder([2, 9, 5, 11])

[2, 5, 9, 11] is CORRECT. [2, 9, 5, 11] is WRONG, and the loop stops at i = 1.

1

Load

Audio and video with several sources, hidden by CSS.

2

Trigger

checkorder finds the order is correct.

3

Reward

Make visible, set currentTime, play().

CODE · media.html

<audio id="song" controls>
  <source src="win.mp3" type="audio/mpeg">
  <source src="win.ogg" type="audio/ogg">
  Your browser cannot play this audio.
</audio>
<video id="clip" width="320" controls muted>
  <source src="fireworks.webm" type="video/webm">
  <source src="fireworks.mp4" type="video/mp4">
</video>
<script>
  // later, as a reward:
  document.getElementById("song").play();
</script>

<audio controls>

<source src="win.mp3" …>

<source src="win.ogg" …>

muted

….play();

At 0 there are a few seconds of silence. Right and wrong answers now sound different.

1

CSS

.thing is absolute; audio and video start hidden.

2

Place

Code sets style.top and style.left for each box.

3

Reveal

Code sets visibility and display for the reward.

CODE · reveal.html

<style>
  .reward { visibility: hidden; color: darkorange; }
  .gone   { display: none; }
</style>
<p>Line one</p>
<p class="reward">You win!</p>
<p class="gone">Removed from the layout</p>
<p>Line two</p>
<script>
  setTimeout(function () {
    document.querySelector(".reward")
      .style.visibility = "visible";
  }, 2000);

visibility: hidden;

display: none;

document.querySelector(".reward")

.style.visibility = "visible"

setTimeout(…, 2000)

The boxes appear further right, and picked boxes use your colour.

Fix: Keep the mp3, ogg and video files in the Week6 folder. Browsers may need a click before sound plays.

Fix: Call removeEventListener with the same function reference used to add it.

Fix: Add "px" to top and left, and keep position:absolute on .thing.

Fix: setupgame() clears facts[i][2] but checks facts[c][1]. Reset [1] so used facts are cleared for the next round.

A

Deletes an element

B

Adds an element to the page

C

Copies CSS

D

Plays a video

A

To run faster

B

So the box cannot be picked again

C

To hide the box

D

To reset the game

A

CORRECT

B

WRONG

C

An error

D

Depends on nq

A

They are the same

B

hidden keeps its space; none removes it

C

none keeps its space

D

hidden deletes the element

1

Folder

Create a folder named Week6.

2

Copy

Copy the example files and their images, audio or video into it.

3

Open

Open the folder in VS Code or Sublime Text.

4

Save

Edit, then save with Ctrl+S.

5

Check

Refresh the browser (F5). Open the console (F12).

After a round, type slots in the console to see the exact order the player clicked.

KEEP GOING

The rest of the book

Chapter 7 Mazes (arrow keys and local storage), 8 Rock-Paper-Scissors, 9 Hangman, 10 Blackjack.