For Loops and Set Intervals. I am trying to create a quiz with forward, backward, and loop features

user_19038072 0
Viewed 43

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>
setinterval loops javascript
1 Answers

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>

user_180841650
Related