From 5d42ff30136d29cf173c39c5631cd041b745173c Mon Sep 17 00:00:00 2001
From: Amimul Ihsan Zubair <86657812+aizubair21@users.noreply.github.com>
Date: Sat, 16 Dec 2023 08:32:09 +0600
Subject: [PATCH] responsive

-> make responsive for mobile devices
---
 function.js => assets/function.js       |  3 ++-
 mcq.css => assets/mcq.css               |  8 ++++----
 mcq.js => assets/mcq.js                 | 18 +++++++++++++++---
 responsive.css => assets/responsive.css |  0
 index.html                              | 11 ++++++-----
 5 files changed, 27 insertions(+), 13 deletions(-)
 rename function.js => assets/function.js (96%)
 rename mcq.css => assets/mcq.css (99%)
 rename mcq.js => assets/mcq.js (96%)
 rename responsive.css => assets/responsive.css (100%)

diff --git a/function.js b/assets/function.js
similarity index 96%
rename from function.js
rename to assets/function.js
index 288c645..efc26cf 100644
--- a/function.js
+++ b/assets/function.js
@@ -15,6 +15,7 @@ leftTabNav[4].classList.add('tab_item_active')
 leftTabNav.forEach((lnav, lindex) => {
     // console.log(lindex);
     lnav.addEventListener('click', () => {
+        
         leftTabNav.forEach((ln, li) => {
             ln.classList.remove('tab_item_active');
             leftTabContent[li].style.display = 'none';
@@ -27,7 +28,7 @@ leftTabNav.forEach((lnav, lindex) => {
 
 //close and open left aside 
 function closeAside() {
-    console.log("function triggered !");
+    // console.log("function triggered !");
     if (asideLeft.classList.contains('aside_left_hide')) {
         asideLeft.classList.remove('aside_left_hide');
         asideLeft.style.marginLeft = 0 + '%';
diff --git a/mcq.css b/assets/mcq.css
similarity index 99%
rename from mcq.css
rename to assets/mcq.css
index 242e4a9..12be199 100644
--- a/mcq.css
+++ b/assets/mcq.css
@@ -771,7 +771,7 @@ body {
 
         .footer_body {
             /* width: 100%; */
-            padding: 0px 10px;
+            /* padding: 0px 10px; */
             background-color: #fff;
             border-radius: 8px;
             display: inline-flex;
@@ -1019,8 +1019,6 @@ body {
         }
     }
 
-
-
     .exam_layout_1 {
         display: flex;
         align-items: start;
@@ -1043,6 +1041,8 @@ body {
             /* margin-left: 20px; */
             /* overflow-y: scroll; */
             align-self: flex-start;
+            height: 400px;
+            overflow-y: scroll;
         }
 
     }
@@ -1067,7 +1067,7 @@ body {
             overflow-y: scroll;
         }
 
-       
+
     }
 
 
diff --git a/mcq.js b/assets/mcq.js
similarity index 96%
rename from mcq.js
rename to assets/mcq.js
index 7ccb736..b693415 100644
--- a/mcq.js
+++ b/assets/mcq.js
@@ -240,7 +240,7 @@ function generateExam() {
     // }
 
     const questionDisplay = document.getElementsByClassName("qiz_body")[0];
-    console.log("ci : " + typeof currentQuestionIndex + " qi : " + typeof questionLimitation);
+    // console.log("ci : " + typeof currentQuestionIndex + " qi : " + typeof questionLimitation);
 
     if (parseInt(currentQuestionIndex) < parseInt(questionLimitation)) {
 
@@ -290,7 +290,7 @@ function generateExam() {
             document.getElementsByClassName("form_wrapper")[0].classList.add('form_active');
         }, 100);
     } else {
-        console.log(' from create exam else block');
+        // console.log(' from create exam else block');
         submitExam();
     }
 
@@ -553,11 +553,23 @@ function getRandomNumberBetweenMinAndMaxValue(min, max) {
 }
 
 setInterval(() => {
-    if (window.innerWidth > 1300) {
+    if (window.innerWidth < 1300) {
+        asideLeft.classList.add('aside_left_hide');
+        asideLeft.style.marginLeft = -100 + "%";
+        asideLeft.style.transition = "all linear .3s";
+    } else {
+
+        asideLeft.classList.remove('aside_left_hide');
+        asideLeft.style.marginLeft = 0 + '%';
+        asideLeft.style.transition = "all linear .3s";
+    }
+    if (window.innerWidth > 768) {
         document.getElementsByClassName('exam_layout')[0].classList.add('exam_layout_1');
         document.getElementsByClassName('exam_layout')[0].classList.remove('exam_layout_2');
+        document.querySelector("#aside_left").classList.remove('aside_left_hide');
     } else {
         document.getElementsByClassName('exam_layout')[0].classList.remove('exam_layout_1');
         document.getElementsByClassName('exam_layout')[0].classList.add('exam_layout_2');
+        document.querySelector("#aside_left").classList.add('aside_left_hide');
     }
 }, 100);
\ No newline at end of file
diff --git a/responsive.css b/assets/responsive.css
similarity index 100%
rename from responsive.css
rename to assets/responsive.css
diff --git a/index.html b/index.html
index 45e92e2..3e262d5 100644
--- a/index.html
+++ b/index.html
@@ -7,8 +7,8 @@
     <title>MCQ - a minimal mcq examination system with vanila js</title>
     <!-- include fontawosome cdn from cdnjs  -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" />
-    <link rel="stylesheet" href="mcq.css">
-    <link rel="stylesheet" href="responsive.css">
+    <link rel="stylesheet" href="assets/mcq.css">
+    <link rel="stylesheet" href="assets/responsive.css">
 </head>
 
 <body>
@@ -328,7 +328,7 @@ <h2 class="h2">
             </div>
         </div>
 
-        <div id="setup_exam" class="setup_exam_active">
+        <div id="setup_exam" class="setup_exam_activ">
 
             <div class="ex_wrapper">
                 <div class="sx_header">
@@ -415,8 +415,9 @@ <h4 class="h4">Default View </h4>
 
             <!-- setup exam end  -->
         </div>
-        <script src="function.js"></script>
-        <script src="mcq.js"></script>
+
+        <script src="assets/function.js"></script>
+        <script src="assets/mcq.js"></script>
 </body>
 
 </html>