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



  • <!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>
    <!-- <div class="btn">Test</div> -->
    <!-- <button>Test</button> -->
    <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>
    <!-- <br> -->
    <button id="B" class="btn-grid" value="1"><span>AnswerB</span></button>
    <!-- <br> -->
    <button id="C" class="btn-grid" value="1"><span>AnswerC</span></button>
    <!-- <br> -->
    <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);



  • 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.


Log in to reply