Karteireiter

<!DOCTYPE html>
<html>
<head>
	<title>Voc Trainer</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" type="text/css" media="screen" href="styles.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script src="voctrainer.js"></script>
</head>

<body>

<header>
	<h1>Voc Trainer</h1>
    <div id="sprachen">
    	<img src="img/englisch.png" class="inaktiv" id="englisch" />
    	<img src="img/franz.png" class="inaktiv" id="franz" />
        <img src="img/italienisch.png" class="inaktiv" id="italienisch" />
    </div>
<header>

</body>
</html>

html {
	font-family:Verdana, Geneva, sans-serif;	
	max-width: 470px;
	margin-left; 2px;
	margin-right: 2px;
}

header{
	position: relative;	
}

header h1 {
	text-shadow: -2px -2px 2px grey;
	font-size: 1.8em;	
	margin-top: 2px;
}

header #sprachen {
	position: absolute;
	top: 3px;
	right: 0px;
}

#sprachen .inaktiv {
	opacity: 0.2;
	cursor: pointer;
}

#sprachen .aktiv {
	opacity: 1;
	border: 1px solid black;
}

nav#auswahl {
	margin-bottom: 20px;	
}

nav#auswahl a {
	display: inline-block;
	background-color: #06C;
	color: white;
	padding: 2px 5px;
	text-decoration: none;
	font-size: 1.1em;
	margin-bottom: 5px;
}

nav#auswahl a:hover {
	background-color:#0C6;
}

nav#auswahl a.aktiv {
	background-color:#0C6;
	cursor:default;
}

#training {
	display: none;	
}

#ausgabe {
	margin-top: 20px;
	margin-bottom: 20px;
	font-size: 1em;
	font-weight: bold;	
}

#loesung {
	margin-top: 20px;
	margin-bottom: 20px;
	color:#093;	
	font-size: 1em;
}

input {
	font-weight: bold;	
	font-size: 1em;
}

#btnFalsch{
	background-color:#FF0000;
	color: white;	
	display: none;
}

#btnRichtig {
	background-color:#009900;
	color: white;
	display: none;
}

#KorrektTotal {
	font-size: 0.8em;
	margin-top: 20px;
	margin-right: 10px;
	text-align:right;	
}

var sprache = "englisch";
var daten = new Array();
var total = 0;
var id = 0;
var beantwortet = 0;

$(document).ready(function(e) {
	// Standard Sprache laden (Themen holen und Fahne aktivieren)
	$("#"+sprache).attr("class", "aktiv");
	$.get("getsubjects.php", { sprache:sprache }, function(data){
		$("#auswahl").html(data);
	});
	
	// Durch Klick auf Fahne wird Sprache geändert und Themen geholt
	var fahnen = $("#sprachen img");
	fahnen.click(function() {
		sprache = $(this).attr("id");
		fahnen.attr("class", "inaktiv");
		$("#"+sprache).attr("class", "aktiv");
		$.get("getsubjects.php", { sprache:sprache }, function(data){
			$("#auswahl").html(data);
		});
		// Training ausblenden
		$("#training").hide();
		
    });
	
	// wenn Auswahl getroffen:
	$("#auswahl").on("click","a", function(e) {
		e.preventDefault(); // href soll nicht ausgeführt werden
		var thema = $(this).attr("href");
		
		// ausgewähltes Thema "aktiv" schalten (vorher alle Links inaktiv)
		$("#auswahl a").removeClass("aktiv");
		$(this).attr("class", "aktiv");
		
		// Vorbereitungen
		beantwortet = 0;
		$("#loesung").html("");
		$("#korrekt").html("0");
		$("#btnRichtig").hide();
		$("#btnFalsch").hide();
		
		// Daten aus Txt-File holen
		$.get("getdata.php", { sprache:sprache, thema:thema }, function(words){
			//alert(words);
			//return;
			daten = $.parseJSON(words);
			
			// Zufalls-ID für daten erstellen
			total = daten.length;
			id = Math.floor(Math.random() * total);
			
			// daten ausgeben
			$("#ausgabe").html(daten[id][0]);
			$("#total").html(total);
			
			// training einblenden
			$("#training").show();	
		});
			
	});
	
	// Lösung anzeigen:
	$("#btnSolution").click(function() {	
		var code = "<b>" + daten[id][1] + "</b>";
		$("#loesung").html(code);
		$("#btnRichtig").show();
		$("#btnFalsch").show();
	});
	
	// Richtig
	$("#btnRichtig").click(function() {
        //richtiges Wort aus daten-Array löschen
		daten.splice(id,1);
		
		$("#loesung").html("");
		$("#btnRichtig").hide();
		$("#btnFalsch").hide();
		
		beantwortet++;
		$("#korrekt").html(beantwortet);
		if (beantwortet == total) {
			alert("Alle Fragen beantwortet!");	
		}
		else {
			// wenn noch nicht alle Fragen beantwortet wieder neue Zufalls-ID generieren
			id = Math.floor(Math.random() * (daten.length));
			$("#ausgabe").html(daten[id][0]);
		}
    });
	
	// Falsch
	$("#btnFalsch").click(function() {
        // wenn Antwort falsch wird zum nächsten Word gewechselt (wieder neue Zufalls-ID)
		// das falsche Wort nicht aus dem Array gelöscht
		$("#loesung").html("");
		$("#btnRichtig").hide();
		$("#btnFalsch").hide();
		id = Math.floor(Math.random() * (daten.length));
		$("#ausgabe").html(daten[id][0]);
    });
});