having trouble with my code I'm using VScode to code a javascript code.docx

having trouble with my code I'm using VScode to code a javascript code, please help
<!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" />
<title>JavaScript Quiz</title>
<link rel="stylesheet" href="./script/.style.css" />
</head>
<body>
<header>
<h1>JavaScript Quiz</h1>
</header>
<main>
<section id="quiz">
<div id="question-container">
<h2 id="question"></h2>
<ul id="choices"></ul>
</div>
<div id="result-container">
<p id="result"></p>
</div>

<div id="submit-container">
<form id="submit-form">
<label for="initials">Enter your initials:</label>
<input type="text" id="initials" name="initials" required />
<button type="submit">Submit</button>
</form>
</div>
</section>
</main>
<script src="./script.js"></script>
</body>
</html>
//script.js
// Define the quiz settings
const quizSettings = {
duration: 75, // in seconds
penalty: 10, // in seconds
questions: [
{
text: "What does CSS stand for?",
choices: ["Computer Style Sheets", "Creative Style Sheets", "Cascading Style Sheets", "Colorful
Style Sheets"],
answer: "Cascading Style Sheets"
},

{
text: "What is the correct syntax for referring to an external script called 'script.js'?",
choices: ["<script src='script.js'>", "<script href='script.js'>", "<script name='script.js'>", "<script
file='script.js'>"],
answer: "<script src='script.js'>"
},
{
text: "Inside which HTML element do we put the JavaScript?",
choices: ["<script>", "<javascript>", "<scripting>", "<js>"],
answer: "<script>"
},
{
text: "What is the correct syntax for creating a new array in JavaScript?",
choices: ["var myArray = [];", "var myArray = {};", "var myArray = new array();", "var
myArray = array();"],
answer: "var myArray = [];"
},
{
text: "Which operator is used to assign a value to a variable?",
choices: ["=", "*", "+", "-"],
answer: "="
}
]
};

// Define variables for HTML elements
const startButton = document.getElementById("start-button");
const quizContainer = document.getElementById("quiz-container");
const questionText = document.getElementById("question-text");
const choicesContainer = document.getElementById("choices-container");
const feedbackText = document.getElementById("feedback-text");
const submitContainer = document.getElementById("submit-container");
const initialsInput = document.getElementById("initials-input");
const submitButton = document.getElementById("submit-button");
// Define variables for quiz state
let currentQuestionIndex;
let timeLeft;
let score;
// Add click event listener to start button
startButton.addEventListener("click", startQuiz);
// Define function to start the quiz
function startQuiz() {
currentQuestionIndex = 0;
timeLeft = quizSettings.duration;
score = 0;
// Hide start button and show quiz container
startButton.classList.add("hidden");
quizContainer.classList.remove("hidden");

// Start the timer
const timerInterval = setInterval(() => {
timeLeft--;
if (timeLeft <= 0) {
endQuiz();
clearInterval(timerInterval);
}
}, 1000);
// Display the first question
displayQuestion();
}
// Define function to display a question
function displayQuestion() {
// Get the current question from the quiz settings
const currentQuestion = quizSettings.questions[currentQuestionIndex];
// Update the question text and answer choices in the HTML
questionText.textContent = currentQuestion.text;
choicesContainer.innerHTML = "";
currentQuestion.choices.forEach(choice => {
const choiceButton = document.createElement("button");
choiceButton.textContent = choice;
choiceButton.addEventListener("click", () => {
checkAnswer(choice, currentQuestion.answer);

});
choicesContainer.appendChild(choiceButton);
});
}
// Define function to check the user's answer
function checkAnswer(answer) {
if (answer === quizData[currentQuestionIndex].correctAnswer) {
// Answer is correct
userScore += 10;
feedbackEl.textContent = "Correct!";
} else {
// Answer is incorrect
timeLeft -= 10;
feedbackEl.textContent = "Wrong!";
}
// Move on to the next question or end the quiz
currentQuestionIndex++;
if (currentQuestionIndex === quizData.length) {
endQuiz();
} else {
displayQuestion();
}
}

// Define function to end the quiz
function endQuiz() {
// Stop the timer
clearInterval(timerInterval);
// Show the final score and hide the quiz content
quizEl.classList.add("hidden");
scoreEl.textContent = userScore;
scoreContainerEl.classList.remove("hidden");
}
// Define event listener for when the user submits their score
submitBtn.addEventListener("click", function (event) {
event.preventDefault();
// Get the user's initials and score
var initials = initialsInputEl.value.trim();
if (initials !== "") {
var highScores = JSON.parse(localStorage.getItem("highScores")) || [];
highScores.push({
initials: initials,
score: userScore,
});
localStorage.setItem("highScores", JSON.stringify(highScores));
// Redirect to high scores page
window.location.href = "highscores.html";

}
});
// Start the quiz when the user clicks the start button
startBtn.addEventListener("click", startQuiz);
// Define function to check the user's answer
function checkAnswer(userAnswer, correctAnswer) {
if (userAnswer === correctAnswer) {
feedbackText.textContent = "Correct!";
score++;
} else {
}
feedbackText.textContent = "Wrong!";
timeLeft -= quizSettings.penalty;
if (timeLeft < 0) {
}
timeLeft = 0;
}
//style.css
/* Global Styles */
* {
box-sizing: border-box;
margin: 0;
padding: 0;

}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 16px;
line-height: 1.5;
color: #333;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
h1, h2, h3, h4, h5, h6 {
margin-bottom: 10px;
}
button {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 16px;
line-height: 1.5;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;

padding: 10px 20px;
cursor: pointer;
}
button:hover {
background-color: #0069d9;
}
/* Quiz Styles */
.quiz {
}
.quiz-question {
}
.quiz-choices {
list-style: none;
padding-left: 0;
}
.quiz-choices li {
}
.quiz-choices input[type="radio"] {
display: none;
}

.quiz-choices label {
display: block;
position: relative;
padding-left: 30px;
cursor: pointer;
}
.quiz-choices label::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
border: 1px solid #aaa;
border-radius: 50%;
}
.quiz-choices input[type="radio"]:checked + label::before {
background-color: #007bff;
border-color: #007bff;
}
.quiz-timer {

}
.quiz-score {
}
.quiz-form {
display: none;
}
.quiz-form label {
display: block;
}
.quiz-form input[type="text"] {
width: 100%;
padding: 5px;
border: 1px solid #aaa;
border-radius: 5px;
}
.quiz-form button[type="submit"] {
display: block;
margin: 0 auto;
}

having trouble with my code I'm using VScode to code a javascript code.docx

having trouble with my code I'm using VScode to code a javascript code.docx

Recommended

Recommended

More Related Content

Similar to having trouble with my code I'm using VScode to code a javascript code.docx

Similar to having trouble with my code I'm using VScode to code a javascript code.docx (20)

More from Isaac9LjWelchq

More from Isaac9LjWelchq (20)

Recently uploaded

Recently uploaded (20)

having trouble with my code I'm using VScode to code a javascript code.docx