Bootstrap Snippet QUIZ using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<link rel="stylesheet" href="//fontawesome.io/assets/font-awesome/css/font-awesome.css">
<div class="container" id="quiz">
    <div class="row">
        <div class="col-md-8 col-md-offset-2" id="panel1">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title text-danger">
                        <i class="fa fa-question-circle fa-3x"></i> 1. The First Question？   
                    </h3>
                </div>
                <div class="panel-body two-col">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="frb frb-danger margin-bottom-none">
                            <input type="radio" id="radio-button-5" name="radio-button" value="5">
                            <label for="radio-button-5">
                                <span class="frb-title">Answer 1</span>
                                <span class="frb-description"></span>
                            </label>
                        </div>
                        </div>
                        <div class="col-md-4">
                            <div class="frb frb-danger margin-bottom-none">
                            <input type="radio" id="radio-button-5" name="radio-button" value="5">
                            <label for="radio-button-5">
                                <span class="frb-title">Answer 2</span>
                                <span class="frb-description"></span>
                            </label>
                        </div>
                        </div>
                        <div class="col-md-4">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
#cnt1 {
    background-color: rgba(215, 212, 212, 0.88);
    margin-bottom: 70px;
}
#panel1 {
    padding:20px;
}
.panel-body:not(.two-col) {
    padding: 0px;
}
.panel-body .radio, .panel-body .checkbox {
    margin-top: 0px;
    margin-bottom: 0px;
}
.panel-body .list-group {
    margin-bottom: 0;
}
.margin-bottom-none {
    margin-bottom: 0;
}
.frb-group {
    margin: 15px 0;
}
.frb ~ .frb {
    margin-top: 15px;
}
.frb input[type="radio"]:empty,
.frb input[type="checkbox"]:empty {
    display: none;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
$(document).ready(function() {
    $('#panel2').hide();
    
    $('#step1').click( function () { $('#panel1').show();$('#panel2').hide(); });
    
    $('#step2').click( function () { $('#panel1').hide();$('#panel2').show(); });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"QUIZ"
Bootstrap 3.3.0 Snippet by calvin52019

Related: See More

Questions / Comments:

"QUIZ" Bootstrap 3.3.0 Snippet by calvin52019

Related: See More

Questions / Comments:

"QUIZ"
Bootstrap 3.3.0 Snippet by calvin52019