Noobie aquí. Estoy tratando de crear un cuestionario simple. Comenzar el cuestionario ejecutaría una función que ejecuta una matriz de preguntas E iniciaría un temporizador. El recuento actual y total sería visible. El temporizador haría una cuenta regresiva desde 10. Una vez que llega a 0, se ejecutaría el siguiente elemento de la matriz.
Creé un código anterior (que no se muestra aquí) que funcionó lo suficientemente bien, pero lo rompí cuando intenté agregar una función de pregunta en bucle (mantener el conteo de matrices mientras se repite la cuenta regresiva). Intenté recrear el código, pero ahora no funcionará después del primer elemento:
¿Algunas 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>Edición 2: OK RESUELTO: básicamente, no estoy seguro de si viste lo que dije antes, pero borra que junté una solución rápida, haz lo que quieras con ella, haz cualquier pregunta y las responderé por la mañana.
<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>