JSFiddle - React, Tailwind, and code Playground

HTML

<div id = "container">
    <h1 id = "h1"></h1>
    <ul id = "list">
    </ul>
    <button id = "button">Next</button>
</div>
<script src = "quiz.js"></script>

CSS

div {
	width:500px;
	height:500px;
	background: cyan;
	border:1px dotted blue;
	margin:0 auto;
	position:relative;
	border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;
}

button{
	position:absolute;
	bottom:5%;
	right:5%;
	background:blue;
	color:white;
	border:1px solid black;
	padding:20px;
	border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;
}
button:hover{
	background:navy;
    cursor: pointer;
}

ul{
	margin-top:50px;
	list-style:none;
}
li{
	font-size:20px;
}
h1{
	color:blue;
	background:#B2CAFF;
	margin-top:40px;
	padding-left: 35px;
	border-top:2px dotted blue;
	border-bottom:2px dotted blue;
}
p{
	margin-left:30px;
	font-size: 30px;
	color:red;
}

JavaScript

//object that contains all the questions
var allQuestions = [
{
	question: "What is Javascript?", 
	choices: ["An ancient language", "A programming language", "A medieval manuscript", "An internet troll"], 
	correctAnswer:1
},
{
	question : "Where is Venice?",
	choices : ["Peru", "Greece", "US", "Italy", "Congo"],
	correctAnswer : 3
},
{
	question : "What does RGB mean?",
	choices : ["Red, Green, Blue", "Real Graphics Body",  "SWAG"],
	correctAnswer : 0
},
{
	question : "How many strings has a  guitar?",
	choices : [3,4,5,6,7,8],
	correctAnswer : 3
}
];

//get reference to the basic tags
var list = document.getElementById("list");
var h1 = document.getElementById("h1");
var button = document.getElementById("button");
var container = document.getElementById("container");

//initiate some vars
var i = 0;
var len = allQuestions.length;
var correct = 0;

//function that populates the ul and h1 with each question
function populate(i){
	for (var j = 0, length = allQuestions[i].choices.length; j < length; j ++){
		var li = document.createElement("li");
		//create radio button
		var radio = document.createElement("input");
		radio.setAttribute('type', 'radio');
		radio.setAttribute('name', 'quest' + i);
		radio.setAttribute('value' , allQuestions[i].choices[j]);
		//create text of radio buttons
		var text=document.createTextNode(allQuestions[i].choices[j]);
		
		list.appendChild(li);
		li.appendChild(radio);
		li.appendChild(text);
		h1.innerHTML = allQuestions[i].question;
	}
}	

//initial population
populate(0);

button.onclick = function(){
	
	var radioGroup= document.getElementsByName("quest" + i); //get an array with the radios
	var oneChecked = false; //if there is a radio checked, turns to true
	
	//iterates through radios to find the checked one, if there is, and if it is right increments 'correct' by 1
	for(var k=0; k<radioGroup.length; k++){
		if(radioGroup[k].checked) {
			oneChecked = true;
			if(k === allQuestions[i].correctAnswer){
				correct...