SlideShare a Scribd company logo
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 {
margin-bottom: 40px;
}
.quiz-question {
margin-bottom: 20px;
}
.quiz-choices {
list-style: none;
padding-left: 0;
}
.quiz-choices li {
margin-bottom: 10px;
}
.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 {
margin-bottom: 20px;
}
.quiz-score {
margin-bottom: 20px;
}
.quiz-form {
display: none;
}
.quiz-form label {
display: block;
margin-bottom: 10px;
}
.quiz-form input[type="text"] {
width: 100%;
padding: 5px;
border: 1px solid #aaa;
border-radius: 5px;
margin-bottom: 20px;
}
.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

More Related Content

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

Mobile Open Day: React Native: Crossplatform fast dive
Mobile Open Day: React Native: Crossplatform fast diveMobile Open Day: React Native: Crossplatform fast dive
Mobile Open Day: React Native: Crossplatform fast dive
epamspb
 
Java script cookies
Java script   cookiesJava script   cookies
Java script cookies
AbhishekMondal42
 
МИХАЙЛО БОДНАРЧУК «SuperCharged End to End Testing with CodeceptJS» QADay 2019
МИХАЙЛО БОДНАРЧУК «SuperCharged End to End Testing with CodeceptJS»  QADay 2019МИХАЙЛО БОДНАРЧУК «SuperCharged End to End Testing with CodeceptJS»  QADay 2019
МИХАЙЛО БОДНАРЧУК «SuperCharged End to End Testing with CodeceptJS» QADay 2019
QADay
 
Clean Javascript
Clean JavascriptClean Javascript
Clean Javascript
Ryunosuke SATO
 
Join the darkside: Selenium testing with Nightwatch.js
Join the darkside: Selenium testing with Nightwatch.jsJoin the darkside: Selenium testing with Nightwatch.js
Join the darkside: Selenium testing with Nightwatch.js
Seth McLaughlin
 
React Native: JS MVC Meetup #15
React Native: JS MVC Meetup #15React Native: JS MVC Meetup #15
React Native: JS MVC Meetup #15
Rob Gietema
 
Events - Part 2
Events - Part 2Events - Part 2
Events - Part 2
alexisabril
 
MeetJS Summit 2016: React.js enlightenment
MeetJS Summit 2016: React.js enlightenmentMeetJS Summit 2016: React.js enlightenment
MeetJS Summit 2016: React.js enlightenment
Artur Szott
 
Academy PRO: React native - building first scenes
Academy PRO: React native - building first scenesAcademy PRO: React native - building first scenes
Academy PRO: React native - building first scenes
Binary Studio
 
JavaScript Testing for Rubyists
JavaScript Testing for RubyistsJavaScript Testing for Rubyists
JavaScript Testing for Rubyists
Jamie Dyer
 
Backbone - TDC 2011 Floripa
Backbone - TDC 2011 FloripaBackbone - TDC 2011 Floripa
Backbone - TDC 2011 Floripa
Rafael Felix da Silva
 
Creating a Facebook Clone - Part XXVIII.pdf
Creating a Facebook Clone - Part XXVIII.pdfCreating a Facebook Clone - Part XXVIII.pdf
Creating a Facebook Clone - Part XXVIII.pdf
ShaiAlmog1
 
Day 5
Day 5Day 5
Android Event and IntentAndroid Event and Intent
Android Event and IntentAndroid Event and IntentAndroid Event and IntentAndroid Event and Intent
Android Event and IntentAndroid Event and Intent
admin220812
 
Mashing up JavaScript
Mashing up JavaScriptMashing up JavaScript
Mashing up JavaScript
Bastian Hofmann
 
Building iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" DominoBuilding iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" Domino
Rob Bontekoe
 
Violet Peña - Storybook: A React Tool For Your Whole Team
Violet Peña - Storybook: A React Tool For Your Whole TeamViolet Peña - Storybook: A React Tool For Your Whole Team
Violet Peña - Storybook: A React Tool For Your Whole Team
Anton Caceres
 
Virtual Madness @ Etsy
Virtual Madness @ EtsyVirtual Madness @ Etsy
Virtual Madness @ Etsy
Nishan Subedi
 
Mashing up JavaScript – Advanced Techniques for modern Web Apps
Mashing up JavaScript – Advanced Techniques for modern Web AppsMashing up JavaScript – Advanced Techniques for modern Web Apps
Mashing up JavaScript – Advanced Techniques for modern Web Apps
Bastian Hofmann
 
Version1.0 StartHTML000000279 EndHTML000043225 StartFragment0000.docx
Version1.0 StartHTML000000279 EndHTML000043225 StartFragment0000.docxVersion1.0 StartHTML000000279 EndHTML000043225 StartFragment0000.docx
Version1.0 StartHTML000000279 EndHTML000043225 StartFragment0000.docx
tienboileau
 

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

Mobile Open Day: React Native: Crossplatform fast dive
Mobile Open Day: React Native: Crossplatform fast diveMobile Open Day: React Native: Crossplatform fast dive
Mobile Open Day: React Native: Crossplatform fast dive
 
Java script cookies
Java script   cookiesJava script   cookies
Java script cookies
 
МИХАЙЛО БОДНАРЧУК «SuperCharged End to End Testing with CodeceptJS» QADay 2019
МИХАЙЛО БОДНАРЧУК «SuperCharged End to End Testing with CodeceptJS»  QADay 2019МИХАЙЛО БОДНАРЧУК «SuperCharged End to End Testing with CodeceptJS»  QADay 2019
МИХАЙЛО БОДНАРЧУК «SuperCharged End to End Testing with CodeceptJS» QADay 2019
 
Clean Javascript
Clean JavascriptClean Javascript
Clean Javascript
 
Join the darkside: Selenium testing with Nightwatch.js
Join the darkside: Selenium testing with Nightwatch.jsJoin the darkside: Selenium testing with Nightwatch.js
Join the darkside: Selenium testing with Nightwatch.js
 
React Native: JS MVC Meetup #15
React Native: JS MVC Meetup #15React Native: JS MVC Meetup #15
React Native: JS MVC Meetup #15
 
Events - Part 2
Events - Part 2Events - Part 2
Events - Part 2
 
MeetJS Summit 2016: React.js enlightenment
MeetJS Summit 2016: React.js enlightenmentMeetJS Summit 2016: React.js enlightenment
MeetJS Summit 2016: React.js enlightenment
 
Academy PRO: React native - building first scenes
Academy PRO: React native - building first scenesAcademy PRO: React native - building first scenes
Academy PRO: React native - building first scenes
 
JavaScript Testing for Rubyists
JavaScript Testing for RubyistsJavaScript Testing for Rubyists
JavaScript Testing for Rubyists
 
Backbone - TDC 2011 Floripa
Backbone - TDC 2011 FloripaBackbone - TDC 2011 Floripa
Backbone - TDC 2011 Floripa
 
Creating a Facebook Clone - Part XXVIII.pdf
Creating a Facebook Clone - Part XXVIII.pdfCreating a Facebook Clone - Part XXVIII.pdf
Creating a Facebook Clone - Part XXVIII.pdf
 
Day 5
Day 5Day 5
Day 5
 
Android Event and IntentAndroid Event and Intent
Android Event and IntentAndroid Event and IntentAndroid Event and IntentAndroid Event and Intent
Android Event and IntentAndroid Event and Intent
 
Mashing up JavaScript
Mashing up JavaScriptMashing up JavaScript
Mashing up JavaScript
 
Building iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" DominoBuilding iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" Domino
 
Violet Peña - Storybook: A React Tool For Your Whole Team
Violet Peña - Storybook: A React Tool For Your Whole TeamViolet Peña - Storybook: A React Tool For Your Whole Team
Violet Peña - Storybook: A React Tool For Your Whole Team
 
Virtual Madness @ Etsy
Virtual Madness @ EtsyVirtual Madness @ Etsy
Virtual Madness @ Etsy
 
Mashing up JavaScript – Advanced Techniques for modern Web Apps
Mashing up JavaScript – Advanced Techniques for modern Web AppsMashing up JavaScript – Advanced Techniques for modern Web Apps
Mashing up JavaScript – Advanced Techniques for modern Web Apps
 
Version1.0 StartHTML000000279 EndHTML000043225 StartFragment0000.docx
Version1.0 StartHTML000000279 EndHTML000043225 StartFragment0000.docxVersion1.0 StartHTML000000279 EndHTML000043225 StartFragment0000.docx
Version1.0 StartHTML000000279 EndHTML000043225 StartFragment0000.docx
 

More from Isaac9LjWelchq

help 4- A ray of light is sent in a random direction towards the x-axi.docx
help 4- A ray of light is sent in a random direction towards the x-axi.docxhelp 4- A ray of light is sent in a random direction towards the x-axi.docx
help 4- A ray of light is sent in a random direction towards the x-axi.docx
Isaac9LjWelchq
 
hello- please dont just copy from other answers- the following is the.docx
hello- please dont just copy from other answers- the following is the.docxhello- please dont just copy from other answers- the following is the.docx
hello- please dont just copy from other answers- the following is the.docx
Isaac9LjWelchq
 
Hello- I am working on writing a penetration test plan for a fictitiou.docx
Hello- I am working on writing a penetration test plan for a fictitiou.docxHello- I am working on writing a penetration test plan for a fictitiou.docx
Hello- I am working on writing a penetration test plan for a fictitiou.docx
Isaac9LjWelchq
 
Hello- I am struggling with figuring out how to solve for this The hor.docx
Hello- I am struggling with figuring out how to solve for this The hor.docxHello- I am struggling with figuring out how to solve for this The hor.docx
Hello- I am struggling with figuring out how to solve for this The hor.docx
Isaac9LjWelchq
 
Hello! I need help with below project-Thank You- Please name and expla.docx
Hello! I need help with below project-Thank You- Please name and expla.docxHello! I need help with below project-Thank You- Please name and expla.docx
Hello! I need help with below project-Thank You- Please name and expla.docx
Isaac9LjWelchq
 
Hello I wanted to know if I can get help with my medical information c.docx
Hello I wanted to know if I can get help with my medical information c.docxHello I wanted to know if I can get help with my medical information c.docx
Hello I wanted to know if I can get help with my medical information c.docx
Isaac9LjWelchq
 
Hector loved visiting and playing with his grandson- David- Today was.docx
Hector loved visiting and playing with his grandson- David- Today was.docxHector loved visiting and playing with his grandson- David- Today was.docx
Hector loved visiting and playing with his grandson- David- Today was.docx
Isaac9LjWelchq
 
Health psychology is a(n) - based science because practitioners are tr.docx
Health psychology is a(n) - based science because practitioners are tr.docxHealth psychology is a(n) - based science because practitioners are tr.docx
Health psychology is a(n) - based science because practitioners are tr.docx
Isaac9LjWelchq
 
Healthcare Operations Analysis Utilizing Information Technology Explai.docx
Healthcare Operations Analysis Utilizing Information Technology Explai.docxHealthcare Operations Analysis Utilizing Information Technology Explai.docx
Healthcare Operations Analysis Utilizing Information Technology Explai.docx
Isaac9LjWelchq
 
Hearing 10- What is the function of each of the following anatomical f.docx
Hearing 10- What is the function of each of the following anatomical f.docxHearing 10- What is the function of each of the following anatomical f.docx
Hearing 10- What is the function of each of the following anatomical f.docx
Isaac9LjWelchq
 
Health information is important to public health authorities during an.docx
Health information is important to public health authorities during an.docxHealth information is important to public health authorities during an.docx
Health information is important to public health authorities during an.docx
Isaac9LjWelchq
 
he reflex and reaction lab helped us understand how different factors.docx
he reflex and reaction lab helped us understand how different factors.docxhe reflex and reaction lab helped us understand how different factors.docx
he reflex and reaction lab helped us understand how different factors.docx
Isaac9LjWelchq
 
How they can live a more Eco-friendly- Sustainable and Community Engag.docx
How they can live a more Eco-friendly- Sustainable and Community Engag.docxHow they can live a more Eco-friendly- Sustainable and Community Engag.docx
How they can live a more Eco-friendly- Sustainable and Community Engag.docx
Isaac9LjWelchq
 
How to determine whether a language is regular or not using Myhill-Ner.docx
How to determine whether a language is regular or not using Myhill-Ner.docxHow to determine whether a language is regular or not using Myhill-Ner.docx
How to determine whether a language is regular or not using Myhill-Ner.docx
Isaac9LjWelchq
 
How many references are there to the list that refers to after the fol.docx
How many references are there to the list that refers to after the fol.docxHow many references are there to the list that refers to after the fol.docx
How many references are there to the list that refers to after the fol.docx
Isaac9LjWelchq
 
How is the protective group removed to allow the addition of nucleotid.docx
How is the protective group removed to allow the addition of nucleotid.docxHow is the protective group removed to allow the addition of nucleotid.docx
How is the protective group removed to allow the addition of nucleotid.docx
Isaac9LjWelchq
 
Has it been shown in the lab that simple organic compounds have formed.docx
Has it been shown in the lab that simple organic compounds have formed.docxHas it been shown in the lab that simple organic compounds have formed.docx
Has it been shown in the lab that simple organic compounds have formed.docx
Isaac9LjWelchq
 
How many possible ways can you roll a seven- What is the probability o.docx
How many possible ways can you roll a seven- What is the probability o.docxHow many possible ways can you roll a seven- What is the probability o.docx
How many possible ways can you roll a seven- What is the probability o.docx
Isaac9LjWelchq
 
have type O blood- (Round your answers to four decimal places-).docx
have type O blood- (Round your answers to four decimal places-).docxhave type O blood- (Round your answers to four decimal places-).docx
have type O blood- (Round your answers to four decimal places-).docx
Isaac9LjWelchq
 
How many ways can Marie choose 2 pizza toppings from a menu of 8 toppi.docx
How many ways can Marie choose 2 pizza toppings from a menu of 8 toppi.docxHow many ways can Marie choose 2 pizza toppings from a menu of 8 toppi.docx
How many ways can Marie choose 2 pizza toppings from a menu of 8 toppi.docx
Isaac9LjWelchq
 

More from Isaac9LjWelchq (20)

help 4- A ray of light is sent in a random direction towards the x-axi.docx
help 4- A ray of light is sent in a random direction towards the x-axi.docxhelp 4- A ray of light is sent in a random direction towards the x-axi.docx
help 4- A ray of light is sent in a random direction towards the x-axi.docx
 
hello- please dont just copy from other answers- the following is the.docx
hello- please dont just copy from other answers- the following is the.docxhello- please dont just copy from other answers- the following is the.docx
hello- please dont just copy from other answers- the following is the.docx
 
Hello- I am working on writing a penetration test plan for a fictitiou.docx
Hello- I am working on writing a penetration test plan for a fictitiou.docxHello- I am working on writing a penetration test plan for a fictitiou.docx
Hello- I am working on writing a penetration test plan for a fictitiou.docx
 
Hello- I am struggling with figuring out how to solve for this The hor.docx
Hello- I am struggling with figuring out how to solve for this The hor.docxHello- I am struggling with figuring out how to solve for this The hor.docx
Hello- I am struggling with figuring out how to solve for this The hor.docx
 
Hello! I need help with below project-Thank You- Please name and expla.docx
Hello! I need help with below project-Thank You- Please name and expla.docxHello! I need help with below project-Thank You- Please name and expla.docx
Hello! I need help with below project-Thank You- Please name and expla.docx
 
Hello I wanted to know if I can get help with my medical information c.docx
Hello I wanted to know if I can get help with my medical information c.docxHello I wanted to know if I can get help with my medical information c.docx
Hello I wanted to know if I can get help with my medical information c.docx
 
Hector loved visiting and playing with his grandson- David- Today was.docx
Hector loved visiting and playing with his grandson- David- Today was.docxHector loved visiting and playing with his grandson- David- Today was.docx
Hector loved visiting and playing with his grandson- David- Today was.docx
 
Health psychology is a(n) - based science because practitioners are tr.docx
Health psychology is a(n) - based science because practitioners are tr.docxHealth psychology is a(n) - based science because practitioners are tr.docx
Health psychology is a(n) - based science because practitioners are tr.docx
 
Healthcare Operations Analysis Utilizing Information Technology Explai.docx
Healthcare Operations Analysis Utilizing Information Technology Explai.docxHealthcare Operations Analysis Utilizing Information Technology Explai.docx
Healthcare Operations Analysis Utilizing Information Technology Explai.docx
 
Hearing 10- What is the function of each of the following anatomical f.docx
Hearing 10- What is the function of each of the following anatomical f.docxHearing 10- What is the function of each of the following anatomical f.docx
Hearing 10- What is the function of each of the following anatomical f.docx
 
Health information is important to public health authorities during an.docx
Health information is important to public health authorities during an.docxHealth information is important to public health authorities during an.docx
Health information is important to public health authorities during an.docx
 
he reflex and reaction lab helped us understand how different factors.docx
he reflex and reaction lab helped us understand how different factors.docxhe reflex and reaction lab helped us understand how different factors.docx
he reflex and reaction lab helped us understand how different factors.docx
 
How they can live a more Eco-friendly- Sustainable and Community Engag.docx
How they can live a more Eco-friendly- Sustainable and Community Engag.docxHow they can live a more Eco-friendly- Sustainable and Community Engag.docx
How they can live a more Eco-friendly- Sustainable and Community Engag.docx
 
How to determine whether a language is regular or not using Myhill-Ner.docx
How to determine whether a language is regular or not using Myhill-Ner.docxHow to determine whether a language is regular or not using Myhill-Ner.docx
How to determine whether a language is regular or not using Myhill-Ner.docx
 
How many references are there to the list that refers to after the fol.docx
How many references are there to the list that refers to after the fol.docxHow many references are there to the list that refers to after the fol.docx
How many references are there to the list that refers to after the fol.docx
 
How is the protective group removed to allow the addition of nucleotid.docx
How is the protective group removed to allow the addition of nucleotid.docxHow is the protective group removed to allow the addition of nucleotid.docx
How is the protective group removed to allow the addition of nucleotid.docx
 
Has it been shown in the lab that simple organic compounds have formed.docx
Has it been shown in the lab that simple organic compounds have formed.docxHas it been shown in the lab that simple organic compounds have formed.docx
Has it been shown in the lab that simple organic compounds have formed.docx
 
How many possible ways can you roll a seven- What is the probability o.docx
How many possible ways can you roll a seven- What is the probability o.docxHow many possible ways can you roll a seven- What is the probability o.docx
How many possible ways can you roll a seven- What is the probability o.docx
 
have type O blood- (Round your answers to four decimal places-).docx
have type O blood- (Round your answers to four decimal places-).docxhave type O blood- (Round your answers to four decimal places-).docx
have type O blood- (Round your answers to four decimal places-).docx
 
How many ways can Marie choose 2 pizza toppings from a menu of 8 toppi.docx
How many ways can Marie choose 2 pizza toppings from a menu of 8 toppi.docxHow many ways can Marie choose 2 pizza toppings from a menu of 8 toppi.docx
How many ways can Marie choose 2 pizza toppings from a menu of 8 toppi.docx
 

Recently uploaded

The Diamonds of 2023-2024 in the IGRA collection
The Diamonds of 2023-2024 in the IGRA collectionThe Diamonds of 2023-2024 in the IGRA collection
The Diamonds of 2023-2024 in the IGRA collection
Israel Genealogy Research Association
 
PIMS Job Advertisement 2024.pdf Islamabad
PIMS Job Advertisement 2024.pdf IslamabadPIMS Job Advertisement 2024.pdf Islamabad
PIMS Job Advertisement 2024.pdf Islamabad
AyyanKhan40
 
Natural birth techniques - Mrs.Akanksha Trivedi Rama University
Natural birth techniques - Mrs.Akanksha Trivedi Rama UniversityNatural birth techniques - Mrs.Akanksha Trivedi Rama University
Natural birth techniques - Mrs.Akanksha Trivedi Rama University
Akanksha trivedi rama nursing college kanpur.
 
Thesis Statement for students diagnonsed withADHD.ppt
Thesis Statement for students diagnonsed withADHD.pptThesis Statement for students diagnonsed withADHD.ppt
Thesis Statement for students diagnonsed withADHD.ppt
EverAndrsGuerraGuerr
 
DRUGS AND ITS classification slide share
DRUGS AND ITS classification slide shareDRUGS AND ITS classification slide share
DRUGS AND ITS classification slide share
taiba qazi
 
June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...
June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...
June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...
Levi Shapiro
 
clinical examination of hip joint (1).pdf
clinical examination of hip joint (1).pdfclinical examination of hip joint (1).pdf
clinical examination of hip joint (1).pdf
Priyankaranawat4
 
ANATOMY AND BIOMECHANICS OF HIP JOINT.pdf
ANATOMY AND BIOMECHANICS OF HIP JOINT.pdfANATOMY AND BIOMECHANICS OF HIP JOINT.pdf
ANATOMY AND BIOMECHANICS OF HIP JOINT.pdf
Priyankaranawat4
 
How to Manage Your Lost Opportunities in Odoo 17 CRM
How to Manage Your Lost Opportunities in Odoo 17 CRMHow to Manage Your Lost Opportunities in Odoo 17 CRM
How to Manage Your Lost Opportunities in Odoo 17 CRM
Celine George
 
বাংলাদেশ অর্থনৈতিক সমীক্ষা (Economic Review) ২০২৪ UJS App.pdf
বাংলাদেশ অর্থনৈতিক সমীক্ষা (Economic Review) ২০২৪ UJS App.pdfবাংলাদেশ অর্থনৈতিক সমীক্ষা (Economic Review) ২০২৪ UJS App.pdf
বাংলাদেশ অর্থনৈতিক সমীক্ষা (Economic Review) ২০২৪ UJS App.pdf
eBook.com.bd (প্রয়োজনীয় বাংলা বই)
 
A Strategic Approach: GenAI in Education
A Strategic Approach: GenAI in EducationA Strategic Approach: GenAI in Education
A Strategic Approach: GenAI in Education
Peter Windle
 
Assignment_4_ArianaBusciglio Marvel(1).docx
Assignment_4_ArianaBusciglio Marvel(1).docxAssignment_4_ArianaBusciglio Marvel(1).docx
Assignment_4_ArianaBusciglio Marvel(1).docx
ArianaBusciglio
 
Group Presentation 2 Economics.Ariana Buscigliopptx
Group Presentation 2 Economics.Ariana BuscigliopptxGroup Presentation 2 Economics.Ariana Buscigliopptx
Group Presentation 2 Economics.Ariana Buscigliopptx
ArianaBusciglio
 
S1-Introduction-Biopesticides in ICM.pptx
S1-Introduction-Biopesticides in ICM.pptxS1-Introduction-Biopesticides in ICM.pptx
S1-Introduction-Biopesticides in ICM.pptx
tarandeep35
 
Liberal Approach to the Study of Indian Politics.pdf
Liberal Approach to the Study of Indian Politics.pdfLiberal Approach to the Study of Indian Politics.pdf
Liberal Approach to the Study of Indian Politics.pdf
WaniBasim
 
A Survey of Techniques for Maximizing LLM Performance.pptx
A Survey of Techniques for Maximizing LLM Performance.pptxA Survey of Techniques for Maximizing LLM Performance.pptx
A Survey of Techniques for Maximizing LLM Performance.pptx
thanhdowork
 
Main Java[All of the Base Concepts}.docx
Main Java[All of the Base Concepts}.docxMain Java[All of the Base Concepts}.docx
Main Java[All of the Base Concepts}.docx
adhitya5119
 
Digital Artifact 1 - 10VCD Environments Unit
Digital Artifact 1 - 10VCD Environments UnitDigital Artifact 1 - 10VCD Environments Unit
Digital Artifact 1 - 10VCD Environments Unit
chanes7
 
The basics of sentences session 6pptx.pptx
The basics of sentences session 6pptx.pptxThe basics of sentences session 6pptx.pptx
The basics of sentences session 6pptx.pptx
heathfieldcps1
 
Pollock and Snow "DEIA in the Scholarly Landscape, Session One: Setting Expec...
Pollock and Snow "DEIA in the Scholarly Landscape, Session One: Setting Expec...Pollock and Snow "DEIA in the Scholarly Landscape, Session One: Setting Expec...
Pollock and Snow "DEIA in the Scholarly Landscape, Session One: Setting Expec...
National Information Standards Organization (NISO)
 

Recently uploaded (20)

The Diamonds of 2023-2024 in the IGRA collection
The Diamonds of 2023-2024 in the IGRA collectionThe Diamonds of 2023-2024 in the IGRA collection
The Diamonds of 2023-2024 in the IGRA collection
 
PIMS Job Advertisement 2024.pdf Islamabad
PIMS Job Advertisement 2024.pdf IslamabadPIMS Job Advertisement 2024.pdf Islamabad
PIMS Job Advertisement 2024.pdf Islamabad
 
Natural birth techniques - Mrs.Akanksha Trivedi Rama University
Natural birth techniques - Mrs.Akanksha Trivedi Rama UniversityNatural birth techniques - Mrs.Akanksha Trivedi Rama University
Natural birth techniques - Mrs.Akanksha Trivedi Rama University
 
Thesis Statement for students diagnonsed withADHD.ppt
Thesis Statement for students diagnonsed withADHD.pptThesis Statement for students diagnonsed withADHD.ppt
Thesis Statement for students diagnonsed withADHD.ppt
 
DRUGS AND ITS classification slide share
DRUGS AND ITS classification slide shareDRUGS AND ITS classification slide share
DRUGS AND ITS classification slide share
 
June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...
June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...
June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...
 
clinical examination of hip joint (1).pdf
clinical examination of hip joint (1).pdfclinical examination of hip joint (1).pdf
clinical examination of hip joint (1).pdf
 
ANATOMY AND BIOMECHANICS OF HIP JOINT.pdf
ANATOMY AND BIOMECHANICS OF HIP JOINT.pdfANATOMY AND BIOMECHANICS OF HIP JOINT.pdf
ANATOMY AND BIOMECHANICS OF HIP JOINT.pdf
 
How to Manage Your Lost Opportunities in Odoo 17 CRM
How to Manage Your Lost Opportunities in Odoo 17 CRMHow to Manage Your Lost Opportunities in Odoo 17 CRM
How to Manage Your Lost Opportunities in Odoo 17 CRM
 
বাংলাদেশ অর্থনৈতিক সমীক্ষা (Economic Review) ২০২৪ UJS App.pdf
বাংলাদেশ অর্থনৈতিক সমীক্ষা (Economic Review) ২০২৪ UJS App.pdfবাংলাদেশ অর্থনৈতিক সমীক্ষা (Economic Review) ২০২৪ UJS App.pdf
বাংলাদেশ অর্থনৈতিক সমীক্ষা (Economic Review) ২০২৪ UJS App.pdf
 
A Strategic Approach: GenAI in Education
A Strategic Approach: GenAI in EducationA Strategic Approach: GenAI in Education
A Strategic Approach: GenAI in Education
 
Assignment_4_ArianaBusciglio Marvel(1).docx
Assignment_4_ArianaBusciglio Marvel(1).docxAssignment_4_ArianaBusciglio Marvel(1).docx
Assignment_4_ArianaBusciglio Marvel(1).docx
 
Group Presentation 2 Economics.Ariana Buscigliopptx
Group Presentation 2 Economics.Ariana BuscigliopptxGroup Presentation 2 Economics.Ariana Buscigliopptx
Group Presentation 2 Economics.Ariana Buscigliopptx
 
S1-Introduction-Biopesticides in ICM.pptx
S1-Introduction-Biopesticides in ICM.pptxS1-Introduction-Biopesticides in ICM.pptx
S1-Introduction-Biopesticides in ICM.pptx
 
Liberal Approach to the Study of Indian Politics.pdf
Liberal Approach to the Study of Indian Politics.pdfLiberal Approach to the Study of Indian Politics.pdf
Liberal Approach to the Study of Indian Politics.pdf
 
A Survey of Techniques for Maximizing LLM Performance.pptx
A Survey of Techniques for Maximizing LLM Performance.pptxA Survey of Techniques for Maximizing LLM Performance.pptx
A Survey of Techniques for Maximizing LLM Performance.pptx
 
Main Java[All of the Base Concepts}.docx
Main Java[All of the Base Concepts}.docxMain Java[All of the Base Concepts}.docx
Main Java[All of the Base Concepts}.docx
 
Digital Artifact 1 - 10VCD Environments Unit
Digital Artifact 1 - 10VCD Environments UnitDigital Artifact 1 - 10VCD Environments Unit
Digital Artifact 1 - 10VCD Environments Unit
 
The basics of sentences session 6pptx.pptx
The basics of sentences session 6pptx.pptxThe basics of sentences session 6pptx.pptx
The basics of sentences session 6pptx.pptx
 
Pollock and Snow "DEIA in the Scholarly Landscape, Session One: Setting Expec...
Pollock and Snow "DEIA in the Scholarly Landscape, Session One: Setting Expec...Pollock and Snow "DEIA in the Scholarly Landscape, Session One: Setting Expec...
Pollock and Snow "DEIA in the Scholarly Landscape, Session One: Setting Expec...
 

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

  • 1. 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>
  • 2. <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" },
  • 3. { 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: "=" } ] };
  • 4. // 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");
  • 5. // 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);
  • 6. }); 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(); } }
  • 7. // 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";
  • 8. } }); // 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;
  • 9. } 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;
  • 10. padding: 10px 20px; cursor: pointer; } button:hover { background-color: #0069d9; } /* Quiz Styles */ .quiz { margin-bottom: 40px; } .quiz-question { margin-bottom: 20px; } .quiz-choices { list-style: none; padding-left: 0; } .quiz-choices li { margin-bottom: 10px; } .quiz-choices input[type="radio"] { display: none; }
  • 11. .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 { margin-bottom: 20px;
  • 12. } .quiz-score { margin-bottom: 20px; } .quiz-form { display: none; } .quiz-form label { display: block; margin-bottom: 10px; } .quiz-form input[type="text"] { width: 100%; padding: 5px; border: 1px solid #aaa; border-radius: 5px; margin-bottom: 20px; } .quiz-form button[type="submit"] { display: block; margin: 0 auto; }