javascript - 无法显示进度条

Question

我已经创建了这个简单的 javascript 测验应用程序。我也编写了一个进度条，它在我的离线笔记本电脑上运行得非常好，但是当我尝试在 Codepen.io 上上传文件时, 进度条不显示。

谁能解释一下我做错了什么。

代码如下:

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>

我还有一些其他问题，这些问题不是 codepen.io 特有的:

1. 标题“测验”没有响应。我该如何解决？

2. 文本选项与 radio 按钮没有完全对齐？

3. 从一个问题转到另一个问题时，如何固定网页的位置？

Answer 1

Unable to show progress bar

.progress-bar 上的 height 规则似乎是罪魁祸首。

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

您可以使用视口(viewport)单元，这样字体会随着视口(viewport)的变化而变化。 16.7vw 等于(足够接近)您使用的值 (15em)。

参见 this有关更多信息的相关问题。

Browsers支持视口(viewport)单位。

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?

据此，我假设您不希望页面在您单击下一步时跳到顶部？如果是这样，在“下一步”按钮 的click 事件上，公开事件对象并通过 event.preventDefault(); 阻止默认操作>.

Updated CodePen