<div class="face">
  <div class="eye"></div>
  <div class="eye"></div>
  <div class="mouth"></div>
</div>

<div id="menu" class="to-bottom">
  <button onclick="tellJoke()">Jokes</button>
  <button onclick="askTrivia()">Trivia</button>
  <button onclick="askFlag()">Flags</button>
</div>

<div id="trivia" class="to-bottom hidden">
  <section>
    <h2></h2>
    <div class="options">
      <button onclick="answerTrivia(0)"></button>
      <button onclick="answerTrivia(1)"></button>
      <button onclick="answerTrivia(2)"></button>
      <button onclick="answerTrivia(3)"></button>
    </div>
  </section>
</div>

<div id="subtitles" class="to-bottom"></div>
html, body {
  background: #247;
  overflow: hidden;
}

.a11y-hidden {
  position: absolute;
  display: block;
  width: 1px;
  height: 1px;
  overflow: hidden;
  left: -1000in;
}

.face {
  position: relative;
  width: 1.25in;
  height: 1.25in;
  overflow: hidden;
  margin: 5vh auto 0 auto;
  background: #fff;
  border-radius: 100% / 30% 30% 60% 60%;
}

@keyframes blink {
  0%, 5%, 100% { height: 15%; }
  2% { height: 0; }
}

.eye {
  position: absolute;
  top: 48%;
  left: 25%;
  width: 15%;
  height: 15%;
  background: black;
  background-image: radial-gradient(circle at 30% 25%, white 15%, transparent 0);
  border-radius: 50%;
  transform: translate(0, -50%);
  animation: blink 5s infinite;
}

.eye + .eye {
  left: 60%;
  background-image: radial-gradient(circle at 70% 25%, white 15%, transparent 0);
  transform: scaleX(-1) translate(0, -50%);
}

@keyframes talk {
  0%, 100% { height: 12%; }
  50% { height: 6%; }
}

.mouth {
  position: absolute;
  top: 60%;
  left: 45%;
  width: 10%;
  height: 12%;
  background: black;
  border-radius: 0 0 0.125in 0.1251in;
  transition: height 0.25s;
}

.mouth.talking {
  animation: talk 0.5s infinite;
}

/* * * * */
.to-bottom {
  position: fixed;
  left: 0;
  bottom: 5vh;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: transform 0.5s;
}

.hidden {
  transform: translateY(50vh);
}

button {
  margin: 0.5rem;
  min-width: 7rem;
  height: 3.5rem;
  border: 0;
  border-radius: 0.2rem 0.2rem 0.4rem 0.4rem;
  background: linear-gradient(#dde, #bbd);
  border-bottom: 0.25rem solid #aab;
  box-shadow: inset 0 0 2px #ddf, inset 0 -1px 2px #ddf;
  color: #247;
  font-size: 1rem;
  text-shadow: 1px 1px 1px #fff;
  box-sizing: content-box;
  transition: border-bottom 0.25s;
  font-family: Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  font-weight: bold;
}

button:active {
  border-bottom: 0;
}

#subtitles {
  color: white;
  text-align: center;
  font-size: 2rem;
  font-family: Helvetica, Arial, sans-serif;
  bottom: 16vh;
}

#trivia section {
  width: 80vw;
}

#trivia h2 {
  color: white;
  text-align: center;
  font-size: 2rem;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 400;
}

#trivia .options {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

#trivia .options button {
  flex: 1;
  min-width: 40%;
}
const jokes = [
  ["Knock, knock", "Art", "R2-D2"],
  ["Knock, knock", "Shy", "Cyborg"],
  ["Knock, knock", "Anne", "Anne droid"],
  ["Why did the robot go to the bank?", "He'd spent all his cache"],
  ["Why did the robot go on holiday?", "To recharge her batteries"],
  ["What music do robots like?", "Heavy metal"],
  ["What do you call an invisible droid?", "C-through-PO"],
  ["What do you call a pirate robot?", "Argh-2D2"],
  ["Why was the robot late for the meeting?", "He took an R2 detour"],
  ["Why did R2D2 walk out of the pop concert?", "He only likes electronic music"],
  ["Why are robots never lonely?", "Because there R2 of them"],
  ["What do you call a frozen droid?", "An ice borg"]
];

let correct = -1;
const trivia = [
  {
    question: "What is 2 + 2?",
    correct: "4",
    incorrect: ["3", "5", "6"]
  },
  {
    question: "Who wrote the Three Laws of Robotics",
    correct: "Isaac Asimov",
    incorrect: ["Charles Darwin", "Albert Einstein", "Jules Verne"]
  },
  {
    question: "What actor starred in the movie 'I, Robot'?",
    correct: "Will Smith",
    incorrect: ["Keanu Reeves", "Johnny Depp", "Jude Law"]
  },
  {
    question: "What actor starred in the movie AI?",
    correct: "Jude Law",
    incorrect: ["Will Smith", "Keanu Reeves", "Johnny Depp"]
  },
  {
    question: "What does AI mean?",
    correct: "Artificial Intelligence",
    incorrect: ["Augmented Intelligence", "Australia Island", "Almond Ice-cream"]
  },
];

const flags = [
  {
    pattern: "linear-gradient(#AA151B 25%, #F1BF00 0 75%, #AA151B 0)",
    description: "3 vertical lines: red, yellow, red",
    correct: "Spain",
    incorrect: ["France", "Italy", "Germany"]
  },
  {
    pattern: "linear-gradient(to right, #002395 33.3%, #fff 0 66.6%, #ED2939 0)",
    description: "3 horizontal lines of equal size: blue, white, and red",
    correct: "France",
    incorrect: ["Spain", "Italy", "Germany"]
  },
  {
    pattern: "linear-gradient(to right, #008C45 33.3%, #F4F9FF 0 66.6%, #CD212A 0)",
    description: "3 horizontal lines of equal size: green, white, red",
    correct: "Italy",
    incorrect: ["Spain", "France", "Germany"]
  },
  {
    pattern: "linear-gradient(#000 33.3%, #d00 0 66.6%, #fc0 0)",
    description: "3 vertical lines of equal size: black, red, yellow",
    correct: "Germany",
    incorrect: ["Spain", "France", "Italy"]
  }
]

function talk(sentence, subtitles = true, language = "en-US") {
  document.querySelector(".mouth").classList.add("talking");
  let speech = new SpeechSynthesisUtterance();
  speech.text = sentence;
  speech.lang = language;
  if (subtitles) {
    document.querySelector("#subtitles").textContent = sentence;
  }
  speech.onend = function() {
    document.querySelector("#subtitles").textContent = "";
    document.querySelector(".mouth").classList.remove("talking");
  }
  window.speechSynthesis.speak(speech);
}

function hide(element) {
  document.querySelector(`#${element}`).classList.add("hidden");
}

function show(element) {
  document.querySelector(`#${element}`).classList.remove("hidden");
}

function tellJoke() {
  hide("menu");
  const jokeIndex = Math.floor(Math.random() * jokes.length);
  const joke = jokes[jokeIndex];
  joke.map(function(sentence, index) {
    setTimeout(function() { talk(sentence); }, index * 3000);
  });
  setTimeout("show('menu')", (joke.length - 1) * 3000 + 1000);
}

function answerTrivia(num) {
  if (num === correct) {
    talk("Yes! You got it right!")
  } else {
    talk("Oh, no! That wasn't the correct answer")
  }
  document.querySelector("#trivia h2").innerHTML = "";
  document.querySelector(".face").style.background = "";
  hide("trivia");
  show("menu");
}

function askTrivia() {
  hide("menu");
  document.querySelector("#subtitles").textContent = "";
  const questionIndex = Math.floor(Math.random() * trivia.length);
  const question = trivia[questionIndex];
  
  // fill in the data
  correct = Math.floor(Math.random() * 4);
  document.querySelector("#trivia h2").textContent = question.question;
  document.querySelector(`#trivia button:nth-child(${correct + 1})`).textContent = question.correct;
  for (let x = 0; x < 3; x++) {
    document.querySelector(`#trivia button:nth-child(${(correct + x + 1) % 4 + 1})`).textContent = question.incorrect[x];
  }
  
  talk(question.question, false);
  show('trivia');
}

function askFlag() {
  hide("menu");
  document.querySelector("#subtitles").textContent = "";
  const questionIndex = Math.floor(Math.random() * flags.length);
  const question = flags[questionIndex];
  
  // fill in the data
  correct = Math.floor(Math.random() * 4);
  document.querySelector("#trivia h2").innerHTML = `What country is this flag from? <span class='a11y-hidden'>${question.description}</span>` ;
  document.querySelector(`#trivia button:nth-child(${correct + 1})`).textContent = question.correct;
  document.querySelector(".face").style.background = question.pattern;
  for (let x = 0; x < 3; x++) {
    document.querySelector(`#trivia button:nth-child(${(correct + x + 1) % 4 + 1})`).textContent = question.incorrect[x];
  }
  
  talk(`What country is this flag from? ${question.description}`, false);
  show('trivia');
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.