Noobie here. I am trying to create a simple quiz. Starting the quiz would execute a function that runs a question array AND start a timer. The current and total count would be visible. The timer would countdown from 10. Once it hits 0, the next item in the array would run.
I created an earlier code (not shown here) that worked well enough, but I broke it when I tried adding a loop question feature (keep array count while repeating countdown). I tried recreating the code, but now it won't work after the first item:
Any ideas?
Question: <div id="interview_questions"></div>
Timer: <div id="countdown"></div>
Current count question: <div id="questions_count"></div>
Total count questions: <div id="questions_total"></div>
<button onclick="start_interview()">start interview</button>
<script>
// Questions
var questions = ["Why do you want to work here?",
"Why are you a good fit?",
"What are your strengths?"
];
// Givens
let questions_total = questions.length;
let questions_count = 0;
function start_interview() {
document.getElementById("questions_total").innerHTML = questions_total;
let question_count = 1;
for (let questions_count = 0; questions_count < questions_total; questions_count++) {
// Show questions
timer();
console.log(questions[questions_count]);
//questions_count++;
// console.log(questions_count);
}
}
// Timer
function timer() {
let timer = 10;
if (timer > 0) {
let question_timer = setInterval(function() {
if (timer === 0) {
clearInterval(question_timer);
}
document.getElementById("interview_questions").innerHTML = questions[questions_count];
document.getElementById("questions_count").innerHTML = questions_count;
document.getElementById("countdown").innerHTML = timer;
timer--;
console.log(timer);
console.log(questions_count);
}, 1000);
} else {
questions_count++;
start_interview();
}
}
</script>
Edit 2: OK SOLVED - basically, not sure if you saw what i said before, but scratch that i threw together a quick solution, do what you want with it, ask any questions and ill answer them in the morning
<html>
<head>
Question: <div id="interview_questions"></div>
Timer: <div id="countdown"></div>
Current count question: <div id="questions_count"></div>
Total count questions: <div id="questions_total"></div>
<button onclick="start_interview()">start interview</button>
<script>
// Questions
var questions = ["Why do you want to work here?",
"Why are you a good fit?",
"What are your strengths?"
];
// Givens
let questions_total = questions.length;
let currentQuestionNumber = 0;
function endInterview() {
console.log('Interview Completed (nothing else has been added to the "endInterview" function) \nNOTE: the timer is 5 seconds however that is because i added a parameter so you can set the timer timer when you call the timer() function, see for yourself')
}
function start_interview() {
document.getElementById("questions_total").innerHTML = questions_total;
toQuestion(0);
timer(5);
}
function toQuestion(questionNum) {
// this may not fit your exact problem but when you want to expand maybe you use this func?
if ( questionNum < questions.length || questionNum < 0 ) {
currentQuestionNumber = questionNum;
document.getElementById("interview_questions").innerHTML = questions[currentQuestionNumber];
document.getElementById("questions_count").innerHTML = currentQuestionNumber;
} else {
console.error("Out of bounds!");
}
}
// Timer
function timer(timerLength) {
let timer = timerLength
if (timer > 0) {
let question_timer = setInterval(function() {
if (timer === 0) {
if (currentQuestionNumber < questions.length-1) {
timer = timerLength;
toQuestion( ++currentQuestionNumber ); //moves to next question (note that the ++ has to go before the variable)
} else {
clearInterval(question_timer);
endInterview();
}
}
document.getElementById("countdown").innerHTML = timer;
timer--;
}, 1000);
} else {
console.error("to little")
}
}
</script>
</head>
</html>