大家好，我很抱歉我的英语不好。我搜索了这么多文件，但由于我的英语，我不理解它们。我设计了测验页面，但我无法显示页面的结果，并且出现问题
我想：
我尝试了一些东西，但是我犯了很多可怕的错误。你能帮我解决很多问题吗？
我的代码HTML
<html>
<head>
<link href="css/boostrap.css" rel="stylesheet" media="screen">
<link href="css/deneme.css" rel="stylesheet" media="screen">
<link href="css/style.css" rel="stylesheet" media="screen">
<script type="text/JavaScript" src="scripts/jquery.alerts.js"></script>
<script type="text/JavaScript" src="scripts/jquery-1.8.2.js"></script>
<script type="text/JavaScript" src="scripts/jquery.js"></script>
<script type="text/JavaScript" >
// if they click false section it gives error message
$(".alerts").on('click', function() {
var did = $(this).attr('data-id');
$(document).trigger("set-alert-id-" + did, [
{
'message': "Wrong",
'priority': 'warning'
}]);
});
// if they click true section it gives success message
$(".alerts-success").on('click', function() {
var did = $(this).attr('data-id');
$(document).trigger("set-alert-id-" + did, [
{
'message': "Success",
'priority': 'warning'
}]);
});
// I try something to show how many question is true selected but I can not do this
function askQuestion(question) {
var answer = prompt(question[0], '');
if (answer == question[1]) {
alert('Correct!');
score++;
} else {
alert('Sorry. The correct answer is ' + question[1]);
}
}
var message = 'You got ' + score;
message += ' out of ' + questions.length;
message += ' questions correct.';
document.write('<p>' + message + '</p>');
</script>
</head>
<body>
<div id="quiz_container">
<ul class="quiz_container" style="padding: 0px;">
<li class="question_container row-fluid question_0">
<div class="question span12 show" style="overflow: hidden; position: relative;">
<h1 class="title">Who said it: Newt or Schrute?</h1>
<p class="text">"Men are basically little piglets...Males are biologically driven to go out and hunt giraffes."</p>
</div>
<ul class="span12 possible_answers possible_answers_0">
<li class="possible_answer span12 answer_0 alerts" data-id="myid1">Dwight Schrute</li>
<li class="possible_answer span12 answer_1" data-id="myid11" >Newt Gingrich</li>
</ul>
</li>
<div data-alerts="alerts" data-ids="myid1" data-fade="3000"></div>
<div data-alerts="alerts" data-ids="myid11" data-fade="3000"></div>
<li class="question_container row-fluid question_1">
<div class="question span12 show" style="overflow: hidden; position: relative;">
<h1 class="title">Who was it?</h1>
<p class="text">He said: "Can we steer away from 'gay people'? I’m sorry, it’s an orientation, not a race. Plus, a lot of other races are intolerant of gays."</p>
</div>
<ul class="span12 possible_answers possible_answers_1">
<li class="possible_answer span12 answer_0 alerts" data-id="myid2">Must be Schrute</li>
<li class="possible_answer span12 answer_1" data-id="myid2" >Totally Newt</li>
</ul>
</li>
<div data-alerts="alerts" data-ids="myid2" data-fade="3000"></div>
<div data-alerts="alerts-success" data-ids="myid22" data-fade="3000"></div>
<li class="question_container row-fluid question_2">
<div class="question span12 show" style="overflow: hidden; position: relative;">
<h1 class="title">Who said it?</h1>
<p class="text">When he was 11-years-old, he took on City Hall in an attempt to build a zoo from scratch in South Central Pennsylvania.</p>
</div>
<ul class="span12 possible_answers possible_answers_2">
<li class="possible_answer span12 answer_0" data-ids="myid3" >Lil' Schrute</li>
<li class="possible_answer span12 answer_1" data-ids="myid33">Lil' Newt</li>
</ul>
</li>
<div data-alerts="alerts" data-ids="myid3" data-fade="3000"></div>
<div data-alerts="alerts-success" data-ids="myid33" data-fade="3000"></div>
<li class="question_container row-fluid question_3">
<div class="question span12 show" style="overflow: hidden; position: relative;">
<h1 class="title">Who was it?</h1>
<p class="text">This man pitched a radical plan to capture Osama bin Laden using a portable prison that could be operated beyond the pale of traditional covert ops.</p>
</div>
<ul class="span12 possible_answers possible_answers_3">
<li class="possible_answer span12 answer_0" data-ids="myid4" >Gingrich idea</li>
<li class="possible_answer span12 answer_1" data-ids="myid44">Schrute idea</li>
</ul>
</li>
<div data-alerts="alerts" data-ids="myid4" data-fade="3000"></div>
<div data-alerts="alerts-success" data-ids="myid44" data-fade="3000"></div>
<li class="question_container row-fluid question_4">
<div class="question span12 show" style="overflow: hidden; position: relative;">
<h1 class="title">Who said it?</h1>
<p class="text">Publicly referred to pop star Justin Bieber as "Justice Beaver."</p>
</div>
<ul class="span12 possible_answers possible_answers_4">
<li class="possible_answer span12 answer_0" data-ids="myid55" >Dwight gag</li>
<li class="possible_answer span12 answer_1" data-ids="myid5" >Newt gaffe</li>
</ul>
</li>
<div data-alerts="alerts" data-ids="myid5" data-fade="3000"></div>
<div data-alerts="alerts-success" data-ids="myid55" data-fade="3000"></div>
<li class="question_container row-fluid question_5">
<div class="question span12 show" style="overflow: hidden; position: relative;">
<h1 class="title">Who was it?</h1>
<p class="text">When debating the eating habits of T-Rex's, this man explained, "I believe [the T-Rex] was a predator because I saw 'Jurassic Park' and he ate a lawyer and it wasn't a dead lawyer."</p>
</div>
<ul class="span12 possible_answers possible_answers_5">
<li class="possible_answer span12 answer_0">Totally Newt</li>
<li class="possible_answer span12 answer_1" data-ids="myid6" >Definitely Schrute</li>
</ul>
</li>
<div data-alerts="alerts" data-ids="myid6" data-fade="3000"></div>
<li class="question_container row-fluid question_6">
<div class="question span12 show" style="overflow: hidden; position: relative;">
<h1 class="title">Who was it?</h1>
<p class="text">When thrown a softball question about past "romantic" activities, he mumbled something about "chicken fights."</p>
</div>
<ul class="span12 possible_answers possible_answers_6">
<li class="possible_answer span12 answer_0" data-ids="myid77" >Dwight Schrute</li>
<li class="possible_answer span12 answer_1" data-ids="myid7" >Newt Gingrich</li>
</ul>
</li>
<div data-alerts="alerts" data-ids="myid7" data-fade="3000"></div>
<div data-alerts="alerts-success" data-ids="myid77" data-fade="3000"></div>
<li class="question_container row-fluid question_7">
<div class="question span12 show" style="overflow: hidden; position: relative;">
<h1 class="title">Who was it?</h1>
<p class="text">He fantasized about ditching the drudgery of the workplace to spend a year in the Amazon, staring at sloths.</p>
</div>
<ul class="span12 possible_answers possible_answers_7">
<li class="possible_answer span12 answer_0" data-ids="myid88">Must be Newt</li>
<li class="possible_answer span12 answer_1" data-ids="myid8" >Has to be Schrute</li>
</ul>
</li>
<div data-alerts="alerts" data-ids="myid8" data-fade="3000"></div>
<div data-alerts="alerts-success" data-ids="myid88" data-fade="3000"></div>
<li class="question_container row-fluid question_8">
<div class="question span12 show" style="overflow: hidden; position: relative;">
<h1 class="title">Who was it?</h1>
<p class="text">As recently as 2009, he called the Swedish system of governement and healthcare "communist" and repressive.</p>
</div>
<ul class="span12 possible_answers possible_answers_8">
<li class="possible_answer span12 answer_0" data-ids="myid99">Schrute</li>
<li class="possible_answer span12 answer_1" data-ids="myid9" >Newt</li>
</ul>
</li>
<div data-alerts="alerts" data-ids="myid9" data-fade="3000"></div>
<div data-alerts="alerts-success" data-ids="myid99" data-fade="3000"></div>
<li class="question_container row-fluid question_9">
<div class="question span12 show" style="overflow: hidden; position: relative;">
<h1 class="title">Who was it?</h1>
<p class="text">His favorite childhood game was curling up into a ball and playing dead on the sidewalk.</p>
</div>
<ul class="span12 possible_answers possible_answers_9">
<li class="possible_answer span12 answer_0">
Kid Schrute
<br>
<img data-ids="myid100" src="../ckeditor/rainn-kid.png">
</li>
<li class="possible_answer span12 answer_1">
Kid Newt
<br>
<img data-ids="myid10" src="../ckeditor/newt-kid.png">
</li>
</ul>
</li>
<div data-alerts="alerts" data-ids="myid10" data-fade="3000"></div>
<div data-alerts="alerts-success" data-ids="myid100" data-fade="3000"></div>
</ul>
<p class="how_you_did">
<span>You got </span>
<span class="correct_answers">0</span>
<span> correct answers out of 10 questions</span>
</p>
<p class="small">on your first attempt. No fair changing your answers after you found out you were wrong</p>
</div>
</body>
</html>
CSS代码
.quiz_container {
list-style-type: none !important;
font-weight: bold;
color: #21252E;
width: 98%;
}
/*fluid grid layout using twitter bootstrap */
.row-fluid {
margin-left: 0 !important;
}
.span12 {
padding: .75em;
margin-top: .75em;
margin-left: 0 !important;
}
.span12.question {
padding: 0;
}
/*additional custom styling*/
.quiz_container .question_container {
margin: 1em 0em 6em;
}
.quiz_container .question_container h1, .question p, .revealed_answer p {
line-height: 1.5em;
}
.quiz_container .question_container h1 {
font-size: 1.5em;
font-weight: bold;
margin: 0em 0em 1em 0em;
}
.quiz_container .question p {
font-size: 1.5em;
max-height: 8em;
}
.quiz_container .possible_answers.span12 {
padding: 0;
margin: 0;
}
.quiz_container .possible_answer {
background: rgba(254, 231, 88, .2);
margin-left: 0 !important;
border-radius: 2px;
list-style-type: none;
}
.quiz_container .possible_answer:hover {
background: rgba(254, 231, 88, 1);
cursor: pointer;
color: #000;
}
.quiz_container li {
list-style-type: none !important;
}
/*more styling for answers*/
.quiz_container .revealed_answer p {
font-size: 1.2em;
line-height: 1.5em;
padding: 0em 0 0 0;
margin: 0;
min-height: 3em;
font-weight: normal;
}
.quiz_container .revealed_answer a {
color: #E64522;
border-bottom: 0 !important;
}
.quiz_container .revealed_answer a:hover {
opacity: .75;
text-decoration: none;
}
.quiz_container .correct_answer {
background: #62DA97;
opacity: .5;
cursor: pointer;
}
.quiz_container .wrong_answer {
background: #FF8362;
opacity: .5;
cursor: pointer;
}
.quiz_container .selected {
opacity: 1;
color: black;
}
.quiz_container .selected:hover, .correct_answer:hover, .wrong_answer:hover {
opacity: 1;
}
.quiz_container .hide {display: none;}
.quiz_container .show {display: block;}
.quiz_container .revealed_answer {
padding: 0;
}
#quiz_container .how_you_did {
text-align: center;
padding: 1em;
background-color: rgb(254, 231, 88);
font-weight: bold;
font-size: 1.25em;
-webkit-box-shadow: 0px 7px 5px rgba(50, 50, 50, 0.65);
-moz-box-shadow: 0px 7px 5px rgba(50, 50, 50, 0.65);
box-shadow: 0px 7px 5px rgba(50, 50, 50, 0.65);
}
/*multimedia styling*/
.quiz_container img, .quiz_container .youtube {
margin-bottom: 1em;
min-height: 200px;
max-height: 200px;
}
.quiz_container .possible_answer img {
max-height: 18em;
}
.quiz_container .question img, .revealed_answer img, .selected img, .correct_answer img, .wrong_answer img {
max-height: 18em;
display: block;
}
.videoembed {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.videoembed iframe, .videoembed object, .videoembed embed {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
/* media queries */
@media (max-width: 480px) {
.quiz_container li {
font-size: 1em !important;
}
.quiz_container .question_container h1 {
font-family: verdana, sans-serif;
font-size: 1.25em;
}
.quiz_container .question img, .revealed_answer img {
display: none;
}
.quiz_container .question_container {
margin: 1em 0em 3.5em;
}
}
答案 0 :(得分：1)
我删除了你的css和bootstrap，所以添加你自己的CSS使它看起来很漂亮
来解决方案
每个问题都包含在“LI - .single_question”<li class="single_question">
.single_question包含正确的答案作为属性 -
<li class="single_question" data-correct-answer="OPTION VALUE"></li>
data-question-id是附加属性（我没有使用它，但您可能稍后需要它）
将您的选项放在<ul class="options"></ul>
不要忘记添加li值 - <li value="OPTION VALUE"> SOME OPTION TEXT </li>
个人结果会自动写入<div class="result"></div>。每个问题都应该存在
当您选择一个选项score_calculator()时，会调用该函数并计算得分
问我是否不理解代码或者是否想要扩展功能。我写了基本的..