Question with multiple school in Jquery

Question

I wanted to do a questionnaire-like scheme. The closest example I could find was this: http://quickenloans.github.io/SlickQuiz/

But I don’t want a quiz and not all of it in JS. I want something like:

Question R1 R2 R3 R4

In the example R3 is correct. If the user chooses another one that is not R3, a message is shown that is wrong and explaining which is the right and the pq.

The idea is not to have a score or anything, just a kind of learning system.

Answer 1

EXAMPLE IN JSFIDDLE

In a very simple way:

HTML

<form>
    <label><input type="radio" name="q1" value="1" />Resposta 1</label>
    <label><input type="radio" name="q1" value="2" />Resposta 2</label>
    <label><input type="radio" name="q1" value="3" />Resposta 3</label>
    <label><input type="radio" name="q1" value="4" />Resposta 4</label>
</form>

<div id="message"></div>

Javascript

var respostaQ1 = 3; // Resposta correta

$("input[name=q1]").on("click", function() {
    var value = $(this).val();
    var message = "";

    respostaQ1 == value ? message = "Certo!" : message = "Errado";

    $("#message").html(message);
});

From this example, you can evolve to meet your needs. Instead of storing the answers in variables you can rescue this via Ajax in the act of saving (to avoid cheating).

Answer 2

As you ask in the question and comments below it, something in pure HTML that simply shows the correct answer, and the reason why.

I developed a script that is based only on the HTML structure of the questions, without having to define parameters, etc...

See below:

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>

jquery:

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

See working on Jsfiddle