From: nael Date: Wed, 10 Apr 2019 16:40:56 +0000 (+0200) Subject: WIP #2647 @7:00 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=077bb8a8abc77af2684339b7d51bc0e35debbb20;p=bonaquiz.git WIP #2647 @7:00 --- diff --git a/images/13-1min.jpg b/images/13-1min.jpg deleted file mode 100644 index 5e27780..0000000 Binary files a/images/13-1min.jpg and /dev/null differ diff --git a/images/13-2min.jpg b/images/13-2min.jpg deleted file mode 100644 index bfa52b3..0000000 Binary files a/images/13-2min.jpg and /dev/null differ diff --git a/images/13-3min.jpg b/images/13-3min.jpg deleted file mode 100644 index 4512341..0000000 Binary files a/images/13-3min.jpg and /dev/null differ diff --git a/images/13-4min.jpg b/images/13-4min.jpg deleted file mode 100644 index e61f869..0000000 Binary files a/images/13-4min.jpg and /dev/null differ diff --git a/index.php b/index.php index c1a750f..0366609 100644 --- a/index.php +++ b/index.php @@ -156,8 +156,10 @@ $question = [ + +

@@ -175,7 +177,7 @@ $question = [ - '; echo ' -

' . chr($num) . '

@@ -295,7 +297,7 @@ $question = [

' . chr($letter) . '

@@ -307,6 +309,7 @@ $question = [ '; } } + ?>

@@ -319,9 +322,9 @@ $question = [

20/' . count($question) . ''; - ?> +

+ / +

@@ -334,6 +337,8 @@ $question = [

+ diff --git a/js/bonaquiz.js b/js/bonaquiz.js index ce1ccf9..af79f05 100644 --- a/js/bonaquiz.js +++ b/js/bonaquiz.js @@ -12,7 +12,6 @@ $(function () { setTimeout(function () { resize(); - resizeBar(); $("body").addClass('loaded'); }, 1000); }); @@ -44,11 +43,25 @@ $('.end').on('click', function () { window.location = $(".section").data("homepage") }); +// on recupere la valeur du click +scoreValue = 0; + +$('.value').on('click', function () { + + if ($(this).data('score') === 1) { + scoreValue++; + } + + // alert($(this).data('score')); + console.log(`Votre score est de : ${scoreValue}`); + $('#finalScore').html(`${scoreValue}`); + AfterTransition(); +}); + + function AfterTransition() { if ($('.section:visible').data("end") === 1) { - /*** ANIMATION RAPHAEL JS ***/ - 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 @@ -61,7 +74,7 @@ function AfterTransition() { let animationDuration = 5; // DurÃ©e en seconde de l'animation - let circleAngleDirection = 90; // DÃ©termine l'angle de commencement de l'animation + let circleAngleDirection = 90; // DÃ©termine l'angle de commencement de l'animation let donutRadius = donutSize; const stroke = "none"; @@ -82,16 +95,17 @@ function AfterTransition() { } let circleStart = circleAngleDirection; - let scoreValue = 19 / nbquestions; + //let scoreFinal = 10 / nbquestions; //scoreValue + let scoreFinal = 0.6; window.circleDirection = circleSens; if (window.circleDirection === 1) { window.angle = circleStart; - window.angleEnd = circleStart - (360 * scoreValue); + window.angleEnd = circleStart - (360 * scoreFinal); // 90 - 360 = -270 } else { window.angle = circleStart; - window.angleEnd = circleStart + 360; + window.angleEnd = circleStart + (360 * scoreFinal); } updateAngle(); @@ -103,12 +117,10 @@ function AfterTransition() { ease: Power1.easeInOut }); - // choose percent radius of the donut circle - function updateAngle() { - // console.log(window.angle); + console.log('angle = ', window.angle); paper.clear(); sector(paper, paperWidth / 2, paperHeight / 2, paperRadius, donutRadius, window.angle, window.angleEnd, { fill: color, @@ -122,14 +134,13 @@ function AfterTransition() { function sector(paper, cx, cy, r, pct, startAngle, endAngle, params) { if (window.circleDirection === 1) { - let sa = startAngle; - startAngle = endAngle; - endAngle = sa; - + // Invert the circle animation + endAngle = startAngle; + startAngle = 90; } - startAngle = 90; - console.log(startAngle); - console.log(endAngle); + //startAngle = 90; + //console.log('startAngle = ', startAngle); + console.log('endAngle = ',endAngle); // init radian let rad = Math.PI / 180; // first circle (bigger) @@ -147,7 +158,7 @@ function AfterTransition() { y4 = cy + r1 * Math.sin(-startAngle * rad); let long = ((endAngle - startAngle) < -180) ? 1 : 0; - console.log('long', long); + //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); } @@ -159,27 +170,59 @@ function AfterTransition() { function displayProgress() { if ($('.section:visible').data("page") === 1) { - console.log($(this).attr('data-page')); + console.log('data-page =', $(this).attr('data-page')); $('.progressbar').css('display', 'none'); } else { $('.progressbar').css('display', 'block'); } } -// on recupere la valeur du click -let scoreValue = 0; -$('.value').on('click', function () { - if ($(this).data('score') === 1) { - scoreValue++; +let breakpoint = 640, // Stop scaling the height below this width (let it scroll) + scaler = $('#container'); + + +function resize() { + + scaler.attr('style', ''); // Reset scaling so we can measure base size + + var ww = $(window).width(), + wh = $(window).height(), + // TODO: measure all content screens to find the optimal overall scale + baseWidth = scaler.outerWidth(), + baseHeight = scaler.outerHeight(), + scale, + translateAmount; + + // 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); } - // alert($(this).data('score')); + // 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 +')'); + } + +} + + + + - console.log(`Votre score est de : ${scoreValue}`); -}); +/* function resize() { var ww = $(window).outerWidth(); var hh = $(window).outerHeight(); @@ -212,19 +255,5 @@ function resize() { if (home) { $("#projector").css('bottom', Math.max(cssSection.top, hh * 0.05)); } - resizeBar(); - -} - -function resizeBar() { - let windowWidth = window.outerWidth; - let windowHeight = window.outerHeight; - console.log('width : ' + windowWidth); - $(".progressbar").css('font-size', 10); - - // $(".progressbar").css('font-size', 10 * scale); - if (windowHeight > windowWidth) { - let scale = windowWidth / windowHeight; - $(".progressbar").css('font-size', 10 * scale); - } } +*/ diff --git a/style/style.sass b/style/style.sass index 75e57c2..68f3c1c 100644 --- a/style/style.sass +++ b/style/style.sass @@ -34,16 +34,17 @@ body #container - min-height: 100% - height: 100% - width: 100% - min-width: 100% - overflow-x: hidden - overflow-y: auto + //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 + top: 50% + left: 50% + //transform: translate(-50%, -50%) .active display: block !important @@ -99,9 +100,6 @@ section margin: 0 auto margin-top: 10em -svg - top: 25px - #background position: absolute top: 0 @@ -212,7 +210,8 @@ svg height: 100% .progressbar - width: 55em + max-width: 30em + width: 90% // for smaller screens margin: 0 auto position: fixed bottom: 3em @@ -302,21 +301,26 @@ section.questions a.button.next margin: 2em 0 #canvas - height: 35em + position: relative + margin-top: 2em + + svg + position: absolute !important + top: 0 + left: 50% !important + transform: translateX(-50%) + .borderScore border-radius: 50% width: 10em height: 10em background-color: rgba(255, 255, 255, 0.5) - margin: 2em auto 0em auto + margin: 0 auto display: flex justify-content: center align-items: center padding: 15em - position: relative - bottom: 297px - z-index: -5 .score background: white @@ -329,7 +333,7 @@ section.questions a.button.next align-items: center border: 5px solid rgba(255, 255, 255, 0.3) - span + .inner color: $darkblue font-size: 8em @@ -346,3 +350,13 @@ section.questions a.button.next &__container left: -1em + + + + +.tinyscreen #orientationWarning + position: absolute + background-color: #fc0 + width: 100vw + height: 100vh + z-index: 99 \ No newline at end of file