JSFiddle - React, Tailwind, and code Playground

by dwcribbs

HTML

<script>
     window.onload = function(){ 
var w =screen.availWidth - 20 + "px";
var h =screen.availHeight - 80 + "px";
document.getElementById('full').style= "height:" +  h + ";" + "width:" +  w; +";";
alert(h+w);

checkCookie();
document.getElementsByClassName('box1')[0].addEventListener('click', correct, false); 
document.getElementsByClassName('box1')[0].addEventListener('mouseover', shade, false);
document.getElementsByClassName('box1')[0].addEventListener('mouseout', unshade, false);
document.getElementsByClassName('bg')[0].addEventListener('click', wrong, false);
}

function shade()
{

document.getElementById('button').style= "background-color: #ADD8E6; opacity:.4;";

}

function unshade()
{

document.getElementById('button').style= " ";

}

function loc()
{
var lo = "OS2.html";

return lo;

} 
    
</script>
<div class="wrap">
	<img id="full" style = "height: 500px; width: 500px;"class="bg" src = "http://i.imgur.com/WgsCTDj.gif" >
    <div id="button" style=" " class="box box1"></div>    
</div>

CSS

body{
  background-color: #ADD8E6;
	width: Auto;
	height: Auto;
   
}

#help{background-color: tan;
background-color: tan;
height: 50px;
width: 50px;
z-index:100;
    position:absolute;    
    font-size:40px;
    font-weight:bold;
    left: 1075px;
    top: 30px;
	border: solid black 3px;
	
	
	}
	









#login{
	margin-top: 25%;}
	
	

video{
z-index:100;
    position:absolute;    
    left: 150px;
    top: 75px;
	

}

#instructions{
background-color: tan;
height: 400px;
width: 600px;
z-index:100;
    position:absolute;    
    font-size:24px;
    font-weight:bold;
    left: 325px;
    top: 100px;
	border: solid black 3px;
}

p{font-size: 12pt; 
color: black
}



.wrap {
    position: relative;
    overflow: auto;
}

.bg {
    float: left;
    width: 100%;
}

.box {
    position: absolute;
    cursor: pointer;
}
.box1 {
    top: 95%;
    left: 0;
    width: 7%;
    height: 5%;
}

JavaScript

function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
  {
  x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
  y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
  x=x.replace(/^\s+|\s+$/g,"");
  if (x==c_name)
    {
    return unescape(y);
    }
	
  }
  return false; //get rid of this if something doesnt work
}
 
function setCookie(c_name,value,exdays)
{

var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays===null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
//alert("Your score is " + score);
//alert("Cookie Set");
}
 
function checkCookie(end)
{
var score=getCookie("scorecount");
if (score!==null && score!=="")
  {
  if(end == 'yes')
  {
  
  score = score - 1;

	
	
	
	return score;
	
  //alert("Your score is " + score);
  }
  }
else 
  {
  
  score=1;
  if (score!==null && score!=="")
    {
	
    setCookie("scorecount",score);
    }
  }
  return false;
}

function correct(pgnmbr)
{
var val;


val = getCookie('scorecount');
val = parseInt(val,10)+ 1;// if something doesnt work change back to parseInt(val);
setCookie('scorecount',val);
location.href = loc();

	
}

var clicks = 0;
function wrong(pgnmbr)
{	

clicks++;
 if(clicks < 3)
 {

alert("wrong try again");

}
else
{	
alert("you have exceeded your amount of trys");
	
	
	location.href = loc();
}
}