JSFiddle - React, Tailwind, and code Playground

by aryzle

HTML

<body></body>

JavaScript

var allQuestions = [{
    question: "Who is Prime Minister of the United Kingdom?",
    choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"],
    correctAnswer: 0
}];

var ul = document.createElement('ul');
document.body.appendChild(document.createTextNode(allQuestions[0].question));
document.body.appendChild(ul);

var fragment = document.createDocumentFragment();
var li = null;
var len = allQuestions[0].choices.length;
for (var i = 0; i < len; i++) {
    li = document.createElement("li");
    input = document.createElement("input");
    input.type = "radio";
    input.name = "answer";
    input.value = i+1;
    li.appendChild(input);
    li.appendChild(document.createTextNode(allQuestions[0].choices[i]));
    fragment.appendChild(li);
}

ul.appendChild(fragment);
var response = document.createTextNode('');
document.body.appendChild(response);
var handler = function (e) {
    if (e.target.value == allQuestions[0].correctAnswer+1) response.nodeValue = 'Correct!';
    else if (e.target.value) response.nodeValue = 'Wrong!';
};

ul.addEventListener('click', handler, false);