Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
Alfakhori
M4labplatform
Commits
f255125b
Commit
f255125b
authored
Jan 12, 2022
by
Patrick
Browse files
update Soundquiz
parent
33be5ba4
Changes
4
Hide whitespace changes
Inline
Side-by-side
vcm/css/confetti.css
0 → 100644
View file @
f255125b
.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
(
4
n
)
{
width
:
5px
;
height
:
12px
;
-webkit-animation-duration
:
2000ms
;
}
.confetti-piece
:nth-child
(
3
n
)
{
width
:
3px
;
height
:
10px
;
-webkit-animation-duration
:
2500ms
;
-webkit-animation-delay
:
1000ms
;
}
.confetti-piece
:nth-child
(
4
n-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 @
f255125b
...
...
@@ -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 @
f255125b
...
...
@@ -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 @
f255125b
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
);
}
}
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment