Quiz form with JavaScript
<p>I'm new here? and i am learning Javascript. Today i have faced some problems, and i hope you will help me to solve it.</p>

<p>I'm trying to make a quiz with no html, javascript only. Questions and answer i want to import from questions database, which has a form of array iwth objects.</p>

<p>So i made heading and questions. And the problem is, how to make each question to have it's own variants of answers. Here is my code `</p>

<pre><code>var QBase=[];

// Question 1
var q = {
    q:"Question 1",
    a:[
    "Answer 11",
    "Answer 12"
    ]
}
QBase.push(q);

// Question 2
var q = {
    q:"Question 2",
    a:[
    "Answer 21",
    "Answer 22",
    "Answer 23",
    "Answer 24",
    "Answer 25"
    ]
}

QBase.push(q);

// Question 3
var q = {
    q:"Question 3",
    a:[
    "Answer 31",
    "Answer 32",
    "Answer 33"
    ]
}
QBase.push(q);
</code></pre>

<p>var qForm={</p>

<pre><code>ancestor:document.body,
wrapper:'',
header:'',
questionBlock:'',
question:[],
answerBlock:[],
answer:[],


createForm:function(){
    this.wrapper=document.createElement('form');
    this.wrapper.classList.add('wrapper');
    this.ancestor.appendChild(this.wrapper);
},
createHeader:function(){
    this.header=document.createElement('h1');
    this.wrapper.classList.add('header');
    this.header.innerHTML='LALALALAAL';
    this.wrapper.appendChild(this.header);
},
createQuestionBlock:function(){
    this.questionBlock=document.createElement('ol');
    this.questionBlock.classList.add('questionBlock');
    this.wrapper.appendChild(this.questionBlock);
},
createQuestion:function(i){
    this.question[i]=document.createElement('li');
    this.question[i].classList.add('question'+i);   
    this.question[i].innerHTML=QBase[i].q;
    this.questionBlock.appendChild(this.question[i]);


},
createAnswerBlock:function(i){
    this.answerBlock[i]=document.createElement('ol');
    this.answerBlock[i].classList.add('AnswerBlock');
    this.question[i].appendChild(this.answerBlock[i]);
},
createAnswer:function(i){
    this.answer[i]=document.createElement('li');
    this.answer[i].classList.add('answer'+i);
    this.answer[i].innerHTML=QBase[i].a;
    this.answerBlock[i].appendChild(this.answer[i]);

},

createTest:function(){
    this.createForm();
    this.createHeader();
    this.createQuestionBlock();
    for (var i=0; i&lt;QBase.length; i++){
        this.createQuestion(i);
    }
    for (var i=0;i&lt;QBase.length;i++){
        this.createAnswerBlock(i);
    }
    for (var i=0;i&lt;QBase.length;i++){
        for(var j=0;j&lt;QBase[i].a.length;j++){
            this.createAnswer(a[i],q[j]);
        }
    }
}
</code></pre>

<p>}
qForm.createTest();
`
output looks like this<a href="http://i.stack.imgur.com/n6t3m.png" rel="nofollow">Output</a></p>

<p>but i need something like this <a href="http://i.stack.imgur.com/m1xyz.png" rel="nofollow">desirable output</a></p>