+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

The Bona 100‑year

anniversary quiz

Think you know Bona?
Put it to the test by taking part in our short quiz.

- Start -

Question 2/10

+ +

Which photo is the Austrian Chancellor's Office, Vienna, where + we had the opportunity to bring out the beauty in the floor?

+ +

\ No newline at end of file diff --git a/js/bonaquiz.js b/js/bonaquiz.js index 2dc1035..fbb1624 100644 --- a/js/bonaquiz.js +++ b/js/bonaquiz.js @@ -12,17 +12,18 @@ function resize() { var hh = $(window).outerHeight(); var vs = $("section:visible"); - var home = vs.hasClass('home') + var home = vs.hasClass('home'); $("section:visible").css('font-size', 10); var sh = vs.outerHeight(); sh *= 1.1; // Margins if (home) { sh *= 1.1; } - console.log(sh, hh); + console.log('resize',sh, hh); var cssSection = {}; if (sh > hh) { var scale = hh / sh; + console.log('scale',scale); $("section:visible").css('font-size', 10 * scale); sh = vs.outerHeight(); if (home) { diff --git a/question1.php b/question1.php new file mode 100644 index 0000000..a9e170a --- /dev/null +++ b/question1.php @@ -0,0 +1,64 @@ + 1, + 'type' => 'text', + 'label' => 'What kind of business was Bona founder Wilhelm Edner running when he started to sell floor wax?', + 'choices' => ['Pharmacy', 'Coffee and grocer', 'Shoe shop'], + 'right' => 2, + 'explaination' => ' Wilhelm had a passion for coffee, which had been hard to come by during the previous war years. Floor wax was part of a wide range of products he offered through his general grocer business.', + ], + ['id'=>2, + 'type'=>'images', + 'label'=>'Which photo is the Austrian Chancellor\'s Office, Vienna, where we had the opportunity to bring out the beauty in the floor?', + 'imagesnb'=>4, + 'right'=>4, + 'explaination'=>''] +]; +?> + + + + + The Bona 100-year anniversary quiz + + + + + + +

+ +

Question 1/10

+ +

What kind of business was Bona founder Wilhelm Edner
+ running when he started to sell floor wax ?

+ + +

+ A +
+ Pharmacy +
+
+ B +
+ Coffee and grocer +
+
+ C +
+ Shoe shop +

+ +

+ + \ No newline at end of file diff --git a/style/style.sass b/style/style.sass new file mode 100644 index 0000000..f46b122 --- /dev/null +++ b/style/style.sass @@ -0,0 +1,222 @@ +$green : #669933 +$darkblue: #18264f +* + margin: 0 + padding: 0 + box-sizing: border-box + font-weight: 300 +@font-face + font-family: Helvetica + src: url("../HelveticaNeueLight.woff") +html + font-family: Helvetica, sans-serif + height: 100% + max-height: 100% + +body + font-family: Helvetica, sans-serif + height: 100% + max-height: 100% + background-color: #0a246e + color: #fff + overflow: hidden + width: 100% + max-width: 100% + opacity: 0 + transition: opacity 500ms + &.loaded + opacity: 1 + +section + z-index: 1 + position: relative + max-width: 1200px + padding: 0 2em + margin: 0 auto + font-size: 10px + text-align: center + h1 + font-size: 9em + h2 + font-size: 6em + h3 + font-size: 3.7em + margin-top: 1.62em + line-height: 1.5em + h4 + font-size: 2.45em + line-height: 1.5em + a.button + display: inline-block + font-size: 5.6em + color: #fff + background-color: $green + border-radius: 1.25em + border: 0 + padding: 0.54em 1.96em + margin-top: 2.14em + cursor: pointer + text-decoration: none + .logo + display: block + width: 26em + text-align: center + margin: 0 auto + margin-top: 10em + +#background + position: absolute + top: 0 + left: 0 + width: 100% + height: 100% + #projector + position: absolute + bottom: 0 + width: 100% + height: 100% + left: 0 + background-image: url("../images/projector.svg") + background-repeat: no-repeat + background-position: 50% 100% + background-size: auto 100% + opacity: 0.5 + &[data-section="home"] + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, #000000 100%) + +.backgroundQuestion #projector + bottom: 0px!important +.questions + position: static + padding-top: 3em + #questionNumber + margin-top: 1em + text-transform: uppercase + margin-bottom: 20px + &::after + content: '' + display: block + position: relative + background: $green + width: 3.125em + height: 0.375em + margin: 0 auto + top: 1.250em + #questionAsk + margin: 4em auto 2em auto + max-width: 31em + ul + list-style: none + &__list + position: relative + max-width: 40em + height: 10em + padding: 3em + background: white + margin: 0 auto + border-radius: 5.25em + display: flex + align-items: center + margin-bottom: 2em + cursor: pointer + transition: 400ms all ease + &--text + font-size: 2.3em + color: $darkblue + padding-left: 0.5em + &--letter + color: white + left: 1.8em + font-size: 2.2em + &--circle + width: 5em + height: 5em + background: $green + border-radius: 50% + position: relative + left: -0.8em + display: flex + justify-content: center + align-items: center +.questions__list:hover + background: $green + transition: 400ms all ease + .questions__list--circle + background: white + transition: 400ms all ease + .questions__list--letter + color: $green + transition: 400ms all ease + .questions__list--text + color: white + transition: 400ms all ease + +.progressbar + width: 50em + margin: 0 auto + position: absolute + bottom: 3em + height: 1em + background: white + left: 0 + right: 0 + &::before + content: '' + position: absolute + width: 10% + height: 100% + background: $green + left: 0 +.correctInfo + font-size: 2em +.correctAnswer + margin-top: 2em + background: $green + .questions__list--circle + background: white + .questions__list--letter + color: $green + .questions__list--text + color: white +.response + font-size: 2.2em + max-width: 27em + margin: 2em auto 0 auto + +section.questions a.button.next + font-size: 3.6em + z-index: 5 + position: relative + margin-top: 1.14em + +.roundedQuestions + display: flex + justify-content: center + align-items: center + position: relative + width: 100% + .questions__roundedList + position: relative + background: white + height: 5em + padding: 10em + width: 5em + border-radius: 50% + margin: 2em 2em 2em 2em + display: inline-block + cursor: pointer + div + display: inline-block + +@media only screen and (max-width: 529px) + #background #projector + background-size: 150% auto + .progressbar + width: 25em + height: 0.5em + //.roundedQuestions + // .questions__roundedList + // width: 5em + // height: 5em + // padding: 8em +