Radio buttons need to have a value set for them so that it has meaning when you select one. That value is what you want to compare against your array values. Your code tries to compare the true/false value of the checked property against the answers in your array, which will always result in an incorrect answer because true (the value of the checked property on the checked radio button) is not one of the correct answers.
Next, if you always compare the value of the "correct answer" radio button against the correct answers, you'll never get a wrong answer. When the submit button is pressed, you need to look for which button (from each group) was checked and compare each value against the corresponding correct answer in the array.
Additionally, each group of radio buttons must have a name that is different from the other groups, so that each group can have one choice selected. Right now, in your code, you can only select one radio button from all the choices.
var score = 0;
var submit = document.getElementById('submit');
var result = document.getElementById('results')
var answers = ['Yellow', 'Donald Trump', 'Michael Jackson', 'red', 'Oscar'];
submit.addEventListener('click', function quiz(){
// You need to get the checked radio button at the time that the submit button is pressed.
var checkedRadioButton1 = document.querySelector("input[name='selection1']:checked");
// Compare the *value* of the radio button against the value in the array.
if(checkedRadioButton1.value == answers[0]) {
result.textContent = "yes thats correct";
}else{
alert('nope');
}
});
<h2>
Knowlegde Quiz
</h2>
<p>What is the color of the sun?</p>
<input type="radio" name="selection1" id="correctradio1" value="Yellow"> Yellow<br>
<input type="radio" name="selection1" value="Green"> Green<br>
<input type="radio" name="selection1" value="Blue"> Blue
<p>Who is the President?</p>
<input type="radio" name="selection2" id="correctradio2" value="Donald trump"> Donald Trump<br>
<input type="radio" name="selection2" value="Beyonce"> Beyonce<br>
<input type="radio" name="selection2" value="Blue Ivy"> Blue Ivy
<p>Who was the lead singer in The Jackson 5?</p>
<input type="radio" name="selection3" value="Marvin Gaye"> Marvin gaye<br>
<input type="radio" name="selection3" value="Toni Braxton"> Toni braxton<br>
<input type="radio" name="selection3" value="Michael Jackson" id="correctradio3"> Michael Jackson
<p>What color is Elmo?</p>
<input type="radio" name="selection4" value="green"> Green<br>
<input type="radio" name="selection4" value="pink"> pink<br>
<input type="radio" name="selection4" value="red" id="correctradio4"> red
<p>Who created the Muppets?</p>
<input type="radio" name="selection5" value="Elmo"> Elmo<br>
<input type="radio" name="selection5" value="Jim Henson" id="correctradio5"> Jim Henson<br>
<input type="radio" name="selection5" value="Oscar"> Oscar<br><br>
<input type="submit" value="Submit Quiz" id="submit">
<h3>You got <span id="results"></span> correct
</h3>
While this is a good first approach for someone that is new to JavaScript, it really is pretty wasteful in terms of coding. A much more streamlined approach would be as follows (read the comments for explanation):
var score = 0;
var submit = document.getElementById('submit');
var result = document.getElementById('results')
var incorrect = [];
// When comparing strings, remember that case matters. Store all the strings
// as lower case and then later, we'll compare lower case against lower case.
var answers = ['yellow', 'donald trump', 'michael jackson', 'red', 'jim henson'];
submit.addEventListener('click', function(){
// Reset game
incorrect = [];
score = 0;
// Get the checked radio button from each group and place into an array
var checkedByGroup = Array.prototype.slice.call(document.querySelectorAll("input[type='radio']:checked"));
// Count how many checks were made and if the user didn't answer all
// the questions, exit with a message:
if(checkedByGroup.length < answers.length){
alert("You didn't answer all the questions! Try again!");
return;
}
// Now you have two arrays: one with all the correct answers and
// one with radio buttons. Both arrays have the same amount of items
// and each index in each array corresponds to each other.
// Loop through the correct answers:
answers.forEach(function(value, index){
// Compare the answer against the corresponding radio button array
// Remember to compare lower case against lower case!
if(checkedByGroup[index].value.toLowerCase() === value){
score++; // Add a point
} else {
incorrect.push(index + 1); // Add question number to incorrect array
}
});
// If you didn't get a perfect score:
if(score !== 5){
// Tell the player which questions they got wrong
alert("You got question(s) " + incorrect.join() + " wrong!");
}
// Either way, report the score
result.textContent = "You got " + score + " right!";
});
<h2>Knowlegde Quiz</h2>
<p>What is the color of the sun?</p>
<input type="radio" name="q1" value="Yellow"> Yellow<br>
<input type="radio" name="q1" value="Green"> Green<br>
<input type="radio" name="q1" value="Blue"> Blue
<p>Who is the President?</p>
<input type="radio" name="q2" value="Donald trump"> Donald Trump<br>
<input type="radio" name="q2" value="Beyonce"> Beyonce<br>
<input type="radio" name="q2" value="Blue Ivy"> Blue Ivy
<p>Who was the lead singer in The Jackson 5?</p>
<input type="radio" name="q3" value="Marvin Gaye"> Marvin gaye<br>
<input type="radio" name="q3" value="Toni Braxton"> Toni braxton<br>
<input type="radio" name="q3" value="Michael Jackson"> Michael Jackson
<p>What color is Elmo?</p>
<input type="radio" name="q4" value="green"> Green<br>
<input type="radio" name="q4" value="pink"> pink<br>
<input type="radio" name="q4" value="red"> red
<p>Who created the Muppets?</p>
<input type="radio" name="q5" value="Elmo"> Elmo<br>
<input type="radio" name="q5" value="Jim Henson"> Jim Henson<br>
<input type="radio" name="q5" value="Oscar"> Oscar<br><br>
<input type="submit" value="Submit Quiz" id="submit">
<h3 id="results"></h3>
radio1.checkedwith aconsole.log(radio1.checked)