Unable to show progress bar


Tags: javascript,jquery,html,css,jquery-ui

Problem :

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:

  1. The heading "Quiz" isn't responsive.How do I fix that?

  2. The text options aren't perfectly aligned with the radio buttons?

  3. How can I fix the position of the webpage, when moving from one question to the other?



Solution :

Unable to show progress bar

The height rule on .progress-bar appears to be the culprit.

  1. The heading "Quiz" isn't responsive.How do I fix that?

You can use a viewport unit so the font changes in response to the viewport. 16.7vw is equivalent (near enough) to the value you're using (15em).

See this related question for more information.

Browsers that support the viewport units.

  1. The text options aren't perfectly aligned with the radio buttons?

Not sure what you mean by this. You have the text centered - do you not want it to be centered?

  1. How can I fix the position of the webpage, when moving from one question to the other?

By this I'm assuming you don't want the page to jump to the top whenever you click next? If so, on the click event for the "next" button, expose the event object and prevent the default action via event.preventDefault();.

Updated CodePen


    CSS Howto..

    How to prevent inherit for H1?

    How do you disable the set width of parent element for child element?

    How to have full page that is not a background img or fixed positioned?

    How to set minimum height for a div?

    How to prevent artifacts from appearing in Webkit when scrolling the page after stopping CSS animations

    How can i center the list items inside my unordered list?

    How to align text under image using HTML/CSS?

    CSS: How to change the color of the bottom right square of the scrollbar in webkit?

    disabling stylesheets to increase the speed of showing/hiding divs

    How can I prevent IE from displaying a website? [closed]

    when hovering on iframe, how do I trigger a class on element outside of iframe?

    How to hide the third nested list in this css dropdown nested lists?

    How to align in “rubber” layout with narrow screens?

    Hiding and showing
      and
    • on click using Javascript

    How to change inline css using jquery in joomla

    CSS- how to prevent the original title info to be displayed

    How to apply CSS styles only to the text-content of a block-level element?

    How to force CSS3 slideshow animation to display in correct order?

    How to reset default styling of input[type=“text”]:focus in Chrome and Safari?

    How to workaround: IE6 does not support CSS “attribute” selectors

    how to display products side by side

    Primefaces: how to change the default icon on the button of the calendar field?

    How to have several equal sized div blocks take 100% of a parent container

    How to make text input line up with button in IE7?

    How to override default CSS in cakePHP 1.3?

    How can I stop an image element from taking 100% width?

    Table cells without borders having white lines - how do I disable them?

    How do I vertically align multiple text next to an image with CSS?

    jQuery-Based Dropdown Shows Gap Outside of Firefox

    How to know which CSS style is applied and from where (javascript)?