First, I have to say that your HTML did not make much sense and seems to be poorly planned. You have a list that is not listed; you have 5 answer options for each question, but in fact you only have 2, because what is considered will be the value
of the element input[type=radio]
. That is, the text "associated" with input
will make no difference to the semantics. When you want to associate a text to the field, you should use the label
.
It should be something like this:
<div id="pergunta-1">
<h1>Enunciado da pergunta</h1>
<ul>
<li>
<input id="opcao-1" type="radio" name="respostas-1" value="1" data-correta="N">
<label for="opcao-1">Opção 1 errada</label>
</li>
<li>
<input id="opcao-2" type="radio" name="respostas-1" value="2" data-correta="N">
<label for="opcao-2">Opção 2 errada</label>
</li>
<li>
<input id="opcao-3" type="radio" name="respostas-1" value="3" data-correta="S">
<label for="opcao-3">Opção 3 errada</label>
</li>
<li>
<input id="opcao-4" type="radio" name="respostas-1" value="4" data-correta="N">
<label for="opcao-4">Opção 4 errada</label>
</li>
<li>
<input id="opcao-5" type="radio" name="respostas-1" value="5" data-correta="N">
<label for="opcao-5">Opção 5 errada</label>
</li>
</ul>
</div>
See that the value
of the options is a value that identifies that option. In this example I used values from 1 to 5 representing the option ids, but it could be any value that identifies that option in that question. Control of which option is correct has been passed to the attribute data-correta
.
So, with Javascript, it would be:
$("input[type=radio]").on("change", function() {
if (this.dataset.correta === 'N') {
// Exibe a resposta correta:
alert($(`input[name="${this.name}"][data-correta="S"] + label`).text());
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset id="pergunta-1">
<h1>Enunciado da pergunta</h1>
<ul>
<li>
<input id="opcao-1" type="radio" name="respostas-1" value="1" data-correta="N">
<label for="opcao-1">Opção 1 errada</label>
</li>
<li>
<input id="opcao-2" type="radio" name="respostas-1" value="2" data-correta="N">
<label for="opcao-2">Opção 2 errada</label>
</li>
<li>
<input id="opcao-3" type="radio" name="respostas-1" value="3" data-correta="S">
<label for="opcao-3">Opção 3 correta</label>
</li>
<li>
<input id="opcao-4" type="radio" name="respostas-1" value="4" data-correta="N">
<label for="opcao-4">Opção 4 errada</label>
</li>
<li>
<input id="opcao-5" type="radio" name="respostas-1" value="5" data-correta="N">
<label for="opcao-5">Opção 5 errada</label>
</li>
</ul>
</fieldset>
Where input[name="${this.name}"][data-correta="S"]
will seek the correct answer to that question and the + label
selects the label
associated with input
, displaying your text. Another option would be to select the label
from the value of for
through the id
of the right option.
As the questions will have a group of answers that will be independent of the options of the other questions, it is convenient to use the <fieldset>
to group the semantically related elements within the form.
Why are these characters appearing? https://prnt.sc/p8c8mn
– Tiago
@James here did not appear any character so, test on the RUN button above, the two examples (the second is better) ... these characters seem another problem outside of this script, if you have how to put online for me to test or send the file would make it easy to identify, but I repeat, the problem is not in the answer script, it is elsewhere.
– Guilherme Nascimento