JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div id="questions">
</div>
<input type='button' onclick="createQuestion();" value="Run">
</body>
JavaScript
var qIndex = 23;
var question = {
text: "Which pill do you take?",
options: ["Take the blue pill", "Take the red pill", "Mix them and take the purple pill"],
answer: ["Mix them and take the purple pill"]
};
function createQuestion() {
var div = document.createElement('div');
var questionText = document.createElement('p');
questionText.style = "font-weight: bold;"
questionText.textContent = question.text;
div.appendChild(questionText);
var questionIndex = qIndex++;
var questionQualified = 'question-' + questionIndex;
question.options.forEach(function (optionText, index) {
var container = document.createElement('div');
var optionElem = document.createElement('input');
var optionId = questionQualified + '-' + index;
optionElem.type = 'radio';
optionElem.id = optionId;
optionElem.name = questionQualified;
optionElem.value = optionText;
container.appendChild(optionElem)
var label = document.createElement('label');
label.for = optionId;
label.textContent = optionText;
container.appendChild(label);
div.appendChild(container);
});
document.getElementById('questions').appendChild(div);
}