Answers not adding up correctly. I am always getting silver (4/5 correct) when I know all the answers are correct.

Here is my code:

/*

1. Store correct answers
   • When quiz begins, no answers are correct */

/* What is a kind of common household pet that has a wagging tail?

What is a common dry food that these animals are fed?

Where does this animal go to the bathroom?

What do they typically do for exercise?

How long should they exercise every day in minutes?

*/

let correct = 0;

// 2. Store the rank of a player

let rank;

// 3. Select the <main> HTML element

const main = document.querySelector('main');

/*

1. Ask at least 5 questions
   • Store each answer in a variable
   • Keep track of the number of correct answers */

const answer1 = prompt('What is a kind of common household pet that has a wagging tail?');

if (answer1.toUpperCase() === "DOG") { correct += 1; }

const answer2 = prompt('What is a common dry food that these animals are fed?');

if (answer1.toUpperCase() === "KIBBLE") { correct += 1; }

const answer3 = prompt('Where does this animal typically go to the bathroom?');

if (answer3.toUpperCase() === "OUTSIDE") { correct += 1; }

const answer4 = prompt('What do they typically do for exercise?');

if (answer4.toUpperCase() === "WALK") { correct += 1; }

const answer5 = prompt('How long should they exercise every day in minutes?');

if (answer5.toUpperCase() === "THIRTY") { correct += 1; }

/*

1. Rank player based on number of correct answers
   • 5 correct = Gold
   • 3-4 correct = Silver
   • 1-2 correct = Bronze
   • 0 correct = No crown */

if (correct === 5) { rank = "Gold"; } else if (correct >= 3) { rank = "Silver"; } else if (correct >= 1) { rank = "Bronze"; } else { rank = "None :("; }

// 6. Output results to the <main> element

main.innerHTML = <h2> You got ${correct} out of 5 questions correct. </h2> <p>Crown earned: <strong>${rank}</strong></p>;