Very simple css/js quiz

[web148]

I’d like to create a very simple html quiz, with the less code possible.
I think a 3/4 radio buttons, only one of them with a given class (.correct), and a js to display a text (correct answer!) if that radio button is checked.

Something like this:

 <p>my question</p>
 <input type="radio" name="1"> a. first answer<br>
 <input type="radio" name="1" class="correct"> b. second answer<br>
 <input type="radio" name="1"> c. third answer<br>

 <p class="result">
  <span class="correct_ans">correct answer!</span>
  <span class="wrong_ans">wrong answer!</span>
 </p>

And javascript should show .correct_ans if the second answer is checked, otherwise .wrong_ans

Thank you!

EDIT

I have found this code

function ShowHideDiv() {
        var chkYes = document.getElementById("chkYes");
        var dvtext = document.getElementById("dvtext");
        dvtext.style.display = chkYes.checked ? "block" : "none";
    }

<label for="chkYes">
    <input type="radio" id="chkYes" name="chk" onclick="ShowHideDiv()" />
    Yes
</label>
<label for="chkNo">
    <input type="radio" id="chkNo" name="chk" onclick="ShowHideDiv()" />
    No
</label>
<div id="dvtext" style="display: none">
    Text Box:
    <input type="text" id="txtBox" />
</div>

It is almost what I need, but I need to work with classes and not with IDs, because I plan to have several quiz in the same page.
I tried this code, but unsuccessfully:

<label for="chkYes">
    <input type="radio" class="chkYes" name="chk" onclick="ShowHideDiv()" />
    Yes
</label>
<label for="chkNo">
    <input type="radio" class="chkNo" name="chk" onclick="ShowHideDiv()" />
    No
</label>

<div class="dvtext" style="display: none">
    correct!
</div>

<script>

function ShowHideDiv() {
        var chkYes = document.getElementsByClassName('chkYes');
        var dvtext = document.getElementsByClassName('dvtext');
        dvtext.style.display = chkYes.checked ? "block" : "none";
    }
    
</script>

EDIT
Maybe I should change completely the code…

[Archibald]

Here is one way of doing it . . . .

[web148]

Excellent! Perfect!
It is really what I need.
Thank you very, very much!!!

[web148]

1. To improve the code, I wonder if it would be possible to format the result (with a red color for a wrong answer, and green for a correct one).
2. I noticed that your code works even for checkbox. But it would be better if when another checkbox is checked the others be unchecked: it is possible, keeping the basic of the present code?

EDIT

1. My first request is not so important: as long as I can customize each answer message.
2. To my second request you could answer that that is the radio button behavior. In some cases however I’d like put multiple correct answers…

EDIT

I guess that my second request would need a much more complex code, and the easier way would be to have only radio buttons.

[Archibald]

Yes, your second request could get rather complex.

As we are allowing customisation of each response message, we need some way that the JavaScript can determine whether the button clicked is correct or wrong. We could add another data attribute but in the code below I have added tick and cross marks in front of the response message. Another approach could be to prefix each response message with, say, 0 or 1 then chop that off before displaying the response.

The characters I have used are the ‘Heavy check mark’ (Wikipedia) and the ‘Cancellation X’ (Wikipedia). I guess many fonts do not support these characters.

If you want the whole response message coloured, delete ::first-letter in the CSS code (in two places).

[web148]

Very good!
Again, thank you very much!!