Question + Answer

Component status:Ready

Question and Answer is a series of interview questions and answers within a news article or story in a scannable format.

A series of Question and Answers breaks up storytelling content into smaller, scannable chunks, making the content seem less formidable to readers. It is ideal to use a conversational tone to embrace the conventional sense of an interview, which is a discussion between two people.

Examples

Default

Q Question

This is a question?

A Answer

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Q Question

This is a Question?

A Answer

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Q Question

This is a Question?

A Answer

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<div class="bux-qa">
  <div class="bux-qa__item">
    <h2 class="bux-qa__question">
      <span class="bux-qa__question-marker" aria-hidden="true">Q</span>
      <span class="visually-hidden">Question</span>
      <div class="bux-qa__question-text">This is a question?</div>
    </h2>
    <div class="bux-qa__answer">
      <span class="bux-qa__answer-marker" aria-hidden="true">A</span>
      <span class="visually-hidden">Answer</span>
      <div class="bux-qa__answer-text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat.
      </div>
    </div>
  </div>
  <div class="bux-qa__item">
    <h2 class="bux-qa__question">
      <span class="bux-qa__question-marker" aria-hidden="true">Q</span>
      <span class="visually-hidden">Question</span>
      <div class="bux-qa__question-text">This is a Question?</div>
    </h2>
    <div class="bux-qa__answer">
      <span class="bux-qa__answer-marker" aria-hidden="true">A</span>
      <span class="visually-hidden">Answer</span>
      <div class="bux-qa__answer-text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat.
      </div>
    </div>
  </div>
  <div class="bux-qa__item">
    <h2 class="bux-qa__question">
      <span class="bux-qa__question-marker" aria-hidden="true">Q</span>
      <span class="visually-hidden">Question</span>
      <div class="bux-qa__question-text">This is a Question?</div>
    </h2>
    <div class="bux-qa__answer">
      <span class="bux-qa__answer-marker" aria-hidden="true">A</span>
      <span class="visually-hidden">Answer</span>
      <div class="bux-qa__answer-text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat.
      </div>
    </div>
  </div>
</div>

{#
Buckeye UX - version 1.0.12
Copyright (C) 2024 The Ohio State University
#}

{# 

Q+A

Available variables:

- modifier:         Sets the Q+A variant. Either null or storytelling.
- heading_level:    Integer value for the Q+A title.
- items:            Array containing the Q+A items.
- item.question:    String for the question.
- item.answer:      Content of the answer.

#}

<div class="bux-qa {% if modifier %} bux-qa--{{modifier}} {% endif %}">
	{% for item in items %}
		<div class="bux-qa__item">
			<h{{heading_level|default(2)}} class="bux-qa__question">
				{% if modifier != "storytelling" %}
				<span class="bux-qa__question-marker" aria-hidden="true">Q</span>
				{% endif %}
				<span class="visually-hidden">Question</span>
				<div class="bux-qa__question-text">{{ item.question }}</div>
			</h{{heading_level|default(2)}}>
			<div class="bux-qa__answer">
				{% if modifier != "storytelling" %}
				<span class="bux-qa__answer-marker" aria-hidden="true">A</span>
				{% endif %}
				<span class="visually-hidden">Answer</span>
				<div class="bux-qa__answer-text">{{ item.answer }}</div>
			</div>
		</div>
	{% endfor %}
</div>

Storytelling

Question

This is a question?

Answer

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Question

This is a Question?

Answer

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Question

This is a Question?

Answer

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<div class="bux-qa bux-qa--storytelling">
  <div class="bux-qa__item">
    <h2 class="bux-qa__question">
      <span class="visually-hidden">Question</span>
      <div class="bux-qa__question-text">This is a question?</div>
    </h2>
    <div class="bux-qa__answer">
      <span class="visually-hidden">Answer</span>
      <div class="bux-qa__answer-text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat.
      </div>
    </div>
  </div>
  <div class="bux-qa__item">
    <h2 class="bux-qa__question">
      <span class="visually-hidden">Question</span>
      <div class="bux-qa__question-text">This is a Question?</div>
    </h2>
    <div class="bux-qa__answer">
      <span class="visually-hidden">Answer</span>
      <div class="bux-qa__answer-text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat.
      </div>
    </div>
  </div>
  <div class="bux-qa__item">
    <h2 class="bux-qa__question">
      <span class="visually-hidden">Question</span>
      <div class="bux-qa__question-text">This is a Question?</div>
    </h2>
    <div class="bux-qa__answer">
      <span class="visually-hidden">Answer</span>
      <div class="bux-qa__answer-text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat.
      </div>
    </div>
  </div>
</div>

{#
Buckeye UX - version 1.0.12
Copyright (C) 2024 The Ohio State University
#}

{# 

Q+A

Available variables:

- modifier:         Sets the Q+A variant. Either null or storytelling.
- heading_level:    Integer value for the Q+A title.
- items:            Array containing the Q+A items.
- item.question:    String for the question.
- item.answer:      Content of the answer.

#}

<div class="bux-qa {% if modifier %} bux-qa--{{modifier}} {% endif %}">
	{% for item in items %}
		<div class="bux-qa__item">
			<h{{heading_level|default(2)}} class="bux-qa__question">
				{% if modifier != "storytelling" %}
				<span class="bux-qa__question-marker" aria-hidden="true">Q</span>
				{% endif %}
				<span class="visually-hidden">Question</span>
				<div class="bux-qa__question-text">{{ item.question }}</div>
			</h{{heading_level|default(2)}}>
			<div class="bux-qa__answer">
				{% if modifier != "storytelling" %}
				<span class="bux-qa__answer-marker" aria-hidden="true">A</span>
				{% endif %}
				<span class="visually-hidden">Answer</span>
				<div class="bux-qa__answer-text">{{ item.answer }}</div>
			</div>
		</div>
	{% endfor %}
</div>

Usage

Dos

• Use for an edited interview transcript, which provides a more personal experience for the reader
• Keep questions concise. Focus on the value of the answer
• Limit questions to 15 or less

Don’ts

• Don’t use Question and Answer for 15+ questions, such as frequently asked questions; use Accordions instead
• Don’t use Question and Answer if you are defining terms; use a Description List instead
• Don’t use the Q and A letters if your questions are very long