Chapter 16 - Martian Rescue!

The finished project from Chapter 16 of JavaScript for Kids For Dummies by Chris Minnick and Eva Holland.

by Darren Yap

HTML

<div id="story"></div>
<div id="siteFooter">
    <div id="question"></div>
    <div id="answer">Enter your answer:
        <input type="text" id="yourAnswer" />
        <button type="button" id="submit">Go!</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>You are the captain of a spaceship named "Explore The Universe". One day, you're working on tuning up your ship's engines when you get an urgent message on your space phone:</p>
    <p>"Captain, one of our Mars robots is sick. We need you to go to Mars immediately and retrieve it so that we can fix it and download the results of its important experiments."</p>
    <p>You remember that you're supposed to go to a meeting of the Space Scouts tonight, and you were really looking forward to it. But, on the other hand, the other Space Scouts would understand that this mission is very important.</p>
    <p>What do you do? Go to Mars, or stay home?</p>
</div>
<div class="storyPart" id="answer02">
    <p>Answer 'yes' when you're ready!</p>
</div>
<div class="storyPart" id="err0">
    <p>Please answer yes or no.</p>
</div>
<div class="storyPart" id="answer11">
    <p>Great choice! Mars is lovely this time of year (or, during the time of the year when you'll arrive, about 260 days from now!).</p>
    <p>You pack up your things and prepare enough food for the journey, then take off!</p>
    <p>Launch goes smoothly and you sit back, put on your headphones, and prepare for a relaxing trip.</p>
    <p>A week later, things are going great. There's nothing for you to do except read, listen to music, and watch movies. Just then, you hear a strange sound.</p>
    <p>"Meow."</p>
    <p>It sounds like Gizmo, your cat! She must have snuck aboard while you were packing!</p>
    <p>You're happy to have the company, but you didn't pack enough food for the both of you, and there certainly isn't a grocery store on...

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: #CCC;
    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");
var answers = [];

/* listen for clicks on the submit button and call the getAnswer() function when they happen. */
submit.addEventListener("click", getAnswer);

// call the function to ask the first question.
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 = "Are you ready to play?";
            break;
        case 1:
            question.innerHTML = "Go to Mars, or stay home?";
            break;
        case 2:
            question.innerHTML = "Risk it, or go home.";
            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] === "YES") {
                story.innerHTML = document.getElementById("answer01").innerHTML;
                askQuestion(1);
            } else if (answers[0] === "NO") {
                story.innerHTML = document.getElementById("answer02").innerHTML;
                askQuestion(0);
            } else {
                story.innerHTML =...