I've created this simple javascript quiz application. I coded a progress bar too which works perfectly well on my laptop offline, but when I try uploading the files on Codepen.io , the progress bar doesn't show up.
Can someone please explain what am I doing wrong.
Here is the code:
var allQuestions = [
{
question: "Before Mt. Everest was discovered, whaich mountain was considered to be the highest mountain in the world?",
choices: ["Mt. Kilimanjaro", "Kanchenjunga", "Mount Everest"],
correctAnswer:1
},
{
question: "Does England have a 4th of July?",
choices: ["Yes","No","I don't know"],
correctAnswer:0
},
{
question: "What is Rupert the bear's middle name?",
choices: ["Bear","He doesn't have one!", "The","Rupert"],
correctAnswer:3
},
{
question: " What can you never eat for breakfast? ",
choices: ["Dinner","Something sugary","Lunch","Supper"],
correctAnswer:0
},
{
question: "If there are three apples and you took two away, how many do you have?",
choices: ["One","Two","None"],
correctAnswer:1
},
{
question: "Spell 'Silk' out loud, 3 times in a row. What do cows drink?",
choices: ["Milk","Water","Juice","Cows can't drink"],
correctAnswer:1
},
{
question: "Which is heavier, 100 pounds of rocks or 100 pounds of gold? ",
choices: ["100 pounds of rocks","100 pounds of rocks","They weigh the same"],
correctAnswer:2
},
{
question: "Can you spell 80 in two letters?",
choices: ["AI-TY","It's not possible","EIGH-TY","A-T"],
correctAnswer:3
},
{
question: "What question must always be answered ''Yes''?",
choices: ["What does Y-E-S spell?","Will everyone die someday?","Does everyone have a biological mother?","Are you a human?"],
correctAnswer:0
},
{
question: "How many sides does a circle have?",
choices: ["The back","None. It's a circle","Two","Four"],
correctAnswer:2
},
{
question: "What has a tail but no body?",
choices: ["A human","A coin","A cloud"],
correctAnswer:1
},
{
question: "What word in the English language is always spelled incorrectly?",
choices: ["It's possible to spell anything right as long as you learn it","Shakespeare","Onomatopoeia","Incorrectly"],
correctAnswer:3
},
{
question: "When do you stop at green and go at red?",
choices: ["Watermelon!","Traffic light!","Garden"],
correctAnswer:0
},
{
question: "What rotates but still remains in the same place?",
choices: ["Bottle (spin the bottle game)","Clock","Stairs"],
correctAnswer:2
},
{
question: "How can you lift an elephant with one hand?",
choices: ["Truck","Use both hands!","Use a lever","There is no such thing"],
correctAnswer:1
}
];
var currentquestion=0;
var correctAnswers=0;
function setupOptions(){
$('#question').html(parseInt(currentquestion)+1+". "+allQuestions[currentquestion].question);
var options = allQuestions[currentquestion].choices;
var formHtml='';
for (var i = 0; i < options.length; i++){
formHtml += '<div><input type="radio" name="option" value="'+i+'" id="option'+i+'"><label for="option'+i+'">'
+allQuestions[currentquestion].choices[i]+'</label></div><br/>';
}
$('#form').html(formHtml);
$("#option0").prop('checked', true);
};
function checkAns(){
if($("input[name=option]:checked").val()==allQuestions[currentquestion].correctAnswer){
correctAnswers++;
};
};
$(document).ready(function(){
$(".jumbotron").hide();
$('#start').click(function() {
$(".jumbotron").fadeIn();
$(this).hide();
});
$(function() {
$( "#progressbar" ).progressbar({
max: allQuestions.length-1,
value: 0
});
});
setupOptions();
$("#next").click(function(){
checkAns();
currentquestion++;
$(function() {
$( "#progressbar" ).progressbar({
value: currentquestion
});
});
if(currentquestion<allQuestions.length){
setupOptions();
if(currentquestion==allQuestions.length-1){
$('#next').html("Submit");
$('#next').click(function(){
$(".jumbotron").hide();
$("#result").html("You correctly answered " + correctAnswers + " out of " + currentquestion + " questions! ").hide();
$("#result").fadeIn(1500);
});
}
};
});
});html, body, div, span, object, iframe, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
h1 {
font-size: 15em;
font-family: 'Chonburi', cursive;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
.ui-widget-header {
background-image: none !important;
background-color: #FF7860 !important;
}
label{
display: inline-block;
}
h3, #next {
text-align: center;
display: inline-block;
border-radius: 20%;
}
#result {
font-family: 'Press Start 2P', cursive !important;
font-weight: bold;
font-size: 1.5em;
color: #036;
}
input[name="option"] {
float:left;
}
#form div{
margin:auto;
max-width: 205px;
}
#progressbar {
margin: auto;
margin-top: 20px;
float: none;
width: 50%;
}
#container {
text-align: center;
}
span {
margin:5em;
padding:3em;
}
/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}
.button {
display: inline-block;
padding: 1em;
background-color: #79BD9A;
text-decoration: none !important;
color: white !important;
}
body{
text-align: center;
}
.progress-bar {
float: left;
width: 0;
height: 100%;
font-size: 12px;
line-height: 20px;
color: #fff;
text-align: center;
background-color: #337ab7;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
-webkit-transition: width .6s ease;
-o-transition: width .6s ease;
transition: width .6s ease;
}<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width = device-width, initial-scale = 1">
<link href='https://fonts.googleapis.com/css?family=Chonburi' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Press+Start+2P' rel='stylesheet' type='text/css'>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<body>
<h1>Quiz</h1>
<br/>
<br/>
<a href="#" id="start" class="btn btn-primary btn-lg">Let's Begin</a>
<br/>
<div class="well jumbotron">
<h3 id="question"></h3>
<br/><br/>
<form id="form">
<div><input type="radio" name="option" value="0" id="option0" checked><label for='option0'></label><br/></div>
<div><input type="radio" name="option" value="1" id="option1"><label for='option1'></label><br/></div>
<div><input type="radio" name="option" value="2" id="option2"><label for='option2'></label><br/></div>
</form>
<br/>
<a href="#" id="next" class="button">Next</a><br/>
<div id="progressbar" class="progress-bar progress-bar-striped"></div>
</div>
<div id="result"></div>
</body>I have some other issues as well which are not specific to codepen.io:
The heading "Quiz" isn't responsive.How do I fix that?
The text options aren't perfectly aligned with the
radiobuttons?How can I fix the position of the webpage, when moving from one question to the other?
