Creating a FAQ Frequently-Asked-Questions page

1. Video - m11-01
2. Since we did not originally make a 'FAQ' page, create a new 'Frequently Asked Questions' page
3. File / New / Site Templates
4. Change the Document title to Pencil - FAQ
5. In Code view, remove the placeholder content 'mainContent'
6. Press 'Enter/Return' several times to add some space to the page.
7. Open the snippet window (shift+F9)
8. Find out code snippet, 'Starting_Code' (under Bootstrap snippets) and press the 'insert' button at the bottom of the snippet panel.
9. Close the snippet window.
10. Change the h2 text from "Gallery"  to "FAQ: Frequently Asked Questions"
11. Switch to Live view
12. Select the h2
13. Select Insert / HTML
14. Add a div
15. For placement select 'after' to add the new div after the h2 element
16. In CSS Designer, select 'styles.css' under Sources. Select 'GLOBAL' under @Media, and click the '+' under Selectors to add a new selector, #faqQuestion (id)
17. In CSS Designer, select 'styles.css' under Sources. Select 'GLOBAL' under @Media, and click the '+' under Selectors to add a new selector, .faqAnswer (class)
18. With the new div selected in the Status bar, use the Property inspector to assign it to the id 'faqQuestion'
19. In the Insert panel / HTML / add a div after the #faqQuestion div
20. For placement select 'after' to add the new div after the #faqQuestion div
21. Use the Property inspector to assign the div to the class .faqAnswer
22. Save All
23. Switch to Code view
24. Copy the .faqAnswer div two times
25. Press F5 or Refresh
26. Save All
27. Switch to Design view
28. Open tutorial folder, open text_files.txt to locate questions and answers.
29. Save All
30. Video - m11-02
31. Highlight placeholder content in the first div, #faqQuestion div, and paste in the first question.
32. Continue to add questions two and three to the #faqQuestion div, each in a paragraph tag
33. Save All
34. Copy the first question and the first answer, and paste into the second div, which is assigned to the class .faqAnswer
35. Copy the second question and the second answer, and paste into the third div, which is assigned to the class .faqAnswer
36. Copy the third question and the third answer, and paste into the fourth div, which is assigned to the class .faqAnswer
37. Save all
38. In styles.css, in GLOBAL, create three selectors: "#firstAnswer", "#secondAnswer", "#thirdAnswer"
39. Assign the div with the first answer and question to the id of firstAnswer.
40. Assign the div with the second answer and question to the id of secondAnswer.
41. Assign the div with the third answer and question to the id of thirdAnswer.
42. In the div #faqQuestion, select the first question, and in the Property inspector, link it to the first answer, #firstAnswer
43. In the div #faqQuestion, select the second question, and in the Property inspector, link it to the second answer, #secondAnswer
44. In the div #faqQuestion, select the third question, and in the Property inspector, link it to the third answer, #thirdAnswer
45. Save All
46. Preview in browser (F12)
47. Video - m11-03
48. In the first .faqAnswer div, add a final paragraph with the text, "Back To Top"
49. Link this paragraph to the faq question div, #faqQuestion
50. Copy this paragraph, and add it to the end of the two other answer divs
51. Save All
52. Preview in browser (F12)

Styling the F.A.Q.

1. Switch to Live view
2. Create a new selector in styles.css, in GLOBAL, for #faqQuestion p a
3. In CSS Designer, select 'styles.css' under Sources. Select 'GLOBAL' under @Media, and click the '+' under Selectors to add a new selector, #faqQuestion p a
4. Under the category 'Text' set a font-weight:bold; text-decoration:none; select a unique text color.
5. Scroll to the bottom of properties, and enter 'transition' as a property, with a value of  'all 0.5s'
6. Video - m11-04
7. In styles.css, find the css selector .faqAnswer
8. Add the following property to .faqAnswer: margin-bottom:15px;
9. Add the following properties to .faqAnswer: padding, 10px (top) 10px (right) 30px (bottom) 10px (left)
10. Add the following property to .faqAnswer: border: thick (width) solid (color your choice)
11. Add the following property to .faqAnswer: background color (color your choice)
12. 1. Add the following property to .faqAnswer: border-radius:10px;
13. Add the following property to .faqAnswer: text color (color your choice)
14. Add a selector, .faqAnswer p a with the following properties:font-weight:bold; font-style:italic; color: (your choice) float:right;
15. Video - m11-05
16. In styles.css, GLOBAL, adda new selector .faqAnswer p:first-child
17. Add text property of font-weight:bold;
18. Save All
19. Adding smooth scrolling and offset with jQuery and JavaScript. Copy and Paste the JavaScript/jQuery into the "addScript" section at the bottom of the faq page:

20. <script>
      $(function() {
        $('a[href*="#"]:not([href="#"])').click(function() {
          if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
            if (target.length) {
              $('html, body').animate({
                scrollTop: target.offset().top - $('#topFixedNavbar1').height()
              }, 1000);
              return false;
            }
          }
        });
      });
    </script>

    
    
     
21. Close all open files, then open the template file, and modify the navigation, changing "Coming Soon" to a link to "FAQ"

---

Wayne Joness
West Los Angeles College, cs952
Fall