From: nael Date: Tue, 16 Apr 2019 15:59:49 +0000 (+0200) Subject: WIP #2647 @7:00 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=4f8ec05ef00ef1229489ea877c7de81117031e77;p=bonaquiz.git WIP #2647 @7:00 --- diff --git a/images/13-0.jpg b/images/13-0.jpg new file mode 100644 index 0000000..255d457 Binary files /dev/null and b/images/13-0.jpg differ diff --git a/images/13-1.jpg b/images/13-1.jpg new file mode 100644 index 0000000..c6e7bbe Binary files /dev/null and b/images/13-1.jpg differ diff --git a/images/13-2.jpg b/images/13-2.jpg new file mode 100644 index 0000000..17af160 Binary files /dev/null and b/images/13-2.jpg differ diff --git a/images/13-3.jpg b/images/13-3.jpg new file mode 100644 index 0000000..1d9b385 Binary files /dev/null and b/images/13-3.jpg differ diff --git a/images/14-0.jpg b/images/14-0.jpg new file mode 100644 index 0000000..91643f7 Binary files /dev/null and b/images/14-0.jpg differ diff --git a/images/14-1.jpg b/images/14-1.jpg new file mode 100644 index 0000000..4ee8b59 Binary files /dev/null and b/images/14-1.jpg differ diff --git a/images/14-2.jpg b/images/14-2.jpg new file mode 100644 index 0000000..7788c00 Binary files /dev/null and b/images/14-2.jpg differ diff --git a/images/14-3.jpg b/images/14-3.jpg new file mode 100644 index 0000000..44ffa01 Binary files /dev/null and b/images/14-3.jpg differ diff --git a/index.php b/index.php index 77d6b34..b9b1f0c 100644 --- a/index.php +++ b/index.php @@ -1,5 +1,5 @@ 1, 'type' => 'text', 'label' => 'What kind of business was Bona founder Wilhelm Edner running when he started to sell floor wax?', @@ -155,7 +155,7 @@ $question = [ The Bona 100-year anniversary quiz - + @@ -176,133 +176,16 @@ $question = [ -
-

Question ' . $question[$i]['id'] . '/' . count($question) . '

-

' . $question[$i]['label'] . '

- -
- '; - $v = $question[$i]['correct'] - 1; - $answer = $question[$i]['choices'][$v]; - $letter = $question[$i]['correct'] + 64; - echo ' - -
-
-

Question ' . $question[$i]['id'] . '/' . count($question) . '

-

' . $question[$i]['label'] . '

- Correct answer : -
    -
  • -
    -
    - ' . chr($letter) . ' -
    - ' . $answer . ' -
    -
    • -
+ //DISABLE text Qs + if ($question['type'] === 'text') continue; -

' . $question[$i]['explaination'] . '

- - - - -
-
'; - } else { - echo ' -
-
-

Question ' . $question[$i]['id'] . '/' . count($question) . '

- -

' . $question[$i]['label'] . '

-
    '; - - for ($z = 0; $z < $question[$i]['imagesnb']; $z++) { - $numb = $z; - $num = $numb + 65; -// if ($z % 2 == 0) // pair -// { -// echo ''; -// } - $score = 0; - - $correct = $question[$i]['correct']; - $imgCorrect = $z + 1; - - if ($correct === $imgCorrect) { - $score = 1; - } - echo '
  • -
    - ' . chr($num) . ' -
    -
    • '; - -// if ($z % 2 == 1) // impair -// { -// echo '    '; -// } - } - echo '
- -
-
'; - // reponse question img - $letter = $question[$i]['correct'] + 64; - echo ' -
-
-

Question ' . $question[$i]['id'] . '/' . count($question) . '

-

' . $question[$i]['label'] . '

- - Correct answer : - -
    - -
  • -
    - ' . chr($letter) . ' -
    -
    • -     -
- -
-
'; - } + displayQuestion($question, $question_count); + displayAnswer($question, $question_count); } ?> @@ -318,7 +201,7 @@ $question = [
- / + /
@@ -338,4 +221,130 @@ $question = [ - \ No newline at end of file + + + +
+

Question ' . $question['id'] . '/' . $question_count . '

+

' . $question['label'] . '

'; + + if ($question['type'] === 'text') { + + echo '
+ '; + +} + + +function displayAnswer($question, $question_count) { + $correct_index = $question['correct'] - 1; + + echo ' +
+
+

Question ' . $question['id'] . '/' .$question_count . '

+

' . $question['label'] . '

+ Correct answer:'; + + if ($question['type'] === 'text') { + + $answer = $question['choices'][$correct_index]; + + echo '
    +
  • +
    +
    + ' . numberToLetter($correct_index) . ' +
    + ' . $answer . ' +
    +
    • +
+ +

' . $question['explaination'] . '

'; + + } else { + + echo '
    + +
  • +
    + ' . numberToLetter($correct_index) . ' +
    +
    • +     +
'; + } + + echo ' + + +
+
'; +} + + +/** + * Convert a number to a letter (0 => A, 1 => B etc) + * @param $number + * @return string + */ +function numberToLetter($number) { + return chr($number + 65); +} + + +?> \ No newline at end of file diff --git a/js/bonaquiz.js b/js/bonaquiz.js index 531d006..611d7e5 100644 --- a/js/bonaquiz.js +++ b/js/bonaquiz.js @@ -3,10 +3,11 @@ $(function () { $(window).on('orientationchange', function () { console.log('orientation'); + resize(); setTimeout(function () { resize() - }, 3000); + }, 200); }); resize(); @@ -55,8 +56,8 @@ $('.value').on('click', function () { } // alert($(this).data('score')); - console.log(`Votre score est de : ${scoreValue}`); - $('#finalScore').html(`${scoreValue}`); + //console.log(`Votre score est de : ${scoreValue}`); + $('#finalScore').html(scoreValue); AfterTransition(); }); @@ -111,7 +112,7 @@ function AfterTransition() { } updateAngle(); - console.log(`Le rayon est: ${paperRadius}`); + // console.log(`Le rayon est: ${paperRadius}`); TweenMax.to(window, animationDuration, { angle: angleEnd, onUpdate: updateAngle, @@ -181,8 +182,8 @@ function displayProgress() { // FUNCTION RESIZE CONTENT -let breakpoint = 750, // Stop scaling the height below this width (let it scroll) - scaler = $('#container'); +let scaler = $('#container'), + progressBar = $('.progressbar'); function resize() { @@ -193,6 +194,7 @@ function resize() { sections = $('.section'), baseWidth, // = scaler.outerWidth(), baseHeight, // = scaler.outerHeight(), + gutter = 80, // space around the content scale, translateAmount; @@ -200,85 +202,20 @@ function resize() { baseWidth = Math.max.apply(Math, sections.map(function(x) { return $(sections[x]).outerWidth(); })); baseHeight = Math.max.apply(Math, sections.map(function(x) { return $(sections[x]).outerHeight(); })); + baseWidth += gutter * 2; + baseHeight += gutter * 2; + console.log(baseWidth, baseHeight); - //// background resize - // $("#background,#projector").css({width: ww, maxWidth: ww, minWidth: ww, height: wh, maxHeight: wh, minHeight: wh}); - // - // var vs = $("section:visible"); - // var home = vs.hasClass('home'); - // - // var sh = vs.outerHeight(); - // sh *= 1.1; // Margins - // if (home) { - // sh *= 1.1; - // } - // var cssSection = {}; - // cssSection.top = Math.max((wh - sh) / 2, wh * 0.05); - // if (home) { - // $("#projector").css('bottom', Math.max(cssSection.top, wh * 0.05)); - // } - /**************************************************************************/ // Work out how much content needs to be scaled down, if at all scale = Math.min(1, ww / baseWidth, wh / baseHeight); - // Once we're below the breakpoint, only scale based on the width, not height - // if (ww < breakpoint) { - // scale = Math.min(1, ww / baseWidth); - // } - // When translating a scaled element, the translate value needs to be scaled (-50% / scale) translateAmount = (-50 / scale) + '%'; - // Different translation needed when only scaling for width - // if (ww < breakpoint) { - // scaler.css('transform', 'scale('+ scale +') translateX('+ translateAmount +')'); - // scaler.css('transform-origin', 'top'); - // scaler.css('top', 0); - // } else { - scaler.css('transform', 'scale('+ scale +') translate('+ translateAmount +', '+ translateAmount +')'); - // } - -} - - - - + scaler.css('transform', 'scale('+ scale +') translateX('+ translateAmount +')'); + progressBar.css('transform', 'scale('+ scale +') translateX('+ translateAmount +')'); + progressBar.css('bottom', 45 * scale + 'px'); -// -// -// function resize() { -// var ww = $(window).outerWidth(); -// var hh = $(window).outerHeight(); -// -// $("#background,#projector").css({width: ww, maxWidth: ww, minWidth: ww, height: hh, maxHeight: hh, minHeight: hh}); -// -// var vs = $("section:visible"); -// 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('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) { -// sh *= 1.1; -// } -// } -// cssSection.top = Math.max((hh - sh) / 2, hh * 0.05); -// -// $("section:visible").css(cssSection); -// -// if (home) { -// $("#projector").css('bottom', Math.max(cssSection.top, hh * 0.05)); -// } -// } -// +} \ No newline at end of file diff --git a/style/style.sass b/style/style.sass index ffda9d8..cd00930 100644 --- a/style/style.sass +++ b/style/style.sass @@ -6,6 +6,10 @@ $base-font-size: 16 // Default @function rem($pixels, $context: $base-font-size) @return #{$pixels/$context}rem +@mixin breakpoint() + @media (max-aspect-ratio: 11/10) + @content + * margin: 0 padding: 0 @@ -34,22 +38,21 @@ body max-width: 100% opacity: 0 transition: opacity 500ms + &.loaded opacity: 1 + //@include breakpoint + // font-size: rem(20) + #container - //min-height: 100% - //height: 100% - //width: 100% - //min-width: 100% - //overflow-x: hidden - //overflow-y: auto padding: 80px position: absolute z-index: 2 - top: 50% + top: 0 left: 50% - transform: translate(-50%, -50%) + transform: translateX(-50%) + transform-origin: top center //width: 100% .active @@ -60,8 +63,8 @@ body //height: 100% width: 1500px - @media (max-width: 750px) - width: 750px + @include breakpoint + width: 760px a.btn-next text-decoration: none @@ -96,17 +99,17 @@ section background-color: $green border-radius: 1.25em border: 0 - padding: 0.54em 1.96em - margin-top: 2.14em + padding: 0.5em 2em + margin-top: 1em cursor: pointer text-decoration: none .logo display: block - width: 26em + width: 400px text-align: center margin: 0 auto - margin-top: 10em + margin-top: 115px #background position: absolute @@ -127,6 +130,11 @@ section background-size: auto 100% opacity: 0.5 + @include breakpoint + background-size: auto 50% + bottom: 10% + + &[data-section="home"] background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, #000000 100%) @@ -149,10 +157,10 @@ section top: 1.250em #questionAsk - margin: 4em auto 2em auto - max-width: 800px - @media (max-width: 750px) - max-width: 1200px + margin: 3.2em auto 2em auto + max-width: 840px + @include breakpoint + max-width: 610px ul list-style: none @@ -160,13 +168,12 @@ section &__list position: relative - max-width: 40em - min-width: 30em - height: 3.33em + width: 650px + height: 125px background: white margin: 0 auto border-radius: 5.25em - margin-bottom: 2em + margin-bottom: 34px cursor: pointer transition: 400ms all ease font-size: rem(30) @@ -177,6 +184,7 @@ section padding-right: 0.5em text-align: left width: 85% + font-size: 0.9em &--letter color: white @@ -189,11 +197,12 @@ section background: #669933 border-radius: 50% position: relative - left: 2.2em + left: 0.8em display: flex justify-content: center align-items: center z-index: 55 + font-size: 1.2em .questions__list:hover background: $green @@ -222,11 +231,10 @@ section width: 90% // for smaller screens margin: 0 auto position: fixed - bottom: 3em - height: 0.75em + bottom: 45px // Initial value - actual value handled by JS resize function + height: 9px background: white - left: 0 - right: 0 + left: 50% display: none &-value @@ -240,7 +248,7 @@ section font-size: rem(30) .correctAnswer - margin-top: 2em + margin-top: 1em background: $green .questions__list--circle @@ -254,8 +262,11 @@ section .response font-size: rem(30) - max-width: 27em - margin: 2em auto 0 auto + max-width: 840px + margin: 1em auto 0 auto + + @include breakpoint + max-width: 610px //section.questions a.button.next // font-size: rem(44) @@ -286,7 +297,7 @@ section border-radius: 50% position: relative background-size: cover - border: 3px solid white + border: 5px solid white &__container display: flex @@ -298,17 +309,15 @@ section background: $green border-radius: 50% position: absolute - left: 1em - top: 1em + left: 0.3em + top: 0.5em color: white &--letter font-size: rem(25) .answerCircle border: solid 3px $green !important - transform: scale(1.2) - margin: 4em !important - + margin-top: 50px #ResultsDesc margin: 2em 0 @@ -324,20 +333,20 @@ section .borderScore border-radius: 50% - width: 10em - height: 10em + width: 334px + height: 334px background-color: rgba(255, 255, 255, 0.5) margin: 0 auto display: flex justify-content: center align-items: center - padding: 15em + //padding: 15em .score background: white - width: 2em - height: 2em - padding: 12em + width: 284px + height: 284px + //padding: 12em border-radius: 50% display: flex justify-content: center @@ -348,26 +357,10 @@ section color: $darkblue font-size: rem(30) +.home + @include breakpoint + width: 500px + padding-bottom: 11% // Buffer to stop logo going below projector bg graphic at certain screen ratios -@media only screen and (max-width: 529px) - #background #projector - background-size: 150% auto - .circleContainer - span - .questionsCircle - width: 0.25em - height: 0.25em - padding: 8em - - &__container - left: -1em - - - - -.tinyscreen #orientationWarning - position: absolute - background-color: #fc0 - width: 100vw - height: 100vh - z-index: 99 \ No newline at end of file + h2 + font-size: rem(50) \ No newline at end of file