148 lines
5.3 KiB
HTML
148 lines
5.3 KiB
HTML
<html>
|
|
<head>
|
|
<title>Guess the video!</title>
|
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
|
|
<style>
|
|
body {
|
|
background-color: #68caff;
|
|
}
|
|
|
|
/*button {
|
|
background-color: #4C5FAA;
|
|
border: none;
|
|
color: white;
|
|
padding: 15px 32px;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
font-size: 16px;
|
|
margin: 4px 2px;
|
|
cursor: pointer;
|
|
}*/
|
|
</style>
|
|
<meta charset="UTF-8"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<script type="text/javascript">
|
|
async function getFile(reader){
|
|
let response = await fetch(document.URL.substr(0,document.URL.lastIndexOf('/'))+'/phrases.txt');
|
|
let data = await response.blob();
|
|
reader.readAsText(data);
|
|
}
|
|
|
|
function getPhrase() {
|
|
good=Math.floor(Math.random() * data.length);
|
|
document.getElementById("phrase").innerText="\""+data[good][0]+"\"";
|
|
makeOptions();
|
|
}
|
|
|
|
var data=[];
|
|
var good=-1;
|
|
var loaded=false; //For some reason previously loaded videos are kept so loading takes some time
|
|
function doLoad() {
|
|
if(loaded) return;
|
|
loaded=true;
|
|
var reader = new FileReader();
|
|
reader.onload = function(progressEvent){
|
|
// By lines
|
|
var lines = this.result.split('\n');
|
|
for(var i = 0; i < lines.length; i++){
|
|
var line = lines[i];
|
|
data[i] = line.split('\t');
|
|
if(data[i].length<3) data.splice(i, 1);
|
|
}
|
|
getPhrase();
|
|
};
|
|
getFile(reader);
|
|
}
|
|
window.onload = ()=>doLoad();
|
|
doLoad(); //So let's try loading ASAP, and if that fails then wait for the load event
|
|
|
|
function checkResp() {
|
|
var val=document.getElementById("response").value;
|
|
if(val<0) return;
|
|
console.log(data[val]);
|
|
document.getElementById("respyt").src="https://www.youtube.com/embed/"+data[val][2];
|
|
if(val==good) {
|
|
var res=document.getElementById("resultH");
|
|
res.innerText="Correct!";
|
|
res.style="color: #00AA00";
|
|
res=document.getElementById("resultP");
|
|
res.innerHTML="Your answer is correct!<br>You can watch the video below:";
|
|
res.style="color: #00AA00";
|
|
|
|
document.getElementById("score").innerText++;
|
|
document.getElementById("score").innerText++;
|
|
document.getElementById("score").innerText++;
|
|
document.getElementById("score").innerText++; //Heh - fixes casting problems
|
|
}
|
|
else {
|
|
var res=document.getElementById("resultH");
|
|
res.innerText="Wrong!";
|
|
res.style="color: #AA0000";
|
|
res=document.getElementById("resultP");
|
|
res.innerHTML="The correct answer is: \""+data[good][1]+"\"<br>"
|
|
+ "You can watch both of the videos below:";
|
|
res.style="color: #AA0000";
|
|
document.getElementById("goodyt").src="https://www.youtube.com/embed/"+data[good][2];
|
|
document.getElementById("goodBlock").style="display: block";
|
|
|
|
document.getElementById("score").innerText--;
|
|
document.getElementById("score").innerText--;
|
|
}
|
|
document.getElementById("respBlock").style="display: block";
|
|
document.getElementById("sendbtn").style="display: none";
|
|
document.getElementById("anotherbtn").style="";
|
|
}
|
|
|
|
function reset() {
|
|
document.getElementById("response").innerHTML='<option value="-1" default>-- Choose a video --</option>';
|
|
document.getElementById("goodBlock").style="display: none";
|
|
document.getElementById("respBlock").style="display: none";
|
|
document.getElementById("sendbtn").style="";
|
|
document.getElementById("anotherbtn").style="display: none";
|
|
getPhrase();
|
|
}
|
|
|
|
function makeOptions() {
|
|
for(var i = (good>=2?good-2:0); i < data.length&&i<good+2; i++) {
|
|
var opt=document.createElement("option");
|
|
opt.value=i;
|
|
opt.text=data[i][1];
|
|
var resp=document.getElementById("response");
|
|
resp.insertBefore(opt, resp.children[Math.floor(Math.random() * resp.children.length)]);
|
|
}
|
|
}
|
|
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div style="max-width: 500px; margin: auto">
|
|
<h1>Guess the video!</h1>
|
|
<p>So you know those "info sections" in most of Tiffany's videos? Here you can see a word, phrase or sometimes a
|
|
sentence to comment on one of the videos. Can you guess which video it belongs to?</p>
|
|
<h4>Score: <span id="score">20</span></h4>
|
|
<h3 id="phrase">Please enable JavaScript or wait :P</h3>
|
|
<select id="response" style="max-width: 500px">
|
|
<option value="-1" default>-- Choose a video --</option>
|
|
</select>
|
|
<br>
|
|
<button onclick="checkResp()" id="sendbtn">Send</button>
|
|
<button onclick="reset()" id="anotherbtn" style="display: none">Another one</button>
|
|
<div id="respBlock" style="display: none">
|
|
<h3 id="resultH"></h3>
|
|
<p id="resultP"></p>
|
|
<p>Your response:</p>
|
|
<iframe id="respyt" width="496" height="279" src="about:blank" frameborder="0"
|
|
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
|
|
allowfullscreen></iframe>
|
|
</div>
|
|
<div id="goodBlock" style="display: none">
|
|
<p>Correct video:</p>
|
|
<iframe id="goodyt" width="496" height="279" src="about:blank" frameborder="0"
|
|
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
|
|
allowfullscreen></iframe>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|