To Summarize, I am trying to build a game that runs through questions with a timer, but not through a single timer, having each question go for 10 seconds and then reset when the 10 seconds are up. I'm very new to JavaScript so I am completely open to any advice. But I am trying to set these functions within an array and I keep getting an error saying that the function within the array doesn't exist, but it does and i've seen it work before. Am I applying the method wrong? and am I misusing the timer function?
$(document).ready(function(){
var arrayOfQuestions = [
intro(),
question1()
]
var time = 100;
function intro(){
$("#questions").html('<h6>Welcome, In this game, You will be presented with a small portion of a song and your goal is to guess the next couple of lyrics. Good Luck</h6>');
}
function question1(){
console.log("Question 1");
$("#questions").html('<h2>"Do You Remeber? The..."</h2>');
var ans1 = $("#pot-ans-1").html("<p>21st Night of September...</p>");
var ans2 = $("#pot-ans-2").html("<p>The Way...</p>");
var ans3 = $("#pot-ans-3").html("<p>How the stars stole the night away...</p>");
var ans4 = $("#pot-ans-4").html("<p>My thoughts are with you...</p>");
};
function timer() {
setTimeout(function() {
time--; //its a countdown so we are looking for decerements specifically
var secs = Math.floor(time/10);
var tenths = time % 10;
document.getElementById("timer").innerHTML = secs + ":" + tenths;
timer();
if(secs === -1) {
time = 100;
$("#timer").html("");
alert("Next Question");
};
},100);
}
$(document).ready(function(){
timer();
for (i = 0; i < arrayOfQuestions.length; i++) {
arrayOfQuestions[i]();
}
})<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Louis Pierre Questionaire</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" media="screen" href="assets/css/style.css" />
</head>
<body>
<div id="container">
<div class="row">
<div class="col-md-12">
<center><ins>
<h1 class="Top">Welcome To Pernell's Trivia!</h1>
</ins></center>
</div>
</div>
<div class="row">
<div class="col-md-12">
<center>
<h1 class="under">Complete the song phrase!</h1>
</center>
</div>
</div>
<!-- <p class="empty space"></p> -->
<div class="ratio-c-w">
<center>
<p class="Correct"></p>
<p class="Wrong"></p>
</center>
</div>
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-8">
<center>
<p class="timer" id="timer"></p>
</center>
</div>
<div class="col-md-2">
</div>
</div>
<div class="qContainer"> <!--contains both the question and the buttons in an entire div-->
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8" id="questions-div">
<center>
<div id="questions" class="question"></div>
</center>
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<center>
<div id="buttons">
<button id="pot-ans-1" type="button" class="btn btn-secondary"></button>
<button id="pot-ans-2" type="button" class="btn btn-secondary"></button>
<button id="pot-ans-3" type="button" class="btn btn-secondary"></button>
<button id="pot-ans-4" type="button" class="btn btn-secondary"></button>
</div>
</center>
</div>
<div class="col-md-2"></div>
</div>
</div>
</div>
<!-- Scripts -->
<div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="assets/javascript/app.js"></script>
</div>
</body>
</html>
