Обратный отсчет и замена на неправильный ответ

Question

Я делаю приложение для викторины, но не могу понять, как провести определенное мероприятие. В начале я хотел бы показать три сердца, как дань уважения Зельде, затем стереть и добавить 10 сердец. Каждый раз, когда на вопрос дается неправильный ответ, он удаляет сердце и заменяет его пустым. Проблема в том, что я не могу понять, как заставить его добавить в 10 и сделать замены. Любая помощь будет оценена! Спасибо.

const STORE = [
      //Question 1
      {
            question: `Who is the Sage of Shadows in Ocarina of Time?`,
            choices: [
                `Princess Zelda`, 
                `Saria`, 
                `Darunia`, 
                `Impa`],
            answer: `Impa`,
      },
      //Question 2            
      {
            question: `What is the fairies name that follows the Hero in Majora’s Mask?`,
            choices: [
                `Tatl`, 
                `Termina`, 
                `Twinmold`, 
                `Tael`],
            answer: `Tatl`,
      },
      //Question 3            
      {
            question: `What is the first Zelda game that the Hero was an adult the whole game?`,
            choices: [
                `Breath of the Wild`, 
                `Ocarina of Time`, 
                `Twilight Princess`, 
                `Wind Waker`],
            answer: `Twilight Princess`,
            
      },
      //Question 4            
      {
            question: `Finish this quote: “Courage need not be remembered, …”`,
            choices:[
                `for it is never lost.`, 
                `for it is never forgotten.`, 
                `because it is proven.`,
                `for it is always there.`],
            answer:`for it is never forgotten.`,
      },
      //Question 5      
      {
            question: `The Legend of Zelda(NES) is known for being the first video game that…`,
            choices:[
                `had music.`,
                `allowed saving.`, 
                `had color.`, 
                `was released on the NES.`],
            answer: `allowed saving.`,
      },
      //Question 6
      {
            question: `Who is the main antagonist a majority of The Legend of Zelda series?`,
            choices:[`Ganon`, 
            `Zant`, 
            `Ghirahim`, 
            `Majora`],
            answer: `Ganon`,
      },
      //Question 7      
      {
            question: `Which of The Legend of Zelda games was the first to not have the usual main villain?`,
            choices:[`Minish Cap`, `Skyward Sword`, `The Legend of Zelda II`, `Majora’ s Mask`],
            answer: `The Legend of Zelda II`,
      },
      //Question 8
      {
            question:`What is the Hero’ s name ?`,
            choices:[
                `Zelda`, 
                `Link`, 
                `Epona`, 
                `Shiek`
            ],
            answer:`Link`,
      },
      //Question 9
      {
            question: `How many hearts do you need in Breath of the Wild to get the Master Sword?`,
            choices:[`13`, `10`, `20`, `15`],
            answer: `13`,
      },
      //Question 10                  
      {
            question: `Who develops the Legend of Zelda(series)?`,
            choices:[`Sony`, `Microsoft`, `Sega`, `Nintendo`],
            answer:`Nintendo`,
      }
    ];

const OUTCOMES = {
    perfect: {
       message: `You are worthy of holding the Master Sword at it's full power!`,
       endImage: `images/fullpowermastersword.png`
  },

  great: {
       message: `You are worthy of holding the Master Sword but it isn't at it's full potential.`,
       endImage: `images/mastersword.png`
  },

  good: {
       message: `You have drawn the Master Sword but it's damaged.  Return it to the pedastal and try again.`,
       endImage: `images/rustedmastersword.png`
  },

  fail: {
       message: `You are not worthy. Here's a stick.`,
       endImage: `images/treebranch.png`
  },
}

let hearts = 10;
let brokenPots = 0;

function startQuest() {
      $('#quizcontainer').on('click', '.startbutton', function (event) {
            $('#quizcontainer').empty();
            $('.potCounter').empty();
            $('.potCounter').html(`<h1><span>Question:<span class ="brokenPots">0</span>/10</span></h1>`);
            $('.brokenPots').text(1);
            $('.heartcontainer').empty();
            generateHearts();
            $('#quizcontainer').append(generateQuestion());
      });
}

function generateQuestion() {
      if (brokenPots < STORE.length) {
            return generateQuiz(brokenPots);
      } else {
            $('#quizcontiner').empty();
            heartsRemaining();
            $('.brokenPots').text(10);
      }
}

function generateQuiz(questionIndex) {
      let dungeonMaker = $(`<form>
        <fieldset class="choices">
          <legend class="questionText">${STORE[questionIndex].question}</legend><br>
        </fieldset>
      </form>`)

      let fieldFinder = $(dungeonMaker).find('fieldset');

      STORE[questionIndex].choices.forEach(function (choicesValue, choicesIndex) {
            $(`<label class="choices" for="${choicesIndex}">
            <input type="radio" class="select" id="${choicesIndex}" value="${choicesValue}" name="answer" required>
            <span>${choicesValue}</span>
          </label>
          `).appendTo(fieldFinder);
      });
      $(`<br><button type="submit" class="submitButton press">Submit</button >`).appendTo(fieldFinder);
      return dungeonMaker;
}

function submitChoice() {
      $('#quizcontainer').on('submit', function (event) {
            const chosen = $('input:checked');
            const choice = chosen.val();
            const correct = STORE[brokenPots].answer;
            if (choice === correct) {
                  correctChoice();
            } else {
                  wrongChoice();
            }
      });
}

function correctChoice() {
      $('#quizcontainer').empty();
      $('#quizcontainer').append(
            `<h3>Correct!</h3>
            <br>
    <button type="button" class="nextButton press">Next</button>`
      )
}

function wrongChoice() {
      $('#quizcontainer').empty();
      $('#quizcontainer').append(
            `<h3>You took some damage.</h3>
      <span class="next">Correct Answer is:</span>
      <span class="next">${STORE[brokenPots].answer}</span>
      <br>
      <button type="button" class="nextButton press">Next</button>`
      );
      updateHearts();
}

function nextQuestion() {
      $('#quizcontainer').on('click', '.nextButton', function (event) {
            $('#quizcontainer').empty();
            updatePotsBroken();
            $('#quizcontainer').append(generateQuestion());
      });
}

function updatePotsBroken() {
      brokenPots++;
      $('.brokenPots').text(brokenPots + 1);
}

function generateHearts() {
      if ($('.hearts') < hearts) {
            for (i = 1; i <= hearts; i++) {
                  $('.heartcontainer').append(`<img class='hearts' src="images/full.png">`);
            }
      }
}

function updateHearts() {
      hearts--;
      $('.heartcontainer').slice('.hearts').append(`<img class='empty' src = 'images/empty.png'>`);
}

function heartsRemaining() {
      const questResult = countHearts();
      return (`<h1>${questResult.message}</h1>`)
}

function countHearts() {
      if (hearts === 10) {
            return OUTCOMES.perfect;
      } else if (hearts < 9 && hearts >= 7) {
            return OUTCOMES.great;
      } else if (hearts < 6 && hearts >= 3) {
            return OUTCOMES.good;
      } else {
            return OUTCOMES.fail;
      }
}

function restartQuest() {
      hearts = 10;
      brokenPots = 0;
      generateHearts();
      $('.brokenPots').text(0);
}

function handledrawSword() {
      startQuest();
      generateQuestion();
      submitChoice();
      nextQuestion();
      restartQuest();
}

$(handledrawSword);

* {
	box-sizing: border-box;
	border: 0;
	padding: 0;
	margin: 0;
	cursor: url('images/cursor.gif'), auto;
}

html,
body {
	width: 100%;
	height: 100%;
}

body {
	font-size: 20px;
	font-family: 'Roboto', sans-serif;
	font-variant: small-caps;
	background-color: #5A8C58;
	color: #F2C46D;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

main {
	flex-grow: 1;
}

header,
main,
footer {
	flex-shrink: 0;
}

.pagecontainer {
	min-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

main{
	display: flex;
	justify-content:center;
	flex-direction: column;
}

.border{
	margin: 10px 5px 10px 5px;
	border: medium;
	border-style: solid;
	border-color: black;
	background-color:#D9D3B4;
}

.background-image{
	background-image: url("images/shield.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.headercontainer {
	font-family: 'Press Start 2P', cursive;
	font-size: 10px;
	margin: 5px 10px 10px 10px;
}

.heartcontainer{
	min-height: 35px;
}

.empty,
.hearts{
	margin: 7px 0px 0px 0px;
	height:20px;
}

#quizcontainer{
	display: flex;	
	justify-content: center;
	align-items: center;
	flex-flow: column;
	min-width: 300px;
	min-height: 300px;
}

.choices
{
	display: block;
}

.centercontainer{
	display: flex;
	justify-content:center;
	flex-direction: row;
	margin: 10px 0px 10px 0px;
}

.contactcontainer{
	display: flex;
	max-width: 500px;
	flex-flow: row wrap;
	justify-content: center;
	align-content: center;
	list-style: none;
}

.contactinfo {
	height: 30px;
	width: 30px;
	margin: 0px 25px 0px 25px;
}

.press{	
	font-family: 'Roboto', sans-serif;
	font-variant: small-caps;
	font-size: 20px;
	width: 4em;
	height: 2em;
	border: 3px;
	border-style: outset;	
	color: #F2C46D;
	background-color:#E8591A;
	margin: 5px 0px 5px 0px;
}

.press:active{
	border: 3px;
	border-style: inset;
}

.press:hover {	
	background-color:#BD4715;
}

@media only screen and (min-width: 540px) {}

@media only screen and (min-width: 769px) {

	main{
		display: flex;
		justify-content:center;
		flex-direction: column;
		min-width: 770px;
		min-height: 770px;
	}

}

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
   <link rel="stylesheet" type="text/css" href="style.css" />
   <link href="https://fonts.googleapis.com/css?family=Press+Start+2P|Roboto:700&display=swap" rel="stylesheet">
   <title>Legend of Zelda: Quiz</title>
</head>

<body>
   <div class="pagecontainer">

      <main>

         <div class="count border">
            <header>
               <div class="headercontainer potCounter">
                  <br>
                  <h1>Are you Worthy of the Master Sword?</h1>
               </div>
            </header>
         </div>

         <div class="health border">
            <section>
               <div class="heartcontainer">
                  <img src=images/full.png class='empty'>
                  <img src=images/full.png class='empty'>
                  <img src=images/full.png class='empty'>
               </div>
            </section>
         </div>

         <div class="quiz border background-image">
            <section>
               <div id="quizcontainer">
                  <div class="startcontainer">
                     <span>
                        Test your knowlodge on "The Legend Zelda Series" to see if you are worthy of
                        wielding the Master Sword!
                     </span>
                     <br>
                     <br>
                     <button class="press startbutton">Start</button>
                  </div>
            </section>
         </div>
      
      </main>

      <footer>
         
         <div class="centercontainer">
            <div class="border">
               <ul class="contactcontainer">
                  <li><a href="mailto:#" target="_top"><img src="images/email.png"
                           class="contactinfo" alt="Email Icon" /></a></li>
                  <li><a href="#" target="_blank"><img src="images/webpage.png" class="contactinfo"
                           alt="Website Icon" /></a></li>
                  <li><a href="#" target="_blank"><img
                           src="images/linkedin.png" class="contactinfo" alt="LinkedIn Icon" /></a></li>
               </ul>
            </div>
         </div>
      
      </footer>

      <script src="https://code.jquery.com/jquery-3.4.1.js"
         integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
      <script src="STORE.js"></script>
      <script src="script.js"></script>

   </div>
</body>

</html>

Answer 1

Чтобы попытаться вам помочь, я поменял ваши иконки на шрифтовые. Не потому, что это ошибка использования изображений, а потому, что я не вижу ваши изображения.

Я работал в основном в 2 функциях:

Эта:

function generateHearts() {
      if ($('.hearts') < hearts) {
            for (i = 1; i <= hearts; i++) {
                  $('.heartcontainer').append(`<img class='hearts' src="images/full.png">`);
            }
      }
}

Это становится:

function generateHearts(number) {
      for (i = 1; i <= number; i++) {
            $('.heartcontainer').append(`<i class="fa fa-heart" aria-hidden="true"></i>`);
      }
}

Как вы видите, я передаю в качестве аргумента количество сердец: 3 во время презентации игры, 10. когда она начинается.

Вторая функция такова:

function updateHearts() {
      hearts--;
      $('.heartcontainer').slice('.hearts').append(`<img class='empty' src = 'images/empty.png'>`);
}

, который становится:

function updateHearts(answer) {
      if(!answer) {
         $(`.heartcontainer i:nth-child(${brokenPots + 1})`).removeClass("fa-heart").addClass("fa-heart-o");
         hearts--;
      }
}

Также здесь я передаю аргумент (если ответ правильный или нет). Если это не так, я меняю сердце на пустое (используя другой класс). Номер сердца, которое я изменяю, совпадает с вопросом: ${brokenPots + 1}

Это код в действии:

const STORE = [
      //Question 1
      {
            question: `Who is the Sage of Shadows in Ocarina of Time?`,
            choices: [
                `Princess Zelda`, 
                `Saria`, 
                `Darunia`, 
                `Impa`],
            answer: `Impa`,
      },
      //Question 2            
      {
            question: `What is the fairies name that follows the Hero in Majora’s Mask?`,
            choices: [
                `Tatl`, 
                `Termina`, 
                `Twinmold`, 
                `Tael`],
            answer: `Tatl`,
      },
      //Question 3            
      {
            question: `What is the first Zelda game that the Hero was an adult the whole game?`,
            choices: [
                `Breath of the Wild`, 
                `Ocarina of Time`, 
                `Twilight Princess`, 
                `Wind Waker`],
            answer: `Twilight Princess`,
            
      },
      //Question 4            
      {
            question: `Finish this quote: “Courage need not be remembered, …”`,
            choices:[
                `for it is never lost.`, 
                `for it is never forgotten.`, 
                `because it is proven.`,
                `for it is always there.`],
            answer:`for it is never forgotten.`,
      },
      //Question 5      
      {
            question: `The Legend of Zelda(NES) is known for being the first video game that…`,
            choices:[
                `had music.`,
                `allowed saving.`, 
                `had color.`, 
                `was released on the NES.`],
            answer: `allowed saving.`,
      },
      //Question 6
      {
            question: `Who is the main antagonist a majority of The Legend of Zelda series?`,
            choices:[`Ganon`, 
            `Zant`, 
            `Ghirahim`, 
            `Majora`],
            answer: `Ganon`,
      },
      //Question 7      
      {
            question: `Which of The Legend of Zelda games was the first to not have the usual main villain?`,
            choices:[`Minish Cap`, `Skyward Sword`, `The Legend of Zelda II`, `Majora’ s Mask`],
            answer: `The Legend of Zelda II`,
      },
      //Question 8
      {
            question:`What is the Hero’ s name ?`,
            choices:[
                `Zelda`, 
                `Link`, 
                `Epona`, 
                `Shiek`
            ],
            answer:`Link`,
      },
      //Question 9
      {
            question: `How many hearts do you need in Breath of the Wild to get the Master Sword?`,
            choices:[`13`, `10`, `20`, `15`],
            answer: `13`,
      },
      //Question 10                  
      {
            question: `Who develops the Legend of Zelda(series)?`,
            choices:[`Sony`, `Microsoft`, `Sega`, `Nintendo`],
            answer:`Nintendo`,
      }
    ];

const OUTCOMES = {
    perfect: {
       message: `You are worthy of holding the Master Sword at it's full power!`,
       endImage: `images/fullpowermastersword.png`
  },

  great: {
       message: `You are worthy of holding the Master Sword but it isn't at it's full potential.`,
       endImage: `images/mastersword.png`
  },

  good: {
       message: `You have drawn the Master Sword but it's damaged.  Return it to the pedastal and try again.`,
       endImage: `images/rustedmastersword.png`
  },

  fail: {
       message: `You are not worthy. Here's a stick.`,
       endImage: `images/treebranch.png`
  },
}

let hearts = 10;
let brokenPots = 0;

function startQuest() {
      $('#quizcontainer').on('click', '.startbutton', function (event) {
            $('#quizcontainer').empty();
            $('.potCounter').empty();
            $('.potCounter').html(`<h1><span>Question:<span class ="brokenPots">0</span>/10</span></h1>`);
            $('.brokenPots').text(1);
            $('.heartcontainer').empty();
            generateHearts(10);
            $('#quizcontainer').append(generateQuestion());
      });
}

function generateQuestion() {
      if (brokenPots < STORE.length) {
            return generateQuiz(brokenPots);
      } else {
            $('#quizcontiner').empty();
            heartsRemaining();
            $('.brokenPots').text(10);
      }
}

function generateQuiz(questionIndex) {
      let dungeonMaker = $(`<form>
        <fieldset class="choices">
          <legend class="questionText">${STORE[questionIndex].question}</legend><br>
        </fieldset>
      </form>`)

      let fieldFinder = $(dungeonMaker).find('fieldset');

      STORE[questionIndex].choices.forEach(function (choicesValue, choicesIndex) {
            $(`<label class="choices" for="${choicesIndex}">
            <input type="radio" class="select" id="${choicesIndex}" value="${choicesValue}" name="answer" required>
            <span>${choicesValue}</span>
          </label>
          `).appendTo(fieldFinder);
      });
      $(`<br><button type="submit" class="submitButton press">Submit</button >`).appendTo(fieldFinder);
      return dungeonMaker;
}

function submitChoice() {
      $('#quizcontainer').on('submit', function (event) {
            const chosen = $('input:checked');
            const choice = chosen.val();
            const correct = STORE[brokenPots].answer;
            if (choice === correct) {
                  correctChoice();
            } else {
                  wrongChoice();
            }
      });
}

function correctChoice() {
      $('#quizcontainer').empty();
      $('#quizcontainer').append(
            `<h3>Correct!</h3>
            <br>
    <button type="button" class="nextButton press">Next</button>`
      )
      updateHearts(true);
}

function wrongChoice() {
      $('#quizcontainer').empty();
      $('#quizcontainer').append(
            `<h3>You took some damage.</h3>
      <span class="next">Correct Answer is:</span>
      <span class="next">${STORE[brokenPots].answer}</span>
      <br>
      <button type="button" class="nextButton press">Next</button>`
      );
      updateHearts(false);
}

function nextQuestion() {
      $('#quizcontainer').on('click', '.nextButton', function (event) {
            $('#quizcontainer').empty();
            updatePotsBroken();
            $('#quizcontainer').append(generateQuestion());
      });
}

function updatePotsBroken() {
      brokenPots++;
      $('.brokenPots').text(brokenPots + 1);
}

function generateHearts(number) {
      for (i = 1; i <= number; i++) {
            $('.heartcontainer').append(`<i class="fa fa-heart" aria-hidden="true"></i>`);
      }
}

function updateHearts(answer) {
      if(!answer) {
         $(`.heartcontainer i:nth-child(${brokenPots + 1})`).removeClass("fa-heart").addClass("fa-heart-o");
         hearts--;
      }
}

function heartsRemaining() {
      const questResult = countHearts();

      $("#quizcontainer").append(`<h1>${questResult.message}</h1>`);
      //return (`<h1>${questResult.message}</h1>`)
}

function countHearts() {
      if (hearts === 10) {
            return OUTCOMES.perfect;
      } else if (hearts < 9 && hearts >= 7) {
            return OUTCOMES.great;
      } else if (hearts < 6 && hearts >= 3) {
            return OUTCOMES.good;
      } else {
            return OUTCOMES.fail;
      }
}

function restartQuest() {
      hearts = 10;
      brokenPots = 0;
      generateHearts(3);
      $('.brokenPots').text(0);
}

function handledrawSword() {
      startQuest();
      generateQuestion();
      submitChoice();
      nextQuestion();
      restartQuest();
}

$(handledrawSword);

* {
   box-sizing: border-box;
   border: 0;
   padding: 0;
   margin: 0;
   cursor: url('images/cursor.gif'), auto;
}

html,
body {
   width: 100%;
   height: 100%;
}

body {
   font-size: 20px;
   font-family: 'Roboto', sans-serif;
   font-variant: small-caps;
   background-color: #5A8C58;
   color: #F2C46D;
   text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

main {
   flex-grow: 1;
}

header,
main,
footer {
   flex-shrink: 0;
}

.pagecontainer {
   min-height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
}

main{
   display: flex;
   justify-content:center;
   flex-direction: column;
}

.border{
   margin: 10px 5px 10px 5px;
   border: medium;
   border-style: solid;
   border-color: black;
   background-color:#D9D3B4;
}

.background-image{
   background-image: url("images/shield.png");
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
}

.headercontainer {
   font-family: 'Press Start 2P', cursive;
   font-size: 10px;
   margin: 5px 10px 10px 10px;
}

.heartcontainer{
   min-height: 35px;
}

.empty, .hearts{
   margin: 7px 0px 0px 0px;
   height:20px;
}

#quizcontainer{
   display: flex; 
   justify-content: center;
   align-items: center;
   flex-flow: column;
   min-width: 300px;
   min-height: 300px;
}

.choices{
   display: block;
}

.centercontainer{
   display: flex;
   justify-content:center;
   flex-direction: row;
   margin: 10px 0px 10px 0px;
}

.contactcontainer{
   display: flex;
   max-width: 500px;
   flex-flow: row wrap;
   justify-content: center;
   align-content: center;
   list-style: none;
}

.contactinfo {
   height: 30px;
   width: 30px;
   margin: 0px 25px 0px 25px;
}

.press{  
   font-family: 'Roboto', sans-serif;
   font-variant: small-caps;
   font-size: 20px;
   width: 4em;
   height: 2em;
   border: 3px;
   border-style: outset;   
   color: #F2C46D;
   background-color:#E8591A;
   margin: 5px 0px 5px 0px;
}

.press:active{
   border: 3px;
   border-style: inset;
}

.press:hover { 
   background-color:#BD4715;
}

@media only screen and (min-width: 769px) {
   main{
      display: flex;
      justify-content:center;
      flex-direction: column;
      min-width: 770px;
      min-height: 770px;
   }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
   <div class="pagecontainer">

      <main>
<div class="count border">
            <header>
               <div class="headercontainer potCounter">
                  <br>
                  <h1>Are you Worthy of the Master Sword?</h1>
               </div>
            </header>
         </div>

         <div class="health border">
            <section>
               <div class="heartcontainer">
               </div>
            </section>
         </div>

         <div class="quiz border background-image">
            <section>
               <div id="quizcontainer">
                  <div class="startcontainer">
                     <span>
                        Test your knowlodge on "The Legend Zelda Series" to see if you are worthy of
                        wielding the Master Sword!
                     </span>
                     <br>
                     <br>
                     <button class="press startbutton">Start</button>
                  </div>
            </section>
         </div>
      </main>

      <footer>
         <div class="centercontainer">
            <div class="border">
               <ul class="contactcontainer">
                  <li><a href="mailto:#" target="_top"><img src="images/email.png"
                           class="contactinfo" alt="Email Icon" /></a></li>
                  <li><a href="#" target="_blank"><img src="images/webpage.png" class="contactinfo"
                           alt="Website Icon" /></a></li>
                  <li><a href="#" target="_blank"><img
                           src="images/linkedin.png" class="contactinfo" alt="LinkedIn Icon" /></a></li>
               </ul>
            </div>
         </div>
</footer>
      <script src="https://code.jquery.com/jquery-3.4.1.js"
         integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>

   </div>

РЕДАКТИРОВАТЬ 1 Некоторые изменения в управлении изображениями, а не шрифтом. В этом фрагменте вы не видите изменения изображений, но если вы скопируете и вставите этот код, они будут работать. Также будьте осторожны с HTML: я удалил все сердца из div heartcontainer: они добавляются на лету с помощью скрипта.

const STORE = [
      //Question 1
      {
            question: `Who is the Sage of Shadows in Ocarina of Time?`,
            choices: [
                `Princess Zelda`, 
                `Saria`, 
                `Darunia`, 
                `Impa`],
            answer: `Impa`,
      },
      //Question 2            
      {
            question: `What is the fairies name that follows the Hero in Majora’s Mask?`,
            choices: [
                `Tatl`, 
                `Termina`, 
                `Twinmold`, 
                `Tael`],
            answer: `Tatl`,
      },
      //Question 3            
      {
            question: `What is the first Zelda game that the Hero was an adult the whole game?`,
            choices: [
                `Breath of the Wild`, 
                `Ocarina of Time`, 
                `Twilight Princess`, 
                `Wind Waker`],
            answer: `Twilight Princess`,
            
      },
      //Question 4            
      {
            question: `Finish this quote: “Courage need not be remembered, …”`,
            choices:[
                `for it is never lost.`, 
                `for it is never forgotten.`, 
                `because it is proven.`,
                `for it is always there.`],
            answer:`for it is never forgotten.`,
      },
      //Question 5      
      {
            question: `The Legend of Zelda(NES) is known for being the first video game that…`,
            choices:[
                `had music.`,
                `allowed saving.`, 
                `had color.`, 
                `was released on the NES.`],
            answer: `allowed saving.`,
      },
      //Question 6
      {
            question: `Who is the main antagonist a majority of The Legend of Zelda series?`,
            choices:[`Ganon`, 
            `Zant`, 
            `Ghirahim`, 
            `Majora`],
            answer: `Ganon`,
      },
      //Question 7      
      {
            question: `Which of The Legend of Zelda games was the first to not have the usual main villain?`,
            choices:[`Minish Cap`, `Skyward Sword`, `The Legend of Zelda II`, `Majora’ s Mask`],
            answer: `The Legend of Zelda II`,
      },
      //Question 8
      {
            question:`What is the Hero’ s name ?`,
            choices:[
                `Zelda`, 
                `Link`, 
                `Epona`, 
                `Shiek`
            ],
            answer:`Link`,
      },
      //Question 9
      {
            question: `How many hearts do you need in Breath of the Wild to get the Master Sword?`,
            choices:[`13`, `10`, `20`, `15`],
            answer: `13`,
      },
      //Question 10                  
      {
            question: `Who develops the Legend of Zelda(series)?`,
            choices:[`Sony`, `Microsoft`, `Sega`, `Nintendo`],
            answer:`Nintendo`,
      }
    ];

const OUTCOMES = {
    perfect: {
       message: `You are worthy of holding the Master Sword at it's full power!`,
       endImage: `images/fullpowermastersword.png`
  },

  great: {
       message: `You are worthy of holding the Master Sword but it isn't at it's full potential.`,
       endImage: `images/mastersword.png`
  },

  good: {
       message: `You have drawn the Master Sword but it's damaged.  Return it to the pedastal and try again.`,
       endImage: `images/rustedmastersword.png`
  },

  fail: {
       message: `You are not worthy. Here's a stick.`,
       endImage: `images/treebranch.png`
  },
}

let hearts = 10;
let brokenPots = 0;

function startQuest() {
      $('#quizcontainer').on('click', '.startbutton', function (event) {
            $('#quizcontainer').empty();
            $('.potCounter').empty();
            $('.potCounter').html(`<h1><span>Question:<span class ="brokenPots">0</span>/10</span></h1>`);
            $('.brokenPots').text(1);
            $('.heartcontainer').empty();
            generateHearts(10);
            $('#quizcontainer').append(generateQuestion());
      });
}

function generateQuestion() {
      if (brokenPots < STORE.length) {
            return generateQuiz(brokenPots);
      } else {
            $('#quizcontiner').empty();
            heartsRemaining();
            $('.brokenPots').text(10);
      }
}

function generateQuiz(questionIndex) {
      let dungeonMaker = $(`<form>
        <fieldset class="choices">
          <legend class="questionText">${STORE[questionIndex].question}</legend><br>
        </fieldset>
      </form>`)

      let fieldFinder = $(dungeonMaker).find('fieldset');

      STORE[questionIndex].choices.forEach(function (choicesValue, choicesIndex) {
            $(`<label class="choices" for="${choicesIndex}">
            <input type="radio" class="select" id="${choicesIndex}" value="${choicesValue}" name="answer" required>
            <span>${choicesValue}</span>
          </label>
          `).appendTo(fieldFinder);
      });
      $(`<br><button type="submit" class="submitButton press">Submit</button >`).appendTo(fieldFinder);
      return dungeonMaker;
}

function submitChoice() {
      $('#quizcontainer').on('submit', function (event) {
            const chosen = $('input:checked');
            const choice = chosen.val();
            const correct = STORE[brokenPots].answer;
            if (choice === correct) {
                  correctChoice();
            } else {
                  wrongChoice();
            }
      });
}

function correctChoice() {
      $('#quizcontainer').empty();
      $('#quizcontainer').append(
            `<h3>Correct!</h3>
            <br>
    <button type="button" class="nextButton press">Next</button>`
      )
      updateHearts(true);
}

function wrongChoice() {
      $('#quizcontainer').empty();
      $('#quizcontainer').append(
            `<h3>You took some damage.</h3>
      <span class="next">Correct Answer is:</span>
      <span class="next">${STORE[brokenPots].answer}</span>
      <br>
      <button type="button" class="nextButton press">Next</button>`
      );
      updateHearts(false);
}

function nextQuestion() {
      $('#quizcontainer').on('click', '.nextButton', function (event) {
            $('#quizcontainer').empty();
            updatePotsBroken();
            $('#quizcontainer').append(generateQuestion());
      });
}

function updatePotsBroken() {
      brokenPots++;
      $('.brokenPots').text(brokenPots + 1);
}

function generateHearts(number) {
      for (i = 1; i <= number; i++) {
            $('.heartcontainer').append(`<img src=images/full.png class='fullheart'>`);
      }
}

function updateHearts(answer) {
      if(!answer) {
         $(`.fullheart:nth-child(${brokenPots + 1})`).attr("src","images/empty.png");
         hearts--;
      }
}

function heartsRemaining() {
      const questResult = countHearts();

      $("#quizcontainer").append(`<h1>${questResult.message}</h1>`);
      //return (`<h1>${questResult.message}</h1>`)
}

function countHearts() {
      if (hearts === 10) {
            return OUTCOMES.perfect;
      } else if (hearts < 9 && hearts >= 7) {
            return OUTCOMES.great;
      } else if (hearts < 6 && hearts >= 3) {
            return OUTCOMES.good;
      } else {
            return OUTCOMES.fail;
      }
}

function restartQuest() {
      hearts = 10;
      brokenPots = 0;
      generateHearts(3);
      $('.brokenPots').text(0);
}

function handledrawSword() {
      startQuest();
      generateQuestion();
      submitChoice();
      nextQuestion();
      restartQuest();
}

$(handledrawSword);

* {
    box-sizing: border-box;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: url('images/cursor.gif'), auto;
}

html,
body {
    width: 100%;
    height: 100%;
}

body {
    font-size: 20px;
    font-family: 'Roboto', sans-serif;
    font-variant: small-caps;
    background-color: #5A8C58;
    color: #F2C46D;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

main {
    flex-grow: 1;
}

header,
main,
footer {
    flex-shrink: 0;
}

.pagecontainer {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

main{
    display: flex;
    justify-content:center;
    flex-direction: column;
}

.border{
    margin: 10px 5px 10px 5px;
    border: medium;
    border-style: solid;
    border-color: black;
    background-color:#D9D3B4;
}

.background-image{
    background-image: url("images/shield.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.headercontainer {
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    margin: 5px 10px 10px 10px;
}

.heartcontainer{
    min-height: 35px;
}

.emptyheart, .fullheart{
    margin: 7px 0px 0px 0px;
    height:20px;
}

#quizcontainer{
    display: flex;  
    justify-content: center;
    align-items: center;
    flex-flow: column;
    min-width: 300px;
    min-height: 300px;
}

.choices{
    display: block;
}

.centercontainer{
    display: flex;
    justify-content:center;
    flex-direction: row;
    margin: 10px 0px 10px 0px;
}

.contactcontainer{
    display: flex;
    max-width: 500px;
    flex-flow: row wrap;
    justify-content: center;
    align-content: center;
    list-style: none;
}

.contactinfo {
    height: 30px;
    width: 30px;
    margin: 0px 25px 0px 25px;
}

.press{ 
    font-family: 'Roboto', sans-serif;
    font-variant: small-caps;
    font-size: 20px;
    width: 4em;
    height: 2em;
    border: 3px;
    border-style: outset;   
    color: #F2C46D;
    background-color:#E8591A;
    margin: 5px 0px 5px 0px;
}

.press:active{
    border: 3px;
    border-style: inset;
}

.press:hover {  
    background-color:#BD4715;
}

@media only screen and (min-width: 769px) {
    main{
        display: flex;
        justify-content:center;
        flex-direction: column;
        min-width: 770px;
        min-height: 770px;
    }
}

<div class="pagecontainer">
      <main>
         <div class="count border">
            <header>
               <div class="headercontainer potCounter">
                  <br>
                  <h1>Are you Worthy of the Master Sword?</h1>
               </div>
            </header>
         </div>
         <div class="health border">
            <section>
               <div class="heartcontainer">
               </div>
            </section>
         </div>
         <div class="quiz border background-image">
            <section>
               <div id="quizcontainer">
                  <div class="startcontainer">
                     <span>
                        Test your knowlodge on "The Legend Zelda Series" to see if you are worthy of
                        wielding the Master Sword!
                     </span>
                     <br>
                     <br>
                     <button class="press startbutton">Start</button>
                  </div>
            </section>
         </div>
      </main>

      <footer>
         <div class="centercontainer">
            <div class="border">
               <ul class="contactcontainer">
                  <li><a href="mailto:#" target="_top"><img src="images/email.png"
                           class="contactinfo" alt="Email Icon" /></a></li>
                  <li><a href="#" target="_blank"><img src="images/webpage.png" class="contactinfo"
                           alt="Website Icon" /></a></li>
                  <li><a href="#" target="_blank"><img
                           src="images/linkedin.png" class="contactinfo" alt="LinkedIn Icon" /></a></li>
               </ul>
            </div>
         </div>
      </footer>
      <script src="https://code.jquery.com/jquery-3.4.1.js"
         integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>

   </div>