<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- Bridge of Death Quiz</h1>
  
  <h2 id="crossMessage">Select Your Knight</h2>
  <p id="displayQuestion"></p>
  <div class="quizcontainer">
    <button id="robin">Sir Robin</button>
    <button id="arthur">Sir Arthur</button>
    <button id="galahad">Sir Galahad</button>
  </div>
</body>
body {
  font-family : Hina Mincho;
  background-color : lightyellow;
  
}

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

.quizcontainer {
  display : block-flex;
  justify-content : space-evenly;
  width : 100%;
}

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

button {
  margin : 1em;
  background-color : white;
  border : solid #fce166;
  font-family : Hina Mincho;
  font-size : 30px;
  cursor : pointer;
  height : 100px;
  width : 100%;
  transition : 0.25s;
  box-shadow:8px 8px 0px 0px rgb(3,3,3);
 
}

button:hover {
  background-color : #fce166;
  border : solid gold;
  box-shadow: 12px 12px 2px 1px rgb(3,3,3);
  
}
// Using Monty Python to explain constructor functions in JavaScript

// 1) Create JS object for each knight's button
const robinButton = document.querySelector('#robin');
const arthurButton = document.querySelector('#arthur');
const galahadButton = document.querySelector('#galahad');

// 2) Create JS object for question text
const showQuestion = document.querySelector("#displayQuestion");

// 3) Create constructor function for 'Knight' object
function Knight(name, favoriteColor, thirdQuestion) {
  
  this.name = name;
  this.favoriteColor = favoriteColor;
  this.thirdQuestion = thirdQuestion;
  
}

// 4) Use 'new' operator to create objects for each knight
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?');

/* 5) When user clicks a knight's button, ask the user each question. Go through each question in that knight's list. If user enters correct response for all three, display "You can cross the bridge!" */
robinButton.addEventListener('click', function () {
  // Create Robin question array
  const robinQuestions = ['What is your name?', 'What is your favorite color?', 'What is the capital of Assyria?']
  const robinAnswers = ['Sir Robin', 'Yellow', 'Gondar']
  // Initialize sentinel
  let correct = 'y';
  while (correct === 'y')
    {
      for (let i = 0; i < 3; i++)
        {
          let userAnswer = prompt(robinQuestions[i]);
          if (userAnswer === robinAnswers[i])
            {
              correct = 'y';
            }
          else {
            correct = 'n';
          }
        }
    }
})
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.