Faq dl

src/web/src/assets/dark.scss

@@ -254,6 +254,17 @@
   .breadcrumb {
     background-color: var(--dark-secondary) !important;
   }
+
+  .faq-item h3 {
+    color: var(--dark-text-primary) !important;
+  }
+
+  .faq-item p {
+    color: var(--dark-text-primary) !important;
+  }
+  .faq-item:hover {
+    border-color: var(--dark-blue-primary) !important;
+  }
 }
 
 /*

src/web/src/components/Header.vue

@@ -58,6 +58,10 @@
           <font-awesome-icon icon="address-book" />
           Professors
         </b-nav-item>
+        <b-nav-item :to="{ name: 'FAQs' }">
+          <font-awesome-icon icon="question-circle" />
+          FAQs
+        </b-nav-item>
       </b-navbar-nav>
       <!-- If user has logged in -->
       <b-navbar-nav class="ml-auto">

src/web/src/pages/FAQ_Breakdown

@@ -0,0 +1,13 @@
+Categorize questions: Group the questions into categories based on their 
+topic or area of concern. For example, you could have categories such as 
+"Getting Started," "Course Search," "Registration," "Schedule Planning," 
+"User Account," and "Technical Issues."
+
+Prioritize questions: Determine which questions are the most frequently 
+asked or most important for users. Place those questions at the top 
+of each category to ensure users can easily find the answers they need.
+
+Format and structure: Organize the FAQ page with headings, subheadings, 
+and bullet points to make it easy to navigate and scan. Use formatting 
+elements such as bold or italic text to highlight important points or 
+keywords.

src/web/src/pages/FAQ_Collection

@@ -0,0 +1,39 @@
+Q. What is YACS and what is its mission? 
+A. YACS (Yet Another Course Scheduler) is a web-based application designed to assist students in scheduling and planning their courses at academic institutions.
+It provides features such as course catalog browsing, schedule building, and course availability information. YACS aims to simplify the course selection
+process, allowing students to efficiently organize their academic schedules.
+
+___________________________________________________________________________________________________________
+Q: How can I use the Schedule feature in YACS?
+A: The Schedule feature in YACS helps you plan your course schedule ahead of time. Follow these steps to use this feature:
+
+    1.Click the Schedule navbar on the top of the page
+    2.Add courses to your schedule by searching for them in the course catalog or using other available options.
+    3.Arrange the courses in your preferred time slots or based on your schedule requirements.
+    4.YACS will display your scheduled courses, allowing you to visualize your timetable and make adjustments if needed.
+
+___________________________________________________________________________________________________________
+Q: What is the Explore feature in YACS?
+A: The Explore feature in YACS allows you to browse various majors offered at RPI and view the courses available for a given semester. Here's how to use it:
+
+    1.Click the Explore navbar on the top of the page
+    2.Choose the major you want to explore from the available options.
+    3.YACS will display the courses associated with the selected major for the specified semester.
+    4.You can further explore each course for detailed information such as descriptions, prerequisites, and offered sections.
+
+___________________________________________________________________________________________________________
+Q: How can I use the Pathways Navigation feature in YACS?
+A: The Pathway Navigation feature in YACS helps you navigate through the pathways provided by RPI and determine which courses you need to take to fulfill pathway requirements. To use this feature, follow these steps:
+
+    1.Click the Pathways button on the top of the page
+    2.Select the pathway you are interested in or that aligns with your academic goals.
+    3.YACS will display the pathway requirements and the courses available to fulfill each requirement.
+    4.Explore the recommended course options and plan your academic path accordingly.
+
+___________________________________________________________________________________________________________
+Q: How can I use the Finals feature in YACS?
+A: The Finals feature in YACS allows you to enter your courses and generate your final exam schedule. To use this feature, follow these steps:
+
+    1.Click the Finals button on the top of the page
+    2.Enter the courses you are enrolled in for the semester. Once you finishing adding your courses, hit Search.
+    3.YACS will generate your final exam schedule, displaying the date, time, and location of each exam.

src/web/src/pages/FAQs.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="faq-page">
+    <h1>Frequently Asked Questions</h1>
+    <div v-for="(faq, index) in faqData" :key="index" class="faq-item" :class="{ open: faq.isOpen }" @click="toggleAnswer(index)">
+      <div class="question-wrapper flex-layout">
+        <h3 :class="{ active: faq.isOpen }">{{ faq.title }}</h3>
+        <div class="dropdown-indicator">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right">
+            <polyline points="9 18 15 12 9 6"></polyline>
+          </svg>
+        </div>
+      </div>
+      <div class="divider"></div>
+      <div class="answer-wrapper" :class="{ open: faq.isOpen }">
+        <p>{{ faq.answer }}</p>
+        <p>{{ faq.answer1 }}</p>
+        <p>{{ faq.answer2 }}</p>
+        <p>{{ faq.answer3 }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+    name: 'FAQs',
+    data() {
+        return {
+        faqData: [
+            {
+                title: ' What is YACS and what is its mission?',
+                answer:' YACS (Yet Another Course Scheduler) is a web-based application designed to assist students in scheduling and planning their courses at academic institutions. It provides features such as course catalog browsing, schedule building, and course availability information. YACS aims to simplify the course selection process, allowing students to efficiently organize their academic schedules.',
+                isOpen: false
+            },
+            {
+                title: ' How can I use the Schedule feature?',
+                answer:'1. Click the Schedule navbar on the top of the page.',
+                answer1:'2. Add courses to your schedule by searching for them in the course catalog or using other available options.',
+                answer2:'3. Arrange the courses in your preferred time slots or based on your schedule requirements.',
+                answer3:'4. YACS will display your scheduled courses, allowing you to visualize your timetable and make adjustments if needed.',
+                isOpen: false
+            },
+            {
+                title: ' What is the Explore feature?',
+                answer:'1. Click the Explore navbar at the top of the page.' ,
+                answer1:'2. Choose the major you want to explore from the available options. ',
+                answer2:'3. YACS will display the courses associated with the selected major for the specified semester.',
+                answer3:'4. You can further explore each course for detailed information such as descriptions, prerequisites, and offered sections.',
+                isOpen: false
+            },
+            {
+                title: ' How can I use the Pathways Navigation feature?',
+                answer:'1. Click the Pathways button at the top of the page.',
+                answer1:'2. Select the pathway you are interested in or that aligns with your academic goals.',
+                answer2:'3. YACS will display the pathway requirements and the courses available to fulfill each requirement.',
+                answer3:'4. Explore the recommended course options and plan your academic path accordingly.',
+                isOpen: false
+            },
+            {
+                title: ' How can I use the Finals feature?',
+                answer:'1. Click the Finals button on the top of the page.',
+                answer1:'2. Enter the courses you are enrolled in for the semester. Once you finish adding your courses, hit Search.',
+                answer2:'3. YACS will generate your final exam schedule, displaying the date, time, and location of each exam.',
+                isOpen: false
+            },
+            // Add more FAQ items as needed
+        ]
+        };
+  },
+  methods: {
+    toggleAnswer(index) {
+      this.faqData[index].isOpen = !this.faqData[index].isOpen;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.faq-page {
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 20px;
+  font-family: Arial, sans-serif;
+}
+
+h1 {
+  text-align: center;
+  font-size: 24px;
+  margin-bottom: 20px;
+  font-weight: bold;
+}
+.flex-layout {
+  display: flex;
+  align-items: center;
+}
+
+.faq-item {
+  padding: 10px;
+  cursor: pointer;
+  border-left: 3px solid transparent;
+  transition: border-left 0.2s linear;
+}
+
+.faq-item.open {
+  border-left: 3px solid #5ca9fa;
+}
+
+.faq-item h3 {
+  font-size: 16px;
+  margin: 0;
+  color: #333;
+  cursor: pointer;
+  font-weight: bold;
+}
+
+.divider {
+  height: 1px;
+  background-color: #ccc;
+}
+
+.answer-wrapper {
+  margin-top: 10px;
+  max-height:0;
+  overflow: hidden;
+  transition: max-height 0.3s ease-in-out;
+}
+
+.answer-wrapper.open {
+  max-height: 1000px;
+}
+
+.faq-item p {
+  font-size: 14px;
+  color: #555;
+  opacity: 0.3s;
+  transition: opacity 0.3s ease-in-out;
+}
+
+.dropdown-indicator {
+  width: 20px;
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  transition: transform 0.3s ease;
+}
+.open .dropdown-indicator {
+  transform: rotate(90deg);
+  width: 20px;
+  height: 20px;
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  transition: transform 0.3s ease;
+}
+
+</style>

src/web/src/plugins/fontawesome-vue.js

@@ -13,16 +13,20 @@ import {
   faSearch,
   faAddressBook,
   faFileAlt,
+  faQuestionCircle,
+  // faAddressBook,
 } from "@fortawesome/free-solid-svg-icons";
 
 library.add(
+  faQuestionCircle,
   faPaperPlane,
   faMoon,
   faCalendar,
   faList,
   faBars,
   faSearch,
   faAddressBook,
+  faFileAlt,
   faFileAlt
 );
 

src/web/src/routes.js

@@ -13,6 +13,7 @@ const PathwayPage = () => import("./pages/Pathway");
 const SubjectExplorerPage = () => import("./pages/SubjectExplorer");
 const NotFoundPage = () => import("./pages/NotFound");
 const FinalExamScheduler = () => import("./pages/FinalExamScheduler");
+const FAQPage = () => import("./pages/FAQs");
 
 var router = new VueRouter({
   routes: [
@@ -43,6 +44,11 @@ var router = new VueRouter({
           component: PathwayPage,
           name: "Pathway",
         },
+        {
+          path: "/faq",
+          component: FAQPage,
+          name: "FAQs",
+        },
         {
           path: "/FinalExamScheduler",
           component: FinalExamScheduler,