Here's the javascript I'm currently working with. I'm currently setting up the actual quiz building portion in the buildQuiz function at the bottom. My timer is working properly, I believe I have everything set up properly, but I'm not too sure how to execute getting everything to work properly?
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();
}
Here's my HTML file for reference
<!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>
Be careful with this approach, however. When clicking buttons A B or C you are going to need a way to determine the proper answer. Are you posting a form?
Alternatively, I suggest you structure your data like so:
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"
},
];
With data in this structure, you can use the choices dynamically to display your buttons and check the id of the object against the "answer"