How to set variable index outside of function and execute after a function has finished
<p>2 Questions, firstly I have this code:</p>

<pre><code>    function Question(container, question_list, chosenAnswer) {
    this.container = container.empty();
    this.question_list = question_list;

    if(question_list.length == 1) {

        container.append('&lt;div class="answer"&gt;' + question_list[0] + '&lt;/div&gt;'); 

    } else if (question_list.length == 2) {

        for(var i=0;i&lt;question_list.length;i++){
            container.append('&lt;div class="two_q'+(i+1)+'"&gt;' + question_list[i] + '&lt;/div&gt;');
        }
        addClickOn(container, chosenAnswer);


    } else {

        for(var i=0;i&lt;question_list.length;i++){
            container.append('&lt;div class="four_q'+(i+1)+'"&gt;' + question_list[i] + '&lt;/div&gt;');
        }
        addClickOn(container, chosenAnswer);
    }
}

function addClickOn(container, chosenAnswer)
{
    this.container = container;
    $(container.children()).on('click', function() {
        selected = $(this);
        chosenAnswer= $(this).index();
        selected.siblings().fadeOut();
        selected.animate({
            width: container.width(),
            height: container.height()
        });
        selected.fadeOut();
    });
}


    var question_list1 = ["Question 1", "Question 2", "Question 3", "Question 4"];
    var question_list2 = ["Statement1", "Statement2"];
    var answer = ["Answer"];
    var chosenAnswer;

new Question($('div.question_container'), question_list2);
console.log(chosenAnswer);
</code></pre>

<ol>
<li><p>Why is chosenAnswer undefined on the console log? I haven't defined it, but I have passed it through the functions till it gets set on the click event.</p></li>
<li><p>When one of the boxes is clicked and the animation has finished, I then want to return this chosenAnswer and repeat the Question function with a new array. How do I do this? </p></li>
</ol>

<p>Thanks,</p>

<p>Rick</p>
