Jo main page pr show krwana hai usko main tag ke andr likhna hai
uske bad koi ak section bana ke jo ki main tag se bhr hoga usko koi ak id deni hai
uske bad same url+#idname se access kr sakte hai
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> </title>
<style>
body {
background:#222;
color:white;
font-family: Arial, sans-serif;
}
pre{
background-color: black;
font-weight: 400;
font-size: 16px;
width: 100%;
text-align: center;
font-family: normal;
color: white;
white-space: pre-wrap;
}
.boxed-theorem {
border: 2px dashed #fff;
padding: 20px;
margin: 30px 0;
position: relative;
width:80vw;
margin:40px auto;
border-radius:10px;
background-color: black; /* Dark gray background color */
}
.small-box {
position: absolute;
top: -16px;
left: 44%;
transform: translateX(-40%);
background-color:#73ffd5; /* Different color for the small box */
font-weight:bold;
border: 2px solid ;
color:black;
display: flex;
padding:4px 10px;
justify-content: center;
align-items: center;
font-size: 22px; /* Adjust font size as needed */
z-index: 1;
border-radius:10px;
max-width: 80vw; /* Adjust the max-width value */
}
.theorem-content {
font-size: 18px; /* Adjust font size as needed */
margin: 0 auto; /* Center content within the box */
}
</style>
<style>
section {
display: none;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<section id="one">
<!-- Content for section one -->
<h2>Section One</h2>
<p>This is the content of section one.</p>
</section>
<main>
<div class="boxed-theorem">
<div class="small-box"> </div>
<div class="theorem-content">
<pre>
</pre>
</div>
</div>
<div class="boxed-theorem">
<div class="small-box"> </div>
<div class="theorem-content">
<pre>
</pre>
</div>
</div>
</main>
<script>
document.addEventListener("DOMContentLoaded", function () {
// Function to show the appropriate section based on the URL hash
function showSectionFromHash() {
const hash = window.location.hash.substring(1);
const targetSection = document.getElementById(hash);
// Show or hide the main tag based on whether a section is being viewed
const mainTag = document.querySelector('main');
if (hash && targetSection) {
mainTag.classList.add('hidden');
} else {
mainTag.classList.remove('hidden');
}
// Hide all sections
document.querySelectorAll('section').forEach(section => {
section.style.display = 'none';
});
// Show the section if it exists
if (targetSection) {
targetSection.style.display = 'block';
} }
// Show the appropriate section when the page loads or the hash changes
window.addEventListener('hashchange', showSectionFromHash);
showSectionFromHash();
// Add click event listeners to navigation links
document.querySelectorAll('nav a').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
// Update the URL without triggering a full page reload
history.pushState(null, null, this.getAttribute('href'));
// Show the clicked section
showSectionFromHash();
});
});
});
</script>
</body>
</html>
Dark mode toolger
<script>
// Dark mode toggle function
function toggleDarkMode() {
document.body.classList.toggle("dark-mode");
darkModeButton.textContent = document.body.classList.contains("dark-mode") ? "light" : "Dark";
}
// Create a button at the top of the webpage
const darkModeButton = document.createElement("button");
darkModeButton.textContent = "Dark";
darkModeButton.style.position = "fixed";
darkModeButton.style.top = "0";
darkModeButton.style.background = "transparent";
darkModeButton.style.right = "0";
darkModeButton.style.padding = "1px";
darkModeButton.style.cursor = "pointer";
// Apply styles for dark mode
const darkModeStyles = `
.dark-mode {
background-color: black;
color: #fff;
font-weight:150;
line-height:28px;
font-weight:150;
}
`;
// Append the button to the body
document.body.appendChild(darkModeButton);
// Add styles for dark mode to the head
const styleTag = document.createElement("style");
styleTag.textContent = darkModeStyles;
document.head.appendChild(styleTag);
// Add click event listener to the button
darkModeButton.addEventListener("click", toggleDarkMode);
</script>
Bold text by selecting
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<button onclick="boldText()" style="font-weight: bold;">B</button>
<button class="button is-primary has-text-white is-italic" onclick="italicText()">I</button>
<button onclick="cursiveText()" style="font-family: cursive;">C</button>
<button onclick="doublestruckText()" style="text-decoration-style: double;">D</button>
<br>
<textarea name="" id="copyValue" cols="30" rows="10"></textarea>
<script>
/*function bold() {
let bold = document.getElementById("copyValue");
bold.style.fontWeight = "bold";
}
function italic() {
let italic = document.getElementById("copyValue");
italic.style.fontStyle = "normal";
}
function cursive() {
let cursive = document.getElementById("copyValue");
cursive.style.fontFamily = "cursive";
}
function fantasy() {
let fantasy = document.getElementById("copyValue");
fantasy.style.fontFamily = "fantasy";
}*/
function counter() {
let textchars = document.getElementById("copyValue").value.length;
$("#chars").text(textchars + " / 2200");
}
var boldChars = {
0: "๐",
1: "๐",
2: "๐",
3: "๐",
4: "๐",
5: "๐",
6: "๐",
7: "๐",
8: "๐",
9: "๐",
a: "๐",
b: "๐",
c: "๐",
d: "๐",
e: "๐",
f: "๐",
g: "๐ ",
h: "๐ก",
i: "๐ข",
j: "๐ฃ",
k: "๐ค",
l: "๐ฅ",
m: "๐ฆ",
รฑ: "๐งฬ",
n: "๐ง",
o: "๐จ",
p: "๐ฉ",
q: "๐ช",
r: "๐ซ",
s: "๐ฌ",
t: "๐ญ",
u: "๐ฎ",
v: "๐ฏ",
w: "๐ฐ",
x: "๐ฑ",
y: "๐ฒ",
z: "๐ณ",
A: "๐",
B: "๐",
C: "๐",
D: "๐",
E: "๐",
F: "๐ ",
G: "๐",
H: "๐",
I: "๐",
J: "๐",
K: "๐",
L: "๐",
M: "๐",
N: "๐",
O: "๐",
P: "๐",
Q: "๐",
R: "๐",
S: "๐",
T: "๐",
U: "๐",
V: "๐",
W: "๐",
X: "๐",
Y: "๐",
Z: "๐",
};
var italicChars = {
a: "๐ข",
b: "๐ฃ",
c: "๐ค",
d: "๐ฅ",
e: "๐ฆ",
f: "๐ง",
g: "๐จ",
h: "๐ฉ",
i: "๐ช",
j: "๐ซ",
k: "๐ฌ",
l: "๐ญ",
m: "๐ฎ",
รฑ: "๐ฬ",
n: "๐ฏ",
o: "๐ฐ",
p: "๐ฑ",
q: "๐ฒ",
r: "๐ณ",
s: "๐ด",
t: "๐ต",
u: "๐ถ",
v: "๐ท",
w: "๐ธ",
x: "๐น",
y: "๐บ",
z: "๐ป",
A: "๐",
B: "๐",
C: "๐",
D: "๐",
E: "๐",
F: "๐",
G: "๐",
H: "๐",
I: "๐",
J: "๐",
K: "๐",
L: "๐",
M: "๐",
N: "๐",
O: "๐",
P: "๐",
Q: "๐",
R: "๐",
S: "๐",
T: "๐",
U: "๐",
V: "๐",
W: "๐",
X: "๐",
Y: "๐ ",
Z: "๐ก",
};
var cursiveChars = {
0: "0",
1: "1",
2: "2",
3: "3",
4: "4",
5: "5",
6: "6",
7: "7",
8: "8",
9: "9",
a: "๐ถ",
b: "๐ท",
c: "๐ธ",
d: "๐น",
e: "๐",
f: "๐ป",
g: "๐",
h: "๐ฝ",
i: "๐พ",
j: "๐ฟ",
k: "๐",
l: "๐",
m: "๐",
n: "๐",
รฑ: "๐ฬ",
o: "๐",
p: "๐ ",
q: "๐",
r: "๐",
s: "๐",
t: "๐",
u: "๐",
v: "๐",
w: "๐",
x: "๐",
y: "๐",
z: "๐",
A: "๐",
B: "โฌ",
C: "๐",
D: "๐",
E: "โฐ",
F: "โฑ",
G: "๐ข",
H: "โ",
I: "โ",
J: "๐ฅ",
K: "๐ฆ",
L: "โ",
M: "โณ",
N: "๐ฉ",
O: "๐ช",
P: "๐ซ",
Q: "๐ฌ",
R: "โ",
S: "๐ฎ",
T: "๐ฏ",
U: "๐ฐ",
V: "๐ฑ",
W: "๐ฒ",
X: "๐ณ",
Y: "๐ด",
Z: "๐ต",
};
var strikethroughChars = {
0: "๐",
1: "๐",
2: "๐",
3: "๐",
4: "๐",
5: "๐",
6: "๐",
7: "๐",
8: "๐ ",
9: "๐ก",
a: "๐",
b: "๐",
c: "๐",
d: "๐",
e: "๐",
f: "๐",
g: "๐",
h: "๐",
i: "๐",
j: "๐",
k: "๐",
l: "๐",
m: "๐",
n: "๐",
รฑ: "๐ฬ",
o: "๐ ",
p: "๐ก",
q: "๐ข",
r: "๐ฃ",
s: "๐ค",
t: "๐ฅ",
u: "๐ฆ",
v: "๐ง",
w: "๐จ",
x: "๐ฉ",
y: "๐ช",
z: "๐ซ",
A: "๐ธ",
B: "๐น",
C: "โ",
D: "๐ป",
E: "๐ผ",
F: "๐ฝ",
G: "๐พ",
H: "โ",
I: "๐",
J: "๐",
K: "๐",
L: "๐",
M: "๐",
N: "โ",
ร: "โฬ",
O: "๐",
P: "โ",
Q: "โ",
R: "โ",
S: "๐",
T: "๐",
U: "๐",
V: "๐",
W: "๐",
X: "๐",
Y: "๐",
Z: "โค",
};
const boldText = () => {
var text = document.getElementById("copyValue");
var selectionStart = text.selectionStart;
var selectionEnd = text.selectionEnd;
var s = text.value.substring(selectionStart, selectionEnd);
for (letter in italicChars) {
var b = new RegExp(italicChars[letter], "g");
s = s.replace(b, letter);
}
for (letter in cursiveChars) {
var b = new RegExp(cursiveChars[letter], "g");
s = s.replace(b, letter);
}
for (letter in strikethroughChars) {
var b = new RegExp(strikethroughChars[letter], "g");
s = s.replace(b, letter);
}
for (letter in boldChars) {
var c = new RegExp(letter, "g");
var b = new RegExp(boldChars[letter], "g");
var t = new RegExp(`ts-${letter}`, "g");
var r = `ts-${letter}`;
s = s.replace(c, r);
s = s.replace(b, letter);
s = s.replace(t, boldChars[letter]);
}
text.value =
text.value.substring(0, selectionStart) +
s +
text.value.substring(selectionEnd);
text.focus(none);
text.setSelectionRange(selectionStart, selectionStart + s.length);
localStorage.setItem("text", document.getElementById("copyValue").value);
counter();
};
const italicText = () => {
var text = document.getElementById("copyValue");
var selectionStart = text.selectionStart;
var selectionEnd = text.selectionEnd;
var s = text.value.substring(selectionStart, selectionEnd);
for (letter in boldChars) {
var b = new RegExp(boldChars[letter], "g");
s = s.replace(b, letter);
}
for (letter in cursiveChars) {
var b = new RegExp(cursiveChars[letter], "g");
s = s.replace(b, letter);
}
for (letter in strikethroughChars) {
var b = new RegExp(strikethroughChars[letter], "g");
s = s.replace(b, letter);
}
for (letter in italicChars) {
var c = new RegExp(letter, "g");
var b = new RegExp(italicChars[letter], "g");
var t = new RegExp(`ts-${letter}`, "g");
var r = `ts-${letter}`;
s = s.replace(c, r);
s = s.replace(b, letter);
s = s.replace(t, italicChars[letter]);
}
text.value =
text.value.substring(0, selectionStart) +
s +
text.value.substring(selectionEnd);
text.focus(none);
text.setSelectionRange(selectionStart, selectionStart + s.length);
localStorage.setItem("text", document.getElementById("copyValue").value);
counter();
};
const cursiveText = () => {
var text = document.getElementById("copyValue");
var selectionStart = text.selectionStart;
var selectionEnd = text.selectionEnd;
var s = text.value.substring(selectionStart, selectionEnd);
for (letter in boldChars) {
var b = new RegExp(boldChars[letter], "g");
s = s.replace(b, letter);
}
for (letter in italicChars) {
var b = new RegExp(italicChars[letter], "g");
s = s.replace(b, letter);
}
for (letter in strikethroughChars) {
var b = new RegExp(strikethroughChars[letter], "g");
s = s.replace(b, letter);
}
for (letter in cursiveChars) {
var c = new RegExp(letter, "g");
var b = new RegExp(cursiveChars[letter], "g");
var t = new RegExp(`ts-${letter}`, "g");
var r = `ts-${letter}`;
s = s.replace(c, r);
s = s.replace(b, letter);
s = s.replace(t, cursiveChars[letter]);
}
text.value =
text.value.substring(0, selectionStart) +
s +
text.value.substring(selectionEnd);
text.focus(none);
text.setSelectionRange(selectionStart, selectionStart + s.length);
localStorage.setItem("text", document.getElementById("copyValue").value);
counter();
};
const doublestruckText = () => {
var text = document.getElementById("copyValue");
var selectionStart = text.selectionStart;
var selectionEnd = text.selectionEnd;
var s = text.value.substring(selectionStart, selectionEnd);
for (letter in boldChars) {
var b = new RegExp(boldChars[letter], "g");
s = s.replace(b, letter);
}
for (letter in italicChars) {
var b = new RegExp(italicChars[letter], "g");
s = s.replace(b, letter);
}
for (letter in cursiveChars) {
var b = new RegExp(cursiveChars[letter], "g");
s = s.replace(b, letter);
}
for (letter in strikethroughChars) {
var c = new RegExp(letter, "g");
var b = new RegExp(strikethroughChars[letter], "g");
var t = new RegExp(`ts-${letter}`, "g");
var r = `ts-${letter}`;
s = s.replace(c, r);
s = s.replace(b, letter);
s = s.replace(t, strikethroughChars[letter]);
}
text.value =
text.value.substring(0, selectionStart) +
s +
text.value.substring(selectionEnd);
text.focus(none);
text.setSelectionRange(selectionStart, selectionStart + s.length);
localStorage.setItem("text", document.getElementById("copyValue").value);
counter();
};
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Page</title>
<style>
section {
display: none;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<main>
<!-- Content within the main tag -->
<nav>
<ul>
<li><a href="#one">Section One</a></li>
<li><a href="#two">Section Two</a></li>
<!-- Add more links as needed -->
</ul>
</nav>
</main>
<section id="one">
<!-- Content for section one -->
<h2>Section One</h2>
<p>This is the content of section one.</p>
</section>
<section id="two">
<!-- Content for section two -->
<h2>Section Two</h2>
<p>This is the content of section two.</p>
</section>
<section id="thr">
<h1> Krishna</h1>
</section>
<!-- Add more sections as needed -->
<script>
document.addEventListener("DOMContentLoaded", function () {
// Function to show the appropriate section based on the URL hash
function showSectionFromHash() {
const hash = window.location.hash.substring(1);
const targetSection = document.getElementById(hash);
// Show or hide the main tag based on whether a section is being viewed
const mainTag = document.querySelector('main');
if (hash && targetSection) {
mainTag.classList.add('hidden');
} else {
mainTag.classList.remove('hidden');
}
// Hide all sections
document.querySelectorAll('section').forEach(section => {
section.style.display = 'none';
});
// Show the section if it exists
if (targetSection) {
targetSection.style.display = 'block';
} }
// Show the appropriate section when the page loads or the hash changes
window.addEventListener('hashchange', showSectionFromHash);
showSectionFromHash();
// Add click event listeners to navigation links
document.querySelectorAll('nav a').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
// Update the URL without triggering a full page reload
history.pushState(null, null, this.getAttribute('href'));
// Show the clicked section
showSectionFromHash();
});
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Quiz</title>
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet" />
<!-- Stylesheet -->
<link rel="stylesheet" href="./style.css" />
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
height: 100vh;
background:#e0e5ec;
}
.start-screen,
.score-container {
position: absolute;
top: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
button {
border: none;
outline: none;
cursor: pointer;
}
#start-button,
#restart {
font-size: 1.3em;
padding: 0.5em 1.8em;
border-radius: 0.2em;
box-shadow: 0.3rem 0.3rem 0.5rem rgba(195, 193, 198, 0.9), -0.2rem -0.2rem 0.4rem #fff;
}
#restart {
margin-top: 0.9em;
}
#display-container {
background-color: #e0e5ec;
padding: 3.1em .3em;
width: 80%;
max-width: 37.5em;
margin: 0 auto;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
border-radius: 0.6em;
}
.header {
margin-bottom: 1.8em;
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 0.6em;
border-bottom: 0.1em solid #c0bfd2;
}
.timer-div {
background-color: #e1f5fe;
width: 7.5em;
border-radius: 1.8em;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.7em 1.8em;
}
.question {
margin-bottom: 1.25em;
font-weight: 600;
}
.option-div {
font-size: 0.9em;
width: 100%;
padding: 1em;
margin: 0.6em 0;
text-align: left;
outline: none;
box-shadow: 0.3rem 0.3rem 0.5rem rgba(195, 193, 198, 0.9), -0.2rem -0.2rem 0.4rem #fff;
background: white;
border-radius: 0.6em;
}
.option-div:disabled {
color: #000000;
cursor: not-allowed;
}
#next-button {
font-size: 1em;
margin-top: 1.5em;
background-color: #8754ff;
color: #ffffff;
padding: 0.7em 1.8em;
border-radius: 0.3em;
float: right;
box-shadow: 0.3rem 0.3rem 0.5rem rgba(195, 193, 198, 0.9), -0.2rem -0.2rem 0.4rem #fff;
}
.hide {
display: none;
}
.incorrect {
background-color: #ffdde0;
color: #d32f2f;
Border:1px solid #d32f2f;
}
.correct {
background-color: #e7f6d5;
color: #689f38;
Border:1px solid #689f38;
}
#user-score {
font-size: 1.5em;
color: black;
}
</style>
</head>
<body>
<div class="start-screen">
<button id="start-button">Start</button>
</div>
<div id="display-container">
<div class="header">
<div class="number-of-count">
<span class="number-of-question">1 of 3 questions</span>
</div>
<div class="timer-div">
<img src="https://uxwing.com/wp-content/themes/uxwing/download/time-and-date/stopwatch-icon.png" width="20px" />
<span class="time-left">10s</span>
</div>
</div>
<div id="container">
<!-- questions and options will be displayed here -->
</div>
<button id="next-button">Next</button>
</div>
<div class="score-container hide">
<div id="user-score">Demo Score</div>
<button id="restart">Restart</button>
</div>
<!-- Script -->
<script>
//References
let timeLeft = document.querySelector(".time-left");
let quizContainer = document.getElementById("container");
let nextBtn = document.getElementById("next-button");
let countOfQuestion = document.querySelector(".number-of-question");
let displayContainer = document.getElementById("display-container");
let scoreContainer = document.querySelector(".score-container");
let restart = document.getElementById("restart");
let userScore = document.getElementById("user-score");
let startScreen = document.querySelector(".start-screen");
let startButton = document.getElementById("start-button");
let questionCount;
let scoreCount = 0;
let count = 11;
let countdown;
//Questions and Options array
const quizArray = [
{
id: "0",
question: "Which is the most widely spoken language in the world?",
options: ["Spanish", "Mandarin", "English", "German"],
correct: "Mandarin",
},
{
id: "1",
question: "Which is the only continent in the world without a desert?",
options: ["North America", "Asia", "Africa", "Europe"],
correct: "Europe",
},
{
id: "2",
question: "Who invented Computer?",
options: ["Charles Babbage", "Henry Luce", "Henry Babbage", "Charles Luce"],
correct: "Charles Babbage",
},
{
id: "3",
question: "What do you call a computer on a network that requests files from another computer?",
options: ["A client", "A host", "A router", "A web server"],
correct: "A client",
},
{
id: "4",
question: "Hardware devices that are not part of the main computer system and are often added later to the system.",
options: ["Peripheral", "Clip art", "Highlight", "Execute"],
correct: "Peripheral",
},
{
id: "5",
question: "The main computer that stores the files that can be sent to computers that are networked together is:",
options: ["Clip art", "Mother board", "Peripheral", "File server"],
correct: "File server",
}, {
id: "6",
question: "How can you catch a computer virus?",
options: ["Sending e-mail messages", "Using a laptop during the winter", "Opening e-mail attachments", "Shopping on-line"],
correct: "Opening e-mail attachments",
},
{
id: "7",
question: "Google (www.google.com) is a:",
options: ["Search Engine", "Number in Math", "Directory of images", "Chat service on the web"],
correct: "Search Engine",
},
{
question: "Which is not an Internet protocol?",
options: ["HTTP", "FTP", "STP", "IP"],
correct: "STP",
},
{
id: "9",
question: "Which of the following is not a valid domain name?",
options: ["www.yahoo.com", "www.yahoo.co.uk", "www.com.yahoo", "www.yahoo.co.in"],
correct: "wwww.com.yahoo",
},
{
id: "10",
question: "Google (www.google.com) is a:",
options: ["Search Engine", "Number in Math", "Directory of images", "Chat service on the web"],
correct: "Search Engine",
},
];
//Restart Quiz
restart.addEventListener("click", () => {
initial();
displayContainer.classList.remove("hide");
scoreContainer.classList.add("hide");
});
//Next Button
nextBtn.addEventListener(
"click",
(displayNext = () => {
//increment questionCount
questionCount += 1;
//if last question
if (questionCount == quizArray.length) {
//hide question container and display score
displayContainer.classList.add("hide");
scoreContainer.classList.remove("hide");
//user score
userScore.innerHTML =
"Your score is " + scoreCount + " out of " + questionCount;
} else {
//display questionCount
countOfQuestion.innerHTML =
questionCount + 1 + " of " + quizArray.length + " Question";
//display quiz
quizDisplay(questionCount);
count = 11;
clearInterval(countdown);
timerDisplay();
}
})
);
//Timer
const timerDisplay = () => {
countdown = setInterval(() => {
count--;
timeLeft.innerHTML = `${count}s`;
if (count == 0) {
clearInterval(countdown);
displayNext();
}
}, 1000);
};
//Display quiz
const quizDisplay = (questionCount) => {
let quizCards = document.querySelectorAll(".container-mid");
//Hide other cards
quizCards.forEach((card) => {
card.classList.add("hide");
});
//display current question card
quizCards[questionCount].classList.remove("hide");
};
//Quiz Creation
function quizCreator() {
//randomly sort questions
quizArray.sort(() => Math.random() - 0.5);
//generate quiz
for (let i of quizArray) {
//randomly sort options
i.options.sort(() => Math.random() - 0.5);
//quiz card creation
let div = document.createElement("div");
div.classList.add("container-mid", "hide");
//question number
countOfQuestion.innerHTML = 1 + " of " + quizArray.length + " Question";
//question
let question_DIV = document.createElement("p");
question_DIV.classList.add("question");
question_DIV.innerHTML = i.question;
div.appendChild(question_DIV);
//options
div.innerHTML += `
<button class="option-div" onclick="checker(this)">${i.options[0]}</button>
<button class="option-div" onclick="checker(this)">${i.options[1]}</button>
<button class="option-div" onclick="checker(this)">${i.options[2]}</button>
<button class="option-div" onclick="checker(this)">${i.options[3]}</button>
`;
quizContainer.appendChild(div);
}
}
//Checker Function to check if option is correct or not
function checker(userOption) {
let userSolution = userOption.innerText;
let question =
document.getElementsByClassName("container-mid")[questionCount];
let options = question.querySelectorAll(".option-div");
//if user clicked answer == correct option stored in object
if (userSolution === quizArray[questionCount].correct) {
userOption.classList.add("correct");
scoreCount++;
} else {
userOption.classList.add("incorrect");
//For marking the correct option
options.forEach((element) => {
if (element.innerText == quizArray[questionCount].correct) {
element.classList.add("correct");
}
});
}
//clear interval(stop timer)
clearInterval(countdown);
//disable all options
options.forEach((element) => {
element.disabled = true;
});
}
//initial setup
function initial() {
quizContainer.innerHTML = "";
questionCount = 0;
scoreCount = 0;
count = 11;
clearInterval(countdown);
timerDisplay();
quizCreator();
quizDisplay(questionCount);
}
//when user click on start button
startButton.addEventListener("click", () => {
startScreen.classList.add("hide");
displayContainer.classList.remove("hide");
initial();
});
//hide quiz and display start screen
window.onload = () => {
startScreen.classList.remove("hide");
displayContainer.classList.add("hide");
};
</script>
</body>
</html>
<style>
.special-style {
color: red;
background: white;
text-align: center;
/* Add other styles you want to apply on button click */
}
</style>
<button onclick="addSpecialStyle()">Add Special Style</button>
<script>
function addSpecialStyle() {
var elements = document.getElementsByClassName('content-box');
for (var i = 0; i < elements.length; i++) {
elements[i].classList.toggle('special-style');
}
}
</script>