JSFiddle - React, Tailwind, and code Playground
HTML
<form>
<label id="question">Question:</label><br />
<div id="answersBox">
</div>
<input type="button" value="save" />
</form>
JavaScript
var allQuestions = [{question: "This is question number one", choices: ["one", "two", "three", "four"], correctAnswer:"two"},{question: "This is question number two", choices: ["dog", "cat", "bear", "lion"], correctAnswer:"bear"}];
var currentQuestion = allQuestions[1].question;
document.getElementById('question').innerHTML = currentQuestion;
function choiceList() {
var question=allQuestions[0];
for (choice in question.choices) {
var choiceSelection = document.createElement('input');
var choiceLabel = document.createElement('label');
choiceSelection.setAttribute('type', 'radio');
choiceSelection.setAttribute('name', question.choices[choice]);
choiceLabel.innerHTML=question.choices[choice];
choiceLabel.setAttribute('for', question.choices[choice]);
document.getElementById('answersBox').appendChild(choiceSelection);
document.getElementById('answersBox').appendChild(choiceLabel);
}
}
choiceList();