JSFiddle - React, Tailwind, and code Playground
CSS
b {
font-size: 1.2em;
margin: .5em 0 1em;
display: block;
}
lable {
display: block;
}
button {
border-radius: .2em;
margin: 1em 0;
}
.correct {
color: green;
}
.wrong {
color: red;
}
JavaScript
var allQuestions = [{
question: "Who is Prime Minister of the United Kingdom?",
choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"],
correctAnswer:0}];
// global variables
var wrapper = document.createElement('div');
var choices = allQuestions[0].choices;
var b = document.createElement('b');
var sub = document.createElement('button');
// wrapper
document.body.appendChild(wrapper);
// actual question
b.appendChild(document.createTextNode(allQuestions[0].question));
wrapper.appendChild(b);
// choices
for(var i =0; i < choices.length; i ++){
var lb = document.createElement('lable');
var inp = document.createElement('input');
inp.setAttribute('type', 'radio');
inp.setAttribute('name', 'choice');
inp.setAttribute('value', i);
lb.appendChild(inp);
lb.appendChild(document.createTextNode(choices[i]));
wrapper.appendChild(lb);
}
// submit button
sub.appendChild(document.createTextNode('Submit'));
sub.setAttribute('id', 'submit');
wrapper.appendChild(sub);
var submit = document.getElementById('submit');
// function to run after submit
submit.addEventListener('click', function(){
var p = document.createElement('p');
var radios = document.getElementsByName('choice');
var chosen;
for (var c=0; c < radios.length; c++){
if(radios[c].checked){
chosen = radios[c].value;
}
}
if(chosen == allQuestions[0].correctAnswer){
p.appendChild(document.createTextNode('Correct!'));
p.setAttribute('class', 'correct');
wrapper.appendChild(p);
} else {
p.appendChild(document.createTextNode('That is not correct, please try again.'));
p.setAttribute('class', 'wrong');
wrapper.appendChild(p);
}
});