Merge pull request #192 from AkhilaSunesh/bar

Progress bar
Open-Source-Chandigarh · Jun 12, 2024 · 8a830b8 · 8a830b8
2 parents 7875180 + 64dc2c6
commit 8a830b8
Show file tree

Hide file tree

Showing 4 changed files with 145 additions and 64 deletions.
diff --git a/Public/styles/question.css b/Public/styles/question.css
@@ -16,6 +16,37 @@ body {
   align-items: center;
   height: auto;
 }
+.progress-container {
+  position: relative;
+  width: 100%;
+  background-color: #e0e0e0;
+  border-radius: 25px;
+  overflow: hidden;
+  margin: 20px 0;
+  height: 30px;
+}
+
+
+.progress-bar {
+  height: 100%;
+  width: 0;
+  background: linear-gradient(90deg, red, yellow, green);
+  transition: width 0.5s;
+}
+
+
+.progress-text {
+  position: absolute;
+  width: 100%;
+  text-align: center;
+  top: 0;
+  left: 0;
+  line-height: 30px;
+  font-weight: bold;
+  color: #000;
+}
+
+
 
 .cta-card__input-box {
   position: relative;

diff --git a/package-lock.json b/package-lock.json
diff --git a/questions.js b/questions.js
@@ -24,7 +24,7 @@ const questions = [
   {
     question: "Do you feel jealous at some times?",
     options: [
-      { value: 0, text: "Affermative" },
+      { value: 0, text: "Affirmative" },
       { value: 5, text: "Negative" },
     ],
   },
@@ -54,15 +54,15 @@ const questions = [
   {
     question: "Can you dance without fear in public?",
     options: [
-      { value: 5, text: "Affermative" },
+      { value: 5, text: "Affirmative" },
       { value: 0, text: "Negative" },
     ],
   },
   {
     question:
       "Do you feel like you have a support system of friends and family?",
     options: [
-      { value: 5, text: "Affermative" },
+      { value: 5, text: "Affirmative" },
       { value: 0, text: "Negative" },
     ],
   },
@@ -78,71 +78,71 @@ const questions = [
     question:
       "Do you feel comfortable sharing your thoughts and feelings with others?",
     options: [
-      { value: 5, text: "Affermative" },
+      { value: 5, text: "Affirmative" },
       { value: 0, text: "Negative" },
     ],
   },
   {
     question: "Do you feel you need a partner?",
     options: [
-      { value: 0, text: "Affermative" },
+      { value: 0, text: "Affirmative" },
       { value: 5, text: "Negative" },
     ],
   },
   {
     question: "Do you feel a sense of purpose and direction in your life?",
     options: [
-      { value: 6, text: "Affermative" },
+      { value: 6, text: "Affirmative" },
       { value: 0, text: "Negative" },
     ],
   },
   {
     question:
       "Do you feel that your life has a deeper meaning beyond just day-to-day activities?",
     options: [
-      { value: 5, text: "Affermative" },
+      { value: 5, text: "Affirmative" },
       { value: 0, text: "Negative" },
     ],
   },
   {
     question: "Do you spend negative time on socials?",
     options: [
-      { value: 0, text: "Affermative" },
+      { value: 0, text: "Affirmative" },
       { value: 5, text: "Rarely" },
     ],
   },
   {
     question: "Do you like going to college/school/office?",
     options: [
-      { value: 5, text: "Affermative" },
+      { value: 5, text: "Affirmative" },
       { value: 0, text: "Negative" },
     ],
   },
   {
     question: "Have you achieved any major goals?",
     options: [
-      { value: 5, text: "Affermative" },
+      { value: 5, text: "Affirmative" },
       { value: 0, text: "Negative" },
     ],
   },
   {
     question: "Do you think your Parents are proud of you?",
     options: [
-      { value: 5, text: "Affermative" },
+      { value: 5, text: "Affirmative" },
       { value: 0, text: "Negative" },
     ],
   },
   {
     question: "Do you think people respect you?",
     options: [
-      { value: 5, text: "Affermative" },
+      { value: 5, text: "Affirmative" },
       { value: 0, text: "Negative" },
     ],
   },
   {
     question: "Do you think you have done good in your life so far?",
     options: [
-      { value: 5, text: "Affermative" },
+      { value: 5, text: "Affirmative" },
       { value: 0, text: "Negative" },
     ],
   },

diff --git a/views/questions.ejs b/views/questions.ejs
@@ -12,12 +12,17 @@
 </head>
 <script src="https://cdn.lordicon.com/lordicon.js"></script>
 
+
 <body
   style="background-image: url(https://images.unsplash.com/photo-1557682250-33bd709cbe85?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OXx8Y29sb3IlMjBiYWNrZ3JvdW5kfGVufDB8MHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60);background-repeat: no-repeat;background-position: center;background-size: cover;">
 
 
 <!-- form id added -->
   <form action="/result" method="post" id="myForm">
+    <div class="progress-container">
+      <div class="progress-bar" id="progress-bar"></div>
+      <div class="progress-text" id="progress-text">0/20</div>
+  </div>
 
     <input class="cta-card__input" type="text" placeholder="Enter your name" name="username"
     required />
@@ -101,7 +106,59 @@
       })
     }
   </script>
-  
+<script>
+  // script.js
+
+document.addEventListener('DOMContentLoaded', function() {
+  const form = document.getElementById('myForm');
+  const radios = form.querySelectorAll('input[type="radio"]');
+  const progressBar = document.getElementById('progress-bar');
+  const progressText = document.getElementById('progress-text');
+  const totalQuestions = radios.length / 2;  // Assuming each question has two radio buttons
+  let answeredQuestions = 0;
+
+  // Function to update the progress bar and text
+  function updateProgressBar() {
+      const progress = (answeredQuestions / totalQuestions) * 100;
+      progressBar.style.width = progress + '%';
+      progressText.textContent = `${answeredQuestions}/${totalQuestions}`;
+  }
+
+  radios.forEach(radio => {
+      radio.addEventListener('change', () => {
+          if (!radio.parentElement.parentElement.classList.contains('answered')) {
+              answeredQuestions++;
+              radio.parentElement.parentElement.classList.add('answered');
+              updateProgressBar();
+          }
+      });
+  });
+
+  updateProgressBar();
+
+  // Smooth scrolling to the next question on selection
+  function scrollToNext(nextQuestionId) {
+      const nextElement = document.getElementById(nextQuestionId);
+      if (nextElement) {
+          nextElement.scrollIntoView({
+              behavior: 'smooth',
+              block: 'start'
+          });
+      }
+  }
+
+  radios.forEach(radio => {
+      radio.addEventListener('change', (event) => {
+          const currentId = event.target.id;
+          const currentIndex = parseInt(currentId.split('-')[2]);
+          const nextQuestionId = `question${currentIndex + 1}`;
+
+          setTimeout(() => scrollToNext(nextQuestionId), 300);
+      });
+  });
+});
+
+</script>
 <!-- script to handle default clearance of radio buttons issue#50 -->
 <script>
   document.addEventListener('DOMContentLoaded', () => {
@@ -199,6 +256,7 @@
   });
 </script>
 
+
 </body>
 
 </html>