From: nael Date: Tue, 9 Apr 2019 16:20:12 +0000 (+0200) Subject: WIP #2647 @7:00 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=9ccfa419613d815ac6d509c5d7a04e71ae818359;p=bonaquiz.git WIP #2647 @7:00 --- diff --git a/images/1-min.jpg b/images/1-min.jpg deleted file mode 100644 index 5e27780..0000000 Binary files a/images/1-min.jpg and /dev/null differ diff --git a/images/13-1min.jpg b/images/13-1min.jpg new file mode 100644 index 0000000..5e27780 Binary files /dev/null and b/images/13-1min.jpg differ diff --git a/images/13-2min.jpg b/images/13-2min.jpg new file mode 100644 index 0000000..bfa52b3 Binary files /dev/null and b/images/13-2min.jpg differ diff --git a/images/13-3min.jpg b/images/13-3min.jpg new file mode 100644 index 0000000..4512341 Binary files /dev/null and b/images/13-3min.jpg differ diff --git a/images/13-4min.jpg b/images/13-4min.jpg new file mode 100644 index 0000000..e61f869 Binary files /dev/null and b/images/13-4min.jpg differ diff --git a/images/2-min.jpg b/images/2-min.jpg deleted file mode 100644 index bfa52b3..0000000 Binary files a/images/2-min.jpg and /dev/null differ diff --git a/images/3-min.jpg b/images/3-min.jpg deleted file mode 100644 index 4512341..0000000 Binary files a/images/3-min.jpg and /dev/null differ diff --git a/images/4-min.jpg b/images/4-min.jpg deleted file mode 100644 index e61f869..0000000 Binary files a/images/4-min.jpg and /dev/null differ diff --git a/index.php b/index.php index 107b27f..f4058f9 100644 --- a/index.php +++ b/index.php @@ -155,7 +155,7 @@ $question = [ The Bona 100-year anniversary quiz - +
@@ -163,7 +163,7 @@ $question = [
-
+

The Bona 100‑year

anniversary quiz

@@ -173,147 +173,160 @@ $question = [
- - -
-

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

-

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

-
    '; - for($e=0;$e -
  • -
    -
    - '.chr($num ) .' -
    - '.$question[$i]['choices'][$e] .' -
    -
    • - '; - } - echo ' -
-
-
'; - $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 == 1) // impair - { - echo ' - -
  • -
    - '.chr($num).' -
    -
    • -     '; - echo ''; - } - elseif ($z % 2 == 0) // pair - { - echo ''; - echo ' - -
  • -
    - '.chr($num).' -
    -
    • -     '; - } - } - echo '
- -
-
'; - // reponse question img - $letter = $question[$i]['correct'] + 64; - echo ' -
-
-

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

-

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

- - Correct answer : - -
    - -
  • -
    - '.chr($letter).' -
    -
    • -     -
- -
-
'; - } - } - ?> + + +//
+//

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

Congrats

you completed the quiz.

Your score

- -
-
- 7/10 +
+
+
+
20/'.count($question).''; + ?> +
- - +
diff --git a/js/bonaquiz.js b/js/bonaquiz.js index a7f149e..312c2f5 100644 --- a/js/bonaquiz.js +++ b/js/bonaquiz.js @@ -13,7 +13,7 @@ $('.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}); }); -displayProgress(); +AfterTransition(); $('.btn-next').on('click', function() { const delay = 0.5; @@ -23,14 +23,125 @@ $('.btn-next').on('click', function() { $(this).closest('div.section').removeClass('active') }); TweenMax.from($(this).closest('div.section').next(),delay,{x: '+=350px',opacity:0, delay:delay, - onComplete: displayProgress}); + onComplete: AfterTransition}); $(this).closest('div.section').next().addClass('active'); - let width = ($('.section:visible').attr("data-question") / 21) * 100; + let width = ($('.section:visible').attr("data-question") / nbquestions) * 100; $('.progressbar-value').css('width', width +'%'); +}); +// console.log(document.querySelectorAll('.section [data-question=""]').size); +$('.end').on('click',function () { + window.location = $( ".section" ).data( "homepage" ) }); +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 + + 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.84; // 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 + let donutRadius = donutSize; + + const stroke = "none"; + let border = $('.borderScore'); + let paperHeight = border.innerHeight(); + let paperWidth = border.innerWidth(); + 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; + } + + let circleStart = circleAngleDirection; + let scoreValue = 19/nbquestions; + + 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 + + + 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); + } + + + } + displayProgress(); +} + function displayProgress() { if ($('.section:visible').data("page") === 1) { console.log($(this).attr('data-page')); @@ -42,12 +153,19 @@ function displayProgress() { } // on recupere la valeur du click - +let scoreValue = 0; $('.value').on('click',function () { - alert($(this).data('correct')); + if ($(this).data('score') === 1){ + scoreValue ++; + } + + // alert($(this).data('score')); + + console.log(`Votre score est de : ${scoreValue}`); }); + function resize() { var ww = $(window).outerWidth(); var hh = $(window).outerHeight(); @@ -91,4 +209,4 @@ function resizeBar(){ let scale = windowWidth / windowHeight; $(".progressbar").css('font-size', 10 * scale); } -} \ No newline at end of file +} diff --git a/js/main.js b/js/main.js index 4102641..5f7184b 100644 --- a/js/main.js +++ b/js/main.js @@ -1,100 +1,100 @@ - -// 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); -} - +// +// // 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 c908c1f..bb0a0ac 100644 --- a/style/style.sass +++ b/style/style.sass @@ -70,6 +70,8 @@ section text-align: center margin: 0 auto margin-top: 10em +svg + top: 25px #background position: absolute @@ -241,7 +243,8 @@ section.questions a.button.next margin: 4em!important #ResultsDesc margin: 2em 0 - +#canvas + height: 35em .borderScore border-radius: 50% width: 10em @@ -252,6 +255,9 @@ section.questions a.button.next justify-content: center align-items: center padding: 15em + position: relative + bottom: 297px + z-index: -5 .score background: white width: 2em