Quiz simples sem formulario

by Jader Wagner

HTML

<div class="pergunta"><span>Pergunta 1?</span>
    <div>Resposta 1</div>
    <div>Resposta 2
        <span>A resposta correta é a 2 por que este span esta dentro dela!</span>
    </div>
    <div>Resposta 3</div>
    <div>Resposta 4</div>
</div>

<div class="pergunta"><span>Pergunta 2?</span>
    <div>Resposta 1</div>
    <div>Resposta 2</div>
    <div>Resposta 3</div>
    <div>Resposta 4
        <span>A resposta correta é a 4 por que este span esta dentro dela!</span>
    </div>
</div>

<div class="pergunta"><span>Pergunta 3?</span>
    <div>Resposta 1
       <span>A resposta correta é a 1 por que este span esta dentro dela!</span>
    </div>
    <div>Resposta 2</div>
    <div>Resposta 3</div>
    <div>Resposta 4</div>
</div>

CSS

.pergunta {
    margin: 20px;
}
.pergunta > span {
    font-size: 20px;
    color: blue;
}
.pergunta div {
    cursor:pointer;
}
.pergunta div span {
    display:none;
}
.correta {
    color: green;
}
.errada {
    color: red;
}

JavaScript

$('.pergunta div').click(function () {
    if ($(this).hasClass("correta") || $(this).siblings('div').hasClass("correta")) return false;
    if ($(this).find('span').length) {
        $(this).addClass('correta').children('span').prepend(' Correto!!! ').show();
    } else {
        $(this).append(' Resposta errada...').addClass('errada').siblings('div').has('span').addClass('correta').children('span').show();
    }
});