Merge pull request #30 from snehautekar05/add-faq-tab

Add FAQ tab at the bottom of article template #25
Aksgo · Oct 6, 2024 · 8d6aa0e · 8d6aa0e
2 parents 2b0d8e6 + f505820
commit 8d6aa0e
Show file tree

Hide file tree

Showing 10 changed files with 188 additions and 33 deletions.
diff --git a/public/ArticleList/ArticleDataStyle.css b/public/ArticleList/ArticleDataStyle.css
@@ -112,4 +112,82 @@ header{
 .author{
   font-style: italic;
   color: #afafafe6;
-}
+}
+
+/* FAQ Section Styling */
+.faq {
+  margin-top: 30px;
+}
+
+.faq-title {
+  font-size: 1.5rem;
+  margin-bottom: 10px;
+  text-align: center;
+  color: #ffffff;
+}
+
+.faq-content {
+  display: none; /* Hidden by default */
+  margin-top: 20px;
+}
+
+.faq-question {
+  font-weight: bold;
+  margin: 15px 0 5px 0;
+  font-size: 18px;
+  color: #FFFFFF;
+}
+
+.faq-answer {
+  margin-bottom: 15px;
+  color: #cfcfcf;
+  font-size: 16px;
+}
+
+/* Button Styling */
+#faq-toggle {
+  display: block;
+  margin: 20px auto;
+  padding: 10px 20px;
+  font-size: 16px;
+  background: linear-gradient(to right, #87CEEB, #00BFFF); /* Sky-blue gradient */
+  color: white;
+  border: none;
+  cursor: pointer;
+  border-radius: 5px;
+  transition: background 0.3s ease;
+}
+
+#faq-toggle:hover {
+  background: linear-gradient(to right, #00BFFF, #1E90FF); /* Darker sky-blue on hover */
+}
+
+@media (max-width: 1200px) {
+  .faq-question {
+    font-size: 16px;
+  }
+
+  .faq-answer {
+    font-size: 14px;
+  }
+
+  #faq-toggle {
+    font-size: 14px;
+    padding: 8px 16px;
+  }
+}
+
+@media (max-width: 600px) {
+  .faq-question {
+    font-size: 14px;
+  }
+
+  .faq-answer {
+    font-size: 13px;
+  }
+
+  #faq-toggle {
+    font-size: 12px;
+    padding: 6px 12px;
+  }
+}
diff --git a/public/ArticleList/binary-lifting.html b/public/ArticleList/binary-lifting.html
@@ -62,4 +62,4 @@
    </div>
   </div>
  </body>
-</html>
+</html>
diff --git a/public/ArticleList/dijkstra-algorithm.html b/public/ArticleList/dijkstra-algorithm.html
@@ -56,4 +56,4 @@
    </div>
   </div>
  </body>
-</html>
+</html>
diff --git a/public/ArticleList/huffman-coding.html b/public/ArticleList/huffman-coding.html
@@ -59,4 +59,4 @@
    </div>
   </div>
  </body>
-</html>
+</html>
diff --git a/public/ArticleList/time-complexity-bfs.html b/public/ArticleList/time-complexity-bfs.html
@@ -64,4 +64,4 @@
    </div>
   </div>
  </body>
-</html>
+</html>
diff --git a/public/ArticleTemplate.html b/public/ArticleTemplate.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
- <head>
+<head>
   <meta charset="utf-8"/>
   <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
   <title>
@@ -9,35 +9,56 @@
   <link href="ArticleDataStyle.css" rel="stylesheet" type="text/css"/>
   <link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet"/>
   <link href="../asset/logo.png" rel="icon" type="image"/>
- </head>
- <body>
+</head>
+<body>
   <header>
-   <div class="centered">
-    <a href="../index.html">
-     <div class="name">
-      UniAlgo
-     </div>
-     <div class="logo">
-      <img src="../asset/logo.png"/>
-     </div>
-    </a>
-   </div>
+    <div class="centered">
+      <a href="../index.html">
+        <div class="name">
+          UniAlgo
+        </div>
+        <div class="logo">
+          <img src="../asset/logo.png"/>
+        </div>
+      </a>
+    </div>
   </header>
   <div class="article">
-   <div class="title">
-    <!-- to be filled via generator -->
-   </div>
-   <div>
-    <button id="back-link" onclick="location.href='../article.html'">
-     Back to Articles
-    </button>
-   </div>
-   <div class="content">
-    <!-- to be filled via generator -->
-   </div>
-   <div class="author">
-    <!-- to be filled via generator -->
-   </div>
+    <div class="title">
+      <!-- to be filled via generator -->
+    </div>
+    <div>
+      <button id="back-link" onclick="location.href='../article.html'">
+        Back to Articles
+      </button>
+    </div>
+    <div class="content">
+      <!-- to be filled via generator -->
+    </div>
+    <div class="author">
+      <!-- to be filled via generator -->
+    </div>
+    <div class="faq-section">
+      <div class="faq-title">
+        Frequently Asked Questions
+      </div>
+      <div class="faq-content">
+        <!-- FAQ content will be inserted here via generator -->
+      </div>
+    </div>
   </div>
- </body>
+    <!-- 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>
diff --git a/public/Articles-FAQ/binary-lifting-faq.txt b/public/Articles-FAQ/binary-lifting-faq.txt
@@ -0,0 +1,14 @@
+Q1: What is Binary Lifting?
+Binary Lifting is a technique used to find the Lowest Common Ancestor (LCA) of two nodes in a tree in logarithmic time. It preprocesses the tree to create a table of ancestors at different powers of two.
+
+Q2: How does Binary Lifting improve query time for LCA?
+Instead of checking all nodes, Binary Lifting allows for jumping directly to the 2^j th parent of a node, which reduces the query time to O(log N) after an initial O(N log N) preprocessing step.
+
+Q3: What is the time complexity for preprocessing the tree?
+The preprocessing of the tree takes O(N log N) time, where N is the number of nodes in the tree.
+
+Q4: What is the main limitation of Binary Lifting?
+Binary Lifting does not work efficiently for dynamic trees where nodes can be added or removed frequently, as it requires a complete reprocessing of the ancestor table.
+
+Q5: Can Binary Lifting be used in graphs other than trees?
+Binary Lifting is primarily designed for trees. However, it can be adapted for directed acyclic graphs (DAGs) under certain conditions but is not generally applicable to arbitrary graphs.
diff --git a/public/Articles-FAQ/dijkstra-algorithm-faq.txt b/public/Articles-FAQ/dijkstra-algorithm-faq.txt
@@ -0,0 +1,14 @@
+Q1: What is Dijkstra's Algorithm?
+Dijkstra's Algorithm is a graph search algorithm that finds the shortest path from a starting node to all other nodes in a weighted graph.
+
+Q2: How does Dijkstra's Algorithm work?
+The algorithm initializes distances to infinity, sets the distance of the starting node to zero, and iteratively selects the node with the smallest known distance to update the distances of its neighbors.
+
+Q3: What is the time complexity of Dijkstra's Algorithm?
+The time complexity is O((V + E) log V), where V is the number of vertices and E is the number of edges in the graph.
+
+Q4: Can Dijkstra's Algorithm handle negative edge weights?
+No, Dijkstra's Algorithm does not work with graphs that have negative edge weights as it assumes that once a node's shortest path is found, it cannot be improved.
+
+Q5: What are the practical applications of Dijkstra's Algorithm?
+Dijkstra's Algorithm is commonly used in GPS systems, network routing protocols, and other applications requiring efficient pathfinding in graphs.
diff --git a/public/Articles-FAQ/huffman-coding-faq.txt b/public/Articles-FAQ/huffman-coding-faq.txt
@@ -0,0 +1,14 @@
+Q1: What is Huffman Coding?
+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.
+
+Q2: How does Huffman Coding minimize the cost of merging sticks?
+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.
+
+Q3: What role do binary trees play in Huffman Coding?
+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).
+
+Q4: Can Huffman Coding guarantee the shortest binary representation?
+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.
+
+Q5: What is the importance of prefix-free codes?
+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.
diff --git a/public/Articles-FAQ/time-complexity-bfs-faq.txt b/public/Articles-FAQ/time-complexity-bfs-faq.txt
@@ -0,0 +1,14 @@
+Q1: How does DFS differ from BFS?
+DFS uses a depth-first approach, diving deep into a branch before exploring another, while BFS explores nodes level by level, using a queue structure.
+
+Q2: What is the time complexity of DFS?
+The time complexity of DFS is O(V + E), where V is the number of vertices and E is the number of edges in the graph.
+
+Q3: Can DFS be used to find connected components?
+Yes, DFS can be used to find connected components in a graph by performing DFS on each unvisited node and marking all reachable nodes from that starting node.
+
+Q4: What are the practical applications of DFS?
+DFS is used in topological sorting, finding strongly connected components, and solving maze problems. It’s also helpful in generating paths and in algorithms like finding bridges and articulation points.
+
+Q5: Does DFS guarantee the shortest path in an unweighted graph?
+No, DFS does not guarantee the shortest path in an unweighted graph. BFS is used to find the shortest path in such cases because it explores nodes level by level.