Aurelia Quiz

http://jsfiddle.net/UzGXU/14/ (history)

HTML

<h1>Quiz App</h1>
<body bgcolor="black">
<p id='question'>Question</p>
<input type='radio' name='answers' value=0><span id="ans0"> Answer 0</span>
<br />
<br />
<input type='radio' name='answers' value=1><span id="ans1"> Answer 1</span>
<br />
<br />
<input type='radio' name='answers' value=2><span id="ans2"> Answer 2</span>
<br />
<br />    
<input type='radio' name='answers' value=3><span id="ans3"> Answer 3</span>
<br />
<br />
    <input type='radio' name='answers' value=4><span id="ans4"> Answer 4</span>
        <br />
        <br />
<button type="submit" id="button" click.delegate="test()">Submit</button>

CSS

#question {
    font-weight:bold;
    color: blue;
}

#ans0 {
    color:#66CCFF;
}

#ans1 {
    color:#66CC66
}

#ans2 {
    color:#FFFF66
}

#ans3 {
    color:#FFC000
}

#ans4 {
    color:red
}

h1 {
    font-family:"Comic Sans MS", cursive, sans-serif;
color:white;
}

TypeScript

var questions = [{
    question: "What is my name?",
    choices: ["David", "ZenStunna", "Bill", "George", "Aurelia"],
    correctAnswer: 4
}, {
    question: "What is my age?",
    choices: ["20", "25", "30", "32", "35"],
    correctAnswer: 3
}, {
    question: "What is my favorite color?",
    choices: ["blue", "green", "yellow", "orange", "red"],
    correctAnswer: 2
}, {
    question: "How tall am I?",
    choices: ["5-10", "5-11", "6-0", "6-1", "6-2"],
    correctAnswer: 0
}, {
    question: "Which OS is my favorite?",
    choices: ["Window 7", "Windows 8", "DOS", "Linux", "Mac OS"],
    correctAnswer: 0
}];

$(document).ready(function () {
    var maxQuestions = questions.length;
    var numRight = 0;
    var counter = 0;

    // display first question
    $('#question').text(questions[counter].question);
    $('#ans0').text(questions[counter].choices[0]);
    $('#ans1').text(questions[counter].choices[1]);
    $('#ans2').text(questions[counter].choices[2]);
    $('#ans3').text(questions[counter].choices[3]);
    $('#ans4').text(questions[counter].choices[4]);

    $('button').on('click', function () {
        var answer = ($('input[name="answers"]:checked').val());

        // increment score if right
        if (answer == questions[counter].correctAnswer)
            numRight++;

        counter++;

        if (counter >= maxQuestions) {
            document.write("Quiz is over. You got ", numRight, " out of ", maxQuestions);
            return;
        }

        // Show next question
        $('#question').text(questions[counter].question);
        $('#ans0').text(questions[counter].choices[0]);
        $('#ans1').text(questions[counter].choices[1]);
        $('#ans2').text(questions[counter].choices[2]);
        $('#ans3').text(questions[counter].choices[3]);
        $('#ans4').text(questions[counter].choices[4]);

    });
});
test() {
const hiddenElement: HTMLTextAreaElement = document.createElement('textarea');
			hiddenElement.style.display = 'none...