"Quiz with Hint with codeuix"
Bootstrap 3.3.0 Snippet by rajesh123456

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 ---------->
<div class="container">
<div class="row"><br><br>
<div class="col-sm-8 col-sm-offset-2">
<div class="loader">
<div class="col-xs-3 col-xs-offset-5">
<div id="loadbar" style="display: none;">
<img src="http://schoolsearch.co.ke/systems/img/loader.gif_large.gif" alt="Loading" class="center-block loanParamsLoader" style="">
</div>
</div>
<div id="quiz">
<div class="question">
<h3><span class="label label-warning" id="qid">1</span>
<span id="question"> </span>
</h3>
</div>
<ul>
<li>
<input type="radio" class="inputoption" id="f-option" name="selector" value="1">
<label for="f-option" class="element-animation"></label>
<div class="check"></div>
</li>
<li>
<input type="radio" class="inputoption" id="s-option" name="selector" value="2">
<label for="s-option" class="element-animation"></label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" class="inputoption" id="t-option" name="selector" value="3">
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
body, html{
height: 100%;
background: #222222;
font-family: 'Lato', sans-serif;
}
#chartdiv {
width : 100%;
min-height : 405px;
height: auto;
}
.center-block{
width: 100%;
}
h2 {
color: #AAAAAA;
font-weight: normal;
}
.bg-for-submit-name
{
background: url('https://lh4.ggpht.com/GLT1kYMvi4oiguL9FOc1eM5q7sW0AvVJNWyBZ26iMq-BSm3Kpi9CPDR2UGoVlYrVwA=h900') fixed;
background-size: cover;
padding: 0;
margin: 0;
}
.margin-top{
margin-top: 270px;
}
.wrap
{
width: 100%;
height: 100%;
min-height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 99;
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
var q = [
{'Q':'How do you write "Hello World" in an alert box?', 'A':2,'C':['msg("Hello World");','alert("Hello World");','alertBox("Hello World");'],'H':"Hint 1"},
{'Q':'How do you create a function in JavaScript?', 'A':3,'C':['function:myFunction()','function = myFunction()','function myFunction()'],'H':"Hint 1"},
{'Q':'How to write an IF statement in JavaScript?', 'A':1,'C':['if (i == 5)','if i = 5 then','if i == 5 then'],'H':"Hint 1"},
{'Q':'How does a FOR loop start?', 'A':2,'C':['for (i = 0; i <= 5)','for (i = 0; i <= 5; i++)','for i = 1 to 5'],'H':"Hint 1"},
{'Q':'What is the correct way to write a JavaScript array?', 'A':3,'C':['var colors = "red", "green", "blue"','var colors = (1:"red", 2:"green", 3:"blue")','var colors = ["red", "green", "blue"]'],'H':"Hint 1"}
];
$(function(){
var loading = $('#loadbar').hide();
$(document)
.ajaxStart(function () {
loading.show();
}).ajaxStop(function () {
loading.hide();
});
var choicecount = 1;
var allowchoice = true;
var questionNo = 0;
$('#question').html(q[questionNo].Q);
$($('#f-option').parent().find('label')).html(q[questionNo].C[0]);
$($('#s-option').parent().find('label')).html(q[questionNo].C[1]);
$($('#t-option').parent().find('label')).html(q[questionNo].C[2]);
$(document.body).on('click',"#show-hint-button",function (e) {
$('.show-hint').removeClass('hidden');
});
$(document.body).on('click',"label.element-animation",function (e) {
var choice = $(this).parent().find('input:radio').val();
console.log(choice);
var anscheck = $(this).checking(questionNo, choice);//$( "#answer" ).html( );
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: