norbipeti/TLAPhrases
1
0
Fork 0
Code Issues Pull requests 2 Packages Projects Releases Wiki Activity

Always creating the iframe on answer

Browse source 
This way it's not recorded in history (and also doesn't show the previous video for a bit)
Also renamed the source file according to its type
This commit is contained in:
Norbi Peti 2019-03-03 23:18:09 +01:00
parent 93c736b0bb
commit 04b933f744
No known key found for this signature in database
GPG key ID: DBA4C4549A927E56
2 changed files with 72 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

139
docs/index.html
View file

@ -1,8 +1,8 @@
<html> <html>
<head> <head>
<title>Guess the video!</title> <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"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<style> <style>
body { body {
background-color: #68caff; background-color: #68caff;
} }
@ -25,20 +25,20 @@
<meta http-equiv="Cache-Control" content="no-store" /> <meta http-equiv="Cache-Control" content="no-store" />
<script type="text/javascript"> <script type="text/javascript">
async function getFile(reader){ async function getFile(reader){
let response = await fetch(document.URL.substr(0,document.URL.lastIndexOf('/'))+'/phrases.txt'); let response = await fetch(document.URL.substr(0,document.URL.lastIndexOf('/'))+'/phrases.tsv');
let data = await response.blob(); let data = await response.blob();
reader.readAsText(data); reader.readAsText(data);
} }
function getPhrase() { function getPhrase() {
good=Math.floor(Math.random() * data.length); good=Math.floor(Math.random() * data.length);
document.getElementById("phrase").innerText="\""+data[good][0]+"\""; document.getElementById("phrase").innerText="\""+data[good][0]+"\"";
makeOptions(); makeOptions();
} }
var data=[]; var data=[];
var good=-1; var good=-1;
var loaded=false; //Because of caching, previously loaded videos are kept so loading takes some time var loaded=false; //Because of caching, previously loaded videos are kept so loading takes some time - no longer the case
function doLoad() { function doLoad() {
if(loaded) return; if(loaded) return;
if(document.getElementById("response")==null if(document.getElementById("response")==null
@ -54,24 +54,6 @@
if(data[i].length<3) data.splice(i, 1); if(data[i].length<3) data.splice(i, 1);
} }
var ifr=document.createElement("iframe"); //Create dynamically to prevent caching
ifr.id="respyt";
ifr.width=496;
ifr.height=279;
ifr.frameborder=0;
ifr.allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture";
ifr.allowfullscreen=true;
document.getElementById("respBlock").appendChild(ifr);
ifr=document.createElement("iframe"); //Create dynamically to prevent caching
ifr.id="goodyt";
ifr.width=496;
ifr.height=279;
ifr.frameborder=0;
ifr.allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture";
ifr.allowfullscreen=true;
document.getElementById("goodBlock").appendChild(ifr);
getPhrase(); getPhrase();
}; };
getFile(reader); getFile(reader);
@ -79,52 +61,75 @@
window.onload = ()=>doLoad(); window.onload = ()=>doLoad();
doLoad(); //So let's try loading ASAP, and if that fails then wait for the load event doLoad(); //So let's try loading ASAP, and if that fails then wait for the load event
/**
* Creates iframe and displays container div.
* @param videoID YouTube video ID
* @param blockID Container div ID
* @param iframeID Created Iframe ID
*/
function createIframe(videoID, blockID, iframeID) { //Create iframes each time so it's not recorded in history
const ifr = document.createElement("iframe"); //Create dynamically to prevent caching
ifr.id=iframeID;
ifr.width=496;
ifr.height=279;
ifr.frameborder=0;
ifr.allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture";
ifr.allowfullscreen=true;
ifr.src="https://www.youtube.com/embed/"+videoID;
const block=document.getElementById(blockID);
block.appendChild(ifr);
block.style.display="block";
}
function checkResp() { function checkResp() {
var val=document.getElementById("response").value; const val = document.getElementById("response").value;
if(val<0) return; if(val<0) return;
console.log(data[val]); console.log(data[val]);
document.getElementById("respyt").src="https://www.youtube.com/embed/"+data[val][2]; createIframe(data[val][2], "respBlock", "respyt");
if(val==good) { let res;
var res=document.getElementById("resultH"); if(Number(val)===good) {
res=document.getElementById("resultH");
res.innerText="Correct!"; res.innerText="Correct!";
res.style="color: #00AA00"; res.style.color="#00AA00";
res=document.getElementById("resultP"); res=document.getElementById("resultP");
res.innerHTML="Your answer is correct!<br>You can watch the video below:"; res.innerHTML="Your answer is correct!<br>You can watch the video below:";
res.style="color: #00AA00"; res.style.color="#00AA00";
document.getElementById("score").innerText++; document.getElementById("score").innerText++;
document.getElementById("score").innerText++; document.getElementById("score").innerText++;
document.getElementById("score").innerText++; document.getElementById("score").innerText++;
document.getElementById("score").innerText++; //Heh - fixes casting problems document.getElementById("score").innerText++; //Heh - fixes casting problems
} }
else { else {
var res=document.getElementById("resultH"); res=document.getElementById("resultH");
res.innerText="Wrong!"; res.innerText="Wrong!";
res.style="color: #AA0000"; res.style.color="#AA0000";
res=document.getElementById("resultP"); res=document.getElementById("resultP");
res.innerHTML="The correct answer is: \""+data[good][1]+"\"<br>" res.innerHTML="The correct answer is: \""+data[good][1]+"\"<br>"
+ "You can watch both of the videos below:"; + "You can watch both of the videos below:";
res.style="color: #AA0000"; res.style.color="#AA0000";
document.getElementById("goodyt").src="https://www.youtube.com/embed/"+data[good][2]; createIframe(data[good][2], "goodBlock", "goodyt");
document.getElementById("goodBlock").style="display: block";
document.getElementById("score").innerText--; document.getElementById("score").innerText--;
document.getElementById("score").innerText--; document.getElementById("score").innerText--;
} }
document.getElementById("respBlock").style="display: block"; document.getElementById("sendbtn").style.display="none";
document.getElementById("sendbtn").style="display: none"; document.getElementById("anotherbtn").style.cssText="";
document.getElementById("anotherbtn").style="";
} }
function reset() { function reset() {
document.getElementById("response").innerHTML='<option value="-1" default>-- Choose a video --</option>'; document.getElementById("response").innerHTML='<option value="-1" default>-- Choose a video --</option>';
document.getElementById("goodBlock").style="display: none"; document.getElementById("goodBlock").style.display="none";
document.getElementById("respBlock").style="display: none"; document.getElementById("respBlock").style.display="none";
document.getElementById("sendbtn").style=""; document.getElementById("respyt").remove();
document.getElementById("anotherbtn").style="display: none"; const goodyt=document.getElementById("goodyt");
if(goodyt)
goodyt.remove();
document.getElementById("sendbtn").style.cssText="";
document.getElementById("anotherbtn").style.cssText="display: none";
getPhrase(); getPhrase();
} }
function makeOptions() { function makeOptions() {
for(var i = (good>=2?good-2:0); i < data.length&&i<good+2; i++) { for(var i = (good>=2?good-2:0); i < data.length&&i<good+2; i++) {
var opt=document.createElement("option"); var opt=document.createElement("option");
@ -135,29 +140,29 @@
} }
} }
</script> </script>
</head> </head>
<body> <body>
<div style="max-width: 500px; margin: auto"> <div style="max-width: 500px; margin: auto">
<h1>Guess the video!</h1> <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 <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> 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> <h4>Score: <span id="score">20</span></h4>
<h3 id="phrase">Please enable JavaScript or wait :P</h3> <h3 id="phrase">Please enable JavaScript or wait :P</h3>
<select id="response" style="max-width: 500px"> <select id="response" style="max-width: 500px">
<option value="-1" default>-- Choose a video --</option> <option value="-1" default>-- Choose a video --</option>
</select> </select>
<br> <br>
<button onclick="checkResp()" id="sendbtn">Send</button> <button onclick="checkResp()" id="sendbtn">Send</button>
<button onclick="reset()" id="anotherbtn" style="display: none">Another one</button> <button onclick="reset()" id="anotherbtn" style="display: none">Another one</button>
<div id="respBlock" style="display: none"> <div id="respBlock" style="display: none">
<h3 id="resultH"></h3> <h3 id="resultH"></h3>
<p id="resultP"></p> <p id="resultP"></p>
<p>Your response:</p> <p>Your response:</p>
</div> </div>
<div id="goodBlock" style="display: none"> <div id="goodBlock" style="display: none">
<p>Correct video:</p> <p>Correct video:</p>
</div> </div>
</div> </div>
</body> </body>
</html> </html>

0
docs/phrases.txt → docs/phrases.tsv
View file

Can't render this file because it has a wrong number of fields in line 2.