Question with multiple school in Jquery [closed]

0

I wanted to do a questionnaire-type scheme. The closest example I found was this: link

But I do not want a quiz and not everything in JS. I want something like this:

Question R1 R2 R3 R4

In the example, R3 is correct. If the user chooses another than R3, a message is displayed saying that it is wrong and explaining which one is right and why.

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

    
asked by anonymous 22.08.2014 / 22:39

2 answers

0

As you ask in the question and comments below, something in plain HTML, which simply shows the correct answer, and the reason.

I developed a script that is based only on the HTML structure of the questions, without setting 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 in JSFiddle

    
22.08.2014 / 23:43
1

JSFIDDLE EXAMPLE

Pretty simple:

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 responses in variables you can rescue this via Ajax in the act of saving (to avoid cheating).

    
22.08.2014 / 23:01