Build a timed code quiz with multiple-choice questions. It will include html, css and js with timer that -10sec if wrong ans im a beginner

xsza

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>coding quiz</title>
</head>

<body>
<section class="container">
<header>
<h1>Coding Quiz Challenge</h1>
</header>
<section class="card">
<section class="card header">
<aside class="viewHighlights"><a href="#"> View Highlights</a></aside>
<aside class="timer"><strong>Time :</strong> <span id="timeCount">1:00</span></aside>
</section>
<article class="card body">
<section id="start quiz">
<p id="note">Try to answer the following Fast and Furious-related questions with the time limit. Keep in mind
that incorrect answers will penalize your scoretime by ten seconds.</p>
<p class="center-btn"><button id=start class="btn">Start Quiz</button></p>


<button id="nextbtn" class="nextbtn-btn" style="display: none;">Next</button>
</section>
<article id="questions" style="display : none">
</article>
<section class="btn-grid" style="display:none ;">
<button id="A" class="btn-grid" value="1"><span>AnswerA</span></button>

<button id="B" class="btn-grid" value="1"><span>AnswerB</span></button>

<button id="C" class="btn-grid" value="1"><span>AnswerC</span></button>

<button id="D" class="btn-grid" value="1"><span>AnswerD</span></button>
</section>
<aside id=countdown>
</aside>
</article>
</section>
</section>
<script src="./script.js"></script>
</body>

</html>

/////////////////////////
javascript
////////////////////////
//Assign Code
let questions = [
{
question: " Who said, Ask any racer, any real racer,it doesn't matter if you win by an inch or a mile, winning is winning?",
choiceA: "Vince",
choiceB: "Leon",
choiceC: "Hector",
choiceD: "Dom",
answer: 3
},
{
question: "Who drove the orange lamborghini mercielago on the ice?",

    choiceA: "The Rock",
    choiceB: "Jason Statham",
    choiceC: "VIn Disel",
    choiceD: "Tyrese",
    answer: 3
},
{
    question: "What is the beer of choice in the movie?",
    choiceA: "Budweiser",
    choiceB: "Corona",
    choiceC: "Blue Moon",
    choiceD: "Coors Light",
    answer: 1
},
{
    question: "What was the car of choice for Dom",
    choiceA: "Dodge Charger",
    choiceB: "Mustang gt350",
    choiceC: "Toyota Supra",
    choiceD: "Honda civi Si",
    answer: 0
},
{
    question: "What is Brian's true profession?.",
    choiceA: "chef",
    choiceB: "accountant",
    choiceC: "cop",
    choiceD: "mechanic",
    answer: 2
},

];

let startBtn = document.getElementById("start");

let startText = document.querySelectorAll("note");
// let startQuiz=document.getElementById("start quiz");

// let choice0 = document.getElementById("choiceA");
// let choice1 = document.getElementById("choiceB");
// let choice2 = document.getElementById("choiceC");
// let choice3 = document.getElementById("choiceD");
// let timer = document.getElementById("countdown");

//startQuiz.addEventListener("click", start);

// startBtn.addEventListener("click", function(event){console.log(event)});
startBtn.addEventListener("click", startQuiz);
function startQuiz() {
//console.log("see if start works");
startBtn.classList.add("hide")
var x = document.getElementById("note");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
let questionElement = document.getElementById("questions");
//console.log(questionElement);

startBtn.addEventListener("click", startClickHandler);

function startClickHandler(event) {
//console.log(event.target);
displayNextQuestions();

//make a function for questions to be shown

let questionIndex = 0;

function displayNextQuestions() {
}
let currentQuestion = questions[questionIndex];

let questionDiv = document.createElement('div');
questionDiv.textContent = currentQuestion.question;

let choiceADiv = document.createElement('div');
choiceADiv.textContent = currentQuestion.choiceA;

let choiceBDiv = document.createElement('div');
choiceBDiv.textContent = currentQuestion.choiceB;

let choiceCDiv = document.createElement('div');
choiceCDiv.textContent = currentQuestion.choiceC;

let choiceDDiv = document.createElement('div');
choiceDDiv.textContent = currentQuestion.choiceD;

let answerDiv = document.createElement('div');
answerDiv.textContent = currentQuestion.answer;

}

// // We start the game with a score of 0
// let score = 0;
// // question[0].questions
// // question[0].choiceA
// // question[0].choiceB
// // question[0].choiceC
// // question[0].choiceA
// // question[0].correct

// //console.log("started")
// //array for all questions

// //display question on container
// function showQuestion() {
// questionElement.innerText = question.question
// }

// // //loop each question
// // for (let i = 0; i < questions.length; i++) {
// // let response = (questions[i].q);
// // if (response == questions[i].answer) { }
// // }
// // // Compare answers
// // if ((response === true && questions[i].a === "t") ||
// // (response === false && questions[i].a === "t")) {
// // // Increase score
// // score++;
// // alert("Correct!");
// // }
// // else {
// // alert("Wrong!");
// // }

// let var1 = [];
// let var2 = JSON.parse(localStorage.getItem("score"));
// if (var2 !== null) {
// var1 = var2;
// }
// localStorage.setItem("questions", score);
// console.log(localStorage);

avan

I would recommend formatting your code by embedding it inside the code tags like so

var question = "Can you Help?"

use three back ticks ` or the code (</>) option at the top.