From 68b8c7c21493e1d328b09acc5b461cf08ef1a826 Mon Sep 17 00:00:00 2001
From: Waescheklammer <33402322+Waescheklammer@users.noreply.github.com>
Date: Tue, 9 Apr 2019 18:53:02 +0200
Subject: [PATCH 1/4] Update index.js
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Module switch patched
Bug: nach 2. ausführen springt die Fragenschleife nach 0 sofort auf 3, später direkt auf 3 & Correct zähler funktioniert beim 2. Durchlauf nicht mehr
---
 index.js | 57 +++++++++++++++++++++++++++++++++++++++-----------------
 1 file changed, 40 insertions(+), 17 deletions(-)

diff --git a/index.js b/index.js
index 0861356..65fc7c8 100644
--- a/index.js
+++ b/index.js
@@ -10,6 +10,9 @@
 								*Button LösungenText
 								*Noten anzeigen/Mit Lösungen verbinden
 								*Desktop CSS Layout
+								*ASYNC Event listeners -> nicht synchron mit fetch
+									-> Hat keine daten, feuert bevor fetch geladen wird
+								*BUG:bei zweitem durchlauf komisches verhalten
  */
 
 let menu = document.getElementById("main__menu");
@@ -39,13 +42,15 @@ function fetchRequest(addr){
 			}).then(data => {
 				localStorage.setItem("notes", JSON.stringify(data.notes));
 				localStorage.setItem("solution", JSON.stringify(data.solution));
+				insertFirstPage();
+				responseButtons();
 			}).catch(err => {
 			  // Do something for an error here
 			});
 		}
 
 
-fetchRequest(fetchAddr);
+//fetchRequest(fetchAddr);
 
 //---------------------------
 //		Render Buttons
@@ -74,7 +79,6 @@ function randomizeChoiceButtons(buttons, randomDec){
 	}	
 }
 
-randomizeChoiceButtons(buttons, randomChoice);
 
 
 
@@ -89,8 +93,7 @@ function renderRenderbody(solutionIndex){
 	let textArr=JSON.parse(localStorage.getItem("notes"));
 	document.getElementById("renderParagraph").innerHTML= textArr[solutionIndex];
 }
-
-renderRenderbody(solutionIndex);
+//Überspring 2 und 3
 
 
 //---------------------------
@@ -102,7 +105,7 @@ let solutionValue = JSON.parse(localStorage.getItem("solution"));
 //Setzt nächsten Rendering Content zusammen/ wechselt zur nächsten Seite & summiert richtige Antworten
 function handleButton(event){
 	let h = JSON.parse(localStorage.getItem("solution"));
-
+	console.log(solutionIndex);
 	let lastPage = () => {
 		jP.innerHTML = Correct +"/4";
 		quiz.classList.add("hidden");
@@ -117,11 +120,11 @@ function handleButton(event){
 		renderRenderbody(solutionIndex);
 	}
 
-
 	if (event === solutionValue[solutionIndex]) {
 		if(solutionIndex === 3){
 			Correct+=1;
-			lastPage();	
+			lastPage();
+			solutionIndex=0;	
 		}
 		else
 		{
@@ -130,25 +133,43 @@ function handleButton(event){
 		}
 	}
 	else{
-		if(solutionIndex === 3){lastPage();}
+		if(solutionIndex === 3){lastPage();
+			solutionIndex=0;
+		}
 		else
-		{nextPage();}
+		{
+			nextPage();
+		}
 	}
 }
 
+function insertFirstPage(){
+	menu.classList.add("hidden");
+	quiz.classList.remove("hidden");
+	renderRenderbody(solutionIndex);
+	randomizeChoiceButtons(buttons, randomChoice);
+}
+
+//fect('http://192.168.0.108:8000/Modul2.json');
 //Start Button
 document.getElementById("form_button").addEventListener('click', () =>{
 	var sel = document.getElementById("menuform").value;
-	if (sel !== 'Modul') {
-		menu.classList.add("hidden");
-		quiz.classList.remove("hidden");
-		renderRenderbody(solutionIndex);
+	const mod2Addr= 'http://192.168.0.108:8000/Modul2.json'; 
+	const mod1Addr= 'http://192.168.0.108:8000/Modul1.json'; 
+
+	if(sel === 'Bassschlüssel'){
+		localStorage.clear();
+		fetchRequest(mod2Addr);
 	}
-	else
-	{
+	if(sel === 'Violinschlüssel'){
+		localStorage.clear();
+		fetchRequest(mod1Addr);
+	}
+	if (sel !== 'Modul') {
 		form.classList.add("main__choicebox--redLine");
 	}
-})
+	
+});
 
 //Restart Button
 document.getElementById("statistic__button").addEventListener('click', () =>{
@@ -162,7 +183,8 @@ document.getElementById("statistic__button").addEventListener('click', () =>{
 });
 
 // Quiz Buttons
-document.getElementById("main__choicebox").addEventListener('click', function(event){
+function responseButtons(){
+	document.getElementById("main__choicebox").addEventListener('click', function(event){
 	let elem = event.target.id;
 
 	if(elem === buttons[0]){
@@ -182,3 +204,4 @@ document.getElementById("main__choicebox").addEventListener('click', function(ev
 		handleButton(buttonText);
 	}
 });
+}

From 01974c73f7d75c118a57440364f1ef40d283c44d Mon Sep 17 00:00:00 2001
From: Waescheklammer <33402322+Waescheklammer@users.noreply.github.com>
Date: Sun, 14 Apr 2019 16:12:54 +0200
Subject: [PATCH 2/4] Update style.css

responsive swap
---
 style.css | 25 ++++++++++++++-----------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/style.css b/style.css
index 568b157..873ad7f 100644
--- a/style.css
+++ b/style.css
@@ -13,17 +13,7 @@ h2{
 	text-align: center;
 	font-size: 2.5rem;
 }
-@media only screen and (min-width: 990px){
-	#container{
-		grid-template-areas: 
-			'header'
-			'ad'
-			'ad'
-			'footer footer';
-		grid-template-columns: auto;
-		grid-template-rows: 10% auto auto 10%;
-	}
-}
+
 #container{
 	height: 100%;
 	display: grid;
@@ -211,3 +201,16 @@ progress[value]::-webkit-progress-value {
 	padding: 10%;
 }
 .hidden{display: none;}
+
+
+@media only screen and (min-width: 1000px){
+	#container{
+		background-color: white;
+		grid-template-areas: 
+			'header header'
+			'main ad'
+			'footer footer';
+		grid-template-columns: auto 30%;
+		grid-template-rows: 10% auto 10%;
+	}
+}

From 5a1ff00e2f1c95e602411f9520b5e542f2dee858 Mon Sep 17 00:00:00 2001
From: Waescheklammer <33402322+Waescheklammer@users.noreply.github.com>
Date: Tue, 16 Apr 2019 11:27:52 +0200
Subject: [PATCH 3/4] Add files via upload

---
 index.html | 11 +++----
 index.js   | 94 +++++++++++++++++++++++++++++++++++++++++++++++++++---
 style.css  |  6 ++--
 3 files changed, 98 insertions(+), 13 deletions(-)

diff --git a/index.html b/index.html
index 8dfce33..b69370b 100644
--- a/index.html
+++ b/index.html
@@ -7,6 +7,7 @@
 	<link rel="manifest" href="Manifest.json">
 	<link rel="icon" type="image/png" href="icon.png">
 	<meta name="theme-color" content="transparent">
+	<script type="text/javascript" src="https://unpkg.com/vexflow/releases/vexflow-min.js"></script>
 </head>
 <body>
 	<section id="container">
@@ -15,7 +16,7 @@ <h1>Noten</h1>
 		</header>
 		<main "id="main">
 			<section id="main__menu" class="">
-				<h2>Wähle ein Modul</h2>
+				<h2 id="menu__h2">Wähle ein Modul</h2>
 				<div id="menu__container" class="menu__container">
 					<div class="menu__form">
 						<form >
@@ -33,10 +34,8 @@ <h2>Wähle ein Modul</h2>
 				<div class="quiz__progressbox">
 					<progress id="progress" value="0" max="40" class="quiz__progressbar"></progress>
 				</div>
-				<div class="quiz__renderbody" id="quiz__renderbody">
-					<p style="text-align:center; font-size:5rem;"  id="renderParagraph"></p>
-					<canvas id="renderbody"></canvas>
-				</div>
+				
+				<canvas id="VexBody" class="quiz__renderbody"></canvas> 
 				<hr>
 				<h2>Wählen sie eine Lösungsmöglichkeit aus</h2>
 				<div class="main__choicebox" id="main__choicebox">
@@ -68,4 +67,4 @@ <h2>WERBUNG</h2>
 	</section>
 	<script type="text/javascript" src="index.js"></script>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/index.js b/index.js
index 65fc7c8..5954385 100644
--- a/index.js
+++ b/index.js
@@ -7,12 +7,14 @@
 
 										TODO
 								*Promise für Installation + Button
-								*Button LösungenText
+								*Button LösungenText 
 								*Noten anzeigen/Mit Lösungen verbinden
 								*Desktop CSS Layout
 								*ASYNC Event listeners -> nicht synchron mit fetch
 									-> Hat keine daten, feuert bevor fetch geladen wird
 								*BUG:bei zweitem durchlauf komisches verhalten
+								*Service Worker(?)
+								*HTML Restrukturierunwqwg von Main
  */
 
 let menu = document.getElementById("main__menu");
@@ -43,7 +45,7 @@ function fetchRequest(addr){
 				localStorage.setItem("notes", JSON.stringify(data.notes));
 				localStorage.setItem("solution", JSON.stringify(data.solution));
 				insertFirstPage();
-				responseButtons();
+				
 			}).catch(err => {
 			  // Do something for an error here
 			});
@@ -88,6 +90,59 @@ function randomizeChoiceButtons(buttons, randomDec){
 //---------------------------
 
 
+function renderNotes(type){
+	//VF = Vex.Flow;
+
+	if(type===1){//Bassschlüssel
+
+	}
+	if(type===2){//Violinschlüssel
+
+	}
+	// Create an SVG renderer and attach it to the DIV element named "boo".
+	var canvas = document.getElementById("VexBody")
+	//var renderer = new VF.Renderer(div, VF.Renderer.Backends.SVG);
+	var renderer = new Vex.Flow.Renderer(canvas, Vex.Flow.Renderer.Backends.CANVAS);
+
+	// Configure the rendering context.
+	renderer.resize(410, 150); //in CSS class für responsive 100%
+	var context = renderer.getContext();
+	context.setFont("Arial", 10, "").setBackgroundFillStyle("#eed");
+
+	// Create a stave of width 400 at position 10, 40 on the canvas.
+	var stave = new Vex.Flow.Stave(10, 40, 370); //Beeiflusst ebenfalls die Groeße
+
+	// Add a clef and time signature.
+	stave.addClef("treble");//.addTimeSignature("4/4"); //addClef("bass")
+
+	// Connect it to the rendering context and draw!
+	stave.setContext(context).draw();
+
+	var notes = [
+	  // A quarter-note C.
+	  new Vex.Flow.StaveNote({clef: "treble", keys: ["c/4"], duration: "q" }),
+
+	  // A quarter-note D.
+	  new Vex.Flow.StaveNote({clef: "treble", keys: ["d/4"], duration: "q" }),
+
+	  // A quarter-note rest. Note that the key (b/4) specifies the vertical
+	  // position of the rest.
+	  new Vex.Flow.StaveNote({clef: "treble", keys: ["b/4"], duration: "q" }),
+
+	  // A C-Major chord.
+	  new Vex.Flow.StaveNote({clef: "treble", keys: ["c/4", "e/4", "g/4"], duration: "q" })
+	];
+
+	// Create a voice in 4/4 and add above notes
+	var voice = new Vex.Flow.Voice({num_beats: 4,  beat_value: 4});
+	voice.addTickables(notes);
+
+	// Format and justify the notes to 400 pixels.
+	var formatter = new Vex.Flow.Formatter().joinVoices([voice]).format([voice], 400);
+
+	// Render voice
+	voice.draw(context, stave);
+}
 //Rendert (später) Notenanzeige
 function renderRenderbody(solutionIndex){
 	let textArr=JSON.parse(localStorage.getItem("notes"));
@@ -108,6 +163,9 @@ function handleButton(event){
 	console.log(solutionIndex);
 	let lastPage = () => {
 		jP.innerHTML = Correct +"/4";
+		//let section ='<section id="main__statistic" class="hidden"><div id="statistic__container"><h2>Dein Ergebnis</h2><span id="Jens" style="text-align: center; font-size: 5rem"></span><button class="statistic__button" id="statistic__button">Zurück zum Menu </button></div></section>'
+		//document.getElementById("main").innerHTML=section;
+
 		quiz.classList.add("hidden");
 		stat.classList.remove("hidden");	
 	}
@@ -144,28 +202,36 @@ function handleButton(event){
 }
 
 function insertFirstPage(){
+	let section = '<section id="main__quiz" class=""><div class="quiz__progressbox"><progress id="progress" value="00" max="40" class="quiz__progressbar"></progress></div><div class="quiz__renderbody" id="quiz__renderbody"><p style="text-align:center; font-size:2rem;"  id="renderParagraph"></p><canvas id="renderbody"></canvas></div><hr><h2>Wählen sie eine Lösungsmöglichkeit aus</h2><div class="main__choicebox" id="main__choicebox"><button class="choiceButton1" id="choiceButton1">A</button><button class="choiceButton2" id="choiceButton2">B</button><button class="choiceButton3" id="choiceButton3">C</button><button class="choiceButton4" id="choiceButton4">D</button></div></section>'
+
+	//document.getElementById("main").innerHTML=section;
 	menu.classList.add("hidden");
 	quiz.classList.remove("hidden");
 	renderRenderbody(solutionIndex);
 	randomizeChoiceButtons(buttons, randomChoice);
+	responseButtons();
 }
 
 //fect('http://192.168.0.108:8000/Modul2.json');
 //Start Button
 document.getElementById("form_button").addEventListener('click', () =>{
 	var sel = document.getElementById("menuform").value;
+	const htwAddr1="https://www2.htw-dresden.de/~s77199/Modul1.json";
+	const htwAddr2="https://www2.htw-dresden.de/~s77199/Modul2.json";
 	const mod2Addr= 'http://192.168.0.108:8000/Modul2.json'; 
 	const mod1Addr= 'http://192.168.0.108:8000/Modul1.json'; 
 
 	if(sel === 'Bassschlüssel'){
 		localStorage.clear();
-		fetchRequest(mod2Addr);
+		fetchRequest(htwAddr2);
+		renderNotes(1);
 	}
 	if(sel === 'Violinschlüssel'){
 		localStorage.clear();
-		fetchRequest(mod1Addr);
+		fetchRequest(htwAddr1);
+		renderNotes(2);
 	}
-	if (sel !== 'Modul') {
+	if (sel === 'Modul') {
 		form.classList.add("main__choicebox--redLine");
 	}
 	
@@ -205,3 +271,21 @@ function responseButtons(){
 	}
 });
 }
+
+/*
+if ('serviceWorker' in navigator) {
+  window.addEventListener('load', function() {
+    navigator.serviceWorker.register('/sw.js').then(function(registration) {
+      // Registration was successful
+      console.log('ServiceWorker registration successful with scope: ', registration.scope);
+    }, function(err) {
+      // registration failed :(
+      console.log('ServiceWorker registration failed: ', err);
+    });
+  });
+}
+*/
+
+
+
+
diff --git a/style.css b/style.css
index 873ad7f..f0be754 100644
--- a/style.css
+++ b/style.css
@@ -108,8 +108,10 @@ progress[value]::-webkit-progress-value {
 
 }
 .quiz__renderbody{
-	margin-top: 30%;
+	margin-top: 20%;
+	margin-left: 30%;
 	height: 80%;
+	margin-bottom: 10%;
 }
 .main__choicebox{
 	margin-top: 10%;
@@ -213,4 +215,4 @@ progress[value]::-webkit-progress-value {
 		grid-template-columns: auto 30%;
 		grid-template-rows: 10% auto 10%;
 	}
-}
+}
\ No newline at end of file

From 9357a188fe1d6b549ed3c217627796e66d21f950 Mon Sep 17 00:00:00 2001
From: Waescheklammer <33402322+Waescheklammer@users.noreply.github.com>
Date: Tue, 23 Apr 2019 18:07:26 +0200
Subject: [PATCH 4/4] Add files via upload

---
 index.html |  13 ++---
 index.js   | 136 +++++++++++++++++++++++++++--------------------------
 style.css  | 101 +++++++++++++++++++++++++++++++++++----
 3 files changed, 169 insertions(+), 81 deletions(-)

diff --git a/index.html b/index.html
index b69370b..f08f090 100644
--- a/index.html
+++ b/index.html
@@ -39,17 +39,18 @@ <h2 id="menu__h2">Wähle ein Modul</h2>
 				<hr>
 				<h2>Wählen sie eine Lösungsmöglichkeit aus</h2>
 				<div class="main__choicebox" id="main__choicebox">
-					<button class="choiceButton1" id="choiceButton1">A</button>
-					<button class="choiceButton2" id="choiceButton2">B</button>
-					<button class="choiceButton3" id="choiceButton3">C</button>
-					<button class="choiceButton4" id="choiceButton4">D</button>
+					<button class="choiceButton1" id="choiceButton1"></button>
+					<button class="choiceButton2" id="choiceButton2"></button>
+					<button class="choiceButton3" id="choiceButton3"></button>
+					<button class="choiceButton4" id="choiceButton4"></button>
 				</div>
 			</section>
 			<section id="main__statistic" class="hidden">
 				<div id="statistic__container">
 					<h2>Dein Ergebnis</h2>
-					<span id="Jens" style="text-align: center; font-size: 5rem"></span>
-					<button class="statistic__button" id="statistic__button">Zurück zum Menu </button>
+					<span id="Jens"></span>
+					<span id="Wrongs"></span>
+					<button class="statistic__button" id="statistic__button"><a href="javascript:window.location.reload(true)">Zurück zum Menu</a></button>
 				</div>
 			</section>
 		</main>
diff --git a/index.js b/index.js
index 5954385..4a35fcf 100644
--- a/index.js
+++ b/index.js
@@ -6,23 +6,24 @@
  --------------------------------------------------------------------------------------
 
 										TODO
-								*Promise für Installation + Button
 								*Button LösungenText 
 								*Noten anzeigen/Mit Lösungen verbinden
-								*Desktop CSS Layout
 								*ASYNC Event listeners -> nicht synchron mit fetch
 									-> Hat keine daten, feuert bevor fetch geladen wird
 								*BUG:bei zweitem durchlauf komisches verhalten
-								*Service Worker(?)
+									->beim 1. durchlauf wird 1. Frage doppelt gerendert
+									-> bei folgenden Durchläufen überspringt schleife immer eine indizierung mehr
+										/ verdoppelt die vorherige
+									=> notfix : Seite beim Statistik Screen neuladen
 								*HTML Restrukturierunwqwg von Main
  */
-
 let menu = document.getElementById("main__menu");
 let quiz = document.getElementById("main__quiz");
 let form = document.getElementById("menuform");
 let stat = document.getElementById("main__statistic");
 let choice = document.getElementById("main__choicebox");
 let jP = document.getElementById("Jens"); //Span Pseudo-Element für Text der Statistikanzeige
+let lP = document.getElementById("Wrongs");
 let progBar = document.getElementById("progress");
 
 let randomChoice = [0,1,2,3];
@@ -38,20 +39,19 @@ let Correct=0; //Richtige Antwortenzähler
 
 const tempfetchAddr= 'http://141.56.236.191:8000/Modul1.json'; 
 const fetchAddr = 'http://192.168.0.108:8000/Modul1.json'; //IP Adresse von Hostserver(lokaler Webserver)
-function fetchRequest(addr){
+function fetchRequest(addr, noteType){
 			fetch(addr).then(response => {
 			  return response.json();
 			}).then(data => {
 				localStorage.setItem("notes", JSON.stringify(data.notes));
 				localStorage.setItem("solution", JSON.stringify(data.solution));
-				insertFirstPage();
+				insertFirstPage(noteType);
 				
 			}).catch(err => {
 			  // Do something for an error here
 			});
 		}
 
-
 //fetchRequest(fetchAddr);
 
 //---------------------------
@@ -75,7 +75,18 @@ randomChoice = shuffle(randomChoice);
 
 //Rendert Buttontexte zufällig an
 function randomizeChoiceButtons(buttons, randomDec){
-	let choices=["A", "B", "C", "D"];
+	let h = JSON.parse(localStorage.getItem("solution"));
+	let textSelection = ["C", "D", "E", "F", "G", "A", "B", "C'", "C#", "D#", "F#", "A#"];
+		textSelection = shuffle(textSelection);
+	let txtSelFilter = textSelection.filter((textSelection)=>{
+		return textSelection != h[solutionIndex];
+	});
+	let solution = JSON.parse(localStorage.getItem("solution"));
+	let choices = [];
+		choices[0] = solution[solutionIndex];
+		choices[1] = txtSelFilter[0];
+		choices[2] = txtSelFilter[1];
+		choices[3] = txtSelFilter[2];
 	for(let i=0; i< buttons.length; ++i){
 		document.getElementById(buttons[i]).innerHTML=choices[randomDec[i]];
 	}	
@@ -91,50 +102,49 @@ function randomizeChoiceButtons(buttons, randomDec){
 
 
 function renderNotes(type){
-	//VF = Vex.Flow;
-
-	if(type===1){//Bassschlüssel
-
+		//Holt sich Clef aus dem Optionsmenü im HTML
+	let noteType;
+	let h = JSON.parse(localStorage.getItem("solution"));
+	let note;
+	if(type==1){
+		noteType="bass"
+		note = h[solutionIndex] +"/3";
 	}
-	if(type===2){//Violinschlüssel
-
+	if(type==2){
+		noteType="treble"
+		note = h[solutionIndex] +"/5";
 	}
+	var clef = noteType;
+	
+
+	//var note = localStorage.getItem("notes"
+	//lokale Definition bis Schnittstelle
 	// Create an SVG renderer and attach it to the DIV element named "boo".
 	var canvas = document.getElementById("VexBody")
 	//var renderer = new VF.Renderer(div, VF.Renderer.Backends.SVG);
 	var renderer = new Vex.Flow.Renderer(canvas, Vex.Flow.Renderer.Backends.CANVAS);
 
 	// Configure the rendering context.
-	renderer.resize(410, 150); //in CSS class für responsive 100%
+	renderer.resize(410, 200); //in CSS class für responsive 100%
 	var context = renderer.getContext();
 	context.setFont("Arial", 10, "").setBackgroundFillStyle("#eed");
 
 	// Create a stave of width 400 at position 10, 40 on the canvas.
-	var stave = new Vex.Flow.Stave(10, 40, 370); //Beeiflusst ebenfalls die Groeße
+	var stave = new Vex.Flow.Stave(10, 40, 570); //Beeiflusst ebenfalls die Groeße
 
 	// Add a clef and time signature.
-	stave.addClef("treble");//.addTimeSignature("4/4"); //addClef("bass")
+	stave.addClef(clef);//.addTimeSignature("4/4"); 
 
 	// Connect it to the rendering context and draw!
 	stave.setContext(context).draw();
 
 	var notes = [
-	  // A quarter-note C.
-	  new Vex.Flow.StaveNote({clef: "treble", keys: ["c/4"], duration: "q" }),
-
-	  // A quarter-note D.
-	  new Vex.Flow.StaveNote({clef: "treble", keys: ["d/4"], duration: "q" }),
-
-	  // A quarter-note rest. Note that the key (b/4) specifies the vertical
-	  // position of the rest.
-	  new Vex.Flow.StaveNote({clef: "treble", keys: ["b/4"], duration: "q" }),
-
-	  // A C-Major chord.
-	  new Vex.Flow.StaveNote({clef: "treble", keys: ["c/4", "e/4", "g/4"], duration: "q" })
+		// A whole-note.
+		new Vex.Flow.StaveNote({clef: clef, keys: [note], duration: "w" })
 	];
 
-	// Create a voice in 4/4 and add above notes
-	var voice = new Vex.Flow.Voice({num_beats: 4,  beat_value: 4});
+	// Create a voice in 1/1 and add above notes
+	var voice = new Vex.Flow.Voice({num_beats: 1,  beat_value: 1});
 	voice.addTickables(notes);
 
 	// Format and justify the notes to 400 pixels.
@@ -143,29 +153,22 @@ function renderNotes(type){
 	// Render voice
 	voice.draw(context, stave);
 }
-//Rendert (später) Notenanzeige
-function renderRenderbody(solutionIndex){
-	let textArr=JSON.parse(localStorage.getItem("notes"));
-	document.getElementById("renderParagraph").innerHTML= textArr[solutionIndex];
-}
-//Überspring 2 und 3
 
 
 //---------------------------
 //		EventListeners
 //---------------------------
 
-let solutionValue = JSON.parse(localStorage.getItem("solution"));
-
 //Setzt nächsten Rendering Content zusammen/ wechselt zur nächsten Seite & summiert richtige Antworten
-function handleButton(event){
+function handleButton(event, noteType){
+	let solutionValue = JSON.parse(localStorage.getItem("solution"));
 	let h = JSON.parse(localStorage.getItem("solution"));
-	console.log(solutionIndex);
 	let lastPage = () => {
-		jP.innerHTML = Correct +"/4";
+		jP.innerHTML = "Richtig" +"\n" +Correct +"/4";
+		lP.innerHTML = "Falsch" +"\n" +(4-Correct) +"/4";
 		//let section ='<section id="main__statistic" class="hidden"><div id="statistic__container"><h2>Dein Ergebnis</h2><span id="Jens" style="text-align: center; font-size: 5rem"></span><button class="statistic__button" id="statistic__button">Zurück zum Menu </button></div></section>'
 		//document.getElementById("main").innerHTML=section;
-
+		solutionIndex=0;
 		quiz.classList.add("hidden");
 		stat.classList.remove("hidden");	
 	}
@@ -173,16 +176,15 @@ function handleButton(event){
 	let nextPage = () =>{
 		randomChoice = shuffle(randomChoice);
 		randomizeChoiceButtons(buttons, randomChoice);
-		solutionIndex+=1;
 		progBar.value += 10;
-		renderRenderbody(solutionIndex);
-	}
+		renderNotes(noteType);
+		solutionIndex+=1;
 
-	if (event === solutionValue[solutionIndex]) {
-		if(solutionIndex === 3){
+	}
+	if (event === solutionValue[solutionIndex-1]) {
+		if(solutionIndex === 4){
 			Correct+=1;
-			lastPage();
-			solutionIndex=0;	
+			lastPage();	
 		}
 		else
 		{
@@ -191,8 +193,8 @@ function handleButton(event){
 		}
 	}
 	else{
-		if(solutionIndex === 3){lastPage();
-			solutionIndex=0;
+		if(solutionIndex === 4){
+			lastPage();
 		}
 		else
 		{
@@ -201,15 +203,16 @@ function handleButton(event){
 	}
 }
 
-function insertFirstPage(){
+function insertFirstPage(noteType){
 	let section = '<section id="main__quiz" class=""><div class="quiz__progressbox"><progress id="progress" value="00" max="40" class="quiz__progressbar"></progress></div><div class="quiz__renderbody" id="quiz__renderbody"><p style="text-align:center; font-size:2rem;"  id="renderParagraph"></p><canvas id="renderbody"></canvas></div><hr><h2>Wählen sie eine Lösungsmöglichkeit aus</h2><div class="main__choicebox" id="main__choicebox"><button class="choiceButton1" id="choiceButton1">A</button><button class="choiceButton2" id="choiceButton2">B</button><button class="choiceButton3" id="choiceButton3">C</button><button class="choiceButton4" id="choiceButton4">D</button></div></section>'
-
+	renderNotes(noteType);
 	//document.getElementById("main").innerHTML=section;
 	menu.classList.add("hidden");
 	quiz.classList.remove("hidden");
-	renderRenderbody(solutionIndex);
+	//renderRenderbody(solutionIndex);
 	randomizeChoiceButtons(buttons, randomChoice);
-	responseButtons();
+	responseButtons(noteType);
+	solutionIndex+=1;
 }
 
 //fect('http://192.168.0.108:8000/Modul2.json');
@@ -222,14 +225,13 @@ document.getElementById("form_button").addEventListener('click', () =>{
 	const mod1Addr= 'http://192.168.0.108:8000/Modul1.json'; 
 
 	if(sel === 'Bassschlüssel'){
-		localStorage.clear();
-		fetchRequest(htwAddr2);
-		renderNotes(1);
+		//localStorage.clear();
+		fetchRequest(htwAddr2, 1);
+		
 	}
 	if(sel === 'Violinschlüssel'){
-		localStorage.clear();
-		fetchRequest(htwAddr1);
-		renderNotes(2);
+		//localStorage.clear();
+		fetchRequest(htwAddr1, 2);
 	}
 	if (sel === 'Modul') {
 		form.classList.add("main__choicebox--redLine");
@@ -249,25 +251,25 @@ document.getElementById("statistic__button").addEventListener('click', () =>{
 });
 
 // Quiz Buttons
-function responseButtons(){
+function responseButtons(noteType){
 	document.getElementById("main__choicebox").addEventListener('click', function(event){
 	let elem = event.target.id;
 
 	if(elem === buttons[0]){
 		let buttonText = document.getElementById(buttons[0]).innerHTML;
-		handleButton(buttonText);
+		handleButton(buttonText, noteType);
 	}
 	if(elem === buttons[1]){
 		let buttonText = document.getElementById(buttons[1]).innerHTML;
-		handleButton(buttonText);
+		handleButton(buttonText, noteType);
 	}
 	if(elem === buttons[2]){
 		let buttonText = document.getElementById(buttons[2]).innerHTML;
-		handleButton(buttonText);
+		handleButton(buttonText, noteType);
 	}
 	if(elem === buttons[3]){
 		let buttonText = document.getElementById(buttons[3]).innerHTML;
-		handleButton(buttonText);
+		handleButton(buttonText, noteType);
 	}
 });
 }
diff --git a/style.css b/style.css
index f0be754..fb65e21 100644
--- a/style.css
+++ b/style.css
@@ -13,7 +13,22 @@ h2{
 	text-align: center;
 	font-size: 2.5rem;
 }
-
+a{
+	color: white;
+	text-decoration: none;
+}
+a:hover{
+	color: white;
+	text-decoration: none;	
+}
+a:active{
+	color: white;
+	text-decoration: none;
+}
+a:focus{
+	color: white;
+	text-decoration: none;
+}
 #container{
 	height: 100%;
 	display: grid;
@@ -108,10 +123,9 @@ progress[value]::-webkit-progress-value {
 
 }
 .quiz__renderbody{
-	margin-top: 20%;
-	margin-left: 30%;
+	margin-top: 30%;
 	height: 80%;
-	margin-bottom: 10%;
+	margin-left: 30%;
 }
 .main__choicebox{
 	margin-top: 10%;
@@ -153,8 +167,9 @@ progress[value]::-webkit-progress-value {
 	grid-template-areas: 
 		'paragraph'
 		'span'
+		'span'
 		'button';
-	grid-template-rows: 30% auto 10%;
+	grid-template-rows: 30% auto auto 10%;
 	justify-content: center;
 }
 #statistic__container > h2{
@@ -162,6 +177,8 @@ progress[value]::-webkit-progress-value {
 }
 #statistic__container > span{
 	grid-area: span;
+	text-align: center;
+	font-size: 3rem;
 }
 .statistic__button{
 	grid-area: button;
@@ -179,7 +196,7 @@ progress[value]::-webkit-progress-value {
 	margin-bottom: 1%
 }
 #footer{
-	border-top: 1px solid black;
+	border-top: 1px solid grey;
 	grid-area: footer;
 }
 #footer > ul > li{
@@ -206,13 +223,81 @@ progress[value]::-webkit-progress-value {
 
 
 @media only screen and (min-width: 1000px){
+	h1{
+		margin-left: 5%;
+		text-align: left;
+		font-size: 2rem;
+	}
 	#container{
-		background-color: white;
+
 		grid-template-areas: 
 			'header header'
 			'main ad'
 			'footer footer';
-		grid-template-columns: auto 30%;
+		grid-template-columns: auto 20%;
 		grid-template-rows: 10% auto 10%;
 	}
+	#header{
+		margin-bottom: 0%;
+	}
+	#main__menu{
+		margin-top: 5%;
+	}
+	.menu__container{
+		padding-top: 0%;
+	}
+	.menu__container>h2{
+		margin-top: 0%;
+	}
+	.menu__container>button{
+		font-size: 1.0rem;
+		padding: 10px;
+	}
+	.menu__form{
+		margin-top: 0%;
+	}
+	.menu__form > form > select{
+		font-size: 1rem;
+		padding: 10px;
+	}
+	#main__quiz>h2{
+		font-size: 1.0rem;
+	}
+	.quiz__renderbody{
+		margin-top: 0%;
+	}
+	progress[value]{
+		height: 15px;
+	}
+	.main__choicebox{
+		margin-top: 5%;
+		grid-template-columns: 20% 20%;
+		grid-template-rows: 100% 100%;
+	}
+	.main__choicebox>button{
+		font-size: 1.0rem;
+
+
+	}
+	#statistic__container{
+		margin-top: 5%;
+	}
+	#statistic__container>h2{
+		font-size: 1.5rem;
+	}
+	.statistic__button{
+		font-size: 1.0rem;
+	}
+	#ad{
+		border-left: 1px grey solid;
+	}
+	#footer > ul > li{
+		font-size: 1.0rem;
+		margin-left: 10%;
+	}
+	#footer > ul > li>button{
+		font-size: 1.0rem;
+		padding: 2px;
+	}
+
 }
\ No newline at end of file