FAQ AppFrequently Asked Questions App

An application Northern Illinois University uses to produce consistent, interactive FAQ pages

Northern Illinois University
2016

The Challenge

After working with NIU’s website for some time, I began to notice a pattern where NIU webmasters had to reinvent the wheel every time they made a new frequently asked questions page for an NIU subsite. The FAQ pages were usually very syntax-heavy and all looked and behaved in slightly different ways. When I revised Housing and Dining’s FAQ page, I decided to do it using an AngularJS application that provided an easy-to-use syntax and also gave a number of features for “free”:

  1. Client-side fuzzy search using Fuse.js
  2. Automatic collapsible/expandible questions and answers
  3. Ability to create and share permalinks to specific questions:
  4. Accessibility via keyboard navigation:

Creating FAQs Quickly

This app allowed webmasters across the campus to create consistent, usable FAQs for their site. The syntax abstracts away the logic needed for making elements collapsible. Answers can have arbitrary HTML that is rendered on the page. Hash values used in permalinks are created automatically based on the question text. When I gave NIU’s Web Team instructions on how to set this up and an example of the following syntax, it “just worked” and they immediately started using it to spin up new FAQ pages across the website.

<div ng-app="faq">
    <faq>
        <section>
            <h3>Top Questions</h3>
            <article>
                <question>Do I have to have a meal plan?</question>
                <answer>
                    <p>All residence hall students are required to have a meal plan as part of residence hall living. When you sign up for a room, the cost of your room includes the Huskie Unlimited Access Plan</a>.
                    </p>
                </answer>
            </article>
            <article>
                <question>How do I change my room?</question>
                <answer>
                    <p><strong>Before moving in in August:</strong> Log on to Housing Sign Up and choose a new room from the spaces available. If the room you want to sign up for is not available right now, try checking back later. Room availability changes throughout the late spring and early summer.</p>
                    <p><strong>After you've already moved in:</strong> Contact the Chief Clerk of your residence hall and tell them you are interested in moving into a different space. There may be a waitlist for the type of room you want.</p>
                </answer>
            </article>
        </section>
        <section>
            <h3>Roommates</h3>
            <article>
                <question>I already have a roommate in mind. How do I sign up with my roommate?</question>
                <answer>
                    <p>During room sign-up, one person called the Designee will select the room, flex dollar preferences and Huskie Bucks preferences for all roommates. This person must have the Z-ID and roommate PIN for everyone else who will be sharing the room/suite. You can find your roommate PIN by going to Housing Sign Up selecting Roommates. Everyone in the group should tell this person what their preferences are for <a href="/dining/meal-plans/resident/index.shtml">flex dollars and Huskie Bucks</a>.</p>
                </answer>
            </article>
        </section>
    </faq>
</div>

As of 2017, over 60 pages on the NIU.edu domain use this app to display frequently asked questions.