diff --git a/vcm/css/confetti.css b/vcm/css/confetti.css
new file mode 100644
index 0000000000000000000000000000000000000000..0d2a0103639cc80c877d5b88c477bd56925af37a
--- /dev/null
+++ b/vcm/css/confetti.css
@@ -0,0 +1,193 @@
+.confetti {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ z-index: 1000;
+}
+.confetti-piece {
+ position: absolute;
+ width: 10px;
+ height: 30px;
+ background: #ffd300;
+ top: 0;
+ opacity: 0;
+}
+.confetti-piece:nth-child(1) {
+ left: 7%;
+ -webkit-transform: rotate(-40deg);
+ -webkit-animation: makeItRain 1000ms infinite ease-out;
+ -webkit-animation-delay: 182ms;
+ -webkit-animation-duration: 1116ms;
+}
+.confetti-piece:nth-child(2) {
+ left: 14%;
+ -webkit-transform: rotate(4deg);
+ -webkit-animation: makeItRain 1000ms infinite ease-out;
+ -webkit-animation-delay: 161ms;
+ -webkit-animation-duration: 1076ms;
+}
+.confetti-piece:nth-child(3) {
+ left: 21%;
+ -webkit-transform: rotate(-51deg);
+ -webkit-animation: makeItRain 1000ms infinite ease-out;
+ -webkit-animation-delay: 481ms;
+ -webkit-animation-duration: 1103ms;
+}
+.confetti-piece:nth-child(4) {
+ left: 28%;
+ -webkit-transform: rotate(61deg);
+ -webkit-animation: makeItRain 1000ms infinite ease-out;
+ -webkit-animation-delay: 334ms;
+ -webkit-animation-duration: 708ms;
+}
+.confetti-piece:nth-child(5) {
+ left: 35%;
+ -webkit-transform: rotate(-52deg);
+ -webkit-animation: makeItRain 1000ms infinite ease-out;
+ -webkit-animation-delay: 302ms;
+ -webkit-animation-duration: 776ms;
+}
+.confetti-piece:nth-child(6) {
+ left: 42%;
+ -webkit-transform: rotate(38deg);
+ -webkit-animation: makeItRain 1000ms infinite ease-out;
+ -webkit-animation-delay: 180ms;
+ -webkit-animation-duration: 1168ms;
+}
+.confetti-piece:nth-child(7) {
+ left: 49%;
+ -webkit-transform: rotate(11deg);
+ -webkit-animation: makeItRain 1000ms infinite ease-out;
+ -webkit-animation-delay: 395ms;
+ -webkit-animation-duration: 1200ms;
+}
+.confetti-piece:nth-child(8) {
+ left: 56%;
+ -webkit-transform: rotate(49deg);
+ -webkit-animation: makeItRain 1000ms infinite ease-out;
+ -webkit-animation-delay: 14ms;
+ -webkit-animation-duration: 887ms;
+}
+.confetti-piece:nth-child(9) {
+ left: 63%;
+ -webkit-transform: rotate(-72deg);
+ -webkit-animation: makeItRain 1000ms infinite ease-out;
+ -webkit-animation-delay: 149ms;
+ -webkit-animation-duration: 805ms;
+}
+.confetti-piece:nth-child(10) {
+ left: 70%;
+ -webkit-transform: rotate(10deg);
+ -webkit-animation: makeItRain 1000ms infinite ease-out;
+ -webkit-animation-delay: 351ms;
+ -webkit-animation-duration: 1059ms;
+}
+.confetti-piece:nth-child(11) {
+ left: 77%;
+ -webkit-transform: rotate(4deg);
+ -webkit-animation: makeItRain 1000ms infinite ease-out;
+ -webkit-animation-delay: 307ms;
+ -webkit-animation-duration: 1132ms;
+}
+.confetti-piece:nth-child(12) {
+ left: 84%;
+ -webkit-transform: rotate(42deg);
+ -webkit-animation: makeItRain 1000ms infinite ease-out;
+ -webkit-animation-delay: 464ms;
+ -webkit-animation-duration: 776ms;
+}
+.confetti-piece:nth-child(13) {
+ left: 91%;
+ -webkit-transform: rotate(-72deg);
+ -webkit-animation: makeItRain 1000ms infinite ease-out;
+ -webkit-animation-delay: 429ms;
+ -webkit-animation-duration: 818ms;
+}
+.confetti-piece:nth-child(odd) {
+ background: #7431e8;
+}
+.confetti-piece:nth-child(even) {
+ z-index: 1;
+}
+.confetti-piece:nth-child(4n) {
+ width: 5px;
+ height: 12px;
+ -webkit-animation-duration: 2000ms;
+}
+.confetti-piece:nth-child(3n) {
+ width: 3px;
+ height: 10px;
+ -webkit-animation-duration: 2500ms;
+ -webkit-animation-delay: 1000ms;
+}
+.confetti-piece:nth-child(4n-7) {
+ background: red;
+}
+@-webkit-keyframes makeItRain {
+ from {opacity: 0;}
+ 50% {opacity: 1;}
+ to {-webkit-transform: translateY(350px);}
+}
+
+
+
+
+/* Ballons */
+
+body {
+ margin: 0;
+ }
+
+ #celeb_balloons-container {
+ height: 100vh;
+ padding: 1em;
+ box-sizing: border-box;
+ display: flex;
+ flex-wrap: wrap;
+ overflow: hidden;
+ }
+
+ .celeb_balloons {
+ z-index: 9999;
+ height: 125px;
+ width: 105px;
+ border-radius: 75% 75% 70% 70%;
+ position: relative;
+ }
+
+ .celeb_balloons:before {
+ content: "";
+ height: 75px;
+ width: 1px;
+ padding: 1px;
+ background-color: #FDFD96;
+ display: block;
+ position: absolute;
+ top: 125px;
+ left: 0;
+ right: 0;
+ margin: auto;
+ }
+
+ .celeb_balloons:after {
+ content: "â–²";
+ text-align: center;
+ display: block;
+ position: absolute;
+ color: inherit;
+ top: 120px;
+ left: 0;
+ right: 0;
+ margin: auto;
+ }
+
+ @keyframes float {
+ from {transform: translateY(100vh);
+ opacity: 1;}
+ to {transform: translateY(-300vh);
+ opacity: 0;}
+ }
\ No newline at end of file
diff --git a/vcm/index.html b/vcm/index.html
index 7743d275a16ebb08e4cc4128ad4b2f06d7e3f4a5..578ac3dde9604ec26249b7d18c71a10205b9fbe7 100644
--- a/vcm/index.html
+++ b/vcm/index.html
@@ -154,11 +154,32 @@
<link rel="stylesheet" href="sources/nouislider.css">
<link rel="stylesheet" href="css/loading.css">
<!-- <link rel="stylesheet" href="css/menu.css"> -->
+ <link rel="stylesheet" href="css/confetti.css">
</head>
<body>
-
+ <!-- Confetti -->
+ <div id="confetti_main" class="confetti" style="display:none;">
+ <div class="confetti-piece"></div>
+ <div class="confetti-piece"></div>
+ <div class="confetti-piece"></div>
+ <div class="confetti-piece"></div>
+ <div class="confetti-piece"></div>
+ <div class="confetti-piece"></div>
+ <div class="confetti-piece"></div>
+ <div class="confetti-piece"></div>
+ <div class="confetti-piece"></div>
+ <div class="confetti-piece"></div>
+ <div class="confetti-piece"></div>
+ <div class="confetti-piece"></div>
+ <div class="confetti-piece"></div>
+ </div>
+ <!-- Confetti_Ende -->
+ <!-- ballons -->
+ <div id="celeb_balloons-container" style="display:none;">
+</div>
+ <!-- baloons_ende -->
<div id="story-frame" style="z-index:95" class="startscreen vcm-map-top loadingpointer">
<!-- Content Start Screen -->
<div class="balloon teaser-balloon" id="balloon-startscreen">
@@ -793,7 +814,7 @@
</div>
<label class="container contentOne">Ergebnisse
- <input type="checkbox" id="quizcheck" onclick="switchQuizResults(); check_Bau('all')">
+ <input type="checkbox" id="quizcheck" onclick="switchQuizResults();">
<span class="checkmark"></span>
</label>
<h3 id="UmfrageNordb">Umfrage</h3>
diff --git a/vcm/js/favoriteplaces.js b/vcm/js/favoriteplaces.js
index 229e4d93134077907e9ce195760bfd655618d502..fbb6c9c5e1bce3ada2e65c86c0a9b9ac8e953955 100644
--- a/vcm/js/favoriteplaces.js
+++ b/vcm/js/favoriteplaces.js
@@ -293,19 +293,7 @@ function switchFavPlaces(){
}
}
-function switchQuizResults(){
- var checkBox = document.getElementById("quizcheck");
-
- if (checkBox.checked == true){
-
- quizAnswerOn()
- } else {
-
- quizAnswerOff()
- }
-
-}
// Get Location of User
document.getElementById('getLocationFav').ontouchstart = function (eve) {
diff --git a/vcm/js/soundquiz.js b/vcm/js/soundquiz.js
index 90be847cd16a3ad2973f7703822171d214f68aa2..d146c897c1d4b3c350aec138bbff6372d473bcca 100644
--- a/vcm/js/soundquiz.js
+++ b/vcm/js/soundquiz.js
@@ -1,3 +1,18 @@
+function switchQuizResults(){
+
+ var checkBox = document.getElementById("quizcheck");
+
+ if (checkBox.checked == true){
+ check_Bau('all')
+ quizAnswerOn()
+ } else {
+
+ quizAnswerOff()
+ }
+
+ }
+
+
function quizAnswerOn() {
@@ -272,6 +287,7 @@ function check_Bau(location) {
document.getElementById("solution_rosenstein").src="https://transfer.hft-stuttgart.de/partizipation/datasource-data/NoiseData/Icons_soundquiz/icon_right.png";
}
} else if (location == "all"){
+ var confetti = true;
if (point_baustelle) {
var points_bau = turf.points([
[point_baustelle.lon, point_baustelle.lat]
@@ -280,6 +296,7 @@ function check_Bau(location) {
if (ptsWithin_bau.features.length == 0){
document.getElementById("solution_bau").src="https://transfer.hft-stuttgart.de/partizipation/datasource-data/NoiseData/Icons_soundquiz/icon_wrong.png";
+ confetti = false;
} else if (ptsWithin_bau.features.length == 1){
document.getElementById("solution_bau").src="https://transfer.hft-stuttgart.de/partizipation/datasource-data/NoiseData/Icons_soundquiz/icon_right.png";
}
@@ -294,6 +311,7 @@ function check_Bau(location) {
if (ptsWithin_prag.features.length == 0){
document.getElementById("solution_prag").src="https://transfer.hft-stuttgart.de/partizipation/datasource-data/NoiseData/Icons_soundquiz/icon_wrong.png";
+ confetti = false;
} else if (ptsWithin_prag.features.length == 1){
document.getElementById("solution_prag").src="https://transfer.hft-stuttgart.de/partizipation/datasource-data/NoiseData/Icons_soundquiz/icon_right.png";
}
@@ -306,6 +324,7 @@ function check_Bau(location) {
if (ptsWithin_markt.features.length == 0){
document.getElementById("solution_markt").src="https://transfer.hft-stuttgart.de/partizipation/datasource-data/NoiseData/Icons_soundquiz/icon_wrong.png";
+ confetti = false;
} else if (ptsWithin_markt.features.length == 1){
document.getElementById("solution_markt").src="https://transfer.hft-stuttgart.de/partizipation/datasource-data/NoiseData/Icons_soundquiz/icon_right.png";
}
@@ -319,6 +338,7 @@ function check_Bau(location) {
if (ptsWithin_skaten.features.length == 0){
document.getElementById("solution_skaten").src="https://transfer.hft-stuttgart.de/partizipation/datasource-data/NoiseData/Icons_soundquiz/icon_wrong.png";
+ confetti = false;
} else if (ptsWithin_skaten.features.length == 1){
document.getElementById("solution_skaten").src="https://transfer.hft-stuttgart.de/partizipation/datasource-data/NoiseData/Icons_soundquiz/icon_right.png";
}
@@ -332,6 +352,7 @@ function check_Bau(location) {
if (ptsWithin_kirche.features.length == 0){
document.getElementById("solution_kirche").src="https://transfer.hft-stuttgart.de/partizipation/datasource-data/NoiseData/Icons_soundquiz/icon_wrong.png";
+ confetti = false;
} else if (ptsWithin_kirche.features.length == 1){
document.getElementById("solution_kirche").src="https://transfer.hft-stuttgart.de/partizipation/datasource-data/NoiseData/Icons_soundquiz/icon_right.png";
}
@@ -345,6 +366,7 @@ function check_Bau(location) {
if (ptsWithin_meerschweinchen.features.length == 0){
document.getElementById("solution_meerschweinchen").src="https://transfer.hft-stuttgart.de/partizipation/datasource-data/NoiseData/Icons_soundquiz/icon_wrong.png";
+ confetti = false;
} else if (ptsWithin_meerschweinchen.features.length == 1){
document.getElementById("solution_meerschweinchen").src="https://transfer.hft-stuttgart.de/partizipation/datasource-data/NoiseData/Icons_soundquiz/icon_right.png";
}
@@ -358,6 +380,7 @@ function check_Bau(location) {
if (ptsWithin_ufa.features.length == 0){
document.getElementById("solution_ufapalast").src="https://transfer.hft-stuttgart.de/partizipation/datasource-data/NoiseData/Icons_soundquiz/icon_wrong.png";
+ confetti = false;
} else if (ptsWithin_ufa.features.length == 1){
document.getElementById("solution_ufapalast").src="https://transfer.hft-stuttgart.de/partizipation/datasource-data/NoiseData/Icons_soundquiz/icon_right.png";
}
@@ -371,13 +394,60 @@ function check_Bau(location) {
if (ptsWithin_rosenstein.features.length == 0){
document.getElementById("solution_rosenstein").src="https://transfer.hft-stuttgart.de/partizipation/datasource-data/NoiseData/Icons_soundquiz/icon_wrong.png";
+ confetti = false;
} else if (ptsWithin_rosenstein.features.length == 1){
document.getElementById("solution_rosenstein").src="https://transfer.hft-stuttgart.de/partizipation/datasource-data/NoiseData/Icons_soundquiz/icon_right.png";
}
-
+
+
+
+ }
+
+ if (confetti == true && point_rosensteinpark && point_ufapalast && point_meerschweinchen && point_kirche && point_skaten && point_marktplatz && point_pragfriedhof){
+ document.getElementById('confetti_main').style.display='block';
+ document.getElementById('celeb_balloons-container').style.display='flex';
+ document.getElementById('celeb_balloons-container').style.zIndex='9999';
+ createBalloons(100);
+ setTimeout(
+ function() {
+ document.getElementById('confetti_main').style.display='none';
+ document.getElementById('celeb_balloons-container').style.display='none';
+
+ }, 5000);
}
-
+
+
+ function random(num) {
+ return Math.floor(Math.random()*num)
+ }
+
+ function getRandomStyles() {
+ var r = random(255);
+ var g = random(255);
+ var b = random(255);
+ var mt = random(200);
+ var ml = random(50);
+ var dur = random(5)+5;
+ return `
+ background-color: rgba(${r},${g},${b},0.7);
+ color: rgba(${r},${g},${b},0.7);
+ box-shadow: inset -7px -3px 10px rgba(${r-10},${g-10},${b-10},0.7);
+ margin: ${mt}px 0 0 ${ml}px;
+ animation: float ${dur}s ease-in infinite
+ `
+ }
+
+ function createBalloons(num) {
+ var balloonContainer = document.getElementById("celeb_balloons-container")
+ for (var i = num; i > 0; i--) {
+ var balloon = document.createElement("div");
+ balloon.className = "celeb_balloons";
+ balloon.style.cssText = getRandomStyles(); balloonContainer.append(balloon);
+ }
+ }
+
+