EXTERNAL - Documentation

Grid

full screen new window example HTML markup

The interactive question grid component is used to reveal information based on a user's selection from multiple choice of input options.

Usage

Use to create a multiple choice question grid with a maximum of six questions. An optional reset button can be added to allow the option of changing the selected answer. This component requires javascript for functionality and accessibility.

  • Add a unique id to the containing element with class slb-question.
  • Each form-check-input element must include the attribute data-toggle="collapse" and data-target="#ANSWER_ELEMENT_ID" for the bootstrap collapse plugin to function. The data-target attribute points to the corresponding answer panel that the input controls using the element's id.
  • Add the bootstrap class collapse on answer elements to make them function as collapsing elements. Use the class show with collapse to set a panel to show by default when displayed. To ensure that answer elements function properly as a group, add the attribute data-parent="#UNIQUE_ACCORDION_PARENT_ID" to each answer element to link them to the parent element of the interactive question.

Accessible attributes

Accessible attribute Description
aria-label="COMPONENT DESCRIPTION" Use on the input container element, adds a label to the radio input container using the role tablist that describes the purpose.
aria-expanded="false" Use on the input element, indicates if the answer panel is visible, sets to true when answer is shown.
aria-controls="ANSWER-ELEMENT-ID" Use on the input element, refers to the answer element associated with each radio input button.
aria-labelledby="BUTTON-ELEMENT-ID" Use on the answer element, refers to the button element that controls the answer.

JavaScript Support

JavaScript Support class name Description
data-toggle="collapse" Use on input element to control the collapsing element. (See bootstrap collapse plugin documentation)
data-target="#ANSWER_ELEMENT_ID" Use on input element to control the collapsing element. (See bootstrap collapse plugin documentation)
data-parent="#UNIQUE_ACCORDION_PARENT_ID" Use on each answer element to group with the parent element. (See bootstrap collapse plugin documentation)
collapse Use on answer element to indicate that this element is a collapsing element. (See bootstrap collapse documentation)
show Use on answer element to set panel to initially display. (See bootstrap collapse documentation)
How do you plan to answer this question?
Answer 1

Ipsum dolor sit amet, consectetur uradic adipiscing elit. Maecenas id orci vel sapien molli porta ut non neque curabitur odio mauris.

Answer 2

Ipsum dolor sit amet, consectetur uradic adipiscing elit. Maecenas id orci vel sapien molli porta ut non neque curabitur odio mauris.

Answer 3

Ipsum dolor sit amet, consectetur uradic adipiscing elit. Maecenas id orci vel sapien molli porta ut non neque curabitur odio mauris.

Answer 4

Ipsum dolor sit amet, consectetur uradic adipiscing elit. Maecenas id orci vel sapien molli porta ut non neque curabitur odio mauris.

Answer 5

Ipsum dolor sit amet, consectetur uradic adipiscing elit. Maecenas id orci vel sapien molli porta ut non neque curabitur odio mauris.

Answer 6

Ipsum dolor sit amet, consectetur uradic adipiscing elit. Maecenas id orci vel sapien molli porta ut non neque curabitur odio mauris.

Markup: interactive-question\interactive-question-grid.hbs Copy 
<div class="container">
    <form>
        <fieldset class="slb-question" id="question-grid-id" aria-label="Interactive question">
            <legend class="slb-question__text">How do you plan to answer this question?</legend>
            <div class="row">
                <div class="form-check col-sm-6">
                    <input type="radio" class="form-check-input" id="input-id-1" data-toggle="collapse" data-target="#answer-id-1" name="question-input-block" aria-expanded="false" aria-controls="answer-id-1">
                    <label class="form-check-label form-check-label--question" for="input-id-1">Answer 1</label>
                </div>
                <div class="form-check col-sm-6">
                    <input type="radio" class="form-check-input" id="input-id-2" data-toggle="collapse" data-target="#answer-id-2" name="question-input-block" aria-expanded="false" aria-controls="answer-id-2">
                    <label class="form-check-label form-check-label--question" for="input-id-2">Answer 2</label>
                </div>
                <div class="form-check col-sm-6">
                    <input type="radio" class="form-check-input" id="input-id-3" data-toggle="collapse" data-target="#answer-id-3" name="question-input-block" aria-expanded="false" aria-controls="answer-id-3">
                    <label class="form-check-label form-check-label--question" for="input-id-3">Answer 3</label>
                </div>
                <div class="form-check col-sm-6">
                    <input type="radio" class="form-check-input" id="input-id-4" data-toggle="collapse" data-target="#answer-id-4" name="question-input-block" aria-expanded="false" aria-controls="answer-id-4">
                    <label class="form-check-label form-check-label--question" for="input-id-4">Answer 4</label>
                </div>
                <div class="form-check col-sm-6">
                    <input type="radio" class="form-check-input" id="input-id-5" data-toggle="collapse" data-target="#answer-id-5" name="question-input-block" aria-expanded="false" aria-controls="answer-id-5">
                    <label class="form-check-label form-check-label--question" for="input-id-5">Answer 5</label>
                </div>
                <div class="form-check col-sm-6">
                    <input type="radio" class="form-check-input" id="input-id-6" data-toggle="collapse" data-target="#answer-id-6" name="question-input-block" aria-expanded="false" aria-controls="answer-id-6">
                    <label class="form-check-label form-check-label--question" for="input-id-6">Answer 6</label>
                </div>
                <button class="slb-question__reset">Change</button>
            </div>
            <div class="row mx-0">
                <div id="answer-id-1" class="slb-question__answer col collapse" data-parent="#question-grid-id" aria-labelledby="input-id-1">
                    <div class="slb-question__answer-content">
                        <h6>Answer 1</h6>
                        <p>Ipsum dolor sit amet, consectetur uradic adipiscing elit. Maecenas id orci vel sapien molli porta ut non neque curabitur odio mauris.</p>
                    </div>
                </div>
                <div id="answer-id-2" class="slb-question__answer col collapse" data-parent="#question-grid-id" aria-labelledby="input-id-2">
                    <div class="slb-question__answer-content">
                        <h6>Answer 2</h6>
                        <p>Ipsum dolor sit amet, consectetur uradic adipiscing elit. Maecenas id orci vel sapien molli porta ut non neque curabitur odio mauris.</p>
                    </div>
                </div>
                <div id="answer-id-3" class="slb-question__answer col-12 collapse" data-parent="#question-grid-id" aria-labelledby="input-id-3">
                    <div class="slb-question__answer-content">
                        <h6>Answer 3</h6>
                        <p>Ipsum dolor sit amet, consectetur uradic adipiscing elit. Maecenas id orci vel sapien molli porta ut non neque curabitur odio mauris.</p>
                    </div>
                </div>
                <div id="answer-id-4" class="slb-question__answer col-12 collapse" data-parent="#question-grid-id" aria-labelledby="input-id-4">
                    <div class="slb-question__answer-content">
                        <h6>Answer 4</h6>
                        <p>Ipsum dolor sit amet, consectetur uradic adipiscing elit. Maecenas id orci vel sapien molli porta ut non neque curabitur odio mauris.</p>
                    </div>
                </div>
                <div id="answer-id-5" class="slb-question__answer col-12 collapse" data-parent="#question-grid-id" aria-labelledby="input-id-5">
                    <div class="slb-question__answer-content">
                        <h6>Answer 5</h6>
                        <p>Ipsum dolor sit amet, consectetur uradic adipiscing elit. Maecenas id orci vel sapien molli porta ut non neque curabitur odio mauris.</p>
                    </div>
                </div>
                <div id="answer-id-6" class="slb-question__answer col-12 collapse" data-parent="#question-grid-id" aria-labelledby="input-id-6">
                    <div class="slb-question__answer-content">
                        <h6>Answer 6</h6>
                        <p>Ipsum dolor sit amet, consectetur uradic adipiscing elit. Maecenas id orci vel sapien molli porta ut non neque curabitur odio mauris.</p>
                    </div>
                </div>
            </div>
        </fieldset>
    </form>
</div>
Source: components/_interactive-question.scss