JSFiddle - React, Tailwind, and code Playground

by Dan Vassallo

HTML

<h4>Right Answers: <span id="score">0</span></h4>
<br>
<div id="q1" class="qs">
	What is the capital of the United States?<br>
	<input type="radio" name="question1" value="Washington D.C.">Washington D.C.
	<input type="radio" name="question1" value="New York City">New York City
	<input type="radio" name="question1" value="Los Angeles">Los Angeles
	<input type="radio" name="question1" value="Chicago">Chicago
</div>
<div id="submit">
 Click here to submit your answer
</div>

CSS

#submit{
  margin: 20px;
  border-radius: 15px;
  background: green;
  color: white;
  padding: 20px;
  text-align: center;
}

JavaScript

var rightAnswers = 0;

$('#submit').on('click', function(){
	var answer = $("input[name='question1']:checked").val();
	//check if they've answered at all
	if(typeof answer == "undefined"){
    alert("Choose an answer");
  //if it's right, increment their score
  } else if(answer == "Washington D.C."){
		alert("you got it!");
    rightAnswers++
    $("#score").html(rightAnswers);
	//if it's wrong, let them know
  } else {
   	alert("wrong!");
  }
});