<?php
-$question = [
+$questions = [
['id' => 1,
'type' => 'text',
'label' => 'What kind of business was Bona founder Wilhelm Edner running when he started to sell floor wax?',
<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?j=<?php echo time(); ?>">
- <script>var nbquestions =<?php echo count($question)?>;</script>
+ <script>var nbquestions =<?php echo count($questions)?>;</script>
<script>let scoreValue;</script>
</head>
<body>
<!-- **************************************** 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;
+ $question_count = count($questions);
- if ($correct === $key) {
- $score = 1;
- }
- echo '<a class="btn-next value" href="#" data-score="' . $score . '">';
+ foreach ($questions as $question) {
- 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>
+ //DISABLE text Qs
+ if ($question['type'] === 'text') continue;
- <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 '<li data-score="' . $score . '" class="questionsCircle btn-next value" style="background-image: url(\'images/' . $question[$i]['id'] . '-' . $imgCorrect . '.jpg\')">
- <div class="questionsCircle__container">
- <span class="questionsCircle__container--letter">' . chr($num) . '</span>
- </div>
- </li>';
-
-// 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 . '.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>';
- }
+ displayQuestion($question, $question_count);
+ displayAnswer($question, $question_count);
}
?>
<div class="borderScore">
<div class="score">
<div class="inner">
- <span id="finalScore"></span>/<?= count($question) ?>
+ <span id="finalScore"></span>/<?= count($questions) ?>
</div>
</div>
</div>
<script type="text/javascript" src="js/RaphaelPlugin.min.js"></script>
<script type="text/javascript" src="js/bonaquiz.js?j=<?php echo time(); ?>"></script>
</body>
-</html>
\ No newline at end of file
+</html>
+
+<?php
+
+
+function displayQuestion($question, $question_count) {
+
+ $correct_index = $question['correct'] - 1;
+
+ echo '
+ <div class="section data" data-section="home" data-question="' . $question['id'] . '" >
+ <section class="questions">
+ <h4 id="questionNumber">Question ' . $question['id'] . '/' . $question_count . '</h4>
+ <h4 id="questionAsk">' . $question['label'] . '</h4>';
+
+ if ($question['type'] === 'text') {
+
+ echo '<ul>';
+
+ foreach ($question['choices'] as $index => $value) {
+
+ if ($correct_index === $index) {
+ $score = 1;
+ } else {
+ $score = 0;
+ }
+
+ echo '
+ <li class="questions__list btn-next value" data-score="' . $score . '">
+ <div class="questions__contain">
+ <div class="questions__list--circle">
+ <span class="questions__list--letter">' . numberToLetter($index) . '</span>
+ </div>
+ <span class="questions__list--text" >' . $value . '</span>
+ </div>
+ </li>';
+ }
+
+ } else {
+
+ echo '<ul class="circleContainer">';
+
+ for ($image_id = 0; $image_id < $question['imagesnb']; $image_id++) {
+
+ if ($correct_index === $image_id) {
+ $score = 1;
+ } else {
+ $score = 0;
+ }
+
+ echo '<li data-score="' . $score . '" class="questionsCircle btn-next value" style="background-image: url(\'images/' . $question['id'] . '-' . $image_id . '.jpg\')">
+ <div class="questionsCircle__container">
+ <span class="questionsCircle__container--letter">' . numberToLetter($image_id) . '</span>
+ </div>
+ </li>';
+
+ }
+
+ }
+
+ echo '
+ </ul>
+ </section>
+ </div>';
+
+}
+
+
+function displayAnswer($question, $question_count) {
+ $correct_index = $question['correct'] - 1;
+
+ echo '
+ <div class="section">
+ <section class="questions">
+ <h4 id="questionNumber">Question ' . $question['id'] . '/' .$question_count . '</h4>
+ <h4 id="questionAsk">' . $question['label'] . '</h4>
+ <span class="correctInfo">Correct answer:</span>';
+
+ if ($question['type'] === 'text') {
+
+ $answer = $question['choices'][$correct_index];
+
+ echo '<ul style="display: block">
+ <li class="questions__list correctAnswer">
+ <div class="questions__contain">
+ <div class="questions__list--circle">
+ <span class="questions__list--letter">' . numberToLetter($correct_index) . '</span>
+ </div>
+ <span class="questions__list--text">' . $answer . '</span>
+ </div>
+ </li>
+ </ul>
+
+ <p class="response">' . $question['explaination'] . '</p>';
+
+ } else {
+
+ echo '<ul class="circleContainer" style="display: block">
+ <span>
+ <li class="questionsCircle answerCircle" style="background-image: url(images/' . $question['id'] . '-' . $correct_index . '.jpg)">
+ <div class="questionsCircle__container">
+ <span class="questionsCircle__container--letter">' . numberToLetter($correct_index) . '</span>
+ </div>
+ </li>
+ </span>
+ </ul>';
+ }
+
+ echo '<a href="#" class="button btn-next next" >Next</a>
+
+ <!--<div class="progressbar"></div>-->
+ </section>
+ </div>';
+}
+
+
+/**
+ * Convert a number to a letter (0 => A, 1 => B etc)
+ * @param $number
+ * @return string
+ */
+function numberToLetter($number) {
+ return chr($number + 65);
+}
+
+
+?>
\ No newline at end of file
$(window).on('orientationchange', function () {
console.log('orientation');
+ resize();
setTimeout(function () {
resize()
- }, 3000);
+ }, 200);
});
resize();
}
// alert($(this).data('score'));
- console.log(`Votre score est de : ${scoreValue}`);
- $('#finalScore').html(`${scoreValue}`);
+ //console.log(`Votre score est de : ${scoreValue}`);
+ $('#finalScore').html(scoreValue);
AfterTransition();
});
}
updateAngle();
- console.log(`Le rayon est: ${paperRadius}`);
+ // console.log(`Le rayon est: ${paperRadius}`);
TweenMax.to(window, animationDuration, {
angle: angleEnd,
onUpdate: updateAngle,
// FUNCTION RESIZE CONTENT
-let breakpoint = 750, // Stop scaling the height below this width (let it scroll)
- scaler = $('#container');
+let scaler = $('#container'),
+ progressBar = $('.progressbar');
function resize() {
sections = $('.section'),
baseWidth, // = scaler.outerWidth(),
baseHeight, // = scaler.outerHeight(),
+ gutter = 80, // space around the content
scale,
translateAmount;
baseWidth = Math.max.apply(Math, sections.map(function(x) { return $(sections[x]).outerWidth(); }));
baseHeight = Math.max.apply(Math, sections.map(function(x) { return $(sections[x]).outerHeight(); }));
+ baseWidth += gutter * 2;
+ baseHeight += gutter * 2;
+
console.log(baseWidth, baseHeight);
- //// background resize
- // $("#background,#projector").css({width: ww, maxWidth: ww, minWidth: ww, height: wh, maxHeight: wh, minHeight: wh});
- //
- // var vs = $("section:visible");
- // var home = vs.hasClass('home');
- //
- // var sh = vs.outerHeight();
- // sh *= 1.1; // Margins
- // if (home) {
- // sh *= 1.1;
- // }
- // var cssSection = {};
- // cssSection.top = Math.max((wh - sh) / 2, wh * 0.05);
- // if (home) {
- // $("#projector").css('bottom', Math.max(cssSection.top, wh * 0.05));
- // }
- /**************************************************************************/
// 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);
- // }
-
// 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 +')');
- // }
-
-}
-
-
-
-
+ scaler.css('transform', 'scale('+ scale +') translateX('+ translateAmount +')');
+ progressBar.css('transform', 'scale('+ scale +') translateX('+ translateAmount +')');
+ progressBar.css('bottom', 45 * scale + 'px');
-//
-//
-// function resize() {
-// 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);
-// var sh = vs.outerHeight();
-// sh *= 1.1; // Margins
-// if (home) {
-// sh *= 1.1;
-// }
-// console.log('resize', sh, hh);
-// var cssSection = {};
-// if (sh > hh) {
-// var scale = hh / sh;
-// console.log('scale', scale);
-// $("section:visible").css('font-size', 10 * scale);
-// sh = vs.outerHeight();
-// if (home) {
-// sh *= 1.1;
-// }
-// }
-// cssSection.top = Math.max((hh - sh) / 2, hh * 0.05);
-//
-// $("section:visible").css(cssSection);
-//
-// if (home) {
-// $("#projector").css('bottom', Math.max(cssSection.top, hh * 0.05));
-// }
-// }
-//
+}
\ No newline at end of file
@function rem($pixels, $context: $base-font-size)
@return #{$pixels/$context}rem
+@mixin breakpoint()
+ @media (max-aspect-ratio: 11/10)
+ @content
+
*
margin: 0
padding: 0
max-width: 100%
opacity: 0
transition: opacity 500ms
+
&.loaded
opacity: 1
+ //@include breakpoint
+ // font-size: rem(20)
+
#container
- //min-height: 100%
- //height: 100%
- //width: 100%
- //min-width: 100%
- //overflow-x: hidden
- //overflow-y: auto
padding: 80px
position: absolute
z-index: 2
- top: 50%
+ top: 0
left: 50%
- transform: translate(-50%, -50%)
+ transform: translateX(-50%)
+ transform-origin: top center
//width: 100%
.active
//height: 100%
width: 1500px
- @media (max-width: 750px)
- width: 750px
+ @include breakpoint
+ width: 760px
a.btn-next
text-decoration: none
background-color: $green
border-radius: 1.25em
border: 0
- padding: 0.54em 1.96em
- margin-top: 2.14em
+ padding: 0.5em 2em
+ margin-top: 1em
cursor: pointer
text-decoration: none
.logo
display: block
- width: 26em
+ width: 400px
text-align: center
margin: 0 auto
- margin-top: 10em
+ margin-top: 115px
#background
position: absolute
background-size: auto 100%
opacity: 0.5
+ @include breakpoint
+ background-size: auto 50%
+ bottom: 10%
+
+
&[data-section="home"]
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, #000000 100%)
top: 1.250em
#questionAsk
- margin: 4em auto 2em auto
- max-width: 800px
- @media (max-width: 750px)
- max-width: 1200px
+ margin: 3.2em auto 2em auto
+ max-width: 840px
+ @include breakpoint
+ max-width: 610px
ul
list-style: none
&__list
position: relative
- max-width: 40em
- min-width: 30em
- height: 3.33em
+ width: 650px
+ height: 125px
background: white
margin: 0 auto
border-radius: 5.25em
- margin-bottom: 2em
+ margin-bottom: 34px
cursor: pointer
transition: 400ms all ease
font-size: rem(30)
padding-right: 0.5em
text-align: left
width: 85%
+ font-size: 0.9em
&--letter
color: white
background: #669933
border-radius: 50%
position: relative
- left: 2.2em
+ left: 0.8em
display: flex
justify-content: center
align-items: center
z-index: 55
+ font-size: 1.2em
.questions__list:hover
background: $green
width: 90% // for smaller screens
margin: 0 auto
position: fixed
- bottom: 3em
- height: 0.75em
+ bottom: 45px // Initial value - actual value handled by JS resize function
+ height: 9px
background: white
- left: 0
- right: 0
+ left: 50%
display: none
&-value
font-size: rem(30)
.correctAnswer
- margin-top: 2em
+ margin-top: 1em
background: $green
.questions__list--circle
.response
font-size: rem(30)
- max-width: 27em
- margin: 2em auto 0 auto
+ max-width: 840px
+ margin: 1em auto 0 auto
+
+ @include breakpoint
+ max-width: 610px
//section.questions a.button.next
// font-size: rem(44)
border-radius: 50%
position: relative
background-size: cover
- border: 3px solid white
+ border: 5px solid white
&__container
display: flex
background: $green
border-radius: 50%
position: absolute
- left: 1em
- top: 1em
+ left: 0.3em
+ top: 0.5em
color: white
&--letter
font-size: rem(25)
.answerCircle
border: solid 3px $green !important
- transform: scale(1.2)
- margin: 4em !important
-
+ margin-top: 50px
#ResultsDesc
margin: 2em 0
.borderScore
border-radius: 50%
- width: 10em
- height: 10em
+ width: 334px
+ height: 334px
background-color: rgba(255, 255, 255, 0.5)
margin: 0 auto
display: flex
justify-content: center
align-items: center
- padding: 15em
+ //padding: 15em
.score
background: white
- width: 2em
- height: 2em
- padding: 12em
+ width: 284px
+ height: 284px
+ //padding: 12em
border-radius: 50%
display: flex
justify-content: center
color: $darkblue
font-size: rem(30)
+.home
+ @include breakpoint
+ width: 500px
+ padding-bottom: 11% // Buffer to stop logo going below projector bg graphic at certain screen ratios
-@media only screen and (max-width: 529px)
- #background #projector
- background-size: 150% auto
- .circleContainer
- span
- .questionsCircle
- width: 0.25em
- height: 0.25em
- padding: 8em
-
- &__container
- left: -1em
-
-
-
-
-.tinyscreen #orientationWarning
- position: absolute
- background-color: #fc0
- width: 100vw
- height: 100vh
- z-index: 99
\ No newline at end of file
+ h2
+ font-size: rem(50)
\ No newline at end of file
projects / bonaquiz.git / commitdiff
