Navigation

    ask avan logo
    • Register
    • Login
    • Search
    • Categories
    • Unsolved
    • Solved

    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

    Javascript + jQuery
    2
    2
    8
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • X
      xsza last edited by

      <!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);

      Reply Quote 0
        1 Reply Last reply

      • avan
        avan last edited by

        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.

        Reply Quote 0
          1 Reply Last reply

        • First post
          Last post