Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Steven Dytewski
Steven Dytewski
2,859 Points

I need help with a trivia game I made with Javascript.

I made a trivia game using Javascript. When I upload it and host the website on github, questions 2 through 5 don't work correctly on my iphone, but work on my desktop version. The answers will come out incorrect even if you type in the correct answer. Sometime it will say you got 2 questions right or 1 question right when it should read you got ALL questions correct. Question 1 always works correctly.

document.write("<h1>RESULTS</h1>");
var correct = 0;
alert("Welcome to my quiz about science and fiction. These questions are from books, history, and movies!");
var rightYear = 1977;
var question1 = prompt("What year did 'Star Wars: a New Hope' get released?");
if (parseInt(question1) === rightYear ) { correct +=1;
  document.write("<ul><strong>Question 1 - </strong> What year did 'Star Wars: A New Hope' get released?</ul> <ul><strong> Answer: 1977 </strong></ul> <ul>You got the right answer! Yoda is proud!</ul>");

} else {
    document.write("<ul><strong>Question 1 - </strong> What year did 'Star Wars: A New Hope' get released? </ul> <ul><strong> Answer: 1977 </strong></ul> <ul>Your answer is incorrect. You are NO jedi!</ul>");

}

var question2 = prompt("Who was the author of the book '1984'?");
if (question2.toUpperCase() === "GEORGE ORWELL") { correct +=1;
  document.write("<ul><strong>Question 2 - </strong> Who was the author of the book '1984'?</ul>  <ul><strong> Answer: George Orwell </strong></ul> <ul>You got the right answer! You should work for the Thought Police!</ul>");


} else {
  document.write("<ul><strong>Question 2 - </strong> Who was the author of the book '1984'?</ul> <ul><strong> Answer: George Orwell </strong></ul> <ul>Your answer is incorrect. Big Brother is watching!</ul>");

}


var question3 = prompt("What is the farthest planet in our solar system? Hint: Pluto does not count, since it is a dwarf planet.");
if (question3.toUpperCase() === "NEPTUNE" ) { correct +=1;
     document.write("<ul><strong>Question 3 - </strong> What is the farthest planet in our solar system? Hint: Pluto does not count, since it is a dwarf planet.</ul> <ul><strong> Answer: Neptune </strong></ul> <ul>You got the right answer! YEAH! Hope you did NOT use Google!</ul>");
} else {
  document.write("<ul><strong>Question 3 - </strong> What is the farthest planet in our solar system? Hint: Pluto does not count, since it is a dwarf planet.</ul> <ul><strong> Answer: Neptune </strong></ul> <ul>Your answer is incorrect. Did you sleep through third grade???</ul>");


}


var question4 = prompt("In the movie, 'Terminator' what was the computer system that became self aware and started the war with the Humans called? Hint: It's one word.");
if (question4.toUpperCase() === "SKYNET") { correct +=1;
  document.write("<ul><strong>Question 4 - </strong> In the movie, 'Terminator' what was the computer system that became self aware and started the war with the Humans called? Hint: It's one word. </ul> <ul><strong> Answer: Skynet </strong></ul> <ul>You got the right answer! You are totally awesome!! You must like the 80s. Oh what a nice mullet you have! :)</ul>");


} else {
  document.write("<ul><strong>Question 4 - </strong> In the movie, 'Terminator' what was the computer system that became self aware and started the war with the Humans called? Hint: It's one word.</ul> <ul><strong> Answer: Skynet </strong> </ul> <ul>Your answer is incorrect. You should probably get a Delorean and spend some time in the 1980s!</ul>");


}


var question5 = prompt("Who was the second person to walk on the moon's surface after Neil Armstrong?");
if (question5.toUpperCase() === "BUZZ ALDRIN") { correct +=1;
  document.write("<ul><strong>Question 5 - </strong> Who was the second person to walk on the moon's surface after Neil Armstrong?</ul> <ul><strong> Answer: Buzz Aldrin</strong> </ul> <ul>You got the right answer! The Eagle has landed baby!</ul>");


} else {
  document.write("<ul><strong>Question 5 - </strong> Who was the second person to walk on the moon's surface after Neil Armstrong?'</ul> <ul><strong> Answer: Buzz Aldrin </strong> </ul> <ul>Your answer is INCORRECT!! You were probably rooting for the Russians to get to the moon first! boooo.</ul>");

}


//output results

document.write("<p> You got " + correct + " out of 5 questions correct.</p>");

// output rank

if ( correct === 5) {
   document.write("<p><strong> You got ALL correct!! YOU ARE A JEDI! </strong></p>");


} else if ( correct >= 4){
     document.write("<p><strong>You are almost a Jedi. Not bad!! You could probably fly an X-Wing pretty well!</strong></p>");

} else if ( correct >= 2) {
     document.write("<p><strong>You are of average skill. ehh. Did you try? At best you would be a stormtrooper in the 80th Star Wars movie.</strong></p>");



}  else {
      document.write("<p><strong> You have NO skills. You didn't put up any fight. Darth Vader would freeze you in carbonite.</strong></p>");
                    }
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Science and Fiction Trivia Game</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>





  <div class="container">
  <div class="banner">
    <header>
    <img class="hero" src="images/ufo4.png" alt="flying saucer">

      <h2>Welcome to the Science and Fiction Trivia Game!</h2>


    </header>


      <h3 class="heading">How are your skills young jedi? Look below to see how you would do in in a galaxy far, far away.</h3>

  </div> <!--banner-->
<div class="wrap">

 <script src="scripts/main.js"></script>





</div> <!--.wrap-->

<i class="fas fa-rocket"></i>


  </div> <!--.container-->




    <footer class="main-footer">
        <span>&copy;2018 Science and Fiction Trivia Game </span>
    </footer>

</body>
</html>
/* ========================
  Base styles
  =======================*/
  * {
    box-sizing: border-box;
  }


  body {
  font-family: 'Varela Round', sans-serif;
  line-height: 1.6;

  }

  p {
    font-size: .95em;
    margin-bottom: 1.5em;



  }

  img {
  width: 90%;




}


/*--------Layout Containers------*/

.banner, .main-footer, .container {
  text-align: center;

  }

.container {
    padding-left: 1em;
    padding-right: 1em;
    padding-bottom: 20px;



}

.wrap{
  text-align: left;
  background: #d2def2;
  padding: 5px;
  border-radius: 20px;


  }

.main-footer {

  text-align: center;
  padding: 2em 0;
  background: #4e89a4;


  }

  .banner {
    padding-top: 2.2em;
    margin-bottom: 60px;





    }
/* ---- Page Elements ---- */



.hero {
  border-radius: 30px;
  margin-bottom: 20px;


  }

.heading {

    color: white;
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
  border-radius: 30px;
  background: #4e89a4;
  padding: 25px;


  }

.fas {
    display: block;
    font-size: 2rem;
    padding: 20px;
    border-radius: 34px;
    background: #D3D3D3;
    margin-top: 30px;
    margin-bottom: 10px;





  }





/* ========================
  Media Queries
  =======================*/

  @media (min-width: 769px) {

    .container {
      width: 90%;
      max-width: 1150px;
      margin: 0 auto;



    }


    .hero { width: 70%;
      border-radius: 30px;


      }





  }

3 Answers

Erik Gabor
Erik Gabor
6,427 Points

Maybe when you enter and uppercase you get something like the following string: "BUZZ ALDRIN " which is not equal to "BUZZ ALDRIN" You can also debug what the prompts return, in order to see the actual returned string

alert("You entered the String ["+question5+"]");
Steven Dytewski
Steven Dytewski
2,859 Points

Thanks for the tip. Actually you helped me figure out what’s going on. For some reason if I type I the answers in caps then the answers work!

Steven Dytewski
Steven Dytewski
2,859 Points

Also I realize the document.write command has lots of problems with functionality. It is outdated and not recommended. More than likely, that is the problem. Thanks for your help!

Erik Gabor
Erik Gabor
6,427 Points

Maybe you have an extra space or newline when you are prompted on the Iphone.

Steven Dytewski
Steven Dytewski
2,859 Points

Not sure what you mean. Can you give an example?

Erik Gabor
Erik Gabor
6,427 Points

You should try out the Javascript trim method which removes extra spaces https://www.w3schools.com/jsref/jsref_trim_string.asp (though it might not be supported in iphone)