<title>The Bona 100-year anniversary quiz</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style/style.css">
-
+ <script>var nbquestions=<?php echo count($question)?>;</script>
</head>
<body>
<div id="container" data-section="home" >
<div id="projector">
</div>
- <div class="active section " data-page="1">
+ <div class="active section " data-page="1" data-homepage="">
<section class="home">
<h1>The Bona 100‑year</h1>
<h2>anniversary quiz</h2>
</section>
</div>
- <!-- **************************************** SECTION QUESTION 1 *******************************-------------->
- <?php
- for($i = 0; $i<count($question); $i++ ){
- if($question[$i]['type'] === 'text'){
- echo '
- <div class="section data" data-section="home" data-question="'.$question[$i]['id'].'" >
- <section class="home questions ">
- <h4 id="questionNumber">Question '.$question[$i]['id'].'/'.count($question).'</h4>
- <h4 id="questionAsk">'.$question[$i]['label'].'</h4>
- <ul>';
- for($e=0;$e<count($question[$e]['choices']); $e++){
- $number = $e;
- $num = $number + 65;
- echo '
- <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>
- </div>
- </li>
- </a>';
- }
- echo '
- </ul>
- </section>
- </div>';
- $v= $question[$i]['correct']-1;
- $answer = $question[$i]['choices'][$v];
- $letter = $question[$i]['correct'] + 64;
- echo '
-
- <div class="section">
- <section class="home questions ">
- <h4 id="questionNumber">Question '.$question[$i]['id'].'/'.count($question).'</h4>
- <h4 id="questionAsk">'.$question[$i]['label'].'</h4>
- <span class="correctInfo">Correct answer : </span>
- <ul style="display: block">
- <li class="questions__list correctAnswer">
- <div class="questions__contain">
- <div class="questions__list--circle">
- <span class="questions__list--letter">'.chr($letter).'</span>
- </div>
- <span class="questions__list--text">'.$answer.'</span>
- </div>
- </li>
- </ul>
-
- <p class="response">'.$question[$i]['explaination'] .'</p>
-
- <a href="#" class="button btn-next next" >Next</a>
-
- <!--<div class="progressbar"></div>-->
- </section>
- </div>';
- }
- else{
- echo '
- <div class=" section">
- <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>
- <ul class="circleContainer">';
-
- for($z=0;$z<$question[$i]['imagesnb']; $z++)
- {
- $numb = $z;
- $num = $numb + 65;
- if ($z % 2 == 1) // impair
- {
- echo '
- <a class="btn-next" href="#">
- <li class="questionsCircle " style="background-image: url(\'images/1-min.jpg\')">
- <div class="questionsCircle__container">
- <span class="questionsCircle__container--letter">'.chr($num).'</span>
- </div>
- </li>
- </a>';
- echo '</span>';
- }
- elseif ($z % 2 == 0) // pair
- {
- echo '<span>';
- echo '
- <a class="btn-next" href="#">
- <li class="questionsCircle " style="background-image: url(\'images/1-min.jpg\')">
- <div class="questionsCircle__container">
- <span class="questionsCircle__container--letter">'.chr($num).'</span>
- </div>
- </li>
- </a>';
- }
- }
- echo '</ul>
- <!--<div class="progressbar"></div>-->
- </section>
- </div>';
- // reponse question img
- $letter = $question[$i]['correct'] + 64;
- echo '
- <div class="section">
- <section class="questions" >
- <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" style="display: block">
- <span>
- <li class="questionsCircle answerCircle" style="background-image: url(\'images/4-min.jpg\')">
- <div class="questionsCircle__container">
- <span class="questionsCircle__container--letter">'.chr($letter).'</span>
- </div>
- </li>
- </span>
- </ul>
- <a href="#" class="btn-next button next">Next</a>
- </section>
- </div>';
- }
- }
- ?>
+ <!-- **************************************** SECTION QUESTION 1 ******************************* -->
+<!-- --><?php
+// for($i = 0; $i<count($question); $i++ ){
+// if($question[$i]['type'] === 'text'){
+// echo '
+// <div class="section data" data-section="home" data-question="'.$question[$i]['id'].'" >
+// <section class="home questions ">
+// <h4 id="questionNumber">Question '.$question[$i]['id'].'/'.count($question).'</h4>
+// <h4 id="questionAsk">'.$question[$i]['label'].'</h4>
+// <ul>';
+// foreach($question[$i]['choices'] as $key=>$value){
+//
+// $number = $key ;
+// $num = $number + 65;
+//
+// $score = 0;
+//
+// $correct = $question[$i]['correct'] -1;
+//
+// if($correct === $key){
+// $score =1;
+// }
+// echo'<a class="btn-next value" href="#" data-score="'.$score.'">';
+//
+// echo '
+// <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" >'.$value.'</span>
+// </div>
+// </li>
+// </a>';
+// }
+// echo '
+// </ul>
+// </section>
+// </div>';
+// $v= $question[$i]['correct']-1;
+// $answer = $question[$i]['choices'][$v];
+// $letter = $question[$i]['correct'] + 64;
+// echo '
+//
+// <div class="section">
+// <section class="home questions ">
+// <h4 id="questionNumber">Question '.$question[$i]['id'].'/'.count($question).'</h4>
+// <h4 id="questionAsk">'.$question[$i]['label'].'</h4>
+// <span class="correctInfo">Correct answer : </span>
+// <ul style="display: block">
+// <li class="questions__list correctAnswer">
+// <div class="questions__contain">
+// <div class="questions__list--circle">
+// <span class="questions__list--letter">'.chr($letter).'</span>
+// </div>
+// <span class="questions__list--text">'.$answer.'</span>
+// </div>
+// </li>
+// </ul>
+//
+// <p class="response">'.$question[$i]['explaination'] .'</p>
+//
+// <a href="#" class="button btn-next next" >Next</a>
+//
+// <!--<div class="progressbar"></div>-->
+// </section>
+// </div>';
+// }
+// else{
+// echo '
+// <div class=" section data" data-question="'.$question[$i]['id'].'">
+// <section class="home questions " data-section="home" >
+// <h4 id="questionNumber">Question '.$question[$i]['id'].'/'.count($question).'</h4>
+//
+// <h4 id="questionAsk">'.$question[$i]['label'].'</h4>
+// <ul class="circleContainer">';
+//
+// for($z=0;$z<$question[$i]['imagesnb']; $z++)
+// {
+// $numb = $z;
+// $num = $numb + 65;
+// if ($z % 2 == 0) // pair
+// {
+// echo '<span>';
+// }
+// $score = 0;
+//
+// $correct = $question[$i]['correct'];
+// $imgCorrect = $z+1;
+//
+// if($correct === $imgCorrect ){
+// $score =1;
+// }
+// echo'<a class="btn-next value" href="#" data-score="'.$score.'">';
+// echo '
+// <li class="questionsCircle " style="background-image: url(\'images/'.$question[$i]['id'].'-'.$imgCorrect.'min.jpg\')">
+// <div class="questionsCircle__container">
+// <span class="questionsCircle__container--letter">'.chr($num).'</span>
+// </div>
+// </li>
+// </a>';
+//
+// if ($z % 2 == 1) // impair
+// {
+// echo '</span>';
+// }
+// }
+// echo '</ul>
+// <!--<div class="progressbar"></div>-->
+// </section>
+// </div>';
+// // reponse question img
+// $letter = $question[$i]['correct'] + 64;
+// echo '
+// <div class="section">
+// <section class="questions" >
+// <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" style="display: block">
+// <span>
+// <li class="questionsCircle answerCircle" style="background-image: url(\'images/'.$question[$i]['id'].'-'.$imgCorrect.'min.jpg\')">
+// <div class="questionsCircle__container">
+// <span class="questionsCircle__container--letter">'.chr($letter).'</span>
+// </div>
+// </li>
+// </span>
+// </ul>
+// <a href="#" class="btn-next button next">Next</a>
+// </section>
+// </div>';
+// }
+// }
+// ?>
- <div class="section" data-page="1">
+ <div class="section" data-page="1" data-end="1">
<section class=" questions">
<h2 id="Results">Congrats</h2>
<h4 id="ResultsDesc">you completed the quiz.</h4>
<h4 class="ResultsInfo">Your score</h4>
- <!-- <div id="canvas">-->
- <div class="borderScore">
- <div class="score">
- <span>7/10</span>
+ <div id="canvas">
+ <div class="borderScore">
+ <div class="score">
+ <?php
+ echo '<span> <div></div>20/'.count($question).'</span>';
+ ?>
+ </div>
</div>
</div>
- <!-- </div>-->
- <a href="#" class="button btn-next next">Try again</a>
+ <a href="#" class="button btn-next next end">Try again</a>
</section>
</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();
+AfterTransition();
$('.btn-next').on('click', function() {
const delay = 0.5;
$(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'));
}
// 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();
let scale = windowWidth / windowHeight;
$(".progressbar").css('font-size', 10 * scale);
}
-}
\ No newline at end of file
+}
-
-// 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
text-align: center
margin: 0 auto
margin-top: 10em
+svg
+ top: 25px
#background
position: absolute
margin: 4em!important
#ResultsDesc
margin: 2em 0
-
+#canvas
+ height: 35em
.borderScore
border-radius: 50%
width: 10em
justify-content: center
align-items: center
padding: 15em
+ position: relative
+ bottom: 297px
+ z-index: -5
.score
background: white
width: 2em
projects / bonaquiz.git / commitdiff
