blinker / firefox.plugin / data / hidden.html @ a03cd52e
History | View | Annotate | Download (5.237 KB)
| 1 |
<html>
|
|---|---|
| 2 |
<head>
|
| 3 |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> |
| 4 |
<title>Blickbrowser</title> |
| 5 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> |
| 6 |
|
| 7 |
<style>
|
| 8 |
|
| 9 |
a:hover,a:active,a:link,a:visited{
|
| 10 |
text-decoration: none;
|
| 11 |
color:white;
|
| 12 |
}
|
| 13 |
|
| 14 |
.button {
|
| 15 |
width: 250px;
|
| 16 |
text-align: center;
|
| 17 |
display:inline-block;
|
| 18 |
font-size: 2em;
|
| 19 |
font-family: arial;
|
| 20 |
padding:5px;
|
| 21 |
background-color: #13D1EB;
|
| 22 |
border: 2px solid #11BCD3;
|
| 23 |
position: absolute;
|
| 24 |
|
| 25 |
}
|
| 26 |
|
| 27 |
</style>
|
| 28 |
|
| 29 |
</head>
|
| 30 |
<body>
|
| 31 |
|
| 32 |
|
| 33 |
<a class="button nein" id="frosch" href="#frosch">FROSCH</a> |
| 34 |
<a class="button nein" id="krokodil" href="#krokodil">KROKODIL</a> |
| 35 |
<a class="button ja" id="affe" href="#affe">AFFE</a> |
| 36 |
<a class="button nein" id="spinne" href="#spinne">SPINNE</a> |
| 37 |
<a class="button ja" id="pferd" href="#pferd">PFERD</a> |
| 38 |
<a class="button ja" id="maus" href="#maus">MAUS</a> |
| 39 |
<a class="button nein" id="fisch" href="#fisch">FISCH</a> |
| 40 |
<a class="button ja" id="giraffe" href="#giraffe">GIRAFFE</a> |
| 41 |
<a class="button ja" id="zebra" href="#zebra">ZEBRA</a> |
| 42 |
<a class="button nein" id="huhn" href="#huhn">HUHN</a> |
| 43 |
<a class="button nein" id="eidechse" href="#eidechse">EIDECHSE</a> |
| 44 |
<a class="button nein" id="schildkroete" href="#schildkroete">SCHILDKRÖTE</a> |
| 45 |
<a class="button ja" id="elefant" href="#elefant">ELEFANT</a> |
| 46 |
<a class="button ja" id="katze" href="#katze">KATZE</a> |
| 47 |
<a class="button nein" id="strauss" href="#strauss">STRAUSS</a> |
| 48 |
<a class="button ja" id="kuh" href="#kuh">KUH</a> |
| 49 |
<a class="button ja" id="hund" href="#hund">HUND</a> |
| 50 |
<a class="button nein" id="schlange" href="#schlange">SCHLANGE</a> |
| 51 |
<a class="button ja" id="schwein" href="#schwein">SCHWEIN</a> |
| 52 |
<a class="button nein" id="wurm" href="#wurm">WURM</a> |
| 53 |
|
| 54 |
|
| 55 |
|
| 56 |
<a id="restart" href="#" onclick="resetPage()">Restart</a>. |
| 57 |
<div id="testingResults"></div> |
| 58 |
<script>
|
| 59 |
var mylocation = location.href;
|
| 60 |
if (mylocation.indexOf("#") > -1){
|
| 61 |
mylocation = mylocation.substring(0,(mylocation.indexOf("#")));
|
| 62 |
}
|
| 63 |
//alert(mylocation);
|
| 64 |
|
| 65 |
var dauer = Date.now();
|
| 66 |
|
| 67 |
var animalarray = [];
|
| 68 |
var timeinterval;
|
| 69 |
var lastHash = "none";
|
| 70 |
|
| 71 |
function resetPage(){
|
| 72 |
location.href = mylocation;
|
| 73 |
}
|
| 74 |
|
| 75 |
function checkForHash(){
|
| 76 |
|
| 77 |
if (location.hash.indexOf('#') > -1){
|
| 78 |
|
| 79 |
var newHash = location.hash.substring(1);
|
| 80 |
if (newHash != lastHash){
|
| 81 |
|
| 82 |
if ($('#'+newHash).hasClass('ja')){
|
| 83 |
console.log("Richtig: "+newHash);
|
| 84 |
|
| 85 |
|
| 86 |
//console.log("animalarray: "+animalarray);
|
| 87 |
if (animalarray.indexOf(newHash) < 0){
|
| 88 |
animalarray.push(newHash);
|
| 89 |
}
|
| 90 |
|
| 91 |
//alert('ja');
|
| 92 |
$('#'+newHash).css("background-color","#00FF00");
|
| 93 |
} else {
|
| 94 |
//alert('nein');
|
| 95 |
console.log("Falsch: "+newHash);
|
| 96 |
$('#'+newHash).css("background-color","#FF0000");
|
| 97 |
}
|
| 98 |
|
| 99 |
|
| 100 |
|
| 101 |
}
|
| 102 |
if (animalarray.length == 10){
|
| 103 |
clearInterval(timeinterval);
|
| 104 |
if (confirm("Durchgang abgeschlossen.\nDauer:"+((Date.now() - dauer)/1000) + " Sek.")){
|
| 105 |
resetPage();
|
| 106 |
}
|
| 107 |
}
|
| 108 |
lastHash = newHash;
|
| 109 |
|
| 110 |
}
|
| 111 |
|
| 112 |
|
| 113 |
}
|
| 114 |
|
| 115 |
function resetPosition(arr,positions){
|
| 116 |
for (var k = 0; k < 20 ; k++ ){
|
| 117 |
arr[k].style.left = positions[k].x;
|
| 118 |
arr[k].style.top = positions[k].y;
|
| 119 |
}
|
| 120 |
}
|
| 121 |
|
| 122 |
function shuffle(array) {
|
| 123 |
var currentIndex = array.length, temporaryValue, randomIndex ;
|
| 124 |
|
| 125 |
// While there remain elements to shuffle...
|
| 126 |
while (0 !== currentIndex) {
|
| 127 |
|
| 128 |
// Pick a remaining element...
|
| 129 |
randomIndex = Math.floor(Math.random() * currentIndex);
|
| 130 |
currentIndex -= 1;
|
| 131 |
|
| 132 |
// And swap it with the current element.
|
| 133 |
temporaryValue = array[currentIndex];
|
| 134 |
array[currentIndex] = array[randomIndex];
|
| 135 |
array[randomIndex] = temporaryValue;
|
| 136 |
}
|
| 137 |
|
| 138 |
return array;
|
| 139 |
}
|
| 140 |
|
| 141 |
var alleButtons = document.getElementsByClassName("button");
|
| 142 |
|
| 143 |
console.log("NumOfButtons: "+alleButtons.length);
|
| 144 |
|
| 145 |
var positionen = [
|
| 146 |
|
| 147 |
{x: window.innerWidth*0.05,y: window.innerHeight*0.15 },
|
| 148 |
{x: window.innerWidth*0.235,y: window.innerHeight*0.15 },
|
| 149 |
{x: window.innerWidth*0.42,y: window.innerHeight*0.15 },
|
| 150 |
{x: window.innerWidth*0.61 ,y: window.innerHeight*0.15 },
|
| 151 |
{x: window.innerWidth*0.8,y: window.innerHeight*0.15 },
|
| 152 |
|
| 153 |
{x: window.innerWidth*0.05,y: window.innerHeight*0.35 },
|
| 154 |
{x: window.innerWidth*0.235,y: window.innerHeight*0.35 },
|
| 155 |
{x: window.innerWidth*0.42,y: window.innerHeight*0.35 },
|
| 156 |
{x: window.innerWidth*0.61 ,y: window.innerHeight*0.35 },
|
| 157 |
{x: window.innerWidth*0.8,y: window.innerHeight*0.35 },
|
| 158 |
|
| 159 |
{x: window.innerWidth*0.05,y: window.innerHeight*0.55 },
|
| 160 |
{x: window.innerWidth*0.235,y: window.innerHeight*0.55 },
|
| 161 |
{x: window.innerWidth*0.42,y: window.innerHeight*0.55 },
|
| 162 |
{x: window.innerWidth*0.61,y: window.innerHeight*0.55 },
|
| 163 |
{x: window.innerWidth*0.8,y: window.innerHeight*0.55 },
|
| 164 |
|
| 165 |
{x: window.innerWidth*0.05,y: window.innerHeight*0.75 },
|
| 166 |
{x: window.innerWidth*0.235,y: window.innerHeight*0.75 },
|
| 167 |
{x: window.innerWidth*0.42,y: window.innerHeight*0.75 },
|
| 168 |
{x: window.innerWidth*0.61,y: window.innerHeight*0.75 },
|
| 169 |
{x: window.innerWidth*0.8,y: window.innerHeight*0.75 }
|
| 170 |
|
| 171 |
];
|
| 172 |
|
| 173 |
shuffle(positionen);
|
| 174 |
|
| 175 |
resetPosition(alleButtons,positionen);
|
| 176 |
|
| 177 |
timeinterval = window.setInterval(function(){ checkForHash(); }, 100);
|
| 178 |
</script>
|
| 179 |
</body>
|
| 180 |
</html>
|