CODEWITHSUNDEEP
javascript
Joseph Kelly
Joseph Kelly

Reputation: 1

Two sounds playing at once in if statement in javascript

I'm making a quiz website and im currently writing a function that determines if a given answer is correct or not. I have 2 different sounds, one for correct and one for incorrect, and sometimes they play at the same time. For example, if i get the 1st question correct it plays only the correct sound, but then if i get the second question incorrect it plays both and then continues to play both for the remaining 3 questions. I'm relatively new to javascript and have no clue why its doing this. Here is the code that im having trouble with: 

function correctOrIncorrect() {
    score = 0;
    var audioCorrect = new Audio('assets/audio/correct.mp3');
    var audioIncorrect = new Audio('assets/audio/incorrect.mp3');

    if (amount == 5 ) {
        if (document.querySelector('input[name="answer-1"]:checked').value === myQuestions[0].correct_answer) {
            score++;
            audioCorrect.play();
        } else {
            audioIncorrect.play();
        }
        if (document.querySelector('input[name="answer-2"]:checked').value === myQuestions[1].correct_answer) {
            score++;
            audioCorrect.play();
        } else {
            audioIncorrect.play();
        }
        if (document.querySelector('input[name="answer-3"]:checked').value === myQuestions[2].correct_answer) {
            score++;
            audioCorrect.play();
        } else {
            audioIncorrect.play();
        }
        if (document.querySelector('input[name="answer-4"]:checked').value === myQuestions[3].correct_answer) {
            score++;
            audioCorrect.play();
        } else {
            audioIncorrect.play();
        }
        if (document.querySelector('input[name="answer-5"]:checked').value === myQuestions[4].correct_answer) {
            score++;
            audioCorrect.play();
        } else {
            audioIncorrect.play();
        }
    }

Any help is really appreciated and thank you in advance.

Upvotes: 0

Views: 61

Answers (2)

jeprubio
jeprubio

Reputation: 18012

That's because if you answer 1 incorrect and 2 correct the way you have done it will play incorrect for 1 and correct for 2 at the same time. And you are checking all the answers at the same time.

You could play the correct tone if all the answers are correct ant the incorrect tone otherwise:

var audioCorrect = new Audio('assets/audio/correct.mp3');
var audioIncorrect = new Audio('assets/audio/incorrect.mp3');

function correctOrIncorrect() {
    score = 0;
    if (amount == 5) {
        for (i = 0; i < amount; i++) {
           if (document.querySelector('input[name="answer-' + (i + 1) + '"]:checked').value === myQuestions[i].correct_answer) {
              score++;
           }
        }
        if (score >= amount) {
            audioCorrect.play();
        } else {
            audioIncorrect.play();
        }
    }
}

Upvotes: 2

gaganshera
gaganshera

Reputation: 2639

Each time you call the function correctOrIncorrect, it checks all answers again. So it will produce a sound for all the previous as well as current answers.

You should pass for eg. a question id in the function correctOrIncorrect and check the result for only that question's answer.

Something like

var score = 0;
function correctOrIncorrect(questionId) {
    var audioCorrect = new Audio('assets/audio/correct.mp3');
    var audioIncorrect = new Audio('assets/audio/incorrect.mp3');

    if (amount == 5 ) {
        if (document.querySelector('input[name="answer-'+questionId+'"]:checked').value === myQuestions[questionId].correct_answer) {
            score++;
            audioCorrect.play();
        } else {
            audioIncorrect.play();
        }
    }

And moving score out of the function so that you can still maintain score correctly. I'm not sure what you're using amount for.

Upvotes: 3

Related Questions