Question

I have a div that contains questions

Questions 2:
What is the square root of 16?

A. 7
B. 5
C. 4
D. 1

I need to make it so when an answer choice is selected, it slides up and shows:

QUESTION 2: Correct! (Or Incorrect!)

I have it all working using the Javascript here:

function finalizeAnswer(bttn,c,questionId) {
    if (c) {
        bttn.parentNode.style.backgroundColor="lightgreen";
        bttn.parentNode.innerHTML="<b>QUESTION "+(questionId+1)+":</b> Correct!";
    } else {
        bttn.parentNode.style.backgroundColor="pink";
        bttn.parentNode.innerHTML="<b>QUESTION "+(questionId+1)+":</b> Wrong!";
    }
    updateScore();
}

The div resizes because its contents are different (no longer a long question, just a short response). Would it be possible to replace something in here to make it slide up instead of just popping up?

Just for reference for the function I included:

bttn -> The button that was pressed. (A, B, C, or D)

c -> If the answer was correct

questionId -> Used to get data about the question.

updateScore(); -> just a function that updates the score on the quiz.

Answer 1

This solution uses jQuery to animate the change in height.

EDIT: I’ve updated this to use the true new height instead of a magically guessed at 24px.

See Live Demo on jsFiddle

function displayResult(container, correct, questionId){ 

    // Keep up with the old height
    var oldHeight = $(container).height();

    // Change the contents
    $(container).css('background-color', correct == true ? 'lightgreen' : 'pink');
    $(container).html("<b>QUESTION " + (questionId+ 1) + ":</b> " + (correct == true ? "Correct!" : "Wrong!"));    

    // Capture the new height
    var newHeight = $(container).height();

    // Jump back to the old height and then animate to the new
    $(container).css('height', oldHeight);
    $(container).animate({height:newHeight});
}

function finalizeAnswer(bttn,c,questionId) {
    displayResult(bttn.parentNode, c, questionId);

    // I have commented out the call to updateScore since I don't have it
    //updateScore();
}