A Simple AJAX Quiz Using Atlas

// Called on 'Next' button click event.
function Callback()
{
    // Gets a reference to the hidden field containing the question ID
    var questionID = document.getElementById('QuestionID');
    // Gets references to the 3 possible answers
    var answer1 = document.getElementById('YesAnswer');
    var answer2 = document.getElementById('NoAnswer');
    var answer3 = document.getElementById('DontKnowAnswer');
    // Initializes a variable to hold the user answer
    var answerID = 0;
    // Gets user answer
    if(answer1.checked) answerID = 1;
    if(answer2.checked) answerID = 2;
    if(answer3.checked) answerID = 3;

    // Creates a new Question object. Atlas makes the translation for us : JS and ASP.NET
    // know exactly the same class !
    var object = new Question();
    object.QuestionID = questionID.value;
    object.AnswerID = answerID;

    // Displays a image during the AJAX call
    DisplayUpdateImage(true);
    // Ajax call. QuestionService is the Web Service we registered in Atlas ScriptManager
    // and as you can see, we can directly call our WebMethod. Isn't it nice ? :)
    // We also add 3 events : one when process is completed, another when a timeout occurs, 
    // and a last one if an error occurs.
    QuestionService.StoreAnswer(object, OnComplete, OnTimeout, OnError);
}

// Called when Ajax request is done
function OnComplete(response)
{
    // 3 references to our 3 DIVs
    var StartForm = document.getElementById('StartForm');
    var QuizForm = document.getElementById('QuizForm');
    var EndForm = document.getElementById('EndForm');
    
    // A reference to the hidden field used to hold the question ID
    var questionID = document.getElementById('QuestionID');
    // A reference to the DIV which will contain the next question text
    var questionText = document.getElementById('QuestionText');
    
    // If there is a next question
    if(response != null)
    {
        StartForm.style.display = 'none';
        EndForm.style.display = 'none';
        QuizForm.style.display = 'block';
        questionID.value = response.QuestionID;
        questionText.innerHTML = response.QuestionText;
    }
    // If there's no more questions, we display the EndForm div.
    else
    {
        EndForm.style.display = 'block';
        QuizForm.style.display = 'none';
    }
    // We hide the updating image
    DisplayUpdateImage(false);
}

// Informs user that a timeout occured
function OnTimeout(result) 
{
    DisplayUpdateImage(false);
    alert("Timed out");
}

// Informs user that an error occured
function OnError(result)
{
    var error = document.getElementById('divError');
    error.innerHTML = result.get_message();
    DisplayUpdateImage(false);
}

// Used to display/hide the updating image
function DisplayUpdateImage(flag)
{
    var img = document.getElementById('imgUpdate');
    if(flag) img.style.display = 'block';
    else img.style.display = 'none';
}