Week 6 Lab Sheet — Audio, Video & Rewards

Web Games Development · Media & quiz logic · ~150 minutes

Objectives

  1. Embed media with <audio> / <video> and multiple <source> fallbacks.
  2. Control playback from JavaScript: play(), currentTime, muted.
  3. Show and hide elements with visibility and display.
  4. Create elements with createElement and appendChild.
  5. Add and remove event listeners.
  6. Pick several unique random items from an array.
  7. Validate an ordering with a comparison loop.
  8. Position game elements with CSS.

Instructions

Create a folder named Week6 and copy the media materials (hail_to_the_chief.mp3, hail_to_the_chief.ogg, sfire3.*) into it. Build the quiz below, writing the code shown. Save and refresh after each change. Tick the checkpoint.

Files

1. presidentsClick.html Objectives 1–8

Week6\presidentsClick.html

  1. [Obj 1, 8] Create the file and add this scaffold code. 
    <!DOCTYPE html>
<html lang="en">
<head><title>Ordering Quiz with Rewards</title></head>
<body>
  <audio id="ruffles">
    <source src="hail_to_the_chief.mp3" type="audio/mpeg" />
    <source src="hail_to_the_chief.ogg" type="audio/ogg" />
  </audio>
  <video id="vid" width="50%" muted>
    <source src="sfire3.webmvp8.webm" type="video/webm" />
    <source src="sfire3.mp4" />
  </video>

  <h1>Order the Presidents</h1>
  Your order: <div id="answer"></div>
  Result: <div id="results"></div>

  <script>
    // TODO: add the facts array and the game variables
    // TODO: add setupgame(), pickelement() and checkorder()
    function init() {
      // TODO: set up the game
    }
  </script>
</body>
</html>
  2. [Obj 6] Add the facts array and game variables. 
    var facts = [
  ["George Washington", false],
  ["John Adams", false]
];
var nq = 4;
var slots = [];
var res, ans, song, v;
var answertext = "";
  3. [Obj 4, 5, 8] Add setupgame() to build each box with createElement and appendChild. 
    function setupgame() {
  slots = [];
  answertext = "";
  var mx = 20, my = 200;
  for (var i = 0; i < nq; i++) {
    var c;
    do { c = Math.floor(Math.random() * facts.length); } while (facts[c][1]);
    facts[c][1] = true;
    var uniqueid = "p" + c;
    var d = document.createElement('pres');
    d.innerHTML = "<div class='thing' id='" + uniqueid + "'>placeholder</div>";
    document.body.appendChild(d);
    var thingelem = document.getElementById(uniqueid);
    thingelem.textContent = String(i + 1) + ": " + facts[c][0];
    thingelem.style.top = String(my) + "px";
    thingelem.style.left = String(mx) + "px";
    thingelem.addEventListener('click', pickelement);
    my += 50;
  }
}
  4. [Obj 5, 6, 7] Add pickelement() to record each pick. 
    function pickelement(ev) {
  var answert = this.textContent.substring(0, 1);
  var positionn = Number(this.id.substring(1));
  answertext = answertext + answert + " ";
  ans.innerHTML = answertext;
  this.style.backgroundColor = "gold";
  this.removeEventListener('click', pickelement);
  slots.push(positionn);
  if (slots.length == nq) { checkorder(); }
}
  5. [Obj 5, 7] Add checkorder() to validate the order and reward a correct answer. 
    function checkorder() {
  var ok = true;
  for (var i = 0; i < nq - 1; i++) {
    if (slots[i] > slots[i + 1]) { ok = false; break; }
  }
  if (ok) {
    res.innerHTML = "CORRECT";
    song.currentTime = 4;
    song.play();
    v.style.visibility = "visible";
    v.style.display = "block";
    v.play();
  } else {
    res.innerHTML = "WRONG";
  }
}
  6. [Obj 1, 2, 8] Add init() to start the quiz. 
    res = document.getElementById("results");
ans = document.getElementById("answer");
song = document.getElementById("ruffles");
v = document.getElementById("vid");
setupgame();
Checkpoint: the quiz checks the order and rewards a correct answer with sound and video (Objectives 1-8).

Marking rubric

CriterionPointsScore
Audio and video embedded with multiple sources3
Playback controlled from JavaScript3
Elements created with createElement / appendChild3
Ordering validated correctly3
Reward (sound + video) shown on success2
Runs with no console errors1
Total15

Common errors

Progress and quiz scores are also tracked on the Week 6 lab page in the class website.