Portland Community College | Portland, Oregon Portland Community College

Fortune Teller

Fortune Teller is a way to ask yes/no questions and display a different answer based on the selection. They aren’t common on the website, but are handy in certain cases.

Fortune Teller is similar to expandable sections, but provides two answers instead of one.

Development info

  • Stylesheet location: /source-v6/styles/components/_fortune-teller.scss
  • *Not possible in WordPress at this point in time
  • form class="fortune-teller"
  • The answers must begin with Yes: or No: for accessibility
  • Pay attention to all the class="yes" and class="no"
  • Pay attention to the name="x", value="x", and id="x" on the inputs
  • div class="qa-group" wraps an entire question and its answers
  • The yes/no answers are wrapped in div class="answer"
    <form class="fortune-teller">
      <fieldset>
        <fieldset class="qa-group">
          <legend>Question 1</legend>
          <div class="answer-group">
            <label class="yes" for="question-1-yes">Yes
              <input name="question-1" value="yes" type="radio" id="question-1-yes" />
            </label>
            <label class="no" for="question-1-no">No
              <input name="question-1" value="no" type="radio" id="question-1-no" />
            </label>
            <div class="answer">
              <p class="yes">Yes: Yes description</p>
              <p class="no">No: No description</p>
            </div>
          </div>
        </fieldset>
        <fieldset class="qa-group">
          repeat
        </fieldset>
      </fieldset>
    </form>

Styling

Fortune Teller components look like forms (they are forms without a submit button). Each question group is divided by a horizontal line. When you click either the Yes or No option for each question, the answer appears in a white box below, with an arrow pointed at the selected radio button.

Responsive behavior

No change.

There is an example on this Panther Tracks page.

Fortune Teller example