<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="myModal" class="modal fade in" tabindex="-1" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h3>Take a Quiz!</h3> </div> <div class="modal-body"> <div class="quiz" data-toggle="buttons"> <label class="btn btn-labeled btn-default btn-block"> <span class="btn-label"><i class="glyphicon"></i></span><input type="radio" name="q" value="1">answer one </label> <label class="btn btn-labeled btn-default btn-block"> <span class="btn-label"><i class="glyphicon"></i></span><input type="radio" name="q" value="2">answer two </label> <label class="btn btn-labeled btn-default btn-block"> <span class="btn-label"><i class="glyphicon"></i></span><input type="radio" name="q" value="3">answer three </label> </div> </div> <div class="modal-footer"> <span id="answer"></span> <!-- hide close button, hide when correct choice only! --> </div> </div> </div> </div>

/* CSS label from http://bootsnipp.com/snippets/featured/buttons-with-labels */ .btn-label {position: relative;left: -12px;display: inline-block;padding: 6px 12px;background: rgba(0,0,0,0.15);border-radius: 3px 0 0 3px;} .btn-labeled {padding-top: 0;padding-bottom: 0;} .btn { margin-bottom:10px; } .btn-block {text-align:left;}

$(window).load(function(){ $('#myModal').modal({ backdrop: 'static', keyboard: false }); }); $("label.btn").on('click',function () { $(this).parent('div.quiz').find('i').removeClass('glyphicon-remove'); $(this).find('i').addClass('glyphicon-remove'); $(this).parent('div.quiz').find('.btn-success').addClass('btn-default').removeClass('btn-success'); $(this).addClass('btn-success'); var choice = $(this).find('input:radio').val(); $( "#answer" ).html( $(this).checking(choice)+ " is checked!" ); }); $ans = 3; $.fn.checking = function(ck) { if (ck != $ans) return 'INCORRECT'; else return 'CORRENT'; };