added FAQ page (#528)

* added FAQ page

* update css

* added js code in custom.js file and linked it

FAQ.html

@@ -0,0 +1,32 @@
+---
+layout: default
+title: FAQ - Sugar Labs
+permalink: /FAQ/index.html
+---
+
+<!-- Title section -->
+<div class="section-title1">
+    <span class="tag tag-regular">Frequently Asked Questions</span>
+</div>
+
+<!-- Question & Answere section -->
+<section id="intro">
+    <div class="container mt-5 my-2">
+        <div class="border-bottom pb-3 mb-3">
+            <ol id="faqList">
+                {% for faq in site.faqs  %}
+                <li class="list-item">
+                    <div class="question h5 fw-bold d-flex justify-content-between align-item-centre" onclick="toggleAnswer('answer-{{ forloop.index }}', this)">
+                        {{ faq.question }}
+                        <span class="indicator h5 fw-bold">+</span>
+                    </div>
+                    <div id="answer-{{ forloop.index }}" class="answer d-none">
+                        {{ faq.answer }}
+                    </div>
+                    <hr>
+                </li>
+                {% endfor %}
+            </ol>
+        </div>
+    </div>
+</section>

_config.yml

@@ -6,3 +6,6 @@ description: "Sugar Labs contributes to and helps maintain the award-winning Sug
 keywords: "sugar, sugar labs, learning, olpc, constructionism, education, community"
 sass:
   sass_dir: css
+collections:
+  faqs:
+    output: true

_faqs/Q1-What-is-SugarLabs.md

@@ -0,0 +1,4 @@
+---
+question: "What is Sugar Labs?"
+answer: "Sugar Labs, a 501(c)(3) non-profit foundation, serves as a support base and gathering place for the community of educators and software developers who want to extend the Sugar platform and who have been creating Sugar-compatible applications."
+---

_faqs/Q2-What-is-the-mission-of-SugarLabs.md

@@ -0,0 +1,4 @@
+---
+question: "What is the mission of Sugar Labs?"
+answer: "The overarching mission of Sugar Labs is to support the Sugar platform through software development, and community outreach and support. The purpose of the Sugar platform is provide a software and content environment that enhances learning. Towards this end, Sugar is designed to facilitate learners to “explore, express, debug, and critique.”"
+---

_faqs/Q3-What-is-the principles-that-guide-SugarLabs.md

@@ -0,0 +1,4 @@
+---
+question: "What are the principles that guide Sugar Labs?"
+answer: "Sugar Labs subscribes to principle that learning thrives within a culture of freedom of expression, hence it has a natural affinity with the free software movement."
+---

_faqs/Q4-What-makes-Sugar-different-from-other-educational-software-platform.md

@@ -0,0 +1,9 @@
+---
+question: "What makes Sugar different from other educational software platforms?"
+answer: "The Sugar interface, in its departure from the desktop metaphor for computing, is the first serious attempt to create a user interface that is based on both cognitive and social constructivism: learners should engage in authentic exploration and collaboration.
+ It is based on three very simple principles about what makes us human:
+  (1) everyone is a teacher and a learner.
+  (2) humans by their nature are social beings.
+  (3) humans by their nature are expressive.
+ These are the pillars of a user experience for learning."
+---

_faqs/Q5-Who-can-use-Sugar-and-how-do-they-benefits.md

@@ -0,0 +1,6 @@
+---
+question: "Who can use Sugar and how do they benefit?"
+answer: "Sugar is a free software project, freely available to anyone who wants to use it or improve upon it.
+ The Sugar platform was designed for young children (K–6), but it is finding applicability in a number of different venues where the simplicity of design maps is an enabler, e.g., mobile applications, the elderly, etc.
+ Sugar will engage even the youngest learner in the use of computation as a powerful 'thing to think with.' They will quickly become proficient in using the computer as a tool to engage in authentic problem-solving. Sugar users develop skills that help them in all aspects of life."
+---

_faqs/Q6-Are-there-any-platforms-where-Sugar-runs-on.md

@@ -0,0 +1,8 @@
+---
+question: "Are there any platforms where Sugar runs on?"
+answer: "The Sugar Learning Platform is a leading learning platform that began in the famous One Laptop Per Child project. It is used every day by nearly 3 million children around the world. Sugarizer is a web implementation of the platform and runs on every device - from tiny Raspberry Pi computers to small Android and iOS phones to tablets and to laptops and desktops. It has 3 broad components:
+ (1) Web Application: a web application that runs in modern web browsers.
+ (2) Application: an installable app for every operating system.
+ (3) Server: a nodejs/express server for applications to connect with.
+ Enjoy the experience and help us reach every child on every device in every country."
+---

_includes/nav.html

@@ -46,6 +46,13 @@
                       >Contact us</a
                     >
                   </li>
+                  <li>
+                    <a
+                      class="dropdown-item"
+                      href="{{ site.baseurl }}/FAQ"
+                      >FAQs</a
+                    >
+                  </li>
                 </ul>
               </li>
 
@@ -120,6 +127,9 @@
             <a class="dropdown-item" href="{{ site.baseurl }}/contact-us"
               >Contact us</a
             >
+            <a class="dropdown-item" href="{{ site.baseurl }}/FAQ"
+              >FAQs</a
+            >
           </div>
         </li>
         <li class="nav-item">

_layouts/base.html

@@ -58,6 +58,7 @@
             if(typeof($.fn.modal) === 'undefined') {document.write('<script src="{{ site.baseurl }}/js/bootstrap.js"><\/script>')}
         </script>
         <script  type="text/javascript" src="{{ site.baseurl }}/js/main.js" defer></script>
+        <script  type="text/javascript" src="{{ site.baseurl }}/js/custom.js" defer></script>
         <link rel="canonical" href="https://sugarlabs.org/" />
         <link rel="alternate" type="application/rss+xml" title="http://planet.sugarlabs.org/" />
         <script type="text/javascript" defer>

css/airspace.css

@@ -2787,4 +2787,4 @@ table, th, td {
 
 .count{
 /* Nothing related to styling needed to be described for this  */
-}
+}

js/custom.js

@@ -0,0 +1,15 @@
+//show answer and change indicator for /FAQ page
+function toggleAnswer(answerId, element) {
+    const answer = document.getElementById(answerId);
+    const indicator = element.querySelector('.indicator'); 
+
+    if (answer) {
+        answer.classList.toggle('d-none');
+
+        if (answer.classList.contains('d-none')) {
+            indicator.innerHTML = '+';
+        } else {
+            indicator.innerHTML = '-';
+        }
+    }
+}

sitemap.txt

@@ -2,6 +2,7 @@ https://www.sugarlabs.org/
 https://www.sugarlabs.org/about-us/
 https://www.sugarlabs.org/leadership/
 https://www.sugarlabs.org/contact-us/
+https://www.sugarlabs.org/FAQ/
 https://www.sugarlabs.org/inquiry/
 https://www.sugarlabs.org/develop/
 https://www.sugarlabs.org/press/