First JavaScript project - am I doing it right?
<p>I've been teaching myself a bit of web design and development over the past month or so, coming from an CG/VFX background with no prior experience so it's been a bit alien to me to say the least.</p>

<p>I found the excellent <em>JavaScript is Sexy</em> guide and have been going through it, but today was project time. I must admit I felt kinda stumped. I thought I was getting a good handle on it but then when the hand-holding stops, it gets a bit overwhwelming.</p>

<p>Anyway, I've done the 'quiz' assignment, but I have no idea if this is good or terrible, or on the right track. Is this the kinda thing that I should be doing, or am I missing something?</p>

<p><a href="http://jsfiddle.net/TeeJayEllis/3q8fs/" rel="nofollow">http://jsfiddle.net/TeeJayEllis/3q8fs/</a></p>

<pre><code>var totalScore = 0;
var questionNumber = 0;
var all


var allQuestions = [{
        question: "Who is Prime Minister of the United Kingdom?",
        choices: ["Tony Blair", "Gordon Brown", "Winston Churchill", "David Cameron"],
        correctAnswer: "David Cameron"
    },
    {
        question: "What is the capital city of Spain?",
        choices: ["Barcelona", "London", "Madrid", "Lisbon"],
        correctAnswer: "Madrid"
    },
    {
        question: "How many strings does a guitar have?",
        choices: ["Three", "Four", "Five", "Six"],
        correctAnswer: "Six"
    },
    {
        question: "What year did MTV launch?",
        choices: ["1980", "1992", "1981", "1979"],
        correctAnswer: "1981"
    }
];


var correctGuess = function(i) {
    totalScore += 1;
    questionNumber ++;
    $('#questionDiv').fadeOut("slow");
    $('#mainContent').empty();
    $('#mainContent').append('&lt;div id="answerDiv"&gt;&lt;/div&gt;');
    $('#answerDiv').append('&lt;h1&gt;Correct!&lt;h1&gt;');
    $('#answerDiv').append('&lt;h2&gt;Total Score: ' + totalScore + '&lt;/h2&gt;' );
    $('#answerDiv').fadeIn("slow");

    if (totalScore &lt; 4) {
        $('#answerDiv').append('&lt;button id="nextButton"&gt;Next Question&lt;/button&gt;');
        $('#nextButton').click(function() {question(questionNumber);})
    } else {
        $('#answerDiv').append('&lt;h1&gt;Congratulations, you Win!');
        $('#answerDiv').append('&lt;button id="restartButton"&gt;Play Again&lt;/button&gt;');
        $('#restartButton').click(function() {
            questionNumber = 0;
            totalScore = 0;
            question(questionNumber);})
    }
};

var incorrectGuess = function(i) {
    totalScore = 0;
    questionNumber = 0;
    $('#questionDiv').fadeOut("slow");
    $('#mainContent').empty();
    $('#mainContent').append('&lt;div id="answerDiv"&gt;&lt;/div&gt;');
    $('#answerDiv').append('&lt;h1&gt;Wrong!&lt;h1&gt;');
    $('#answerDiv').fadeIn("slow");
    $('#answerDiv').append('&lt;button id="restartButton"&gt;Restart&lt;/button&gt;');

    $('#restartButton').click(function() {question(questionNumber);})
};


var question = function(i) {
    $('#questionDiv').fadeOut("slow");
    $('#mainContent').empty();
    $('#mainContent').append('&lt;div id="questionDiv"&gt;&lt;/div&gt;');
    $('#questionDiv').append('&lt;h1&gt;Question ' + (i + 1) + '&lt;h1&gt;');
    $('#questionDiv').append('&lt;h2&gt;' + allQuestions[i].question + '&lt;/h2&gt;');
    $('#questionDiv').append('&lt;input type="radio" name="questionChoices" value="' + allQuestions[i].choices[0] + '" checked="yes"&gt;' + allQuestions[i].choices[0] + '&lt;/input&gt;');
    $('#questionDiv').append('&lt;input type="radio" name="questionChoices" value="' + allQuestions[i].choices[1] + '"&gt;' + allQuestions[i].choices[1] + '&lt;/input&gt;');
    $('#questionDiv').append('&lt;input type="radio" name="questionChoices" value="' + allQuestions[i].choices[2] + '"&gt;' + allQuestions[i].choices[2] + '&lt;/input&gt;');
    $('#questionDiv').append('&lt;input type="radio" name="questionChoices" value="' + allQuestions[i].choices[3] + '"&gt;' + allQuestions[i].choices[3] + '&lt;/input&gt;');
    $('#questionDiv').append('&lt;button id="submitButton"&gt;Submit&lt;/button&gt;');
    $('#questionDiv').fadeIn("slow");

    $('#submitButton').click(function() {
        if($('input:radio[name=questionChoices]:checked').val() === allQuestions[i].correctAnswer &amp;&amp; i &lt; 4) {
            correctGuess();
        } else {
            incorrectGuess();
        }
    })
};

question(questionNumber);
</code></pre>
