Issue
I have a multiple choice radio button quiz. I want to get all the correct answers and print them. Correct answers are marked value="true" in html. Other answers have different value. How can I loop through to get text of all the correct answers from using javascript or PHP? Example:
<span class='mlw_qmn_question_number'>1. </span>
<span class='mlw_qmn_question '>Roberta _____ from Canada.</span>
<div class='qmn_radio_answers mlwRequiredRadio'>
<div class='qmn_mc_answer_wrap' id='question21-are'>
<input type='radio' class='qmn_quiz_radio' name='question21' id='question21_1' value='are' />
<label for='question21_1'>are</label>
</div>
<div class='qmn_mc_answer_wrap' id='question21-is'>
<input type='radio' class='qmn_quiz_radio' name='question21' id='question21_2' value='true' />
<label for='question21_2'>is</label>
</div>
<div class='qmn_mc_answer_wrap' id='question21-am'>
<input type='radio' class='qmn_quiz_radio' name='question21' id='question21_3' value='am' />
<label for='question21_3'>am</label>
</div>
<div class='qmn_mc_answer_wrap' id='question21-be'>
<input type='radio' class='qmn_quiz_radio' name='question21' id='question21_4' value='be' />
<label for='question21_4'>be</label>
</div>
<input type='radio' style='display: none;' name='question21' id='question21_none' checked='checked' value='No Answer Provided' />
</div>
Solution
In JavaScript with querySelectorAll
, querySelector
and Array.prototype.map
. First find all the inputs with querySelectorAll
. Then use map
with querySelector
to find the corresponding label for each input and create an array of labels. Then map the labels to its content.
const inputs = document.querySelectorAll('input[value=true]');
const labels = Array.prototype.map.call(inputs, input => document.querySelector(`label[for=${input.id}]`));
console.log(Array.prototype.map.call(labels, label => label.innerHTML));
<span class='mlw_qmn_question_number'>1. </span><span class='mlw_qmn_question '>Roberta _____ from Canada.</span>
<div class='qmn_radio_answers mlwRequiredRadio'>
<div class='qmn_mc_answer_wrap' id='question21-are'><input type='radio' class='qmn_quiz_radio' name='question21' id='question21_1' value='are' /> <label for='question21_1'>are</label></div>
<div class='qmn_mc_answer_wrap' id='question21-is'><input type='radio' class='qmn_quiz_radio' name='question21' id='question21_2' value='true' /> <label for='question21_2'>is</label></div>
<div class='qmn_mc_answer_wrap' id='question21-am'><input type='radio' class='qmn_quiz_radio' name='question21' id='question21_3' value='am' /> <label for='question21_3'>am</label></div>
<div class='qmn_mc_answer_wrap' id='question21-be'><input type='radio' class='qmn_quiz_radio' name='question21' id='question21_4' value='be' /> <label for='question21_4'>be</label></div><input type='radio' style='display: none;' name='question21' id='question21_none' checked='checked' value='No Answer Provided' />
</div>
Answered By - jabaa
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.