From eb38d97bdf967bd90a2e4d3fad951c5045a26d6b Mon Sep 17 00:00:00 2001
From: Joerg Reichert <de.abg.reichert.joerg@googlemail.com>
Date: Wed, 13 Jun 2018 21:24:22 +0200
Subject: [PATCH] #17: dummy implementation of Quiz

---
 .../res/game2.html                            | 171 ++++++++++++++++++
 1 file changed, 171 insertions(+)
 create mode 100644 de.oklab.leipzig.cdv.damals.generator/res/game2.html
diff --git a/de.oklab.leipzig.cdv.damals.generator/res/game2.html b/de.oklab.leipzig.cdv.damals.generator/res/game2.html
new file mode 100644
index 0000000..734f9dc
--- /dev/null
+++ b/de.oklab.leipzig.cdv.damals.generator/res/game2.html
@@ -0,0 +1,171 @@
+<html>
+	<head>
+		<title>damals Karte</title>
+		<meta charset="UTF-8"/>
+		<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
+		<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.Default.css" />
+		<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.css" />
+		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fancybox@3.0.1/dist/css/jquery.fancybox.css" />
+		<style>
+			#map{ height: 100% }
+			.info { padding: 6px 8px; font: 14px/16px Arial, Helvetica, sans-serif; background: white; background: rgba(255,255,255,0.8); box-shadow: 0 0 15px rgba(0,0,0,0.2); border-radius: 5px; } .info h4 { margin: 0 0 5px; color: #777; }
+			.legend { text-align: left; line-height: 18px; color: #555; } .legend i { width: 18px; height: 18px; float: left; margin-right: 8px; opacity: 0.7; }
+		</style>
+	</head>
+	<body>
+		<div id="progress"><div id="progressbar"></div></div>
+		<div id="map" />
+
+		<script type="text/javascript" src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
+		<script type="text/javascript" src="https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster.js"></script>
+		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-ajax/2.1.0/leaflet.ajax.min.js"></script>
+		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+		<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/fancybox@3.0.1/dist/js/jquery.fancybox.pack.js"></script>
+		<script>
+			function style(feature) {
+			    return {
+			        fillColor: '#FFEDA0',
+			        weight: 2,
+			        opacity: 1,
+			        color: 'white',
+			        fillOpacity: 1
+			    };
+			}
+
+			var scores = 0;
+
+			var blueIcon = new L.Icon.Default({});
+			var redIcon = new L.Icon({
+			    iconUrl: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png',
+			    shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
+			    iconSize: [25, 41],
+			    iconAnchor: [12, 41],
+			    popupAnchor: [1, -34],
+			    shadowSize: [41, 41]
+			});
+
+			var oldLayer = undefined;
+			var lastCoordinates = undefined;
+
+			var map = L.map('map').setView([51.3399028, 12.3742236], 14)
+			L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+				attribution: 'Map data &#64; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors</a>'
+			}).addTo(map);
+
+			var progress = document.getElementById('progress');
+			var progressBar = document.getElementById('progressbar');
+
+			function updateProgressBar(processed, total, elapsed, layersArray) {
+			    if (elapsed > 1000) {
+			        progress.style.display = 'block';
+			        progressBar.style.width = Math.round(processed / total * 100) + '%';
+			    }
+			    if (processed === total) {
+			        progress.style.display = 'none';
+			    }
+			}
+
+			var realMarkerPosition = undefined;
+			var markerPosition = undefined;
+			var tries = 0;
+
+			$.ajaxSetup({
+			    scriptCharset: "utf-8",
+			    contentType: "application/json; charset=utf-8"
+			});
+			var jsonMimeType = "application/json;charset=UTF-8";
+			$.ajax({
+			    type: "GET",
+			    url: "photos.geojson",
+			    beforeSend: function(x) {
+			        if (x && x.overrideMimeType) {
+			            x.overrideMimeType(jsonMimeType);
+			        }
+			    },
+			    dataType: "json",
+			    success: function(data) {
+
+				var init = false;
+
+				map.on('click',
+				  function handleClickOnMap(e) {
+				  	if(init) return;
+				  	
+				    var marker = L.marker(e.latlng, { draggable: true } );
+				    marker.on('dragend', function(e) {
+				      setTimeout(function() {
+				        setMarkerPosition(e.target.latlng ? e.target.latlng : e.latlng);
+				      }, 10);
+				    });
+				    marker.addTo(map);
+				    setMarkerPosition(e.target.latlng ? e.target.latlng : e.latlng);
+				    init = true;
+				  }
+				);				    
+			    }
+			});
+
+			// control that shows state info on hover
+			var info = L.control();
+
+			info.onAdd = function(map) {
+			    this._div = L.DomUtil.create('div', 'info');
+			    this.update();
+			    return this._div;
+			};
+
+			info.update = function(id, props) {
+				var realMarkerPosition = L.latLng(51.3439179,12.3801743)
+			    var realMarker = L.marker(realMarkerPosition, { draggable: false } );
+			    realMarker.setIcon(redIcon);
+			    realMarker.addTo(map);
+			
+			    var htmlInner = '<div style="width: 300px;"><h4>Quiz</h4>';
+
+				htmlInner += 'Wie hieß der heutige Willy-Brandt-Platz 1900?';
+				htmlInner += '<br /><br />';
+				htmlInner += '<form id="quizcontainer" name="quizform" action="javascript:checkQuiz()">';
+				htmlInner += '<input type="radio" name="quizgroup" value="1" checked="checked"> Karl-Marx-Platz<br/>';
+				htmlInner += '<input type="radio" name="quizgroup" value="2"> Blücher-Platz<br/>';
+				htmlInner += '<input type="radio" name="quizgroup" value="3"> Platz der Republik<br/>';
+				htmlInner += '<input type="radio" name="quizgroup" value="4"> Richard-Wagner-Platz';
+				htmlInner += '<br /><br />';
+				htmlInner += '<button type="submit">Prüfen</button>'
+				htmlInner += '</form>'
+			    htmlInner += '<br /><br /><div id="damalsPhotoContainer"><img src="https://opendata.leipzig.de/dataset/da00ca5b-8f95-5a58-9395-bee46614cf8f/resource/ef4bf849-d0d1-433d-b503-58149d2ce28a/download/tmparchivba198111821.jpg" style="width:295px" /></div>'
+				this._div.innerHTML = htmlInner;
+			};
+
+			info.addTo(map);
+			
+			function checkQuiz() {
+				tries = tries + 1;
+				
+				var thisRoundScore = 0;
+				var firstMessage;
+				if ($("#quizContainer > input")[1].checked == true) {
+					if(tries == 1) {
+						thisRoundScore = 100;
+					} else if(tries == 2) {
+						thisRoundScore = 60;
+					} else if(tries == 3) {
+						thisRoundScore = 20;
+					}
+					scores = scores + thisRoundScore;
+					alert("Sie haben die Frage beim " + tries + ". Mal richtig beantwortet." +
+					 "\nSie bekommen " + thisRoundScore + " Punkte." + 
+					 "\nIhre Punkte nach dieser Runde: " + scores);
+				} else if (tries < 3) {
+					alert("Das ist leider nicht richtig, Bitte versuchen sie es erneut.");
+				} else {
+					alert("Das ist leider nicht richtig, die richtige Antwort ist 'Blücher-Platz'." + 
+					"\nIhre Gesamt-Punktzahl nach dieser Runde: " + scores);
+				}
+			}
+			
+			function setMarkerPosition(mp) {
+				markerPosition = mp;
+			}
+		</script>
+	</body>
+</html>
