Aquí está el javascript con el que estoy trabajando actualmente. Actualmente estoy configurando la parte de creación del cuestionario real en la función buildQuiz en la parte inferior. Mi temporizador funciona correctamente, creo que tengo todo configurado correctamente, pero no estoy muy seguro de cómo ejecutarlo para que todo funcione correctamente.
const questionBank = [ { prompt: "What markup language is used for styling webpages?\n(a) HTML\n\ (b) CSS \n (c) Java", answer: "b" }, { prompt: "What language uses the syntax let and const?\n(a) HTML\n\ (b) CSS \n (c) Javascript", answer: "c" }, { prompt: "What markup language is used for the skeleton of a webpage?\n(a) CSS\n\ (b) Javascript \n (c) Python \n (d) HTML", answer: "d" }, ]; let startBtn = document.getElementById("start"); let questions = document.getElementById("question"); function timer(){ let sec = 15; let timer = setInterval(function(){ document.getElementById('timer').innerHTML='00:'+sec; sec--; if (sec < 0) { clearInterval(timer); questions.innerHTML="Time's Up!"; } else { questions.innerHTML= ""; } }, 1000); } startBtn.onclick = function beginQuiz(){ timer(); }Aquí está mi archivo HTML para referencia
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <title>Code Quiz</title> </head> <body> <header>Code Quiz</header> <div class="quiz-container"> <button class="btn" id="start">Start</button> <p id="question"></p> <button class="btns" id="btn-a">A</button> <button class="btns" id="btn-b">B</button> <button class="btns" id="btn-c">C</button> </div> <div class="score-container"> <p id="timer">00:15</p> <h1 class="score">Score: 0</h1> </div> </body> <script src="script.js"></script> </html>//Show the questions when the button is clicked. startBtn.onclick = function beginQuiz(){ timer(); let questionBankHtml = '<div id="questionBankHtml">'; questionBank.forEach(function(question) { questionBankHtml += `<p id="question">${question.prompt}</p>` questionBankHtml += '<button class="btns" id="btn-a">A</button>' questionBankHtml += '<button class="btns" id="btn-b">B</button>' questionBankHtml += '<button class="btns" id="btn-c">C/button>' }); questionBankHtml += '</div>'; document.getElementById("quizBlock").innerHTML = questionBankHtml; } HTML <body> <header>Code Quiz</header> <div class="quiz-container"> <div id="quizBlock"></div> </div> <div class="score-container"> <p id="timer">00:15</p> <h1 class="score">Score: 0</h1> </div> </body>Sin embargo, tenga cuidado con este enfoque. Al hacer clic en los botones AB o C, necesitará una forma de determinar la respuesta correcta. ¿Estás publicando un formulario?
Alternativamente, le sugiero que estructure sus datos así:
const questionBank = [ { id:1, prompt: "What markup language is used for styling webpages?", choices:{ a:"HTML", b:"CSS", c:"Java" }, answer: "b" }, { id:2, prompt: "What language uses the syntax let and const?", choices:{ a:"HTML", b:"CSS", c:"Javascript" }, answer: "c" }, { id:3, prompt: "What markup language is used for the skeleton of a webpage?", choices:{ a:"CSS", b:"Javascript", c:"Python", d:"HTML" }, answer: "d" }, ];Con datos en esta estructura, puede usar las opciones dinámicamente para mostrar sus botones y verificar la identificación del objeto contra la "respuesta"