2. 3.x Component Gallery
  3. Multiple Choice

Multiple Choice

v3.x

Use media lists to organize combinations of visual and textual data.

BBootstrap 3.x

 Add the standard ‘3-and-1’

Build Question Here

  • EXAMPLES
  • Wrong answer
  • Wrong answer
  • Wrong answer
  • Right answer
<div class="panel panel-understanding-check">
	<form class="multipleChoice">
		<div class="form-group">
			<label for="radio">What is your favorite color?</label>
			<div class="radio">
				<label>
					<input type="radio" data-question-number="87518975480" name="question-87518975480" id="bsr-radios-97468235240" data-alert-type="alert-danger" data-comment="<strong>Incorrect</strong><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit." value="radio97468235240">
					Color 1
				</label>
			</div>
			<div class="radio">
				<label>
					<input type="radio" data-question-number="87518975480" name="question-87518975480" id="bsr-radios-97468235241" data-alert-type="alert-danger" data-comment="<strong>Incorrect</strong><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit." value="radio97468235241">
					Color 2
				</label>
			</div>
			<div class="radio">
				<label>
					<input type="radio" data-question-number="87518975480" name="question-87518975480" id="bsr-radios-97468235242" data-alert-type="alert-danger" data-comment="<strong>Incorrect</strong><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit." value="radio97468235242">
					Color 3
				</label>
			</div>
			<div class="radio">
				<label>
					<input type="radio" data-question-number="87518975480" name="question-87518975480" id="bsr-radios-97468235243" data-alert-type="alert-success" data-comment="<strong>Correct</strong><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit." value="radio97468235243">
					Color 4
				</label>
			</div>
		</div>
	</form>
	<div class="multiple-choice-alert alert hidden" id="87518975480" role="alert"></div>
</div>

Custom CSS

Custom CSS is required for styling the background of the enclosing panel.

View all custom Bootstrapr.io CSS 
/* understanding check */
.panel-understanding-check {
  background: #f6f7fb;
  padding: 1.5rem;
}

Custom JS

Custom javascript is required to produce the comments for each radio button.

// Show the proper div on radio button click
$(document).delegate(".panel-understanding-check .radio input", "click", function() {

  // Create the ID for the answer div from the question number
  var dataQuestionNumber = "#" + $(this).data("question-number");

  // Show the comment div
  $(dataQuestionNumber).removeClass("hidden");

  // Get the comment and alert type data attributes
  var alertContent = $(this).data("comment");
  var alertType = $(this).data("alert-type");

  // Write the comment and alert type to the div
  $(dataQuestionNumber).html(alertContent);
  $(dataQuestionNumber).removeClass("alert-danger").removeClass("alert-warning").removeClass("alert-success").addClass(alertType);
});

Notes