Perso Tesst

by nukeboy212

HTML

<h1>
Personality Test 42.37% Accurate
</h1>

<div id="container">
  <h3 id="text">
Welcome to the Greatest Personality Test Ever.<br> (Click the Start Button to Begin)
</h3>
  <button id="start">
    START
  </button>
  <div id="quiz">
    <input type="radio" id="radio1">
    <p id="choice1">
      Football
    </p>
    <br>
    <input type="radio" id="radio2">
    <p id="choice2">
      Baseball
    </p>
    <br>
    <input type="radio" id="radio3">
    <p id="choice3">
      Tennis
    </p>
    <br>
    <input type="radio" id="radio4">
    <p id="choice4">
      Basketball
    </p>
    <br>
    <button id="submit">
      Submit
    </button>

  </div>
  <div id="bonus">
    <h4>
  Bonus Question! What do you think of this test?
  </h4>
    <input type="radio" id="radio5">
    <p id="choice1">
      Amazing Quiz!
    </p>
    <br>
    <input type="radio" id="radio6">
    <p id="choice2">
      Meh....
    </p>
    <br>
    <input type="radio" id="radio7">
    <p id="choice3">
      Terrible!11!!
    </p>
    <br>
    <input type="radio" id="radio8">
    <p id="choice4">
      I hate/like/kind-of-likw/love them all
    </p>
    <br>
    <button id="submit2">
      Submit
    </button>
  </div>
  <div id="result">
    <p id="summary">

    </p>
    <br>
    <p id="personality">

    </p>
    <img>
  </div>
  <button id="Help">
    Help
  </button>
</div>
<div id="help">
  <button id="Why" class = "one">
    Why is my thing wrong?
  </button>
  <button id="Squeak" class = "one">
    What are squeaky noises?
  </button>
  <button id="terms" class = "one">
    Terms and policies
  </button>
  <h2 class = "two">
  What thing?
  </h2>
  <h4 class = "three">
  Squeaky noises are songs from Alan Walker and Tobu and other cool <br>  people. I think they are  cool and that if you have not listened to one yet <br>then you're missing out.
  </h4>
  <h6 class = "four">
  The terms and policies are: there are none but we will still bug you about them. Perso Test isn't a <br>...

CSS

h1 {
  text-align: center;
}

#container {
  background-color: blue;
  height: 300px;
  width: 80%;
  display: block;
  margin: auto;
}

h3 {
  text-align: center;
  padding: 20px;
  color: white
}

h2 {
  color: white
}

h1 {
  color: black
}

#start {
  width: 60%;
  height: 150px;
  font-size: 60px;
  display: block;
  margin: auto
}

p {
  display: inline;
  font-size: 24px;
  text-align: center;
}

#quiz {
  width: 40%;
  display: block;
  margin: auto;
}

#bonus {
  width: 40%;
  display: block;
  margin: auto;
}

#submit {
  margin-top: 10px;
}

img {
  display: block;
  width: 50%;
  height: 200px;
  margin: auto;
}

#Help {
  position: relative;
  top: -50px;
}

#help {
  position: relative;
  top: -250px;
  left: 90px;
}

h4 {
  color: white
}

h5 {
  color: white
}
.one {
  margin-bottom: 10px
}
.three {
  margin-right: -80px
}
.four{
  position: relative;
  top: -50px;
}

JavaScript

$("#quiz").hide()
$("#result").hide()
$("#bonus").hide()
$("#Help").hide()
$("#help").hide()
var atHelpOpt = false
var currentQuestion = 0
var total = 0;

var images = [
  "http://nflops.blob.core.windows.net/cachenflops-lb/f/f/a/f/d/a/ffafdab08aa946d72302652cbae3ab2919777704.jpg",
  "https://i.ytimg.com/vi/3PNsMXe170Q/maxresdefault.jpg",
  "https://i.pinimg.com/originals/3d/e6/a8/3de6a8a1839de2cbac918c76d8d37017.jpg",
  "http://www.davidmcelroy.org/wp-content/uploads/2011/05/nerd-250pixels.jpg"
];

$("#start").click(function() {
  // $("h3").text("Which of these sports do you like most?")
  $("#start").hide();
  $("#quiz").show();
  startQuiz()
})

$("input").on("click", function(event) {
  $("input").prop("checked", false);
  $(this).prop("checked", true)
})

var quizComponents = [{
  "question": "Which of these sports do you like the most?",
  "choice1": "None",
  "choice2": "Baseball",
  "choice3": "Soccer",
  "choice4": "Football"
}, {
  "question": "Which of these movie genres do you like the most?",
  "choice1": "Documentary",
  "choice2": "Horror",
  "choice3": "Comedy",
  "choice4": "Action"
}, {
  "question": "What's your favorite food",
  "choice1": "Sandwich",
  "choice2": "Hotdog",
  "choice3": "Pizza",
  "choice4": "Burgers"
}, {
  "question": "What's your favorite electronic?",
  "choice1": "Computer",
  "choice2": "iPad",
  "choice3": "Phone",
  "choice4": "Xbox/PlayStation"
}, {
  "question": "What's your favorite type of music?",
  "choice1": "Squeaky Noises",
  "choice2": "Pop",
  "choice3": "Rap",
  "choice4": "Rock"
}, {
  "question": "What's your favorite subject at school?",
  "choice1": "History",
  "choice2": "Math",
  "choice3": "Art",
  "choice4": "P.E."
}];
var bonusQ = {
  "question": "Bonus Question! What do you think of this test?",
  "choice1": "Amazing Quiz!!!!",
  "choice2": "Meh....",
  "choice3": "Terrible!!!!",
  "choice4": "Did I waste my time?",
}

function bonusQuestion() {
  /*$("h3").text(bonusQ.question)
   ...