Skip to content
GitLab
Commit 33be5ba4 authored by Patrick's avatar Patrick
Browse files

Revert "Update Celebration if Soundquiz correct" 

Dies reverted den Commit 24fe9cbc.
parent b49fe771
Hide whitespace changes
Inline Side-by-side
Showing
with 16 additions and 288 deletions
+16 -288
vcm/css/confetti.css deleted 100644 → 0
+ 0
- 193
View file @ b49fe771
.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
+ 2
- 23
View file @ 33be5ba4
......@@ -154,32 +154,11 @@
<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">
......@@ -814,7 +793,7 @@
</div>
<label class="container contentOne">Ergebnisse
<input type="checkbox" id="quizcheck" onclick="switchQuizResults();">
<input type="checkbox" id="quizcheck" onclick="switchQuizResults(); check_Bau('all')">
<span class="checkmark"></span>
</label>
<h3 id="UmfrageNordb">Umfrage</h3>
......
vcm/js/favoriteplaces.js
+ 12
- 0
View file @ 33be5ba4
......@@ -293,7 +293,19 @@ 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
+ 2
- 72
View file @ 33be5ba4
function switchQuizResults(){
var checkBox = document.getElementById("quizcheck");
if (checkBox.checked == true){
check_Bau('all')
quizAnswerOn()
} else {
quizAnswerOff()
}
}
function quizAnswerOn() {
......@@ -287,7 +272,6 @@ 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]
......@@ -296,7 +280,6 @@ 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";
}
......@@ -311,7 +294,6 @@ 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";
}
......@@ -324,7 +306,6 @@ 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";
}
......@@ -338,7 +319,6 @@ 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";
}
......@@ -352,7 +332,6 @@ 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";
}
......@@ -366,7 +345,6 @@ 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";
}
......@@ -380,7 +358,6 @@ 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";
}
......@@ -394,60 +371,13 @@ 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);
}
}
......
Supports Markdown
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