Question

I’m working on a ajax/jquery quiz for my company and it runs without problem in Firefox, Chrome, and even Android. When running with IE8, though, it locks up to the effect of having to run the task manager to end the IE process. I have tried different browsers in different operating systems, and the only one that’s giving me any trouble is specifically IE in Windows. Other browsers in Windows aren’t having any problems. I have also tried on a few different computers.

The Ajax request itself is fine; I think it’s the hide/show effects that are causing the issue, after a user chooses an answer. The other answers are supposed to go away, and some response text based on the user’s answer appears. Pretty standard. In IE the response text appears, but the other answers don’t go away, and then IE locks hard.

I tried using Firebug Lite, but there’s no way to actually get any feedback from it since IE freezes to such a great extent.

The javascript is below, and the link to the live example IS HERE.

 <script type='text/javascript'>
                $(document).ready(function() {
                        var score=0;

                        $('#getStarted').click(function() {
                                $('#instructions').hide('slow');
                                $('#getStarted').hide('fast');
                                $.ajax({
                                        url: "scripts/quizProgress.php",
                                        data: "questionNumber=1",
                                        success: function(xml) {
                                                        var question = $(xml).find("text:[type=question]").text();
                                                        $('#questionDisplay').append(question);
                                                        $('#questionDisplay').show('slow');
                                                        $(xml).find("answer").each(function() {
                                                                var id = $(this).attr('id');
                                                                var answerText = $(this).find("text").text();
                                                                var tbi = "<p correct='";
                                                                if ($(this).find("correct").text() == '0') {
                                                                        tbi += "no";
                                                                }
                                                                else { tbi += "yes"; }
                                                                tbi += "' id='" + id + "'>" + answerText + "</p>";
                                                                $('#answerDisplay').append(tbi);
                                                                var responseText = $(this).find('response').text();
                                                                var responseInsert = "<p id='re"+id+"' class='hideResponse'>"+responseText+"</p>";
                                                                $('#responseDisplay').append(responseInsert);

                                                        });
                                                        $('#answerDisplay').show('slow');
                                                }


                                });
                        });

     $('#answerDisplay').hover(function() {
                                $(this).find('p').hover(function() {
                                        $(this).addClass("answerHover");
                                        }, function() {
                                        $(this).removeClass('answerHover');
                                });
                                $(this).find('p').click(function() {
                                        if ($(this).attr('correct')=='yes') {
                                        score ++;
                                        }
                                        var answer = $(this).attr('id');
                                        var allAnswers = $('#answerDisplay').find('p');
                                        $(allAnswers).each(function() {
                                                if (answer != $(this).attr('id')) {
                                                        $(this).hide('slow');
                                                }
                                                else {
                                                        $(this).addClass('selectedAnswer');
                                                }
                                        var responseID = "re"+answer;
                                        $('#responseDisplay').find('p').each(function() {
                                                if ($(this).attr('id')==responseID) {
                                                        $(this).removeClass('hideResponse');
                                                        $(this).show('slow');
                                                        $(this).addClass('showResponse');
                                                }
                                        });

                                        });
                                });
                        });

                });

Bear in mind, this is only one question, and does not have full funciontality yet. I’m hesitant to continue while it’s causing this much of an issue in IE. A lot of our clients are…let’s just say not the computer savvy demographic, and IE comprises a lot of their browsers.

Also: this is my first jQuery application, so it may be that I’ve done something absolutely horrible.

Thanks for any help.

Answer 1

I think it might be to do with:

$(this).hide(“slow”);

Your triggering a separate animation for each of your non-selected answers.

I’m not certain, but maybe if you triggered a single .hide() for all of the things you wanted to hide, then it may run faster.

Perhaps you could re-factor your code so that it marks the selected answer first and hides everything else.

Maybe, replace this:

var answer = $(this).attr('id');
var allAnswers = $('#answerDisplay').find('p');
$(allAnswers).each(function() {
    if (answer != $(this).attr('id')) {
        $(this).hide('slow');
    } else {
        $(this).addClass('selectedAnswer');
    }

with this:

$(this).addClass('selectedAnswer');
$('#answerDisplay').find('p').not('.selectedAnswer').hide('slow');

But to be honest I don’t know exactly how the animate works internally, so I’m not entirely sure if this will be faster.