Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Categories

How to add an "moving graphic" to a quiz?

Ren SosaRen Sosa Member Posts: 8

I am creating a Quiz and I want a sign that will move only if the user scores 100. Sometime like "congratulation you score 100!" but only if it gets 100.

This is my code but I don't know how to include an animation if the user scores 100

(function() {
var questions = [{
question: "My AC unit filter needs to be replace every _____ months",
choices: [6, 3, 2,],
correctAnswer: 2
}, {
question: "My AC unit needs a tune up every ______months",
choices: [3, 12, 24, ],
correctAnswer: 1
}, {
question: "I should have my unit check _____ times a year",
choices: [2, 1, 5,],
correctAnswer: 0
},
];

var questionCounter = 0; //Tracks question number
var selections = []; //Array containing user choices
var quiz = $('#quiz'); //Quiz div object

// Display initial question
displayNext();

// Click handler for the 'next' button
$('#next').on('click', function (e) {
e.preventDefault();

// Suspend click listener during fade animation
if(quiz.is(':animated')) {        
  return false;
}
choose();

// If no user selection, progress is stopped
if (isNaN(selections[questionCounter])) {
  alert('Please make a selection!');
} else {
  questionCounter++;
  displayNext();
}

});

// Click handler for the 'prev' button
$('#prev').on('click', function (e) {
e.preventDefault();

if(quiz.is(':animated')) {
  return false;
}
choose();
questionCounter--;
displayNext();

});

// Click handler for the 'Start Over' button
$('#start').on('click', function (e) {
e.preventDefault();

if(quiz.is(':animated')) {
  return false;
}
questionCounter = 0;
selections = [];
displayNext();
$('#start').hide();

});

// Animates buttons on hover
$('.button').on('mouseenter', function () {
$(this).addClass('active');
});
$('.button').on('mouseleave', function () {
$(this).removeClass('active');
});

// Creates and returns the div that contains the questions and
// the answer selections
function createQuestionElement(index) {
var qElement = $('

<

div>', {
id: 'question'
});

var header = $('<h2>Question ' + (index + 1) + ':</h2>');
qElement.append(header);

var question = $('<p>').append(questions[index].question);
qElement.append(question);

var radioButtons = createRadios(index);
qElement.append(radioButtons);

return qElement;

}

// Creates a list of the answer choices as radio inputs
function createRadios(index) {
var radioList = $('

<

ul>');
var item;
var input = '';
for (var i = 0; i < questions[index].choices.length; i++) {
item = $('

');
input = '';
input += questions[index].choices[i];
item.append(input);
radioList.append(item);
}
return radioList;
}

// Reads the user selection and pushes the value to an array
function choose() {
selections[questionCounter] = +$('input[name="answer"]:checked').val();
}

// Displays next requested element
function displayNext() {
quiz.fadeOut(function() {
$('#question').remove();

  if(questionCounter < questions.length){
    var nextQuestion = createQuestionElement(questionCounter);
    quiz.append(nextQuestion).fadeIn();
    if (!(isNaN(selections[questionCounter]))) {
      $('input[value='+selections[questionCounter]+']').prop('checked', true);
    }

    // Controls display of 'prev' button
    if(questionCounter === 1){
      $('#prev').show();
    } else if(questionCounter === 0){

      $('#prev').hide();
      $('#next').show();
    }
  }else {
    var scoreElem = displayScore();
    quiz.append(scoreElem).fadeIn();
    $('#next').hide();
    $('#prev').hide();
    $('#start').show();
  }
});

}

// Computes score and returns a paragraph element to be displayed
function displayScore() {
var score = $('

<

p>',{id: 'question'});

var numCorrect = 0;
for (var i = 0; i < selections.length; i++) {
  if (selections[i] === questions[i].correctAnswer) {
    numCorrect++;
  }
}

score.append('You got ' + numCorrect + ' questions out of ' +
             questions.length + ' right!!!');
return score;

}
})();

Sign In or Register to comment.