<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 href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.3.0/animate.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<!-- Latest compiled and minified CSS -->a
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://data.fabcrm.com/agents/3130/files/138080871be1424381286fe344f5b2d3.zip">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/cssbody">
<div class="container">
<div class="row">
<section>
<div class="wizard">
<div class="wizard-inner">
<form role="form">
<div class="tab-content">
<div class="tab-pane active" role="tabpanel" id="step1">
<div class="container-fluid bg-info">
<h1 style=" margin-left:10%;
font-size: 4em;
color: #990000;">Welcome to FAB+ Certification</h1>
<div class="modal-dialog" style="width: 100%;">
<div class="modal-content">
<div class="modal-header">
<h3><span class="label label-warning" id="qid">0</span> Please choose your level:</h3>
</div>
<div class="modal-body">
<div class="col-lg-12" style="margin-bottom: -72px;">
<p><a href="http://public.fabcrm.com/form.aspx?id=8111133" class="btn btn-outlined btn-block btn-info" style="font-size: 3em;">Basic Test</a></p>
<p><a href="#" class="btn btn-outlined btn-block btn-success " style="font-size: 3em;">Intermediate Test</a></p>
<p><a href="#" class="btn btn-outlined btn-block btn-warning" style="font-size: 3em;">Advanced Test</a></p>
<p><a href="#" class="btn btn-outlined btn-block btn-danger" style="font-size: 3em;">Become a FAB+ Champion</a></p>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
.btn-outlined {
border-radius: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
@media (min-width: 768px)
.modal-dialog {
width: 600px;
margin: 61px auto;
margin-bottom: !important 153px;
}
.btn-outlined.btn-primary {
background: none;
border: 3px solid #428bca;
color: #428bca;
}
.btn-outlined.btn-primary:hover,
.btn-outlined.btn-primary:active {
color: #FFF;
background: #428bca;
border-color: #428bca:
}
.btn-outlined.btn-success {
background: none;
border: 3px solid #5cb85c;
color: #5cb85c;
}
.btn-outlined.btn-success:hover,
.btn-outlined.btn-success:active {
color: #FFF;
background: #47a447;
}
.btn-outlined.btn-info {
background: none;
border: 3px solid #5bc0de;
color: #5bc0de;
}
.btn-outlined.btn-info:hover,
.btn-outlined.btn-info:active {
color: #FFF;
background: #39b3d7;
}
.btn-outlined.btn-warning {
background: none;
border: 3px solid #f0ad4e;
color: #f0ad4e;
}
.btn-outlined.btn-warning:hover,
.btn-outlined.btn-warning:active {
color: #FFF;
background: #ed9c28;
}
.btn-outlined.btn-danger {
background: none;
border: 3px solid #d9534f;
color: #d9534f;
}
.btn-outlined.btn-danger:hover,
.btn-outlined.btn-danger:active {
color: #FFF;
background: #d2322d;
}
.row {
margin-top: -55px;
}
.bg-info {
background-color: #d1d1d1;
border-radius: 10px;
}
.wizard {
margin: 20px auto;
background: #ddd;
border-radius: 36px
}
.btn-primary {
color: #fff;
background-color: #990000;
border-color: #357ebd;
border-radius: 22px;
}
.btn-default {
color: #fff;
background-color: #990000;
border-color: #357ebd;
border-radius: 22px;
}
.wizard .nav-tabs {
position: relative;
margin: 40px auto;
margin-bottom: 0;
border-bottom-color: #e0e0e0;
}
.wizard > div.wizard-inner {
position: relative;
background-color: #990000;
}
.connecting-line {
height: 2px;
background: #e0e0e0;
position: absolute;
width: 80%;
margin: 0 auto;
left: 0;
right: 0;
top: 50%;
z-index: 1;
}
.wizard .nav-tabs > li.active > a, .wizard .nav-tabs > li.active > a:hover, .wizard .nav-tabs > li.active > a:focus {
color: #555555;
cursor: default;
border: 0;
border-bottom-color: transparent;
}
span.round-tab {
width: 70px;
height: 70px;
line-height: 70px;
display: inline-block;
border-radius: 100px;
background: #fff;
border: 2px solid #e0e0e0;
z-index: 2;
position: absolute;
left: 0;
text-align: center;
font-size: 25px;
}
span.round-tab i{
color:#555555;
}
.wizard li.active span.round-tab {
background: #fff;
border: 2px solid #5bc0de;
}
.wizard li.active span.round-tab i{
color: #5bc0de;
}
span.round-tab:hover {
color: #333;
border: 2px solid #333;
}
.wizard .nav-tabs > li {
width: 25%;
}
.wizard li:after {
content: " ";
position: absolute;
left: 46%;
opacity: 0;
margin: 0 auto;
bottom: 0px;
border: 5px solid transparent;
border-bottom-color: #5bc0de;
transition: 0.1s ease-in-out;
}
.wizard li.active:after {
content: " ";
position: absolute;
left: 46%;
opacity: 1;
margin: 0 auto;
bottom: 0px;
border: 10px solid transparent;
border-bottom-color: #5bc0de;
}
.wizard .nav-tabs > li a {
width: 70px;
height: 70px;
margin: 20px auto;
border-radius: 100%;
padding: 0;
}
.wizard .nav-tabs > li a:hover {
background: transparent;
}
.wizard .tab-pane {
position: relative;
padding-top: 50px;
}
.wizard h3 {
margin-top: 0;
}
@media( max-width : 585px ) {
.wizard {
width: 90%;
height: auto !important;
}
span.round-tab {
font-size: 16px;
width: 50px;
height: 50px;
line-height: 50px;
}
.wizard .nav-tabs > li a {
width: 50px;
height: 50px;
line-height: 50px;
}
.wizard li.active:after {
content: " ";
position: absolute;
left: 35%;
}
}
#qid {
padding: 10px 15px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 20px;
}
h3, .h3 {
color: #dddddd;
font-size: 24px;
}
.modal-header {
background-color: #990000;
color: inherit;
}
#qid {
padding: 10px 15px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 20px;
color: #990000;
}
.label-warning {
background-color: #dddddd;
}
label.btn {
padding: 18px 60px;
white-space: normal;
-webkit-transform: scale(1.0);
-moz-transform: scale(1.0);
-o-transform: scale(1.0);
-webkit-transition-duration: .3s;
-moz-transition-duration: .3s;
-o-transition-duration: .3s
}
label.btn:hover {
text-shadow: 0 3px 2px rgba(0,0,0,0.4);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1)
}
label.btn-block {
text-align: left;
position: relative
}
label .btn-label {
position: absolute;
left: 0;
top: 0;
display: inline-block;
padding: 0 10px;
background: rgba(0,0,0,.15);
height: 100%
}
label .glyphicon {
top: 34%
}
.element-animation1 {
animation: animationFrames ease .8s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
-webkit-animation: animationFrames ease .8s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-ms-animation: animationFrames ease .8s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%
}
.element-animation2 {
animation: animationFrames ease 1s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
-webkit-animation: animationFrames ease 1s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-ms-animation: animationFrames ease 1s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%
}
.element-animation3 {
animation: animationFrames ease 1.2s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
-webkit-animation: animationFrames ease 1.2s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-ms-animation: animationFrames ease 1.2s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%
}
.element-animation4 {
animation: animationFrames ease 1.4s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
-webkit-animation: animationFrames ease 1.4s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-ms-animation: animationFrames ease 1.4s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%
}
@keyframes animationFrames {
0% {
opacity: 0;
transform: translate(-1500px,0px)
}
60% {
opacity: 1;
transform: translate(30px,0px)
}
80% {
transform: translate(-10px,0px)
}
100% {
opacity: 1;
transform: translate(0px,0px)
}
}
@-webkit-keyframes animationFrames {
0% {
opacity: 0;
-webkit-transform: translate(-1500px,0px)
}
60% {
opacity: 1;
-webkit-transform: translate(30px,0px)
}
80% {
-webkit-transform: translate(-10px,0px)
}
100% {
opacity: 1;
-webkit-transform: translate(0px,0px)
}
}
@-ms-keyframes animationFrames {
0% {
opacity: 0;
-ms-transform: translate(-1500px,0px)
}
60% {
opacity: 1;
-ms-transform: translate(30px,0px)
}
80% {
-ms-transform: translate(-10px,0px)
}
100% {
opacity: 1;
-ms-transform: translate(0px,0px)
}
}
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #990000;
}
.modal-body {
min-height: 395px
}
#loadbar {
position: absolute;
width: 62px;
height: 77px;
top: 2em
}
.blockG {
position: absolute;
background-color: #FFF;
width: 10px;
height: 24px;
-moz-border-radius: 8px 8px 0 0;
-moz-transform: scale(0.4);
-moz-animation-name: fadeG;
-moz-animation-duration: .8800000000000001s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: linear;
-webkit-border-radius: 8px 8px 0 0;
-webkit-transform: scale(0.4);
-webkit-animation-name: fadeG;
-webkit-animation-duration: .8800000000000001s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: linear;
-ms-border-radius: 8px 8px 0 0;
-ms-transform: scale(0.4);
-ms-animation-name: fadeG;
-ms-animation-duration: .8800000000000001s;
-ms-animation-iteration-count: infinite;
-ms-animation-direction: linear;
-o-border-radius: 8px 8px 0 0;
-o-transform: scale(0.4);
-o-animation-name: fadeG;
-o-animation-duration: .8800000000000001s;
-o-animation-iteration-count: infinite;
-o-animation-direction: linear;
border-radius: 8px 8px 0 0;
transform: scale(0.4);
animation-name: fadeG;
animation-duration: .8800000000000001s;
animation-iteration-count: infinite;
animation-direction: linear
}
#rotateG_01 {
left: 0;
top: 28px;
-moz-animation-delay: .33s;
-moz-transform: rotate(-90deg);
-webkit-animation-delay: .33s;
-webkit-transform: rotate(-90deg);
-ms-animation-delay: .33s;
-ms-transform: rotate(-90deg);
-o-animation-delay: .33s;
-o-transform: rotate(-90deg);
animation-delay: .33s;
transform: rotate(-90deg)
}
#rotateG_02 {
left: 8px;
top: 10px;
-moz-animation-delay: .44000000000000006s;
-moz-transform: rotate(-45deg);
-webkit-animation-delay: .44000000000000006s;
-webkit-transform: rotate(-45deg);
-ms-animation-delay: .44000000000000006s;
-ms-transform: rotate(-45deg);
-o-animation-delay: .44000000000000006s;
-o-transform: rotate(-45deg);
animation-delay: .44000000000000006s;
transform: rotate(-45deg)
}
#rotateG_03 {
left: 26px;
top: 3px;
-moz-animation-delay: .55s;
-moz-transform: rotate(0deg);
-webkit-animation-delay: .55s;
-webkit-transform: rotate(0deg);
-ms-animation-delay: .55s;
-ms-transform: rotate(0deg);
-o-animation-delay: .55s;
-o-transform: rotate(0deg);
animation-delay: .55s;
transform: rotate(0deg)
}
#rotateG_04 {
right: 8px;
top: 10px;
-moz-animation-delay: .66s;
-moz-transform: rotate(45deg);
-webkit-animation-delay: .66s;
-webkit-transform: rotate(45deg);
-ms-animation-delay: .66s;
-ms-transform: rotate(45deg);
-o-animation-delay: .66s;
-o-transform: rotate(45deg);
animation-delay: .66s;
transform: rotate(45deg)
}
#rotateG_05 {
right: 0;
top: 28px;
-moz-animation-delay: .7700000000000001s;
-moz-transform: rotate(90deg);
-webkit-animation-delay: .7700000000000001s;
-webkit-transform: rotate(90deg);
-ms-animation-delay: .7700000000000001s;
-ms-transform: rotate(90deg);
-o-animation-delay: .7700000000000001s;
-o-transform: rotate(90deg);
animation-delay: .7700000000000001s;
transform: rotate(90deg)
}
#rotateG_06 {
right: 8px;
bottom: 7px;
-moz-animation-delay: .8800000000000001s;
-moz-transform: rotate(135deg);
-webkit-animation-delay: .8800000000000001s;
-webkit-transform: rotate(135deg);
-ms-animation-delay: .8800000000000001s;
-ms-transform: rotate(135deg);
-o-animation-delay: .8800000000000001s;
-o-transform: rotate(135deg);
animation-delay: .8800000000000001s;
transform: rotate(135deg)
}
#rotateG_07 {
bottom: 0;
left: 26px;
-moz-animation-delay: .99s;
-moz-transform: rotate(180deg);
-webkit-animation-delay: .99s;
-webkit-transform: rotate(180deg);
-ms-animation-delay: .99s;
-ms-transform: rotate(180deg);
-o-animation-delay: .99s;
-o-transform: rotate(180deg);
animation-delay: .99s;
transform: rotate(180deg)
}
#rotateG_08 {
left: 8px;
bottom: 7px;
-moz-animation-delay: 1.1s;
-moz-transform: rotate(-135deg);
-webkit-animation-delay: 1.1s;
-webkit-transform: rotate(-135deg);
-ms-animation-delay: 1.1s;
-ms-transform: rotate(-135deg);
-o-animation-delay: 1.1s;
-o-transform: rotate(-135deg);
animation-delay: 1.1s;
transform: rotate(-135deg)
}
@-moz-keyframes fadeG {
0% {
background-color: #000
}
100% {
background-color: #FFF
}
}
@-webkit-keyframes fadeG {
0% {
background-color: #000
}
100% {
background-color: #FFF
}
}
@-ms-keyframes fadeG {
0% {
background-color: #000
}
100% {
background-color: #FFF
}
}
@-o-keyframes fadeG {
0% {
background-color: #000
}
100% {
background-color: #FFF
}
}
@keyframes fadeG {
0% {
background-color: #000
}
100% {
background-color: #FFF
}
}
.wizard li.active span.round-tab {
background: #fff;
border: 2px solid #ddd;
}
.wizard li.active span.round-tab i {
color: #990000;
}
.btn-block {
display: block;
width: 100%;
height: 82px;
}
$(function(){
var loading = $('#loadbar').hide();
$(document)
.ajaxStart(function () {
loading.show();
}).ajaxStop(function () {
loading.hide();
});
$("label.btn").on('click',function () {
var choice = $(this).find('input:radio').val();
$('#loadbar').show();
$('#quiz').fadeOut();
setTimeout(function(){
$( "#answer" ).html( $(this).checking(choice) );
$('#quiz').show();
$('#loadbar').fadeOut();
/* something else */
}, 1500);
});
$ans = 1;
$.fn.checking = function(ck) {
if (ck != $ans)
return 'INCORRECT';
else
return 'CORRECT';
};
});
$(document).ready(function () {
//Initialize tooltips
$('.nav-tabs > li a[title]').tooltip();
//Wizard
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
var $target = $(e.target);
if ($target.parent().hasClass('disabled')) {
return false;
}
});
$(".next-step").click(function (e) {
var $active = $('.wizard .nav-tabs li.active');
$active.next().removeClass('disabled');
nextTab($active);
});
$(".prev-step").click(function (e) {
var $active = $('.wizard .nav-tabs li.active');
prevTab($active);
});
});
function nextTab(elem) {
$(elem).next().find('a[data-toggle="tab"]').click();
}
function prevTab(elem) {
$(elem).prev().find('a[data-toggle="tab"]').click();
}
</script>
