5

[JavaScript] Show Content If Pass Quiz

 2 years ago
source link: http://siongui.github.io/2017/03/02/javascript-show-content-if-pass-quiz/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

[JavaScript] Show Content If Pass Quiz

March 02, 2017

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK