Quiz con jQuery

ceaped · #1 (**permalink**) 26/07/2013, 12:02

Buenas tardes
Estoy utilizando este Quiz:

http://nazmulweb.com/Quiz

HTML:

Código HTML:

Ver original<!DOCTYPE html>
<html lang="en">
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<title>Titulo...</title>
 
<link href="css/jquiz.css" rel="stylesheet" />  
 
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquiz.js" ></script>
 
 <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->   
 
</head>
 
<body>
 
<div id="container">
        
<div class="row">
 
        
<ol id="jquiz">
 
        <li>
        <p>Pregunta 1:</p>
        <ul>
        
        <li class="correct"><h5>Opción 1</h5></li>
        <li><h5>Opción 2</h5></li>
        <li><h5>Opción 3</h5></li>
        <li><h5>Opción 4</h5></li>
        </ul>
        
<div class="explication oculto"><p>Explicación 1</p></div></li>
<div class="explication oculto"><p>Explicación 2</p></div></li>
<div class="explication oculto"><p>Explicación 3</p></div></li>
<div class="explication oculto"><p>Explicación 4</p></div></li>
 
</ol>
</div>
</div>
 
</body>
</html>

Código Javascript:

Ver original/* 
THIS CODE IS CREATED BY THE FOLKS AT WEBSITEDESIGNERNC.COM 
GO VISIT FOR ALL YOUR PROGRAMMING AND WEB DESIGN NEEDS!
*/
 
$(document).ready(function() {
    var count = 0;  
    var howmanyquestions = $("#jquiz > li").length;
    
    //the function for a clicked item
    $("#jquiz li ul li").click(function(){
    
        if (!($(this).parent("ul").hasClass("answered"))) {
        
            // removes unanswered class and adds answered class so they cannot change answer
            $(this).parent("ul").addClass("answered");
            
            // runs if they clicked the incorrect answer
            if (!($(this).hasClass("correct"))) {
                // puts strike-through wrong answer and makes their answer red for incorrect
                $(this).addClass("wronganswer");
                $(this).siblings(".correct").addClass("realanswer");
                // animate explanation & add styling depending on answer
                $(this).parent().parent().children("div").prepend('<p>INCORRECTO</p>');
                $(this).parent().parent().children("div").addClass("wrongbox");
                $(this).parent().parent().children("div").fadeTo(500, 1).removeClass("hidden");
            }
            
            // runs if they clicked the correct answer
            if ($(this).hasClass("correct")) {
                //adds one to quiz total correct tally
                count++;
                // makes correct answer green
                $(this).addClass("correctanswer");
                // animate explanation & add styling depending on answer
                $(this).parent().parent().children("div").prepend('<p>CORRECTO</p>');
                $(this).parent().parent().children("div").addClass("rightbox");
                $(this).parent().parent().children("div").fadeTo(750, 1).removeClass("hidden");
            }
            
            if ($('ul.answered').length == howmanyquestions) {
                $('#jquizremarks').fadeIn('slow');
                $('#jquiztotal').html('Tienes un '+count+' out of '+howmanyquestions+' en el quiz.');
            }
        }
    });
});

Yo que necesito que por cada opción me de una explicación distinta.

Opción 1...Explicación 1
Opción 2...Explicación 2
Opción 3...Explicación 3
Opción 4...Explicación 4

Gracias por su ayuda

ceaped · #2 (**permalink**) 29/07/2013, 18:50

Hola a todos
que pena por la insistencia pero no logro solucionar mi problema.
alguien me puede ayudar.

Gracias