'explaination' => 'As of 2016, Bona products were available at 9 of the top 10 retailers in the US, and more than 4 million spray mops had been sold around the world.',
],
['id' => 13,
- 'type'=>'images',
- 'label'=>'Which photo is the Austrian Chancellor\'s Office, Vienna, where we had the opportunity to bring out the beauty in the floor?',
- 'imagesnb'=>4,
- 'correct'=>4,
+ 'type' => 'images',
+ 'label' => 'Which photo is the Austrian Chancellor\'s Office, Vienna, where we had the opportunity to bring out the beauty in the floor?',
+ 'imagesnb' => 4,
+ 'correct' => 4,
],
['id' => 14,
- 'type'=>'images',
- 'label'=>'Which photo is the Walkway of the Tower Bridge, London, where we had the opportunity to bring out the beauty in the floor?',
- 'imagesnb'=>4,
- 'correct'=>4,
+ 'type' => 'images',
+ 'label' => 'Which photo is the Walkway of the Tower Bridge, London, where we had the opportunity to bring out the beauty in the floor?',
+ 'imagesnb' => 4,
+ 'correct' => 4,
],
['id' => 15,
'type' => 'text',
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
+ <link rel="stylesheet" type="text/css" href="style/style.css?j=<?php echo time(); ?>">
+ <script>var nbquestions =<?php echo count($question)?>;</script>
</head>
<body>
-<div id="container" data-section="home" >
- <div id="background" >
- <div id="projector">
- </div>
+<div id="background">
+ <div id="projector"></div>
+</div>
+<div id="container" data-section="home">
+
+
+ <div class="active section " data-page="1" data-homepage="">
+ <section class="home">
+ <h1>The Bona 100‑year</h1>
+ <h2>anniversary quiz</h2>
+ <h3>Think you know Bona?<br>Put it to the test by taking part in our short quiz.</h3>
+ <a href="#" class="btn-next button start">Start</a>
+ <img src="images/logohome.svg" class="logo"/>
+ </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="active section " data-page="1" data-homepage="">
- <section class="home">
- <h1>The Bona 100‑year</h1>
- <h2>anniversary quiz</h2>
- <h3>Think you know Bona?<br>Put it to the test by taking part in our short quiz.</h3>
- <a href="#" class="btn-next button start">Start</a>
- <img src="images/logohome.svg" class="logo"/>
- </section>
- </div>
+ <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>
- <!-- **************************************** 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>';
-// }
-// }
-// ?>
+ <p class="response">' . $question[$i]['explaination'] . '</p>
- <div class="section" data-page="1" data-end="1">
- <section class=" questions">
- <h2 id="Results">Congrats</h2>
+ <a href="#" class="button btn-next next" >Next</a>
- <h4 id="ResultsDesc">you completed the quiz.</h4>
+ <!--<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 class="ResultsInfo">Your score</h4>
- <div id="canvas">
- <div class="borderScore">
- <div class="score">
- <?php
- echo '<span> <div></div>20/'.count($question).'</span>';
- ?>
- </div>
+ <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" 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">
+ <?php
+ echo '<span> <div></div>20/' . count($question) . '</span>';
+ ?>
</div>
</div>
- <a href="#" class="button btn-next next end">Try again</a>
- </section>
- </div>
+ </div>
+ <a href="#" class="button btn-next next end">Try again</a>
+ </section>
+ </div>
- <div class="progressbar">
- <div class="progressbar-value"></div>
- </div>
+ <div class="progressbar">
+ <div class="progressbar-value"></div>
</div>
</div>
<script type="text/javascript" src="js/raphael.min.js"></script>
<script type="text/javascript" src="js/TweenMax.min.js"></script>
<script type="text/javascript" src="js/RaphaelPlugin.min.js"></script>
-<script type="text/javascript" src="js/bonaquiz.js"></script>
-<script type="text/javascript" src="js/main.js"></script>
+<script type="text/javascript" src="js/bonaquiz.js?j=<?php echo time(); ?>"></script>
</body>
</html>
\ No newline at end of file
$(function () {
$(window).on('resize', resize);
- $(window).on('resize', resizeBar);
+
+ $(window).on('orientationchange', function () {
+ console.log('orientation');
+ setTimeout(function () {
+ resize()
+ }, 3000);
+ });
+
resize();
- resizeBar();
+
setTimeout(function () {
resize();
resizeBar();
$("body").addClass('loaded');
}, 1000);
});
-$('.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});
+$('.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});
});
AfterTransition();
-$('.btn-next').on('click', function() {
+$('.btn-next').on('click', function () {
const delay = 0.5;
- TweenMax.to($(this).closest('div.section'),delay,{x: '-=350px',opacity:0});
- $(this).closest('div.section').delay(delay*1000).queue(function () {
+ TweenMax.to($(this).closest('div.section'), delay, {x: '-=350px', opacity: 0});
+ $(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,
- onComplete: AfterTransition});
+ TweenMax.from($(this).closest('div.section').next(), delay, {
+ x: '+=350px', opacity: 0, delay: delay,
+ onComplete: AfterTransition
+ });
$(this).closest('div.section').next().addClass('active');
let width = ($('.section:visible').attr("data-question") / nbquestions) * 100;
- $('.progressbar-value').css('width', width +'%');
+ $('.progressbar-value').css('width', width + '%');
});
// console.log(document.querySelectorAll('.section [data-question=""]').size);
-$('.end').on('click',function () {
- window.location = $( ".section" ).data( "homepage" )
+$('.end').on('click', function () {
+ window.location = $(".section").data("homepage")
});
function AfterTransition() {
let border = $('.borderScore');
let paperHeight = border.innerHeight();
let paperWidth = border.innerWidth();
- let paper = Raphael('canvas', paperWidth,paperHeight);
- let paperRadius ;
+ 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;
+ if (circleOption === 1) {
+ paperRadius = calcHypotenuse(paperWidth / 2, paperHeight / 2);
+ } else {
+ paperRadius = Math.min(paperWidth, paperHeight) / 2;
}
let circleStart = circleAngleDirection;
- let scoreValue = 19/nbquestions;
+ let scoreValue = 19 / nbquestions;
window.circleDirection = circleSens;
- if(window.circleDirection === 1){
+ if (window.circleDirection === 1) {
window.angle = circleStart;
- window.angleEnd = circleStart - (360*scoreValue);
+ window.angleEnd = circleStart - (360 * scoreValue);
- }
- else {
+ } else {
window.angle = circleStart;
- window.angleEnd = circleStart+360;
+ window.angleEnd = circleStart + 360;
}
updateAngle();
console.log(`Le rayon est: ${paperRadius}`);
- TweenMax.to(window,animationDuration,{angle: angleEnd ,onUpdate:updateAngle, delay: delayValue,ease:Power1.easeInOut });
-
+ 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});
+ 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)));
+ 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;
+
+ function sector(paper, cx, cy, r, pct, startAngle, endAngle, params) {
+ if (window.circleDirection === 1) {
+ let sa = startAngle;
+ startAngle = endAngle;
+ endAngle = sa;
}
- startAngle=90;
+ startAngle = 90;
console.log(startAngle);
console.log(endAngle);
// init radian
- let rad= Math.PI/180;
+ let rad = Math.PI / 180;
// first circle (bigger)
let x1 = cx + r * Math.cos(-startAngle * rad),
x2 = cx + r * Math.cos(-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);
+ 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);
+ 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);
}
if ($('.section:visible').data("page") === 1) {
console.log($(this).attr('data-page'));
$('.progressbar').css('display', 'none');
- }
- else {
+ } else {
$('.progressbar').css('display', 'block');
}
}
// on recupere la valeur du click
let scoreValue = 0;
-$('.value').on('click',function () {
+$('.value').on('click', function () {
- if ($(this).data('score') === 1){
- scoreValue ++;
+ if ($(this).data('score') === 1) {
+ scoreValue++;
}
// alert($(this).data('score'));
var ww = $(window).outerWidth();
var hh = $(window).outerHeight();
+ $("#background,#projector").css({width: ww, maxWidth: ww, minWidth: ww, height: hh, maxHeight: hh, minHeight: hh});
+
var vs = $("section:visible");
var home = vs.hasClass('home');
$("section:visible").css('font-size', 10);
if (home) {
sh *= 1.1;
}
- console.log('resize',sh, hh);
+ console.log('resize', sh, hh);
var cssSection = {};
if (sh > hh) {
var scale = hh / sh;
- console.log('scale',scale);
+ console.log('scale', scale);
$("section:visible").css('font-size', 10 * scale);
sh = vs.outerHeight();
if (home) {
if (home) {
$("#projector").css('bottom', Math.max(cssSection.top, hh * 0.05));
}
+ resizeBar();
+
}
-function resizeBar(){
+function resizeBar() {
let windowWidth = window.outerWidth;
let windowHeight = window.outerHeight;
- console.log('width : '+windowWidth);
+ console.log('width : ' + windowWidth);
$(".progressbar").css('font-size', 10);
// $(".progressbar").css('font-size', 10 * scale);
- if (windowHeight > windowWidth){
+ if (windowHeight > windowWidth) {
let scale = windowWidth / windowHeight;
$(".progressbar").css('font-size', 10 * scale);
}
+++ /dev/null
-//
-// // 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
-$green : #669933
+$green: #669933
$darkblue: #18264f
+
+
*
margin: 0
padding: 0
box-sizing: border-box
font-weight: 300
+
@font-face
font-family: Helvetica
src: url("../HelveticaNeueLight.woff")
+
html
font-family: Helvetica, sans-serif
height: 100%
max-width: 100%
opacity: 0
transition: opacity 500ms
+
&.loaded
opacity: 1
+
+
+#container
+ min-height: 100%
+ height: 100%
+ width: 100%
+ min-width: 100%
+ overflow-x: hidden
+ overflow-y: auto
+ position: absolute
+ top: 0
+ left: 0
+ z-index: 2
+
.active
- display: block!important
+ display: block !important
+
.section
display: none
height: 100%
+
a.btn-next
text-decoration: none
display: block
+
section
z-index: 1
position: relative
margin: 0 auto
font-size: 10px
text-align: center
+
h1
font-size: 9em
+
h2
font-size: 6em
+
h3
font-size: 3.7em
margin-top: 1.62em
line-height: 1.5em
+
h4
font-size: 2.45em
line-height: 1.5em
+
a.button
display: inline-block
font-size: 5.6em
margin-top: 2.14em
cursor: pointer
text-decoration: none
+
.logo
display: block
width: 26em
text-align: center
margin: 0 auto
margin-top: 10em
+
svg
top: 25px
position: absolute
top: 0
left: 0
- width: 100%
- height: 100%
+
#projector
position: absolute
bottom: 0
background-position: 50% 100%
background-size: auto 100%
opacity: 0.5
+
&[data-section="home"]
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, #000000 100%)
.backgroundQuestion #projector
- bottom: 0px!important
+ bottom: 0px !important
+
.questions
position: static
padding-top: 3em
+
#questionNumber
margin-top: 1em
text-transform: uppercase
margin-bottom: 20px
+
&::after
content: ''
display: block
height: 0.375em
margin: 0 auto
top: 1.250em
+
#questionAsk
margin: 4em auto 2em auto
max-width: 31em
+
ul
list-style: none
display: inline-block
+
&__list
position: relative
max-width: 40em
- width: 40em
+ min-width: 30em
height: 9em
background: white
margin: 0 auto
margin-bottom: 2em
cursor: pointer
transition: 400ms all ease
+
&--text
font-size: 1.9em
color: $darkblue
padding-right: 0.5em
text-align: left
width: 85%
+
&--letter
color: white
left: 1.8em
font-size: 2.2em
+
&--circle
width: 5em
height: 5em
justify-content: center
align-items: center
z-index: 55
+
.questions__list:hover
background: $green
transition: 400ms all ease
+
.questions__list--circle
background: white
transition: 400ms all ease
+
.questions__list--letter
color: $green
transition: 400ms all ease
+
.questions__list--text
color: white
transition: 400ms all ease
+
.questions__contain
display: flex
align-items: center
width: 100%
height: 100%
+
.progressbar
width: 55em
margin: 0 auto
- position: absolute
+ position: fixed
bottom: 3em
height: 0.75em
background: white
left: 0
right: 0
display: none
+
&-value
position: absolute
width: 0
height: 100%
background: $green
left: 0
+
.correctInfo
font-size: 2em
+
.correctAnswer
margin-top: 2em
background: $green
+
.questions__list--circle
background: white
+
.questions__list--letter
color: $green
+
.questions__list--text
color: white
+
.response
font-size: 2.2em
max-width: 27em
z-index: 5
position: relative
margin-top: 1.14em
+ margin-bottom: 2em
.circleContainer
span
display: inline-flex
justify-content: center
align-items: center
+
.questionsCircle
width: 2em
height: 2em
position: relative
background-size: cover
border: 3px solid white
+
&__container
display: flex
justify-content: center
left: 1em
top: 1em
color: white
+
&--letter
font-size: 1.5em
+
.answerCircle
- border: solid 3px $green!important
+ border: solid 3px $green !important
transform: scale(1.2)
- margin: 4em!important
+ margin: 4em !important
+
#ResultsDesc
margin: 2em 0
+
#canvas
height: 35em
+
.borderScore
border-radius: 50%
width: 10em
position: relative
bottom: 297px
z-index: -5
+
.score
background: white
width: 2em
justify-content: center
align-items: center
border: 5px solid rgba(255, 255, 255, 0.3)
+
span
color: $darkblue
font-size: 8em
width: 0.25em
height: 0.25em
padding: 8em
+
&__container
left: -1em
projects / bonaquiz.git / commitdiff