[JavaScript] Show Content If Pass Quiz


Show youtube video if users pass the quiz. See demo first. Please answer the following quiz.

13 + 51 = ?
Input answer and press enter:

HTML:

<div>13 + 51 = ?</div>
Input answer and press enter: <input id="ans" type="text"><br><br>
<div id="info"></div>

JavaScript:

var ans = document.getElementById("ans");
var info = document.getElementById("info");
ans.addEventListener("keydown", function(e) {
  if (e.key == "Enter") {
    if (e.target.value.trim() == "64") {
      // correct answer, show youtube video
      info.innerHTML = '<div style="position:relative;height:0;padding-bottom:75.0%"><iframe src="https://www.youtube.com/embed/UOTKWp-5bKI?ecver=2" width="480" height="360" frameborder="0" style="position:absolute;width:100%;height:100%;left:0" allowfullscreen></iframe></div>';
    } else {
      info.innerHTML = "wrong answer!";
    }
  }
});

Register a keyboard event listener to the input element where users input the answer. If the user's answer is correct, embed iframe of the youtube video. Otherwise tell the user that the answer is wrong.


Tested on:

  • Chromium Version 55.0.2883.87 Built on Ubuntu , running on Ubuntu 16.10 (64-bit)

References:

[1]KeyboardEvent.key - Web APIs | MDN