0
Online
173
Users
134
Topics
385
Posts
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.
