Akanksha Akanksha - 5 months ago 11
HTML Question

Loop through the list of dynamically added input type radio list in javascript

I have a function

MultiChoiceQues(theSeq, theQues, theChoices theAns)
. I then add the
theQues
in a
p
tag followed by the unordered list of all the respective options with an input of type radio for each option.

In an array variable
allQues[]
I created multiple instance for the function
MultiChoiceQues
passing different arguments. Now, on load I'm showing all the questions with their respective options.

How can I access and highlight all the correct answers?



var content = "";

function MultiChoiceQues(theSeq, theQues, theChoices, theAns) {
content += '<p>' + theQues + '</p> <ul>';

theChoices.forEach(function(eachChoice) {
content += '<li><input type="radio" name="' + theSeq + '"/> ' + eachChoice + '</li>';
});
content += '</ul>';
return content;

console.log(content);
}

var allQues = [
new MultiChoiceQues(1, "Who is Prime Minister of England?", ["Obama", "Blair", "Brown", "Cameron"], 4),

new MultiChoiceQues(2, "What is the Capital of Brazil?", ["São Paulo", "Rio de Janeiro", "Brasília", "Salvador"], 3),

new MultiChoiceQues(3, "Who won the French open 2016 in Men’s Single category?", ["Novak Djokovic", "Andy Murray", "Rafael Nadal"], 1)
];

function ShowAllQues() {
document.getElementById("container").innerHTML = content;
}

function ShowAllAns() {
/* Highlight all the correct answers */
}

body {
background: #f2f2f3;
font-family: 'Century Gothic';
font-weight: 100;
color: #0193b7;
}
ul {
list-style: none;
}
ul li:hover {
cursor: pointer;
color: #5bb12f;
}
#container {
border: 10px solid #293e6a;
padding: 0 0 20px 30px;
box-shadow: 0 0 5px 5px #c4c4c4;
}
p {
font-family: 'Eras ITC';
color: #e792b5;
font-size: 20px;
font-weight: normal;
}
.flyingButton {
position: fixed;
right: 18px;
top: 80px;
height: 50px;
width: 100px;
background: #293e6a;
border-radius: 25px 0 0 25px;
border: none;
color: #f2f2f2;
cursor: pointer;
}
.flyingButton:hover {
background: #0193b7;
}
.flyingButton:focus {
outline: 0;
}

<body onload="ShowAllQues();">
<div id="container">
</div>

<input type="button" value="Answers" class="flyingButton" onclick="ShowAllAns(); return false;">
</body>




Answer

tl;dr:

  • Add Class <ul class="answerChoicesGroup">
  • Replace return content with this.answer = theAns;
  • Create var getting answerChoicesGroup: answerChoicesGroup = document.getElementsByClassName('answerChoicesGroup');
  • Insert in showAllAns() the following:

.

function ShowAllAns() {
    /* Highlight all the correct answers */
    for (i = 0; i < allQues.length; i++) {
        // Get the current answer group
        var answerGroup = answerChoicesGroup[i],
            // Access the correct radio input answer by getting the answer index from `allQues`
            correctAnswer = answerGroup.children[allQues[i].answer - 1];

        // Do whatever you'd like with `correctAnswer`
        correctAnswer.firstElementChild.checked = true;
        correctAnswer.classList.add('answer');
    }
}

Explanation

You are on the right track by return content. Instead of that, (which won't return content because you have the keyword new) I just did this.answer = theAns. answer can be any word you'd like.

The way to access answer would be like any object. i.e.

var muiltipleChoiceQuestion = new MultiChoiceQues(1, "Who is Prime Minister of England?", ["Obama", "Blair", "Brown", "Cameron"], 4),

alert(muiltipleChoiceQuestion.answer) // result: 4

The next thing I did was, added a class name to all the ul's called answerChoicesGroup, and created a variable for that too.

In showAllAns() function, I iterated through allQues, and accessed the correct answer by:

  1. Get the current answer group. (var answerGroup)
  2. Access the correct radio input answer by getting the answer index from allQues. (var correctAnswer)
  3. Do whatever you'd like with correctAnswer.

Here's the code:

Here's how you would do it:

JSFiddle

var content = "";

function MultiChoiceQues(theSeq, theQues, theChoices, theAns) {
  content += '<p>' + theQues + '</p> <ul class="answerChoicesGroup">';

  theChoices.forEach(function(eachChoice) {
    content += '<li><input type="radio" name="' + theSeq + '"/> ' + eachChoice + '</li>';
  });
  content += '</ul>';
  this.answer = theAns;
}

var allQues = [
    new MultiChoiceQues(1, "Who is Prime Minister of England?", ["Obama", "Blair", "Brown", "Cameron"], 4),
    new MultiChoiceQues(2, "What is the Capital of Brazil?", ["São Paulo", "Rio de Janeiro", "Brasília", "Salvador"], 3),
    new MultiChoiceQues(3, "Who won the French open 2016 in Men’s Single category?", ["Novak Djokovic", "Andy Murray", "Rafael Nadal"], 1)
  ],
  answerChoicesGroup = document.getElementsByClassName('answerChoicesGroup');

function ShowAllQues() {
  document.getElementById("container").innerHTML = content;
}

function ShowAllAns() {
  /* Highlight all the correct answers */
  for (i = 0; i < allQues.length; i++) {
    // Get the current answer group
    var answerGroup = answerChoicesGroup[i],
      // Access the correct radio input answer by getting the answer index from `allQues`
      correctAnswer = answerGroup.children[allQues[i].answer - 1];

    // Do whatever you'd like with `correctAnswer`
    correctAnswer.firstElementChild.checked = true;
    correctAnswer.classList.add('answer');
  }
}
body {
  background: #f2f2f3;
  font-family: 'Century Gothic';
  font-weight: 100;
  color: #0193b7;
}
ul {
  list-style: none;
}
ul li:hover {
  cursor: pointer;
  color: #5bb12f;
}
#container {
  border: 10px solid #293e6a;
  padding: 0 0 20px 30px;
  box-shadow: 0 0 5px 5px #c4c4c4;
}
p {
  font-family: 'Eras ITC';
  color: #e792b5;
  font-size: 20px;
  font-weight: normal;
}
.flyingButton {
  position: fixed;
  right: 18px;
  top: 80px;
  height: 50px;
  width: 100px;
  background: #293e6a;
  border-radius: 25px 0 0 25px;
  border: none;
  color: #f2f2f2;
  cursor: pointer;
}
.flyingButton:hover {
  background: #0193b7;
}
.flyingButton:focus {
  outline: 0;
}
.answer {
  color: green;
}
<body onload="ShowAllQues();">
  <div id="container">
  </div>

  <input type="button" value="Answers" class="flyingButton" onclick="ShowAllAns();">
</body>

Comments