From 0a019082500101e7a5c8629d330df5d30523d6d5 Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Tue, 9 Apr 2019 19:20:42 +0200 Subject: [PATCH] Try to make it mobile friendly | wip #2647 @1 --- index.php | 355 +++++++++++++++++++++++------------------------ js/bonaquiz.js | 118 +++++++++------- js/main.js | 100 ------------- style/style.sass | 80 +++++++++-- 4 files changed, 315 insertions(+), 338 deletions(-) delete mode 100644 js/main.js diff --git a/index.php b/index.php index f4058f9..c1a750f 100644 --- a/index.php +++ b/index.php @@ -85,16 +85,16 @@ $question = [ 'explaination' => 'As of 2016, Bona products were available at 9 of the top 10 retailers in the US, and more than 4 million spray mops had been sold around the world.', ], ['id' => 13, - '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, - 'correct'=>4, + '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, + 'correct' => 4, ], ['id' => 14, - 'type'=>'images', - 'label'=>'Which photo is the Walkway of the Tower Bridge, London, where we had the opportunity to bring out the beauty in the floor?', - 'imagesnb'=>4, - 'correct'=>4, + 'type' => 'images', + 'label' => 'Which photo is the Walkway of the Tower Bridge, London, where we had the opportunity to bring out the beauty in the floor?', + 'imagesnb' => 4, + 'correct' => 4, ], ['id' => 15, 'type' => 'text', @@ -154,185 +154,183 @@ $question = [ The Bona 100-year anniversary quiz - - + + -
-
-
-
+
+
+
+
+ + +
+
+

The Bona 100‑year

+

anniversary quiz

+

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

+ Start + +
+
+ + + +
+

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 ' -
-
-

The Bona 100‑year

-

anniversary quiz

-

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

- Start - -
-
+
+
+

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

+

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

+ Correct answer : +
    +
  • +
    +
    + ' . chr($letter) . ' +
    + ' . $answer . ' +
    +
    • +
- - -//
-//

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.' -//
    -//
    • -//
-// -//

'.$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''; -// 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).' -//
    -//
    • -//     -//
-// -//
-//
'; -// } -// } -// ?> +

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

-
-
-

Congrats

+ -

you completed the quiz.

+ +
+
'; + } else { + echo ' +
+
+

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

-

Your score

-
-
-
-
20/'.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 ''; + 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) . ' +
    +
    • +     +
+ +
+
'; + } + } + ?> + +
+
+

Congrats

+ +

you completed the quiz.

+ +

Your score

+
+
+
+
20/' . count($question) . ''; + ?>
- -
-
+
+ + +
-
-
-
+
+
@@ -340,7 +338,6 @@ $question = [ - - + \ No newline at end of file diff --git a/js/bonaquiz.js b/js/bonaquiz.js index 312c2f5..ce1ccf9 100644 --- a/js/bonaquiz.js +++ b/js/bonaquiz.js @@ -1,38 +1,47 @@ $(function () { $(window).on('resize', resize); - $(window).on('resize', resizeBar); + + $(window).on('orientationchange', function () { + console.log('orientation'); + setTimeout(function () { + resize() + }, 3000); + }); + resize(); - resizeBar(); + setTimeout(function () { resize(); resizeBar(); $("body").addClass('loaded'); }, 1000); }); -$('.start').on('click', function() { - TweenMax.to('#background[data-section="home"]',3,{backgroundImage: 'linear-gradient(to bottom, rgba(0, 0, 0, 0) 100%, #000000 100%)' }); - TweenMax.to('#projector',0.5,{bottom: 0}); +$('.start').on('click', function () { + TweenMax.to('#background[data-section="home"]', 3, {backgroundImage: 'linear-gradient(to bottom, rgba(0, 0, 0, 0) 100%, #000000 100%)'}); + TweenMax.to('#projector', 0.5, {bottom: 0}); }); AfterTransition(); -$('.btn-next').on('click', function() { +$('.btn-next').on('click', function () { const delay = 0.5; - TweenMax.to($(this).closest('div.section'),delay,{x: '-=350px',opacity:0}); - $(this).closest('div.section').delay(delay*1000).queue(function () { + TweenMax.to($(this).closest('div.section'), delay, {x: '-=350px', opacity: 0}); + $(this).closest('div.section').delay(delay * 1000).queue(function () { $(this).closest('div.section').removeClass('active') }); - TweenMax.from($(this).closest('div.section').next(),delay,{x: '+=350px',opacity:0, delay:delay, - onComplete: AfterTransition}); + TweenMax.from($(this).closest('div.section').next(), delay, { + x: '+=350px', opacity: 0, delay: delay, + onComplete: AfterTransition + }); $(this).closest('div.section').next().addClass('active'); let width = ($('.section:visible').attr("data-question") / nbquestions) * 100; - $('.progressbar-value').css('width', width +'%'); + $('.progressbar-value').css('width', width + '%'); }); // console.log(document.querySelectorAll('.section [data-question=""]').size); -$('.end').on('click',function () { - window.location = $( ".section" ).data( "homepage" ) +$('.end').on('click', function () { + window.location = $(".section").data("homepage") }); function AfterTransition() { @@ -59,38 +68,40 @@ function AfterTransition() { let border = $('.borderScore'); let paperHeight = border.innerHeight(); let paperWidth = border.innerWidth(); - let paper = Raphael('canvas', paperWidth,paperHeight); - let paperRadius ; + let paper = Raphael('canvas', paperWidth, paperHeight); + let paperRadius; let delayValue = delay; // circle size let circleOption = circleType; - if (circleOption === 1){ - paperRadius = calcHypotenuse(paperWidth/2, paperHeight/2); - } - else { - paperRadius = Math.min(paperWidth, paperHeight) /2; + if (circleOption === 1) { + paperRadius = calcHypotenuse(paperWidth / 2, paperHeight / 2); + } else { + paperRadius = Math.min(paperWidth, paperHeight) / 2; } let circleStart = circleAngleDirection; - let scoreValue = 19/nbquestions; + let scoreValue = 19 / nbquestions; window.circleDirection = circleSens; - if(window.circleDirection === 1){ + if (window.circleDirection === 1) { window.angle = circleStart; - window.angleEnd = circleStart - (360*scoreValue); + window.angleEnd = circleStart - (360 * scoreValue); - } - else { + } else { window.angle = circleStart; - window.angleEnd = circleStart+360; + window.angleEnd = circleStart + 360; } updateAngle(); console.log(`Le rayon est: ${paperRadius}`); - TweenMax.to(window,animationDuration,{angle: angleEnd ,onUpdate:updateAngle, delay: delayValue,ease:Power1.easeInOut }); - + TweenMax.to(window, animationDuration, { + angle: angleEnd, + onUpdate: updateAngle, + delay: delayValue, + ease: Power1.easeInOut + }); // choose percent radius of the donut circle @@ -99,24 +110,28 @@ function AfterTransition() { function updateAngle() { // console.log(window.angle); paper.clear(); - sector(paper,paperWidth/2, paperHeight/2,paperRadius, donutRadius ,window.angle, window.angleEnd,{fill: color,stroke: stroke}); + sector(paper, paperWidth / 2, paperHeight / 2, paperRadius, donutRadius, window.angle, window.angleEnd, { + fill: color, + stroke: stroke + }); } function calcHypotenuse(a, b) { - return(Math.sqrt((a * a) + (b * b))); + return (Math.sqrt((a * a) + (b * b))); } - function sector(paper,cx, cy, r, pct, startAngle, endAngle, params) { - if(window.circleDirection===1){ - let sa=startAngle; - startAngle=endAngle; - endAngle=sa; + + function sector(paper, cx, cy, r, pct, startAngle, endAngle, params) { + if (window.circleDirection === 1) { + let sa = startAngle; + startAngle = endAngle; + endAngle = sa; } - startAngle=90; + startAngle = 90; console.log(startAngle); console.log(endAngle); // init radian - let rad= Math.PI/180; + let rad = Math.PI / 180; // first circle (bigger) let x1 = cx + r * Math.cos(-startAngle * rad), x2 = cx + r * Math.cos(-endAngle * rad), @@ -131,10 +146,10 @@ function AfterTransition() { x4 = cx + r1 * Math.cos(-startAngle * rad), y4 = cy + r1 * Math.sin(-startAngle * rad); - let long= ((endAngle - startAngle) < -180)?1:0; - console.log('long',long); + let long = ((endAngle - startAngle) < -180) ? 1 : 0; + console.log('long', long); - return paper.path(["M", x4,y4, "L", x1,y1, "A", r,r, 0,long, 1, x2,y2, "L", x3,y3, "A", r1,r1,0, long, 0, x4,y4,"z"]).attr(params); + return paper.path(["M", x4, y4, "L", x1, y1, "A", r, r, 0, long, 1, x2, y2, "L", x3, y3, "A", r1, r1, 0, long, 0, x4, y4, "z"]).attr(params); } @@ -146,18 +161,17 @@ function displayProgress() { if ($('.section:visible').data("page") === 1) { console.log($(this).attr('data-page')); $('.progressbar').css('display', 'none'); - } - else { + } else { $('.progressbar').css('display', 'block'); } } // on recupere la valeur du click let scoreValue = 0; -$('.value').on('click',function () { +$('.value').on('click', function () { - if ($(this).data('score') === 1){ - scoreValue ++; + if ($(this).data('score') === 1) { + scoreValue++; } // alert($(this).data('score')); @@ -170,6 +184,8 @@ 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); @@ -178,11 +194,11 @@ function resize() { if (home) { sh *= 1.1; } - console.log('resize',sh, hh); + console.log('resize', sh, hh); var cssSection = {}; if (sh > hh) { var scale = hh / sh; - console.log('scale',scale); + console.log('scale', scale); $("section:visible").css('font-size', 10 * scale); sh = vs.outerHeight(); if (home) { @@ -196,16 +212,18 @@ function resize() { if (home) { $("#projector").css('bottom', Math.max(cssSection.top, hh * 0.05)); } + resizeBar(); + } -function resizeBar(){ +function resizeBar() { let windowWidth = window.outerWidth; let windowHeight = window.outerHeight; - console.log('width : '+windowWidth); + console.log('width : ' + windowWidth); $(".progressbar").css('font-size', 10); // $(".progressbar").css('font-size', 10 * scale); - if (windowHeight > windowWidth){ + if (windowHeight > windowWidth) { let scale = windowWidth / windowHeight; $(".progressbar").css('font-size', 10 * scale); } diff --git a/js/main.js b/js/main.js deleted file mode 100644 index 5f7184b..0000000 --- a/js/main.js +++ /dev/null @@ -1,100 +0,0 @@ -// -// // LISTE DES ÉLÉMENTS MODIFIABLES => -// -// const color = "#669933"; // LA COULEUR DU CERCLE ---> entrer le code couleur -// -// let circleType = 2; // => Détermine si le cercle est inscrit ou circonscrit --> deux valeurs possibles : 1 = cercle inscrit OU 2 = cercle circonscrit -// -// let delay = 0; // => Détermine le delay de l'animation (en s) ---> il faut juste rentrer un chiffre --> par exemple : 5 -// -// let circleSens = 1; // Détermine le sens de direction du cercle --> 2 Valeur possibles : 1 = dans le sens des aiguilles d'une montre OU 2 = sens inverse -// -// let donutSize = 0.8; // Creer un effet de donut's --> Les valeurs vont de 0 à 1, --> valeur 0 annule l'effet de donut's -// -// let animationDuration = 5; // Durée en seconde de l'animation -// -// let circleAngleDirection = 90; // Détermine l'angle de commencement de l'animation -// -// // NE PAS TOUCHER ( DANGER DE MORT ) -// const stroke = "none"; -// let canvas = document.getElementById('borderScore'); -// let paperHeight = window.innerHeight; -// let paperWidth = window.innerWidth; -// let paper = Raphael("canvas", paperWidth,paperHeight); -// -// let paperRadius ; -// -// $(function () { -// let delayValue = delay; -// // circle size -// let circleOption = circleType; -// -// if (circleOption === 1){ -// paperRadius = calcHypotenuse(paperWidth/2, paperHeight/2); -// } -// else { -// paperRadius = Math.min(paperWidth, paperHeight) /2; -// } -// -// let circleStart = circleAngleDirection; -// let scoreValue = 0.55; -// -// window.circleDirection = circleSens; -// if(window.circleDirection === 1){ -// window.angle = circleStart; -// window.angleEnd = circleStart - (360*scoreValue); -// -// } -// else { -// window.angle = circleStart; -// window.angleEnd = circleStart+360; -// } -// -// updateAngle(); -// console.log(`Le rayon est: ${paperRadius}`); -// TweenMax.to(window,animationDuration,{angle: angleEnd ,onUpdate:updateAngle, delay: delayValue,ease:Power1.easeInOut }); -// }); -// -// // choose percent radius of the donut circle -// let donutRadius = donutSize; -// -// function updateAngle() { -// // console.log(window.angle); -// paper.clear(); -// sector(paper,paperWidth/2, paperHeight/2,paperRadius, donutRadius ,window.angle, window.angleEnd,{fill: color,stroke: stroke}); -// } -// -// function calcHypotenuse(a, b) { -// return(Math.sqrt((a * a) + (b * b))); -// } -// function sector(paper,cx, cy, r, pct, startAngle, endAngle, params) { -// if(window.circleDirection===1){ -// let sa=startAngle; -// startAngle=endAngle; -// endAngle=sa; -// } -// startAngle=90; -// console.log(startAngle); -// console.log(endAngle); -// // init radian -// let rad= Math.PI/180; -// // first circle (bigger) -// let x1 = cx + r * Math.cos(-startAngle * rad), -// x2 = cx + r * Math.cos(-endAngle * rad), -// y1 = cy + r * Math.sin(-startAngle * rad), -// y2 = cy + r * Math.sin(-endAngle * rad); -// -// // second circle / donut section -// let r1 = r * pct; -// let -// x3 = cx + r1 * Math.cos(-endAngle * rad), -// y3 = cy + r1 * Math.sin(-endAngle * rad), -// x4 = cx + r1 * Math.cos(-startAngle * rad), -// y4 = cy + r1 * Math.sin(-startAngle * rad); -// -// let long= ((endAngle - startAngle) < -180)?1:0; -// console.log('long',long); -// -// return paper.path(["M", x4,y4, "L", x1,y1, "A", r,r, 0,long, 1, x2,y2, "L", x3,y3, "A", r1,r1,0, long, 0, x4,y4,"z"]).attr(params); -// } -// \ No newline at end of file diff --git a/style/style.sass b/style/style.sass index bb0a0ac..75e57c2 100644 --- a/style/style.sass +++ b/style/style.sass @@ -1,13 +1,17 @@ -$green : #669933 +$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% @@ -24,16 +28,34 @@ body max-width: 100% opacity: 0 transition: opacity 500ms + &.loaded opacity: 1 + + +#container + min-height: 100% + height: 100% + width: 100% + min-width: 100% + overflow-x: hidden + overflow-y: auto + position: absolute + top: 0 + left: 0 + z-index: 2 + .active - display: block!important + display: block !important + .section display: none height: 100% + a.btn-next text-decoration: none display: block + section z-index: 1 position: relative @@ -42,17 +64,22 @@ section 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 @@ -64,12 +91,14 @@ section margin-top: 2.14em cursor: pointer text-decoration: none + .logo display: block width: 26em text-align: center margin: 0 auto margin-top: 10em + svg top: 25px @@ -77,8 +106,7 @@ svg position: absolute top: 0 left: 0 - width: 100% - height: 100% + #projector position: absolute bottom: 0 @@ -90,18 +118,22 @@ svg 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 + bottom: 0px !important + .questions position: static padding-top: 3em + #questionNumber margin-top: 1em text-transform: uppercase margin-bottom: 20px + &::after content: '' display: block @@ -111,16 +143,19 @@ svg height: 0.375em margin: 0 auto top: 1.250em + #questionAsk margin: 4em auto 2em auto max-width: 31em + ul list-style: none display: inline-block + &__list position: relative max-width: 40em - width: 40em + min-width: 30em height: 9em background: white margin: 0 auto @@ -128,6 +163,7 @@ svg margin-bottom: 2em cursor: pointer transition: 400ms all ease + &--text font-size: 1.9em color: $darkblue @@ -135,10 +171,12 @@ svg padding-right: 0.5em text-align: left width: 85% + &--letter color: white left: 1.8em font-size: 2.2em + &--circle width: 5em height: 5em @@ -150,50 +188,63 @@ svg justify-content: center align-items: center z-index: 55 + .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 + .questions__contain display: flex align-items: center width: 100% height: 100% + .progressbar width: 55em margin: 0 auto - position: absolute + position: fixed bottom: 3em height: 0.75em background: white left: 0 right: 0 display: none + &-value position: absolute width: 0 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 @@ -204,12 +255,14 @@ section.questions a.button.next z-index: 5 position: relative margin-top: 1.14em + margin-bottom: 2em .circleContainer span display: inline-flex justify-content: center align-items: center + .questionsCircle width: 2em height: 2em @@ -222,6 +275,7 @@ section.questions a.button.next position: relative background-size: cover border: 3px solid white + &__container display: flex justify-content: center @@ -235,16 +289,21 @@ section.questions a.button.next left: 1em top: 1em color: white + &--letter font-size: 1.5em + .answerCircle - border: solid 3px $green!important + border: solid 3px $green !important transform: scale(1.2) - margin: 4em!important + margin: 4em !important + #ResultsDesc margin: 2em 0 + #canvas height: 35em + .borderScore border-radius: 50% width: 10em @@ -258,6 +317,7 @@ section.questions a.button.next position: relative bottom: 297px z-index: -5 + .score background: white width: 2em @@ -268,6 +328,7 @@ section.questions a.button.next justify-content: center align-items: center border: 5px solid rgba(255, 255, 255, 0.3) + span color: $darkblue font-size: 8em @@ -282,5 +343,6 @@ section.questions a.button.next width: 0.25em height: 0.25em padding: 8em + &__container left: -1em -- 2.39.5