'correct' => 2,
'explaination' => 'The Bona product range expanded to include solutions for surfaces other than wood in 2018.',
],
-
];
?>
<!DOCTYPE html>
</head>
<body>
-<div id="container" data-section="home">
+<div id="container" data-section="home" >
<div id="background" >
<div id="projector">
</div>
- <div class="active section">
+ <div class="active section " data-page="1">
<section class="home">
<h1>The Bona 100‑year</h1>
<h2>anniversary quiz</h2>
$number = $e;
$num = $number + 65;
echo '
- <a class="btn-next ok" href="#">
+ <a class="btn-next value" href="#" data-correct="'.$question[$i]['correct'].'">
<li class="questions__list">
<div class="questions__contain">
<div class="questions__list--circle">
<span class="questions__list--letter">'.chr($num ) .'</span>
</div>
- <span class="questions__list--text">'.$question[$i]['choices'][$e] .'</span>
+ <span class="questions__list--text" >'.$question[$i]['choices'][$e] .'</span>
</div>
</li>
</a>';
<h4 id="questionNumber">Question '.$question[$i]['id'].'/'.count($question).'</h4>
<h4 id="questionAsk">'.$question[$i]['label'].'</h4>
<span class="correctInfo">Correct answer : </span>
- <ul>
+ <ul style="display: block">
<li class="questions__list correctAnswer">
<div class="questions__contain">
<div class="questions__list--circle">
else{
echo '
<div class=" section">
- <section class="home questions">
+ <section class="home questions data" data-section="home" data-question="'.$question[$i]['id'].'">
<h4 id="questionNumber">Question '.$question[$i]['id'].'/'.count($question).'</h4>
<h4 id="questionAsk">'.$question[$i]['label'].'</h4>
<span class="correctInfo">Correct answer : </span>
- <ul class="circleContainer">
+ <ul class="circleContainer" style="display: block">
<span>
<li class="questionsCircle answerCircle" style="background-image: url(\'images/4-min.jpg\')">
<div class="questionsCircle__container">
</span>
</ul>
<a href="#" class="btn-next button next">Next</a>
- <!--<div class="progressbar"></div>-->
</section>
</div>';
}
}
- // var_dump(count($question));
?>
- <div class="section">
+ <div class="section" data-page="1">
<section class=" questions">
<h2 id="Results">Congrats</h2>
<a href="#" class="button btn-next next">Try again</a>
</section>
</div>
- <div class="progressbar"></div>
+
+ <div class="progressbar">
+ <div class="progressbar-value"></div>
+ </div>
</div>
</div>
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;
$(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() {
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
projects / bonaquiz.git / commitdiff