Test with answer options in HTML code in JavaScript

In the previous lessons, the answers to the test questions had to be typed into inputs. In life, however, there are often also tests in which you can choose one answer from those offered. Let's learn how to create such tests.

Let's start again with a simple things, when questions and answers are stored in HTML code, and then we will gradually complicate it.

So here's a multiple choice test:

<div id="test"> <div> <p>question 1?</p> <label> <input type="radio" name="1" data-right> answer 1 </label> <label> <input type="radio" name="1"> answer 2 </label> <label> <input type="radio" name="1"> answer 3 </label> </div> <div> <p>question 2?</p> <label> <input type="radio" name="2"> answer 1 </label> <label> <input type="radio" name="2" data-right> answer 2 </label> <label> <input type="radio" name="2"> answer 3 </label> </div> <div> <p>question 3?</p> <label> <input type="radio" name="3"> answer 1 </label> <label> <input type="radio" name="3"> answer 2 </label> <label> <input type="radio" name="3" data-right> answer 3 </label> </div> </div>

As you can see, we can select answer options using the radio buttons. At the same time, in each question, the radio button with the correct option is marked with the data-right attribute.

Make it so that when you select one of the answers to the question, this answer is immediately checked for correctness.

Modify your code so that answers are checked on button click.