Skip to content

GitLab

Commit 24fe9cbc authored by Patrick's avatar Patrick
Browse files

Update Celebration if Soundquiz correct

parent 9eab3377
Hide whitespace changes
Inline Side-by-side
vcm/css/confetti.css 0 → 100644
View file @ 24fe9cbc
.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
vcm/index.html
View file @ 24fe9cbc
......@@ -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>
......
vcm/js/favoriteplaces.js
View file @ 24fe9cbc
......@@ -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) {
......
vcm/js/soundquiz.js
View file @ 24fe9cbc
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);
}
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal