${...} not working

Here is my code. Almost everything works with the exception for ${rank} and ${score} as it doesn't show the result for "rank" or "score" but the "${rank}" phrase. I don't know what I need to change to make it work. Can you please help?

/*

1. Store correct answers
   • When quiz begins, no answers are correct */ let score = 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 */ let Q1 = prompt('What is my name?'); let Q2 = prompt('How old am I?'); let Q3 = prompt('What is the color of my hair?'); let Q4 = prompt('What is the name of my dog?'); let Q5 = prompt('Which programming language am I learning now?');

if (Q1.toUpperCase() === 'OLA') { score += 1; }

if (Q2.toUpperCase() === '37') { score += 1; }

if (Q3.toUpperCase() === 'RED') { score += 1; }

if (Q4.toUpperCase() === 'WHISKY') { score += 1; }

if (Q5.toUpperCase() === 'JAVASCRIPT') { score += 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 (score === 5) { rank = 'Gold'; } else if (score === 4 || score === 3) { rank = 'Silver'; } else if (score === 2 || score === 1) { rank = 'Bronze'; } else { rank = 'No crown'; }

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

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

// I added console.log to check if the code is working and it is, it is just not showing the ${score} correctly and I don't know why...

console.log ('You got ${score} out of 5 questions correct. Crown earned: ${rank}');

console.log (score); console.log (rank);