jQuery select one item when related button is clicked

Question

I need to show the code sample first:

<div class="text-muted"> Question 1</div>
<li class="question-statement">First Question</li>
<div class="form-check">
    <input type="radio" class="form-check-input" value="a" name="q-1"><span> Option A</span>
</div>
<div class="form-check">
    <input type="radio" class="form-check-input" value="b" name="q-1"><span> Option B</span>
</div>
<div class="form-check">
    <input type="radio" class="form-check-input" value="c" name="q-1"><span> Option C</span>
</div>
<div class="form-check">
    <input type="radio" class="form-check-input" value="d" name="q-1"><span> Option D</span>
</div>
<button type="button" class="checkAnswer">Check Answer</button>


<div class="text-muted"> Question 2</div>
<li class="question-statement">Second Question</li>
<div class="form-check">
    <input type="radio" class="form-check-input" value="a" name="q-2"><span> Option A</span>
</div>
<div class="form-check">
    <input type="radio" class="form-check-input" value="b" name="q-2"><span> Option B</span>
</div>
<div class="form-check">
    <input type="radio" class="form-check-input" value="c" name="q-2"><span> Option C</span>
</div>
<div class="form-check">
    <input type="radio" class="form-check-input" value="d" name="q-2"><span> Option D</span>
</div>
<button type="button" class="checkAnswer">Check Answer</button>

I send an ajax request to get all the questions and answers. Here is the response from the server when I receive the response:

[{
    "id": 2243,
    "question": "Question 1",
    "a": "Option A",
    "b": "Option B",
    "c": "Option C",
    "d": "Option D",
    "answer": "Option B",
},
{
    "id": 2244,
    "question": "Question 2",
    "a": "Option A",
    "b": "Option B",
    "c": "Option C",
    "d": "Option D",
    "answer": "Option C",
}]

I am trying to do something like this:

<script>
     $('.checkAnswer').click(function () {
     console.log($(this))
   })
</script>

Actually I am trying to access the input fields of the selected question and add some css.

Here are two multiple choice questions with four options. One option is correct. I want to click on each button to see the correct answer individually. I can not figure out how to do it. Can anyone help? I want to do it with jQuery.

Answer 1

 let questionArr = [ { "id": 2243, "question": "Question 1", "a": "Option A", "b": "Option B", "c": "Option C", "d": "Option D", "answer": "Option B", }, { "id": 2244, "question": "Question 2", "a": "Option A", "b": "Option B", "c": "Option C", "d": "Option D", "answer": "Option C", } ]; questionArr.forEach((question) => { let html = ` <div class="question"> <div class="text-muted">${question.question}</div> <li class="question-statement">${question.question}</li> <div class="form-check"> <input type="radio" class="form-check-input" value="${question.a}" name="q-${question.id}"><span> ${question.a}</span> </div> <div class="form-check"> <input type="radio" class="form-check-input" value="${question.b}" name="q-${question.id}"><span> ${question.b}</span> </div> <div class="form-check"> <input type="radio" class="form-check-input" value="${question.c}" name="q-${question.id}"><span> ${question.c}</span> </div> <div class="form-check"> <input type="radio" class="form-check-input" value="${question.d}" name="q-${question.id}"><span> ${question.d}</span> </div> <button type="button" class="checkAnswer" data-answer="${question.answer}">Check Answer</button> </div> `; $('#questions').append(html); }); $(() => { $('.checkAnswer').click(function() { if($(this).parent().find('.form-check-input:checked').val() == $(this).data('answer')) { console.log('correct answer'); } else { console.log('incorrect answer'); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="questions"></div>

You will need to replace the hard coded array data in questionArr with the results from the ajax fetch.

Also this is not a very secure approach in the sense that you have exposed the answers to all the questions on the client side, which may or may not be an issue for your app.

But if security is a concern, I would make individual ajax requests to retrieve each answer during the $('.checkAnswer').click() event and compare the answer to the from the new ajax response.