create online quiz and alert

my English is very bad so I can not understand so much document when I searching.I am so sorry my terrible English.I am designing online quiz page. I want do alert java script. I am beginner on Java Script.

This is what I want to happen:

1. When the wrong option is clicked, it should show an alert.

2. it should product true answer

now I try to do first thing.. But it does not work. Could you help me how can I do error when click wrong section.

here is my code:

http://jsfiddle.net/UzYk2/

I update my question

    <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 stye sheet

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