Adding Bootstrap

This commit is contained in:
Norbi Peti 2018-12-09 18:51:06 +01:00
parent c3e0034d4e
commit 3f61a7ee49
No known key found for this signature in database
GPG key ID: DBA4C4549A927E56
2 changed files with 27 additions and 7 deletions

5
.gitignore vendored Normal file
View file

@ -0,0 +1,5 @@
target/
.idea/
client_secret.*
.*

View file

@ -1,11 +1,24 @@
<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">
<style> <style>
body { body {
background-color: #68caff; 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> </style>
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
<script type="text/javascript"> <script type="text/javascript">
@ -35,6 +48,7 @@
for(var i = 0; i < lines.length; i++){ for(var i = 0; i < lines.length; i++){
var line = lines[i]; var line = lines[i];
data[i] = line.split('\t'); data[i] = line.split('\t');
if(data[i].length<3) data.splice(i, 1);
} }
getPhrase(); getPhrase();
}; };
@ -43,7 +57,6 @@
function checkResp() { function checkResp() {
var val=document.getElementById("response").value; var val=document.getElementById("response").value;
if(val<0) return; if(val<0) return;
document.getElementById("sendbtn").disabled=true;
console.log(data[val]); console.log(data[val]);
document.getElementById("respyt").src="https://www.youtube.com/embed/"+data[val][2]; document.getElementById("respyt").src="https://www.youtube.com/embed/"+data[val][2];
if(val==good) { if(val==good) {
@ -74,13 +87,16 @@
document.getElementById("score").innerText--; document.getElementById("score").innerText--;
} }
document.getElementById("respBlock").style="display: block"; document.getElementById("respBlock").style="display: block";
document.getElementById("sendbtn").style="display: none";
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").disabled=false; document.getElementById("sendbtn").style="";
document.getElementById("anotherbtn").style="display: none";
getPhrase(); getPhrase();
} }
@ -108,8 +124,7 @@
</select> </select>
<br> <br>
<button onclick="checkResp()" id="sendbtn">Send</button> <button onclick="checkResp()" id="sendbtn">Send</button>
<br> <button onclick="reset()" id="anotherbtn" style="display: none">Another one</button>
<button onclick="reset()">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>