JSFiddle - React, Tailwind, and code Playground

by gnemeth

HTML

<form id="quiz">
        <div id="question">
            
        </div>
        <div id="answers">
            
        </div>
        <input type="button" value="Next">
    </form>

JavaScript

'use strict';

var quiz,
    actualQuestion = 1,
    getChoices,
    generateHtml,
    html = '',
    choices = [];

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

getChoices = function () {
    for (var i = 0; i < quiz[actualQuestion].choices.length; i++) {
        choices[i] += quiz[actualQuestion].choices[i];
        console.log(choices[i]);
    }
}

generateHtml = function () {
    for (var i = 0; i < choices.length; i++) {
         html += '<label>' +
            '<input type="radio" name="answer">' +
                choices[i] +
            '</label>';
    }
}

getChoices();
generateHtml();

document.getElementById('answers').innerHTML = html;