added faq's

Aksgo · Oct 6, 2024 · c0a0410 · c0a0410
1 parent 8d6aa0e
commit c0a0410
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 18 deletions.
diff --git a/.github/workflows/main.yml → .github/workflows/ci-cd-pipeline.yml b/.github/workflows/main.yml → .github/workflows/ci-cd-pipeline.yml
diff --git a/development-status.txt b/development-status.txt
@@ -3,4 +3,5 @@
 3. apply theme toggle
 4. add comment option
 5. add commenting option on articles
-6. add tages option to each article in article list
+6. add tages option to each article in article list
+7. add generator function to add faq questions
diff --git a/public/ArticleList/ArticleDataStyle.css b/public/ArticleList/ArticleDataStyle.css
@@ -51,15 +51,6 @@ header{
   animation: fadeIn 0.25s ease-in forwards;
 }
 
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
 .title{
   font-size: 32px;
   text-align: center;
@@ -114,7 +105,8 @@ header{
   color: #afafafe6;
 }
 
-/* FAQ Section Styling */
+/*  ======== FAQ Section Styling =========*/
+
 .faq {
   margin-top: 30px;
 }
@@ -128,12 +120,15 @@ header{
 
 .faq-content {
   display: none; /* Hidden by default */
-  margin-top: 20px;
+  padding: 30px;
+  padding-top: 0px;
+  text-align: justify;
+  animation: fadeIn 0.25s ease-in forwards;
 }
 
 .faq-question {
   font-weight: bold;
-  margin: 15px 0 5px 0;
+  margin: 30px 0 20px 0;
   font-size: 18px;
   color: #FFFFFF;
 }
@@ -148,18 +143,19 @@ header{
 #faq-toggle {
   display: block;
   margin: 20px auto;
+  margin-bottom: 2px;
   padding: 10px 20px;
   font-size: 16px;
-  background: linear-gradient(to right, #87CEEB, #00BFFF); /* Sky-blue gradient */
+  background: linear-gradient(to right, #cab3ff, #009dff);
   color: white;
   border: none;
   cursor: pointer;
-  border-radius: 5px;
-  transition: background 0.3s ease;
+  border-radius: 50px;
+  animation: fadeIn 0.25s ease-in forwards;
 }
 
 #faq-toggle:hover {
-  background: linear-gradient(to right, #00BFFF, #1E90FF); /* Darker sky-blue on hover */
+  background: linear-gradient(to right, #00BFFF, #a255ff); 
 }
 
 @media (max-width: 1200px) {
@@ -191,3 +187,12 @@ header{
     padding: 6px 12px;
   }
 }
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
diff --git a/public/ArticleList/huffman-coding.html b/public/ArticleList/huffman-coding.html
@@ -57,6 +57,63 @@
    <div class="author">
     Written by: UniAlgo Owner
    </div>
+   <br/>
+   <hr style="color: white;"/>
+   <div class="faq-section">
+    <div class="faq-title">
+     Frequently Asked Questions
+    </div>
+    <!-- FAQ Toggle Button -->
+    <button id="faq-toggle">
+     Show FAQs
+    </button>
+    <!-- FAQ Content -->
+    <div class="faq-content" id="faq-content">
+        <div class="faq-question">
+         <strong>Q1: What is Huffman Coding?</strong>
+        </div>
+        <div class="faq-answer">
+         Huffman Coding is a compression algorithm that assigns variable-length codes to input characters based on their frequencies. Characters that occur more frequently are assigned shorter codes, while less frequent characters receive longer codes.
+        </div>
+        <div class="faq-question">
+         <strong>Q2: How does Huffman Coding minimize the cost of merging sticks?</strong>
+        </div>
+        <div class="faq-answer">
+         Huffman Coding minimizes the cost by always merging the two smallest sticks first. This strategy ensures that the larger lengths, which contribute more to the total cost, are added later in the process, thus reducing the overall merging cost.
+        </div>
+        <div class="faq-question">
+         <strong>Q3: What role do binary trees play in Huffman Coding?</strong>
+        </div>
+        <div class="faq-answer">
+         In Huffman Coding, a binary tree is used to represent the codes. Each leaf node represents a character, and the path from the root to the leaf determines the character's binary representation (0s and 1s).
+        </div>
+        <div class="faq-question">
+         <strong>Q4: Can Huffman Coding guarantee the shortest binary representation?</strong>
+        </div>
+        <div class="faq-answer">
+         Yes, Huffman Coding guarantees the shortest possible binary representation for a given set of characters and their frequencies, as long as the characters' bit representations do not prefix each other.
+        </div>
+        <div class="faq-question">
+         <strong>Q5: What is the importance of prefix-free codes?</strong>
+        </div>
+        <div class="faq-answer">
+         Prefix-free codes ensure that no code is a prefix of another. This property is essential for uniquely decodable encoding; it prevents ambiguity when decoding the compressed data back into its original form.
+        </div>
+       </div>
+   </div>
   </div>
+  <!-- JavaScript for Toggle -->
+  <script>
+   document.getElementById('faq-toggle').addEventListener('click', function() {
+            const faqContent = document.getElementById('faq-content');
+            if (faqContent.style.display === "none" || faqContent.style.display === "") {
+                faqContent.style.display = "block";
+                this.textContent = "Hide FAQs";
+            } else {
+                faqContent.style.display = "none";
+                this.textContent = "Show FAQs";
+            }
+        });
+  </script>
  </body>
-</html>
+</html>
diff --git a/public/ArticleTemplate.html b/public/ArticleTemplate.html
@@ -42,6 +42,8 @@
       <div class="faq-title">
         Frequently Asked Questions
       </div>
+      <!-- FAQ Toggle Button -->
+      <button id="faq-toggle">Show FAQs</button>
       <div class="faq-content">
         <!-- FAQ content will be inserted here via generator -->
       </div>