From: nael Date: Mon, 8 Apr 2019 16:13:00 +0000 (+0200) Subject: WIP #2647 @7:00 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=c39da0ec6bab629a4a29d69599b1c7d62cb8beb2;p=bonaquiz.git WIP #2647 @7:00 --- diff --git a/index.php b/index.php index 4e3dee0..107b27f 100644 --- a/index.php +++ b/index.php @@ -145,7 +145,6 @@ $question = [ 'correct' => 2, 'explaination' => 'The Bona product range expanded to include solutions for surfaces other than wood in 2018.', ], - ]; ?> @@ -159,12 +158,12 @@ $question = [ -
+
-
+

The Bona 100‑year

anniversary quiz

@@ -188,13 +187,13 @@ $question = [ $number = $e; $num = $number + 65; echo ' - +
  • '.chr($num ) .'
    - '.$question[$i]['choices'][$e] .' + '.$question[$i]['choices'][$e] .'
    • '; @@ -213,7 +212,7 @@ $question = [

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

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

    Correct answer : -
      +
      • @@ -235,7 +234,7 @@ $question = [ else{ echo '
        -
        +

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

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

        @@ -284,7 +283,7 @@ $question = [ Correct answer : -
          +
          • @@ -294,15 +293,13 @@ $question = [
          -
        '; } } - // var_dump(count($question)); ?> -
        +

        Congrats

        @@ -319,7 +316,10 @@ $question = [
        -
        + +
        +
        +
        diff --git a/js/bonaquiz.js b/js/bonaquiz.js index e13ad36..a7f149e 100644 --- a/js/bonaquiz.js +++ b/js/bonaquiz.js @@ -13,6 +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(); $('.btn-next').on('click', function() { const delay = 0.5; @@ -21,8 +22,30 @@ $('.btn-next').on('click', function() { $(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}); + TweenMax.from($(this).closest('div.section').next(),delay,{x: '+=350px',opacity:0, delay:delay, + onComplete: displayProgress}); $(this).closest('div.section').next().addClass('active'); + + let width = ($('.section:visible').attr("data-question") / 21) * 100; + $('.progressbar-value').css('width', width +'%'); + +}); + +function displayProgress() { + if ($('.section:visible').data("page") === 1) { + console.log($(this).attr('data-page')); + $('.progressbar').css('display', 'none'); + } + else { + $('.progressbar').css('display', 'block'); + } +} + +// on recupere la valeur du click + +$('.value').on('click',function () { + alert($(this).data('correct')); + }); function resize() { @@ -68,17 +91,4 @@ function resizeBar(){ let scale = windowWidth / windowHeight; $(".progressbar").css('font-size', 10 * scale); } -} - - - -$('#container .data').each(function (index) { - // let questionID= $(this).attr("data-question"); - - $(this).on('click', function() { - alert($(this).data("question")); - }); - // console.log($('#container .data').eq(index).attr('data-question')); - - // console.log(questionID); -}); \ No newline at end of file +} \ No newline at end of file diff --git a/style/style.sass b/style/style.sass index 5b41a76..c908c1f 100644 --- a/style/style.sass +++ b/style/style.sass @@ -114,6 +114,7 @@ section max-width: 31em ul list-style: none + display: inline-block &__list position: relative max-width: 40em @@ -126,9 +127,9 @@ section cursor: pointer transition: 400ms all ease &--text - font-size: 2em + font-size: 1.9em color: $darkblue - padding-left: 1.2em + padding-left: 1.6em padding-right: 0.5em text-align: left width: 85% @@ -142,7 +143,7 @@ section background: #669933 border-radius: 50% position: relative - left: 1.2em + left: 2.2em display: flex justify-content: center align-items: center @@ -173,10 +174,10 @@ section background: white left: 0 right: 0 - &::before - content: '' + display: none + &-value position: absolute - width: 10% + width: 0 height: 100% background: $green left: 0