javascript - 创建在线测验和警报

我的英语很差所以我在搜索时看不懂那么多文档。我很抱歉我糟糕的英语。我正在设计在线测验页面。我想做警报 java 脚本。我是 Java Script 的初学者。

这就是我想要发生的事情:

当点击错误的选项时，它应该显示一个警告。
它应该产生真实的答案

现在我尝试做第一件事.. 但它不起作用。你能帮我点一下错误的部分吗？

这是我的代码:

我更新了我的问题

    <html>
<head>  
//I added all boostrap and jquery.js
    <link href="css/boostrap.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 src=js/style.js>
 $("#alerts").on('click',function() {
        $(document).trigger("add-alerts", [
        {
            'message': "Wrong",
            'priority': 'warning'
        }]);
    });
</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" id="alerts" >Dwight Schrute</li>
<li class="possible_answer span12 answer_1">Newt Gingrich</li>
</ul>
</li>
//added this line
<div data-alerts="alerts"  data-ids="myid" 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">Must be Schrute</li>
<li class="possible_answer span12 answer_1">Totally Newt</li>
</ul>
</li>

<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">Lil' Schrute</li>
<li class="possible_answer span12 answer_1">Lil' Newt</li>
</ul>
</li>

<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">Gingrich idea</li>
<li class="possible_answer span12 answer_1">Schrute idea</li>
</ul>
</li>

<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">Dwight gag</li>
<li class="possible_answer span12 answer_1">Newt gaffe</li>
</ul>
</li>

<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">Definitely Schrute</li>
</ul>
</li>

<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">Dwight Schrute</li>
<li class="possible_answer span12 answer_1">Newt Gingrich</li>
</ul>
</li>

<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">Must be Newt</li>
<li class="possible_answer span12 answer_1">Has to be Schrute</li>
</ul>
</li>

<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">Schrute</li>
<li class="possible_answer span12 answer_1">Newt</li>
</ul>
</li>

<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 src="../ckeditor/rainn-kid.png">
</li>
<li class="possible_answer span12 answer_1">
Kid Newt
<br>
<img src="../ckeditor/newt-kid.png">
</li>
</ul>
</li>

</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>

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;
    }
}

最佳答案

要使 Bootstrap 警报正常工作，您需要添加该行。

<div data-alerts="alerts"  data-ids="myid" data-fade="3000"></div>

可以在li结束后添加

<li class="possible_answer span12 answer_0" id="alerts">Dwight Schrute</li>
<li class="possible_answer span12 answer_1">Newt Gingrich</li>    
</ul>
</li>

//line added here
<div data-alerts="alerts"  data-ids="myid" data-fade="3000"></div>
<li class="question_container row-fluid question_1">

演示 http://jsfiddle.net/84FRe/1/

编辑删除 id 部分并 add alerts as class ，将 data-id="myid1" 添加到 li

//added alerts to class & data-id
<li class="possible_answer span12 answer_0 alerts" data-id="myid1">Dwight Schrute</li>
<li class="possible_answer span12 answer_1">Newt Gingrich</li>    
</ul>
</li>

//This alert div data-ids should be same as the data-id of li part
<div data-alerts="alerts"  data-ids="myid1" data-fade="3000"></div>

其他li同样如此

<li class="possible_answer span12 answer_0 alerts"  data-id="myid2">Must be Schrute</li>
<li class="possible_answer span12 answer_1">Totally Newt</li>
</ul>
</li>

//This alert div data-ids should be same as the data-id of li part
<div data-alerts="alerts"  data-ids="myid2" data-fade="3000"></div>

等等。这样所有的问题都有自己的警告框。现在更改 jquery

Jquery

$(".alerts").on('click',function() {

    var did=$(this).attr('data-id'); //get clicked li data-id
        // call its alert box
        $(document).trigger("set-alert-id-"+did, [
        {
            'message': "Wrong",
            'priority': 'warning'
        }]);
    });

演示 http://jsfiddle.net/5Q7m4/1/

关于javascript - 创建在线测验和警报，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20854109/

javascript - 创建在线测验和警报

上一篇：javascript - Access-Control-Allow-Origin、mailHandler.php 和 forms.js

下一篇：html - Chrome css3动画显示bug