Grid
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-inputelement must include the attributedata-toggle="collapse"anddata-target="#ANSWER_ELEMENT_ID"for the bootstrap collapse plugin to function. Thedata-targetattribute points to the corresponding answer panel that the input controls using the element's id. - Add the bootstrap class
collapseon answer elements to make them function as collapsing elements. Use the classshowwithcollapseto set a panel to show by default when displayed. To ensure that answer elements function properly as a group, add the attributedata-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) |
interactive-question\interactive-question-grid.hbs
<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