<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Hina+Mincho&display=swap" rel="stylesheet">
<body>
  <h1>
    Monty Python and the Holy Grail
    <br>
    "Bridge of Death" Quiz
  </h1>
  
  <h2 id="crossMessage">Select Your Knight</h2>
  <p id="displayQuestion"></p>
  <div class="quizcontainer">
    <div class="innerquizcontainer">
      <button id="robin">Sir Robin</button>
      <button id="arthur">Sir Arthur</button>
      <button id="galahad">Sir Galahad</button>
    </div>
  </div>
    <div class="tailendcontainer">
    </div>
    <div class="footercontainer">
        <hr>
        <p>Ayla Yersel 2021 | All Rights Reserved</p>
        <p>Made with ❤️ by a coding librarian</p>
    </div>
</body>

body {
  font-family : Hina Mincho;
  
}

h1 {
  text-align  : center;
  font-size : 40px;
  padding :3em;
  text-decoration : underline lightgray 5px;
}

.quizcontainer {
  display : inline-flex;
  justify-content : center;
  width : 100%;
}

.innerquizcontainer {
  display : block;
  width : 50%;
}

h2 {
  text-align : center;
  font-size : 40px;
}

button {
  background-color : white;
  border : solid lightgray;
  font-family : Hina Mincho;
  border-radius : 8px;
  font-size : 30px;
  cursor : pointer;
  height : 100px;
  width : 30%;
  transition : 0.5s;
 
}

button:hover {
  box-shadow: 5px 20px 20px -15px black;
  
}

button:active {
  background-color : gold;
}

.tailendcontainer {
  height : 300px;
}

.footercontainer {
  text-align : center;
}
/* Using Monty Python to explain constructor functions in JavaScript
*/

const robinButton = document.querySelector('#robin');
const arthurButton = document.querySelector('#arthur');
const galahadButton = document.querySelector('#galahad');

function Knight(name, favoriteColor, thirdQuestion) {
  
  this.name = name;
  this.favoriteColor = favoriteColor;
  this.thirdQuestion = thirdQuestion;
  
}

const robin = new Knight('Sir Robin', 'Yellow', 'What is the capital of Assyria?');
const arthur = new Knight('Sir Arthur', 'Blue', 'What is your quest?');
const galahad = new Knight('Sir Galahad', 'Green', 'What is the airspeed velocity of an unladen swallow?');

// If user clicks 'Sir Robin', iterate through questions
robinButton.addEventListener('click', function () {
  let nameQuestion = prompt('What is your name?');
  if (nameQuestion != robin.name) {
    alert("Wrong! Into the abyss with ye.");
  } else {
    let colorQuestion = prompt('What is your favorite color?');
    if (colorQuestion != robin.favoriteColor) {
      alert('Wrong! Into the abyss with ye.');
    } else {
      let thirdAnswer = prompt(robin.thirdQuestion);
      if (thirdAnswer != 'Gondar') {
        alert('Wrong! Into the abyss with ye.');
      } else {
        alert("You may cross the bridge!")
      }
    }
  }
})
// If user clicks 'Sir Arthur', iterate through questions
arthurButton.addEventListener('click', function () {
  let nameQuestion = prompt('What is your name?');
  if (nameQuestion != arthur.name) {
    alert("Wrong! Into the abyss with ye.");
  } else {
    let colorQuestion = prompt('What is your favorite color?');
    if (colorQuestion != arthur.favoriteColor) {
      alert('Wrong! Into the abyss with ye.');
    } else {
      let thirdAnswer = prompt(arthur.thirdQuestion);
      if (thirdAnswer != 'To seek the grail') {
        alert('Wrong! Into the abyss with ye.');
      } else {
        alert("You may cross the bridge!")
      }
    }
  }
})

// If user clicks 'Sir Galahad', iterate through questions
galahadButton.addEventListener('click', function () {
  let nameQuestion = prompt('What is your name?');
  if (nameQuestion != galahad.name) {
    alert("Wrong! Into the abyss with ye.");
  } else {
    let colorQuestion = prompt('What is your favorite color?');
    if (colorQuestion != galahad.favoriteColor) {
      alert('Wrong! Into the abyss with ye.');
    } else {
      let thirdAnswer = prompt(galahad.thirdQuestion);
      if (thirdAnswer != 'What kind of swallow?') {
        alert('Wrong! Into the abyss with ye.');
      } else {
        alert("I don't know that! Aaargh!")
      }
    }
  }
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.