<html>
<head>
<title>1x1-Kletterer</title>

<style>
h1{font-family:Verdana,Arial,Helvetica; font-size:36pt}
span,input{font-family:Verdana,Arial,Helvetica; font-size:48pt}
input.eingabe{width:200px}
td{text-align:center}
td.haken{width:45px; color:green;}
.hilfebutton {width:80; height:80; font-size:36}
</style>


<script type="text/javascript">
var ergebnis = 9999;
var antwort = 9998;
var hinweistext="";
var rechnungsnr=0;
var hinweistext="";
var fehler=0;
var hilfeAnschreiben = false;

function arrayShuffle(){
  var tmp, rand;
  for(var i =0; i < this.length; i++){
    rand = Math.floor(Math.random() * this.length);
    tmp = this[i]; 
    this[i] = this[rand]; 
    this[rand] =tmp;
  }
}
Array.prototype.shuffle =arrayShuffle;


function neueListe() {
//	multiplikatorEinfach = [0, 1];
multiplikatorEinfach = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
//document.write("Originalliste: ", multiplikator, "<br>");
	multiplikatorEinfach.shuffle();

	multiplikator1 = [].concat(multiplikatorEinfach);
	//document.write("me: ", multiplikator1, "<br>");

	multiplikator1.shuffle();
	multiplikator = multiplikator1.concat(multiplikatorEinfach);

//document.write("Neue Liste: ", multiplikator, "<br>");
}



function rechnungAnschreiben(nr) {
	if (multiplikator[nr] < multiplikator.length) {
		document.getElementById("antwortfeld").value="";

		if (hilfeAnschreiben == true) {
			var btnName = "";
			var i;
			for (i=0;i<11;i++) {
				btnName = "hbtn" + i.toString();
				document.getElementById(btnName).innerHTML = multiplikand * i;
			}
		}

		if (nr < multiplikator.length /2) {
			document.getElementById("multiplikatorfeld").innerHTML = multiplikand;
			document.getElementById("multiplikandfeld").innerHTML = multiplikator[nr];
		}
		else {
			document.getElementById("multiplikandfeld").innerHTML = multiplikand;
			document.getElementById("multiplikatorfeld").innerHTML = multiplikator[nr];
		}
		document.getElementById("antwortfeld").focus();
	}
}


function hilfebuttonWeiterleiten(inhalt) {
	document.getElementById("antwortfeld").value = inhalt;
	document.getElementById("btnKontrolle").click();
	//kontrolle(inhalt);
}

function kontrolle(nr) {
	if (hilfeAnschreiben == true){fehler++;}

	var info="";
	if (nr < multiplikator.length) {
		antwort=document.getElementById("antwortfeld").value;
		ergebnis=Number(multiplikand) * Number(multiplikator[nr]);
		if (Number(antwort) == Number(ergebnis)) {
			rechnungsnr++;
			rechnungAnschreiben(rechnungsnr);
			var kletterhoehe = 240 - (rechnungsnr * 10);
			document.getElementById("kletterer").setAttribute("y", kletterhoehe);
			document.getElementById("infotext").setAttribute("y", kletterhoehe+10);
			if (nr==multiplikator.length-1) {
				info = "Juhu! " + multiplikand.toString() + "er-Reihe geschafft!";
				document.getElementById("infotext").textContent=info;
				if (fehler == 0) {
					document.getElementById(multiplikand).innerHTML="&hearts;";
				}
				else {
					document.getElementById(multiplikand).innerHTML="&#10003;";
				}
			}
			else {
				info = (nr+1).toString() + ". Rechnung";
				document.getElementById("infotext").textContent=info;
			}
		}
		else {
			document.getElementById("antwortfeld").select();
			fehler++;
		}
	}
	else {
		alert("ENDE");
	}
}


function radioWert(rObj) {
    for (var i=0; i<rObj.length; i++) if (rObj[i].checked) return rObj[i].value;
    return false;
}



function starten() {
	multiplikand=Number(radioWert(document.malreihen.malreihe));
	//document.write(multiplikand, "<br>");
	//document.write(multiplikator, "<br>");
	//document.write(multiplikator.length,"<br>");
	neueListe();
	rechnungsnr=0;
	hinweistext="";
	fehler=0;
	document.getElementById("rechnung").style.display="block";
	rechnungAnschreiben(rechnungsnr);
	document.getElementById("kletterer").setAttribute("y", 250);
	document.getElementById("infotext").setAttribute("y", 263);
	document.getElementById("infotext").textContent="START"
//				document.getElementById(multiplikand).innerHTML="&#10003;";
}

function toggleHilfe() {
	if (hilfeAnschreiben == false) {
		hilfeAnschreiben = true;
		document.getElementById("toggleHilfe").innerHTML = "Hilfe ausschalten";
		document.getElementById("hilfeButtons").style.display = "block";
	}
	else {
		hilfeAnschreiben = false;
		document.getElementById("toggleHilfe").innerHTML = "Hilfe einschalten";
		document.getElementById("hilfeButtons").style.display = "none";
		var btnName = "";
		var i;
		for (i=0;i<11;i++) {
			btnName = "hbtn" + i.toString();
			document.getElementById(btnName).innerHTML = "";
		}
	}
}

</script>

<head>

<body>
<a href="../../index.html">Startseite</a>
<hr>

<table>
<tr>
<td><h1>1x1 Kletterer</h1></td>
<td width="150px"><button id="toggleHilfe" onclick="toggleHilfe();">Hilfe einschalten</button></td>
<td width="50"></td>
<td>&copy; Gerhard Schacherl, 2015/2018<br />Version 2.03</td>
</tr>
</table>

<table style="background-color:#f0f0f0">
<tr>
<form name="malreihen">
<td class="haken"><input type="radio" name="malreihe" value="1">1</td>
<td class="haken"><input type="radio" name="malreihe" value="2">2</td>
<td class="haken"><input type="radio" name="malreihe" value="3">3</td>
<td class="haken"><input type="radio" name="malreihe" value="4">4</td>
<td class="haken"><input type="radio" name="malreihe" value="5" checked>5</td>
<td class="haken"><input type="radio" name="malreihe" value="6">6</td>
<td class="haken"><input type="radio" name="malreihe" value="7">7</td>
<td class="haken"><input type="radio" name="malreihe" value="8">8</td>
<td class="haken"><input type="radio" name="malreihe" value="9">9</td>
<td class="haken"><input type="radio" name="malreihe" value="10">10</td>
</form>
</td>



<td rowspan="2">
<input type="button" id="starten" value="START" onclick="starten();"></input>
</td>

</tr>


<tr>
<td class="haken" id="1">&nbsp;</td>
<td class="haken" id="2">&nbsp;</td>
<td class="haken" id="3">&nbsp;</td>
<td class="haken" id="4">&nbsp;</td>
<td class="haken" id="5">&nbsp;</td>
<td class="haken" id="6">&nbsp;</td>
<td class="haken" id="7">&nbsp;</td>
<td class="haken" id="8">&nbsp;</td>
<td class="haken" id="9">&nbsp;</td>
<td class="haken" id="10">&nbsp;</td>
</tr>
</table>
</td>

</tr>
</table><br><br>


<div id="rechnung" name="rechnung" style="display:none">
  <span id="multiplikandfeld">   </span>
  <span id="x">x</span>
  <span id="multiplikatorfeld"> </span>
  <span id="istgleich">=</span>
  <input class="eingabe" type="number" id="antwortfeld" autofocus onkeydown="if (event.keyCode == 13) kontrolle(rechnungsnr)"></input>
  <input id="btnKontrolle" type="button" accesskey="K" value="OK" onclick="kontrolle(rechnungsnr);"></input><br>
  <br><br>

<div id="hilfeButtons" style="display:none;">
  <button id="hbtn0" class="hilfebutton" onclick="hilfebuttonWeiterleiten(this.innerHTML);"></button>
  <button id="hbtn1" class="hilfebutton" onclick="hilfebuttonWeiterleiten(this.innerHTML);"></button>
  <button id="hbtn2" class="hilfebutton" onclick="hilfebuttonWeiterleiten(this.innerHTML);"></button>
  <button id="hbtn3" class="hilfebutton" onclick="hilfebuttonWeiterleiten(this.innerHTML);"></button>
  <button id="hbtn4" class="hilfebutton" onclick="hilfebuttonWeiterleiten(this.innerHTML);"></button>
  <button id="hbtn5" class="hilfebutton" onclick="hilfebuttonWeiterleiten(this.innerHTML);"></button>
  <button id="hbtn6" class="hilfebutton" onclick="hilfebuttonWeiterleiten(this.innerHTML);"></button>
  <button id="hbtn7" class="hilfebutton" onclick="hilfebuttonWeiterleiten(this.innerHTML);"></button>
  <button id="hbtn8" class="hilfebutton" onclick="hilfebuttonWeiterleiten(this.innerHTML);"></button>
  <button id="hbtn9" class="hilfebutton" onclick="hilfebuttonWeiterleiten(this.innerHTML);"></button>
  <button id="hbtn10" class="hilfebutton" onclick="hilfebuttonWeiterleiten(this.innerHTML);"></button>
</div>
</div>


<svg id="berg" width="400" height="300" xmlns="http://www.w3.org/2000/svg"
	xmlns:xlink="http://www.w3.org/1999/xlink">

	<path d="M0,250 l200,-200 l200,200 z"
          style="stroke:#660000; fill:#f0f0f0;"/>

	<svg id="kletterer" x="190" y="250">
		<path d="M10,4 l0,11 l-3,-3 l-5,10 l-2,-2 
			      M10,15 l3,-3  l5,10  l2,-2
			 M10,8 l-7,-7
			 M10,8 l7,-7 "
	          style="stroke:#660000; fill:none;"/>
		<circle cx="10" cy="2" r="2" style="stroke:#006600; fill:#cc0000" />
	</svg>
	<text id="infotext" x="220" y="270">START</text> 
</svg>
<br><br>

</body>
</html>