60-Second Math Challenge

by wizviper

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<div id='titlediv'>
  <h1 id='maintitle'>60-Second Math Challenge</h1>
  <h2 id='highscoretext'>Highest Score:0</h2>
  <button id='startButton' class='btn btn-primary'>START!</button>
</div>

<div id='startupdiv'>
  <h1 id='countdown'>5</h1>
</div>

<div id='maingamediv'>
  <h1 id='gametimer'>60</h1>
  <h1 id='scoretext'>Score:0</h1>
  <h1 id='multipliertext'>X1</h1>
  <h3 id='questiontext'>QUESTION</h3>
  <button id='truebutton' class='btn btn-success tf'>True</button>
  <button id='falsebutton' class='btn btn-danger tf'>False</button>
</div>

<div id='resultsdiv'>
  <h1 id='finalscore'>Final Score:0</h1>
  <button id='titlebutton' class='btn btn-primary'>Return To Home</button>
</div>

CSS

#maintitle {
  text-align: center;
}

#startButton {
  width: 40%;
  height: 30%;
  margin-top: 10%;
}

#titlediv {
  text-align: center;
}

#startupdiv {
  display: none;
  text-align: center;
}

#countdown {
  font-size: 200px;
  margin-top: 5%;
}

#maingamediv {
  display: none;
}

#scoretext {
  text-align: center;
  position: fixed;
  bottom: 0px;
  left: 5px;
}

#gametimer {
  display: inline;
  float: left;
}

#resultsdiv {
  display: none;
}

#finalscore {
  font-size: 30px;
}

#multipliertext {
  display: inline;
  float: right;
}

#truebutton {
  position: fixed;
  bottom: 25%;
  left: 20%;
  width: 20%;
}

#falsebutton {
  position: fixed;
  bottom: 25%;
  right: 20%;
  width: 20%;
}

#questiontext {
  position: fixed;
  top: 20%;
  font-size: 30px;
  width: 100%;
}

JavaScript

var colors = ['red', 'blue', 'green', 'black', 'yellow', 'purple', 'pink', 'orange'];
var newQuestion;
var alreadyAnswered = [];
var questions = ['The surface area of a sphere is 4rn^2',
  'The volume of a cylinder is CB^2',
  'The volume of a cylinder is H(nr^2)',
  'The volume of a sphere is 4rn^2',
  'scale factors are squared for surface area',
  'scale factors are cubed for surface area',
  'The surface area of a cylinder is 2nr^2 + 2nrh',
  'The lateral area of a cone is bhl',
  'The volume of a cone is 1/3bh',
  'The volume of a prism is 2bh',
  'F + V = E + 2',
  'F + E = V + 2',
  'Arc length / 2nr = Arc measure / 360',
  'The area of a regular polygon is abr^2',
  'The area of a paralellogram is bh',
  'The area of a kite is 2hb',
  'The equation for a circle is (x-h)^2 + (y-k)^2 = r^2',
  '5,-3 --> x+4, y-1 = 8,2 ',
  'Tangents coming from the same point outside the circle are congruent',
  'A kite has no pairs of opposite congruent angles',
  'Opposite sides of a paralellogram are congruent',
  '(s-2) * 90 = sum of interior angles',
  'sine is opposite over hypotenuse',
  'cosine is adjacent over opposite',
  'tangent is opposite over adjacent',
  'in a 45-45-90 triangle, the hypotenuse is double the short leg',
  'a^2 + b^2 = c^2'
];
var answers = ['true', 'false', 'true', 'false', 'true', 'false', 'true', 'false', 'true', 'false', 'true', 'false', 'true', 'false', 'true', 'false', 'true', 'false', 'true', 'false', 'true', 'false', 'true', 'false', 'true', 'false', 'true'];
var headerColor = setInterval(changeHeader, 50);
var ctimer = 5;
var gtimer = 60;
var gametimerinterval;
var countdowninterval;
var question;
var questionplace;
var score = 0;
var highscore = 0;
var multiplier = 1;

function changeHeader() {
  document.getElementById('maintitle').style.color = colors[Math.floor(Math.random() * 7)];
}

document.getElementById('startButton').addEventListener('click', startGame);
document.getElementById('titlebutton').addEventListener('click',...