JSFiddle - React, Tailwind, and code Playground

by LyndseyB

HTML

<p> Question One: What year was LFC formed? </p>

<label><input type="radio" name="question1" value="false" />1883</label>
<label><input type="radio" name="question1" value="true" />1892</label>
<label><input type="radio" name="question1" value="false" />1899</label>
<label><input type="radio" name="question1" value="false" />1905</label>

<p> Question Two: ? </p>

<label><input type="radio" name="question2" value="false" />One</label>
<label><input type="radio" name="question2" value="false" />Two</label>
<label><input type="radio" name="question2" value="false" />Three</label>
<label><input type="radio" name="question2" value="true" />Four</label>

<p>
  <input type="button" id="js-submit" value=" Get Score! "> 
</p>

<p>
   <span id="js-score"></span>
</p>

JavaScript

var questions = document.querySelectorAll('[type="radio"]'),
		submitScore = document.querySelector('#js-submit'),
    scoreResult = document.querySelector('#js-score'),
	 	score;     

submitScore.addEventListener('click', function() {
	score = 0;
  
	[].forEach.call(questions, function(question) {
  	if(question.checked && question.value === 'true') {    	
    	score++;
    }
  });  
  scoreResult.innerText = 'Your score is ' + score;
});