]> _ Git - bonaquiz.git/commitdiff
projects / bonaquiz.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 95d76ba)
WIP #2647 @7:00
authornael <nael@cubedesigners.com>
Wed, 3 Apr 2019 16:20:23 +0000 (18:20 +0200)
committernael <nael@cubedesigners.com>
Wed, 3 Apr 2019 16:20:23 +0000 (18:20 +0200)
index.php patch | blob | history
js/bonaquiz.js patch | blob | history
style/style.sass patch | blob | history

diff --git a/index.php b/index.php
index f0d15849db5c26d4f65aa11f60458c9c290fa5be..4e3dee029164662c2d73ab6e088b872fdc9b26e7 100644 (file)
--- a/index.php
+++ b/index.php
@@ -159,13 +159,12 @@ $question = [
 
 </head>
 <body>
-<div id="container">
-    <div id="background" data-section="home" >
+<div id="container" data-section="home">
+    <div id="background"  >
         <div id="projector">
         </div>
 
         <div class="active section">
-
             <section class="home">
                 <h1>The Bona 100&#8209;year</h1>
                 <h2>anniversary quiz</h2>
@@ -173,188 +172,136 @@ $question = [
                 <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">
-//            <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 " href="#">
-//                    <li class="questions__list">
-//                        <div class="questions__list--circle">
-//                            <span class="questions__list--letter">'.chr($num ) .'</span>
-//                        </div>
-//                        <span class="questions__list--text">'.$question[$i]['choices'][$e] .'</span>
-//                    </li>
-//                </a>';
-//                }
-//                echo '
-//            </ul>
-//            <div class="progressbar"></div>
-//        </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>
-//                    <li class="questions__list correctAnswer">
-//                        <div class="questions__list--circle">
-//                            <span class="questions__list--letter">'.chr($letter).'</span>
-//                        </div>
-//                        <span class="questions__list--text">'.$answer.'</span>
-//                    </li>
-//                </ul>
-//
-//                <p class="response">'.$question[$i]['explaination'] .'</p>
-//
-//                <a href="#" class="button btn-next next" >Next</a>
-//
-//                <div class="progressbar"></div>
-//            </section>
-//        </div>';
+                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 ok" href="#">
+                        <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>
+                        <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">
-    
+                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>
                     <ul class="circleContainer">';
 
-                for($z=0;$z<$question['imagesnb']; $z++)
-
-//                    var_dump($question[$i]['imagesnb']);
+                for($z=0;$z<$question[$i]['imagesnb']; $z++)
                 {
                     $numb = $z;
                     $num = $numb + 65;
-                    var_dump($z);
-
-                    echo $z++;
-//                    if ($z % 2 == 1)
-//                    {
-//                        echo "$z est impair";
-//                    }
-//                    elseif ($z % 2 == 0)
-//                    {
-//                        echo "$z est pair";
-//                    }
-                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>';
+                    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="progressbarZ"></div>
+                            <!--<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">
+                        <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>
+                    <!--<div class="progressbar"></div>-->
+                </section>
+        </div>';
             }
         }
-//        var_dump(count($question));
+        //        var_dump(count($question));
         ?>
 
-        <!-- ********************************* SECTION 3 QUESTION 2 **********************************-->
-        <!--            <div class=" section">-->
-        <!--                <div id="background" class="backgroundQuestion" >-->
-        <!--                    <div id="projector">-->
-        <!--        -->
-        <!--                    </div>-->
-        <!--                </div>-->
-        <!--                <section class=" questions">-->
-        <!--                    <h4 id="questionNumber">Question 2/10</h4>-->
-        <!--        -->
-        <!--                    <h4 id="questionAsk">Which photo is the Austrian Chancellor's Office, Vienna, where-->
-        <!--                        we had the opportunity to bring out the beauty in the floor?</h4>-->
-        <!--                    <ul class="circleContainer">-->
-        <!--                <span>-->
-        <!--                    <li class="questionsCircle " style="background-image: url('images/1-min.jpg')">-->
-        <!--                        <div class="questionsCircle__container">-->
-        <!--                            <span class="questionsCircle__container--letter">A</span>-->
-        <!--                        </div>-->
-        <!--                    </li>-->
-        <!--        -->
-        <!--                    <li class="questionsCircle " style="background-image: url('images/2-min.jpg')">-->
-        <!--                        <div class="questionsCircle__container">-->
-        <!--                            <span class="questionsCircle__container--letter">B</span>-->
-        <!--                        </div>-->
-        <!--                    </li>-->
-        <!--                </span>-->
-        <!--                        <span>-->
-        <!--                    <li class="questionsCircle " style="background-image: url('images/3-min.jpg')">-->
-        <!--                        <div class="questionsCircle__container">-->
-        <!--                            <span class="questionsCircle__container--letter">C</span>-->
-        <!--                        </div>-->
-        <!--                    </li>-->
-        <!--        -->
-        <!--                    <li class="questionsCircle " style="background-image: url('images/4-min.jpg')">-->
-        <!--                        <div class="questionsCircle__container">-->
-        <!--                            <span class="questionsCircle__container--letter">D</span>-->
-        <!--                        </div>-->
-        <!--                    </li>-->
-        <!--                </span>-->
-        <!--                    </ul>-->
-        <!--        -->
-        <!--                    <div class="progressbar"></div>-->
-        <!--                </section>-->
-        <!--            </div>-->
-        <!-- ************************* SECTION 4  QUESTION 2 REPONSE *****************************-->
-        <div class="section">
-
-            <section class="questions" >
-                <h4 id="questionNumber">Question 2/10</h4>
-
-                <h4 id="questionAsk">Which photo is the Austrian Chancellor's Office, Vienna, where
-                    we had the opportunity to bring out the beauty in the floor?</h4>
-
-                <span class="correctInfo">Correct answer : </span>
-
-                <ul class="circleContainer">
-    <span>
-        <li class="questionsCircle answerCircle" style="background-image: url('images/4-min.jpg')">
-            <div class="questionsCircle__container">
-                <span class="questionsCircle__container--letter">D</span>
-            </div>
-        </li>
-    </span>
-                </ul>
-                <a href="#" class="btn-next button next">Next</a>
-                <div class="progressbar"></div>
-            </section>
-        </div>
-        <!-- *************************************** SECTION 5  RESULTS **********************************-->
         <div class="section">
             <section class=" questions">
                 <h2 id="Results">Congrats</h2>
@@ -372,6 +319,7 @@ $question = [
                 <a href="#" class="button btn-next next">Try again</a>
             </section>
         </div>
+        <div class="progressbar"></div>
     </div>
 </div>
 
diff --git a/js/bonaquiz.js b/js/bonaquiz.js
index 9ab18f498d415e4282220860f89b752fd4a07a58..e13ad36c89290be555d4412a959dae2b27471901 100644 (file)
--- a/js/bonaquiz.js
+++ b/js/bonaquiz.js
@@ -1,8 +1,11 @@
 $(function () {
     $(window).on('resize', resize);
+    $(window).on('resize', resizeBar);
     resize();
+    resizeBar();
     setTimeout(function () {
         resize();
+        resizeBar();
         $("body").addClass('loaded');
     }, 1000);
 });
@@ -52,5 +55,30 @@ function resize() {
     if (home) {
         $("#projector").css('bottom', Math.max(cssSection.top, hh * 0.05));
     }
+}
 
-}
\ No newline at end of file
+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);
+    }
+}
+
+
+
+$('#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
diff --git a/style/style.sass b/style/style.sass
index 18ef1613ed6dda1ed8ce5a8ca79664310bc994c7..5b41a76673348312140f3fb9e9fc5615971f3893 100644 (file)
--- a/style/style.sass
+++ b/style/style.sass
@@ -30,8 +30,10 @@ body
   display: block!important
 .section
   display: none
+  height: 100%
 a.btn-next
   text-decoration: none
+  display: block
 section
   z-index: 1
   position: relative
@@ -115,20 +117,21 @@ section
   &__list
     position: relative
     max-width: 40em
-    height: 10em
-    padding: 3em
+    width: 40em
+    height: 9em
     background: white
     margin: 0 auto
     border-radius: 5.25em
-    display: flex
-    align-items: center
     margin-bottom: 2em
     cursor: pointer
     transition: 400ms all ease
     &--text
-      font-size: 2.3em
+      font-size: 2em
       color: $darkblue
-      padding-left: 0.5em
+      padding-left: 1.2em
+      padding-right: 0.5em
+      text-align: left
+      width: 85%
     &--letter
       color: white
       left: 1.8em
@@ -136,13 +139,14 @@ section
     &--circle
       width: 5em
       height: 5em
-      background: $green
+      background: #669933
       border-radius: 50%
       position: relative
-      left: -0.8em
+      left: 1.2em
       display: flex
       justify-content: center
       align-items: center
+      z-index: 55
 .questions__list:hover
   background: $green
   transition: 400ms all ease
@@ -155,13 +159,17 @@ section
   .questions__list--text
     color: white
     transition: 400ms all ease
-
+.questions__contain
+  display: flex
+  align-items: center
+  width: 100%
+  height: 100%
 .progressbar
-  width: 50em
+  width: 55em
   margin: 0 auto
   position: absolute
   bottom: 3em
-  height: 1em
+  height: 0.75em
   background: white
   left: 0
   right: 0
@@ -261,9 +269,6 @@ section.questions a.button.next
 @media only screen and (max-width: 529px)
   #background #projector
     background-size: 150% auto
-  .progressbar
-    width: 25em
-    height: 0.5em
   .circleContainer
     span
       .questionsCircle
Unnamed repository; edit this file 'description' to name the repository.