https://jsfiddle.net/k3h5esLp/
<div class="container"></div>
<button type="button" class="mainBtn">Submit</button>
const container = document.querySelector('.container');
const mainBtn = document.querySelector('.mainBtn');
document.addEventListener('DOMContentLoaded', getData('https://api.myjson.com/bins/dgkjf'));
function getData(url) {
const ajax = new XMLHttpRequest();
ajax.open('GET', url, true);
ajax.onload = function() {
if(this.status === 200) {
const data = JSON.parse(this.responseText);
data.quiz.forEach(function(cur, index) {
const div = document.createElement('div');
div.classList.add('box');
div.innerHTML = ` <form>
<p class="question">${data.quiz[index].question}</p>
<div class="answer-box">
<input type="radio" name="answer" value="a"> <span class="answer">${data.quiz[index].options[0].content}</span>
</div>
<div class="answer-box">
<input type="radio" name="answer" value="b"> <span class="answer">${data.quiz[index].options[1].content}</span>
</div>
<div class="answer-box">
<input type="radio" name="answer" value="c"> <span class="answer">${data.quiz[index].options[2].content}</span>
</div>
<div class="answer-box">
<input type="radio" name="answer" value="d"> <span class="answer">${data.quiz[index].options[3].content}</span>
</div>
</form>`;
container.appendChild(div);
});
}
else {
ajax.onerror();
}
};
ajax.onerror = function() {
console.log('There was a mistake!');
}
ajax.send();
}
{
"quiz": [
{
"id": 1, "question": "Question 1?",
"options": [
{"id": "a", "content": "Answer 1."},
{"id": "b", "content": "Answer 2."},
{"id": "c", "content": "Answer 3."},
{"id": "d", "content": "Answer 4."}
],
"answer": "d"
},
{
"id": 2, "question": "Question Question 2?",
"options": [
{"id": "a", "content": "Answer Answer 1."},
{"id": "b", "content": "Answer Answer 2."},
{"id": "c", "content": "Answer Answer 3."},
{"id": "d", "content": "Answer Answer 4."}
],
"answer": "c"
},
{
"id": 3, "question": "Question Question Question 3?",
"options": [
{"id": "a", "content": "Answer Answer Answer 1."},
{"id": "b", "content": "Answer Answer Answer 2."},
{"id": "c", "content": "Answer Answer Answer 3."},
{"id": "d", "content": "Answer Answer Answer 4."}
],
"answer": "a"
}
]
}