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.
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
Pretty simple:
<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>
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).