silentdan/index.html

## index.html
<html>
    <head>
        <meta charset="utf-8">
        <title>versuch 1</title>
        <link rel="stylesheet" type="text/css" href="style.css">
  </head>

    <body>
        <div id="wrapper">
            <div class="kreis" id="gruenerKreis">
            	<div id="wPunkt"></div>
          </div>
            <div class="kreis" id="roterKreis"></div>
            <div class="kreis" id="gelberKreis"></div>
            <div class="kreis" id="grauerKreis"></div>
            <div class="kreis" id="orangerKreis"></div>
            <div class="kreis" id="blauerKreis"></div>

        <a href="#" onclick="starten();">
          <div id="startButton">START</div>
        </a>

        <form id="Formular" action="">
            <label>Aktuelle Farbe: </label>
            <input type="text" name="content" id="content" style="background-color: #45a588" value="grün" size="10"/>
        </form>
			</div>
    </body>
</html>

## script.js

            // Alle Informationen zu den Kreisen
            var kreisInfo = [
				{"id" : "gruenerKreis", "color" : "gruen", "hexcode" : "#45a588"},
				{"id" : "roterKreis", "color" : "rot", "hexcode" : "#bd3249"},
				{"id" : "gelberKreis", "color" : "gelb", "hexcode" : "#ecdb46"},
                {"id" : "grauerKreis", "color" : "grau", "hexcode" : "#9f9e9d"},
				{"id" : "orangerKreis", "color" : "orange", "hexcode" : "#f4ad71"},
                {"id" : "blauerKreis", "color" : "blau", "hexcode" : "#4989bc"},
			];


            // gesamte Spielzeit zwischen 1 und 10 Sekunden
            // minimale Spielzeit
			var minSpielzeit = 1000;
			// maximale Spielzeit
			var maxSpielzeit = 10000;


            // Wechselzeit zwischen den Kreisen, zwischen 0,2 und 0,8 Sekunden
			// minimale Wechselzeit
			var minSprung = 200;
			// maximale Wechselzeit
			var maxSprung = 800;

			// zufällige Zeit ermitteln
			function getRandom(minimum, maximum){
				if(minimum > maximum){
					return -1;
				}
				else{
					var diff = maximum - minimum;
					var multiplier = Math.random() * diff;
					return Math.round(minimum + multiplier);
				}
			}


            // ermitteln, wo sich der Punkt befindet
			function getAktuellerPunkt(){
				var punkt = document.getElementById("wPunkt");
				//vielleicht ab hier weglassen?
				if(punkt == null){
					// get first index element
					punkt = document.getElementById(kreisInfo[0].id);
					newPunkt = document.createElement("div");
					newPunkt.setAttribute("id","wPunkt");
					punkt.appendChild(newPunkt);
				}
                return punkt;
            }


            // ID des Kreises mit dem weißen Punkt
			function getAktuelleId(){

				var aktuellerPunkt = getAktuellerPunkt();
				var aktuelleId = aktuellerPunkt.parentNode.id;
				return aktuelleId;

			}


            // Index der aktuellen ID
			function getIndex(aktuelleId){
				for(var i = 0; i < kreisInfo.length; i++){
					// weißen Punkt wandern lassen
					if(kreisInfo[i].id == aktuelleId)
					{
						return i;
					}
				}
				return null;
			}


            // weißen Punkt entfernen
			function entfernenPunkt(){
				var aktuellesElement = document.getElementById(getAktuelleId());
				var aktuellerPunkt = getAktuellerPunkt();
				aktuellesElement.removeChild(aktuellerPunkt);
			}


            function wandernPunkt(sprung, spielzeit){
				var aktuelleId = getAktuelleId();
				var i = getIndex(aktuelleId);
				var aktuellesElement;
				var aktuellerPunkt;
				var punkt;
				if(!isNaN(i))
				{
					setTimeout(function(){
						// weißen Punkt vom aktuellen Kreis entfernen
						entfernenPunkt();
						i++;
						// Wenn noch Restspielzeit und kreisInfo durchlaufen, dann von vorne beginnen
						if(i == kreisInfo.length)
						{
							i = 0;
						}
						// Gesamte Spielzeit um die Sprungzeit kürzen
						spielzeit = spielzeit - sprung;
						// Punkt im nächsten Kreis
						aktuellesElement = document.getElementById(kreisInfo[i].id);
						punkt = document.createElement("div");
						punkt.setAttribute("id", "wPunkt");
						aktuellesElement.appendChild(punkt);
						aktuelleId = getAktuelleId();

                        // testen, ob noch Restspielzeit vorhanden
						if (spielzeit > sprung) {
							// falls noch genug Spielzeit, dann weiter wandern
							wandernPunkt(sprung, spielzeit);
						}
						else
						{
							// wenn Spielzeit vorbei, dann Farbe und Bezeichnung des Formulars anpassen
							anpassenAktuelleFarbe(i);
						}

				   	} , sprung);
				}

			}


                // Farbe und Bezeichnung des Formulars
                function anpassenAktuelleFarbe(i){

				    var element = document.getElementById("content");
				    // Formular mit Farbe und Bezeichnung aus Kreisinfo
				    element.style.backgroundColor = kreisInfo[i].hexcode;
				    element.value = kreisInfo[i].color;
				}


                function starten(){
                    // zufällige Gesamtspielzeit
				    var spielzeit = getRandom(minSpielzeit, maxSpielzeit);
				    // zufällige Wechselzeit
				    var sprung = getRandom(minSprung, maxSprung);


                    // weglassen??
				    // only continue if step and timer are correct
				    if(sprung != -1 && spielzeit != -1){
				    //	changeValue("step", step);
					// check timer
				    //	changeValue("timer", timer);
					// cycle through dots
					   wandernPunkt(sprung, spielzeit);
				    }
			     }

## style.css
body {
		font-family: Verdana, Helvetica, sans-serif;
		color: #000;
  	font-size: 12px;
}


#wrapper {
    width: 1000px;
    height:700px;
    margin: 0 auto 200px;
	  position: relative;
}

.kreis {
    width: 200px;
    height: 200px;
    position: absolute;
    border: 1px solid black;
    text-align: center;
    border-radius:100px;

}

#gruenerKreis {
    background-color: #45a588;
    top: 100px;
    left: 250px;
}

#roterKreis {
    background-color: #bd3249;
    top: 100px;
    left: 480px;
}

#blauerKreis {
    background-color: #4989bc;
    top: 300px;
    left: 125px;
}

#gelberKreis {
    background-color: #ecdb46;
    top: 300px;
    left: 600px;
}

#orangerKreis {
    background-color: #f4ad71;
    top: 500px;
    left: 250px;
}

#grauerKreis {
    background-color: #9f9e9d;
    top: 500px;
    left: 480px;
      margin-bottom:200px;
}

#startButton {
    position: absolute;
    top: 375px;
    left: 400px;
    width: 100px;
    border: 2px solid black;
    text-align: center;
    padding: 15px;
}

#wPunkt {
    background-color: white;
    margin: 85px;
    width: 30px;
    height: 30px;
    border: 1px solid black;
    border-radius: 100px;
}


form {
    position: absolute;
    width: 300px;
    height: 200px;
    top: 390px;
    left: 850px;
    }

form label {
    float: left;
    width: 130px;
    padding-top: 10px;
}

form input {
    padding: 10px 15px;
    width: 80px;
    border: solid 3px #000;
  	color: white;
}

/*#link {
    position: absolute;
    width: 200px;
    height: 65px;
    top: 350px;
    left: 360px;
    border: 5px solid black;
    text-align: center;
    padding-top: 35px;
    }

a #link {
    text-decoration: none;
    font-size: 24px;
    font-wight: bold;
    text-transform: uppercase;
    color: #000;
    }*/


## test-aufgabe.markdown

      
    Raw
  

              test-aufgabe.markdown
            
          
    test aufgabe

A Pen by daniel koening on CodePen.
License.
	<html>
	<head>
	<meta charset="utf-8">
	<title>versuch 1</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	</head>

	<body>
	<div id="wrapper">
	<div class="kreis" id="gruenerKreis">
	<div id="wPunkt"></div>
	</div>
	<div class="kreis" id="roterKreis"></div>
	<div class="kreis" id="gelberKreis"></div>
	<div class="kreis" id="grauerKreis"></div>
	<div class="kreis" id="orangerKreis"></div>
	<div class="kreis" id="blauerKreis"></div>

	<a href="#" onclick="starten();">
	<div id="startButton">START</div>
	</a>

	<form id="Formular" action="">
	<label>Aktuelle Farbe: </label>
	<input type="text" name="content" id="content" style="background-color: #45a588" value="grün" size="10"/>
	</form>
	</div>
	</body>
	</html>

	// Alle Informationen zu den Kreisen
	var kreisInfo = [
	{"id" : "gruenerKreis", "color" : "gruen", "hexcode" : "#45a588"},
	{"id" : "roterKreis", "color" : "rot", "hexcode" : "#bd3249"},
	{"id" : "gelberKreis", "color" : "gelb", "hexcode" : "#ecdb46"},
	{"id" : "grauerKreis", "color" : "grau", "hexcode" : "#9f9e9d"},
	{"id" : "orangerKreis", "color" : "orange", "hexcode" : "#f4ad71"},
	{"id" : "blauerKreis", "color" : "blau", "hexcode" : "#4989bc"},
	];


	// gesamte Spielzeit zwischen 1 und 10 Sekunden
	// minimale Spielzeit
	var minSpielzeit = 1000;
	// maximale Spielzeit
	var maxSpielzeit = 10000;


	// Wechselzeit zwischen den Kreisen, zwischen 0,2 und 0,8 Sekunden
	// minimale Wechselzeit
	var minSprung = 200;
	// maximale Wechselzeit
	var maxSprung = 800;

	// zufällige Zeit ermitteln
	function getRandom(minimum, maximum){
	if(minimum > maximum){
	return -1;
	}
	else{
	var diff = maximum - minimum;
	var multiplier = Math.random() * diff;
	return Math.round(minimum + multiplier);
	}
	}



	// ermitteln, wo sich der Punkt befindet
	function getAktuellerPunkt(){
	var punkt = document.getElementById("wPunkt");
	//vielleicht ab hier weglassen?
	if(punkt == null){
	// get first index element
	punkt = document.getElementById(kreisInfo[0].id);
	newPunkt = document.createElement("div");
	newPunkt.setAttribute("id","wPunkt");
	punkt.appendChild(newPunkt);
	}
	return punkt;
	}


	// ID des Kreises mit dem weißen Punkt
	function getAktuelleId(){

	var aktuellerPunkt = getAktuellerPunkt();
	var aktuelleId = aktuellerPunkt.parentNode.id;
	return aktuelleId;

	}



	// Index der aktuellen ID
	function getIndex(aktuelleId){
	for(var i = 0; i < kreisInfo.length; i++){
	// weißen Punkt wandern lassen
	if(kreisInfo[i].id == aktuelleId)
	{
	return i;
	}
	}
	return null;
	}


	// weißen Punkt entfernen
	function entfernenPunkt(){
	var aktuellesElement = document.getElementById(getAktuelleId());
	var aktuellerPunkt = getAktuellerPunkt();
	aktuellesElement.removeChild(aktuellerPunkt);
	}


	function wandernPunkt(sprung, spielzeit){
	var aktuelleId = getAktuelleId();
	var i = getIndex(aktuelleId);
	var aktuellesElement;
	var aktuellerPunkt;
	var punkt;
	if(!isNaN(i))
	{
	setTimeout(function(){
	// weißen Punkt vom aktuellen Kreis entfernen
	entfernenPunkt();
	i++;
	// Wenn noch Restspielzeit und kreisInfo durchlaufen, dann von vorne beginnen
	if(i == kreisInfo.length)
	{
	i = 0;
	}
	// Gesamte Spielzeit um die Sprungzeit kürzen
	spielzeit = spielzeit - sprung;
	// Punkt im nächsten Kreis
	aktuellesElement = document.getElementById(kreisInfo[i].id);
	punkt = document.createElement("div");
	punkt.setAttribute("id", "wPunkt");
	aktuellesElement.appendChild(punkt);
	aktuelleId = getAktuelleId();

	// testen, ob noch Restspielzeit vorhanden
	if (spielzeit > sprung) {
	// falls noch genug Spielzeit, dann weiter wandern
	wandernPunkt(sprung, spielzeit);
	}
	else
	{
	// wenn Spielzeit vorbei, dann Farbe und Bezeichnung des Formulars anpassen
	anpassenAktuelleFarbe(i);
	}

	} , sprung);
	}

	}



	// Farbe und Bezeichnung des Formulars
	function anpassenAktuelleFarbe(i){

	var element = document.getElementById("content");
	// Formular mit Farbe und Bezeichnung aus Kreisinfo
	element.style.backgroundColor = kreisInfo[i].hexcode;
	element.value = kreisInfo[i].color;
	}


	function starten(){
	// zufällige Gesamtspielzeit
	var spielzeit = getRandom(minSpielzeit, maxSpielzeit);
	// zufällige Wechselzeit
	var sprung = getRandom(minSprung, maxSprung);


	// weglassen??
	// only continue if step and timer are correct
	if(sprung != -1 && spielzeit != -1){
	// changeValue("step", step);
	// check timer
	// changeValue("timer", timer);
	// cycle through dots
	wandernPunkt(sprung, spielzeit);
	}
	}
	body {
	font-family: Verdana, Helvetica, sans-serif;
	color: #000;
	font-size: 12px;
	}


	#wrapper {
	width: 1000px;
	height:700px;
	margin: 0 auto 200px;
	position: relative;
	}

	.kreis {
	width: 200px;
	height: 200px;
	position: absolute;
	border: 1px solid black;
	text-align: center;
	border-radius:100px;

	}

	#gruenerKreis {
	background-color: #45a588;
	top: 100px;
	left: 250px;
	}

	#roterKreis {
	background-color: #bd3249;
	top: 100px;
	left: 480px;
	}

	#blauerKreis {
	background-color: #4989bc;
	top: 300px;
	left: 125px;
	}

	#gelberKreis {
	background-color: #ecdb46;
	top: 300px;
	left: 600px;
	}

	#orangerKreis {
	background-color: #f4ad71;
	top: 500px;
	left: 250px;
	}

	#grauerKreis {
	background-color: #9f9e9d;
	top: 500px;
	left: 480px;
	margin-bottom:200px;
	}

	#startButton {
	position: absolute;
	top: 375px;
	left: 400px;
	width: 100px;
	border: 2px solid black;
	text-align: center;
	padding: 15px;
	}

	#wPunkt {
	background-color: white;
	margin: 85px;
	width: 30px;
	height: 30px;
	border: 1px solid black;
	border-radius: 100px;
	}


	form {
	position: absolute;
	width: 300px;
	height: 200px;
	top: 390px;
	left: 850px;
	}

	form label {
	float: left;
	width: 130px;
	padding-top: 10px;
	}

	form input {
	padding: 10px 15px;
	width: 80px;
	border: solid 3px #000;
	color: white;
	}

	/*#link {
	position: absolute;
	width: 200px;
	height: 65px;
	top: 350px;
	left: 360px;
	border: 5px solid black;
	text-align: center;
	padding-top: 35px;
	}

	a #link {
	text-decoration: none;
	font-size: 24px;
	font-wight: bold;
	text-transform: uppercase;
	color: #000;
	}*/