Martian Rescue!

The starting point for the Martian Rescue! game from Chapter 16 of JavaScript for Kids For Dummies by Chris Minnick and Eva Holland.

by Kanatantsin

HTML

<div id="story"></div>
<div id="siteFooter">
  <div id="question"></div>
  <div id="answer">Введи свой ответ:
    <input type="text" id="yourAnswer" />
    <button type="button" id="submit">Поехали!</button>
  </div>
</div>
<!-- everything under here is hidden using CSS so that we can display it later using JavaScript -->
<div class="storyPart" id="answer01">
  <p>Ты капитан космического корабля под названием «Летящий Бегемот». Однажды, во время работы над настройкой двигателей вашего корабля, ты получаешь срочное сообщение на свой космический телефон:</p>
  <p>«Капитан, один из наших роботов на Марсе заболел. Нам нужно, чтобы вы немедленно отправились на Марс и забрали его, чтобы мы могли его починить и загрузить результаты его важных экспериментов».</p>
  <p>Ты помнишь, что должен был пойти на встречу Космических Скаутов сегодня вечером, и ты действительно ждал этого. Но, с другой стороны, другие космические разведчики поняли бы, что эта миссия очень важна.</p>
  <p>Что ты сделаешь? Отправишься на Марс или останешься дома?</p>
</div>
<div class="storyPart" id="answer02">
  <p>Ответь да, когда будешь готов!</p>
</div>
<div class="storyPart" id="err0">
  <p>Пожалуйста, ответь да или нет.</p>
</div>
<div class="storyPart" id="answer11">
  <p>Хороший выбор! Марс прекрасен в это время года (или в то время года, когда вы приедете, через 260 дней!).</p>
  <p>Вы собираете вещи и готовите достаточно еды для путешествия, а затем отправляетесь в путь!</p>
  <p>Запуск проходит гладко, вы садитесь, надеваете наушники и готовитесь к расслабляющей поездке.</p>
  <p>Неделю спустя дела идут отлично. Вам нечего делать, кроме как читать, слушать музыку и смотреть фильмы. Именно тогда вы слышите странный звук.</p>
  <p>"мяу."</p>
  <p>Звучит как Гизмо, твой кот! Должно быть, он пробрался на борт, пока ты собирал вещи!</p>
  <p>Вы счастливы иметь компанию, но не упаковали достаточно еды для вас обоих, и, конечно же, на пути к Марсу нет продуктового магазина.</p>
  <p>У вас есть...

CSS

* {
  margin: 0px;
}

html,
body {
  font-family: Arial, sans-serif;
  height: 100%;
  overflow: hidden;
}

#story {
  width: 100%;
  color: yellow;
  height: 80%;
  background-color: #333;
  overflow-y: scroll;
}

#site-footer,
.story:after {
  position: static;
  bottom: 0;
  height: 20%;
}

#question {
  padding: 10px 0;
  width: 100%;
  background-color: #EEE;
  color: #333;
}

#answer {
  padding: 10px 0;
  width: 100%;
  background-color: #333;
  color: #FFF;
  text-align: center;
  display: none;
}

.storyPart {
  display: none;
}

p {
  margin-top: 1em;
}

JavaScript

// declare variables
var story = document.getElementById("story");
var siteFooter = document.getElementById("siteFooter");
var question = document.getElementById("question");
var answer = document.getElementById("answer");
var yourAnswer = document.getElementById("yourAnswer");
var submit = document.getElementById("submit");

// todo: make an empty array called answers
var answers = [];
submit.addEventListener("click", getAnswer);

askQuestion(0);

/* askQuestion() asks a question, based on the number passed to it */
function askQuestion(questionNumber) {
  answer.style.display = "block";
  answers.length = questionNumber;

  switch (questionNumber) {
    case 0:
      question.innerHTML = "Ты готов играть?";
      break;
    case 1:
      question.innerHTML = "Лететь на Марс или остаться дома?";
      break;
    case 2:
      question.innerHTML = "Рискнуть или лететь домой.";
      break;
    default:
      break;
  }
}



/* getAnswer() gets the answer from the text field and pushes it into the answers array, then calls the continueStory function*/
function getAnswer() {
  cleanInput = yourAnswer.value.toUpperCase();
  answers.push(cleanInput);
  yourAnswer.value = "";
  continueStory(answers.length - 1);
}

/* continueStory() displays part of the story or an error based on the value of an item in the answers array */
function continueStory(answerNumber) {
  switch (answerNumber) {
    case 0:
      if (answers[0] === "ДА") {
        story.innerHTML = document.getElementById("answer01").innerHTML;
        askQuestion(1);
      } else if (answers[0] === "НЕТ") {
        story.innerHTML = document.getElementById("answer02").innerHTML;
        askQuestion(0);
      } else {
        story.innerHTML = document.getElementById("err0").innerHTML;
      }
      break;
    case 1:
      if (answers[1] === "МАРС") {
        story.innerHTML = document.getElementById("answer11").innerHTML;
        askQuestion(2);
      } else if (answers[1] === "ЗЕМЛЯ") {
       ...