<link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style/style.css?j=<?php echo time(); ?>">
<script>var nbquestions =<?php echo count($question)?>;</script>
+ <script>let scoreValue;</script>
</head>
<body>
+
<div id="background">
<div id="projector"></div>
</div>
</div>
<!-- **************************************** SECTION QUESTION 1 ******************************* -->
- <!-- --><?php
+ <?php
for ($i = 0; $i < count($question); $i++) {
if ($question[$i]['type'] === 'text') {
echo '
}
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\')">
+ <li class="questionsCircle " style="background-image: url(\'images/' . $question[$i]['id'] . '-' . $imgCorrect . '.jpg\')">
<div class="questionsCircle__container">
<span class="questionsCircle__container--letter">' . chr($num) . '</span>
</div>
<ul class="circleContainer" style="display: block">
<span>
- <li class="questionsCircle answerCircle" style="background-image: url(\'images/' . $question[$i]['id'] . '-' . $imgCorrect . 'min.jpg\')">
+ <li class="questionsCircle answerCircle" style="background-image: url(\'images/' . $question[$i]['id'] . '-' . $imgCorrect . '.jpg\')">
<div class="questionsCircle__container">
<span class="questionsCircle__container--letter">' . chr($letter) . '</span>
</div>
</div>';
}
}
+
?>
<div class="section" data-page="1" data-end="1">
<div id="canvas">
<div class="borderScore">
<div class="score">
- <?php
- echo '<span> <div></div>20/' . count($question) . '</span>';
- ?>
+ <div class="inner">
+ <span id="finalScore"></span>/<?= count($question) ?>
+ </div>
</div>
</div>
</div>
</div>
</div>
+<div id="orientationWarning"></div>
+
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/raphael.min.js"></script>
<script type="text/javascript" src="js/TweenMax.min.js"></script>
setTimeout(function () {
resize();
- resizeBar();
$("body").addClass('loaded');
}, 1000);
});
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
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";
}
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();
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,
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)
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);
}
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();
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);
- }
}
+*/
projects / bonaquiz.git / commitdiff
