Quiz
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parmar Sir ❣️</title>
<link rel="stylesheet" href="style.css">
<!-- FontAweome CDN Link for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet" />
<script src="/script.js">
/script.js
</script>
<style>
* {
user-select: none;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Poppins", sans-serif;
background-repeat: no-repeat;
background-color: #e0e5ec;
width: 90%;
}
.quiz_box.activeQuiz,
.result_box.activeResult {
opacity: 1;
z-index: 5;
pointer-events: auto;
}
.start_btn {
margin-top: 100px;
margin-left: 30%;
}
button {
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;
}
.quiz_box {
width: 99vw;
border-radius: 5px;
margin-top: 20px;
opacity: 0;
margin-top: -50px;
pointer-events: none;
transition: all 0.7s ease;
}
.quiz_box header {
position: relative;
z-index: 2;
height: 70px;
padding: 0 30px;
border-radius: 5px 5px 0 0;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0px 3px 5px 1px rgba(0, 0, 0, 0.1);
}
.quiz_box header .title {
font-size: 15px;
font-weight: 600;
}
.quiz_box header .timer {
color: #004085;
background: #cce5ff;
border: 1px solid #b8daff;
height: 45px;
padding: 0px 5px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: space-between;
}
.quiz_box header .timer .time_left_txt {
font-weight: 400;
font-size: 15px;
user-select: none;
}
.quiz_box header .timer .timer_sec {
font-size: 18px;
font-weight: 500;
width: 45px;
color: #fff;
border-radius: 5px;
line-height: 30px;
text-align: center;
background: #343a40;
border: 1px solid #343a40;
user-select: none;
margin-left: 7px;
}
.quiz_box header .time_line {
position: absolute;
bottom: 0px;
left: 0px;
height: 3px;
background: #007bff;
width: 90vw;
margin-left: 3vw;
border-radius: 4px;
}
section {
padding: 25px 30px 20px 30px;
}
section .que_text {
font-size: 22px;
line-height: 31px;
font-family: Georgia, 'Times New Roman', Times, serif;
}
section .option_list {
padding: 20px 0px;
display: block;
}
section .option_list .option {
font-size: 17px;
margin-bottom: 15px;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.9em;
width: 100%;
padding: 1em;
margin: 1.7em 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;
}
section .option_list .option:last-child {
margin-bottom: 0px;
}
section .option_list .option.correct {
color: #155724;
background: #d4edda;
}
section .option_list .option.incorrect {
color: #721c24;
background: #f8d7da;
}
section .option_list .option.disabled {
pointer-events: none;
}
section .option_list .option .icon {
height: 26px;
width: 26px;
border: 2px solid transparent;
border-radius: 50%;
text-align: center;
font-size: 13px;
pointer-events: none;
position: absolute;
right: 52px;
}
.option_list .option .icon.tick {
color: #23903c;
border-color: #23903c;
background: #d4edda;
padding-top: 5px;
}
.option_list .option .icon.cross {
color: #a42834;
background: #f8d7da;
border-color: #a42834;
padding-top: 5px;
}
footer {
height: 60px;
padding: 0 30px;
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid lightgrey;
}
footer .total_que span {
display: flex;
user-select: none;
}
footer .total_que span p {
font-weight: 500;
padding: 0 5px;
}
footer .total_que span p:first-child {
padding-left: 0px;
}
footer button {
height: 40px;
padding: 0 13px;
font-size: 18px;
font-weight: 400;
cursor: pointer;
border: none;
outline: none;
color: #fff;
border-radius: 5px;
background: #007bff;
border: 1px solid #007bff;
line-height: 10px;
opacity: 0;
pointer-events: none;
transform: scale(0.95);
transition: all 0.3s ease;
}
footer button:hover {
background: #0263ca;
}
footer button.show {
opacity: 1;
pointer-events: auto;
transform: scale(1);
}
.result_box {
display: flex;
padding: 25px 30px;
width: 99vw;
align-items: center;
flex-direction: column;
justify-content: center;
margin-top: -60vh;
opacity: 0;
margin-left: ;
pointer-events: none;
transition: all 0.3s ease;
}
.result_box .icon {
font-size: 100px;
color: #007bff;
margin-bottom: 10px;
}
.result_box .complete_text {
font-size: 20px;
font-weight: 500;
}
.result_box .score_text span {
display: flex;
margin: 10px 0;
font-size: 18px;
font-weight: 500;
}
.result_box .score_text span p {
padding: 0 4px;
font-weight: 600;
}
.result_box .buttons button {
margin: 0 10px;
height: 45px;
padding: 0 20px;
font-size: 18px;
font-weight: 500;
cursor: pointer;
border: none;
outline: none;
border-radius: 5px;
border: 1px solid #007bff;
transition: all 0.3s ease;
}
.buttons button.quit {
color: #007bff;
background: #fff;
}
.buttons button.quit:hover {
color: #fff;
background: #007bff;
}
.startbutton {
color: black;
background: white;
border: none;
}
#dark-mode-toggle:after {
content: "dark";
}
</style>
<style>
input,
textarea,
button,
select,
a {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
a:focus,
a:visited,
a:active {
outline: none;
}
* {
-webkit-tap-highlight-color: transparent;
}
* .dark-mode {
box-sizing: border-box;
}
/* Dark mode styles */
body.dark-mode {
background-color: #121212;
color: #e0e0e0;
}
.dark-mode button {
box-shadow: 0.3rem 0.3rem 0.5rem rgba(15, 13, 18, 0.49), -0.2rem -0.2rem 0.4rem dimgrey;
}
.dark-mode .option_list .option {
padding: 0.97em;
cursor: pointer;
border-radius: 8px;
transition: background-color 0.3s, transform 0.2s, box-shadow 0.2s;
background-color: #171717;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7);
border: 0.4px solid black;
color: #e0e0e0;
}
.dark-mode .startbutton {
background: #333;
color: white;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}
.dark-mode #dark-mode-toggle {
background: black;
box-shadow: none;
color: white;
}
.dark-mode .quiz_box header {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}
.dark-mode #dark-mode-toggle:after {
content: "Light";
}
.dark-mode .quiz_box header .timer {
color: white;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
background: #191919;
border: none;
}
.dark-mode .next_btn {
background: #202020;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
border: none;
}
.dark-mode .buttons button.quit {
color: white;
background: #5E6168;
border: none;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<!-- start Quiz button -->
<div class="start_btn"><button class="startbutton">Start Quiz</button></div>
<!-- Quiz Box -->
<div class="quiz_box">
<header>
<div class="title">PYQ-4ㅤLec-30 </div>
<button style="padding: 3px; font-size: 10px; border: 1px solid gray;" id="dark-mode-toggle"></button>
<div class="timer">
<div class="time_left_txt">Time Left</div>
<div class="timer_sec">15</div>
</div>
<div class="time_line"></div>
</header>
<section>
<div class="que_text">
<!-- Here I've inserted question from JavaScript -->
</div>
<div class="option_list">
<!-- Here I've inserted options from JavaScript -->
</div>
</section>
<!-- footer of Quiz Box -->
<footer>
<div class="total_que">
<!-- Here I've inserted Question Count Number from JavaScript -->
</div>
<button class="next_btn">Next ➜</button>
</footer>
</div>
<!-- Result Box -->
<div class="result_box">
<div class="icon">
</div>
<div class="complete_text"> You've completed the Quiz!</div>
<div class="score_text">
<!-- Here I've inserted Score Result from JavaScript -->
</div>
<div class="buttons">
<button style="display: none" class="restart">Replay Quiz</button>
<button class="quit">Quit Quiz</button>
</div>
</div>
<script>
let questions = [
];
</script>
<script>
//selecting all required elements
const start_btn = document.querySelector(".start_btn button");
const quiz_box = document.querySelector(".quiz_box");
const result_box = document.querySelector(".result_box");
const option_list = document.querySelector(".option_list");
const time_line = document.querySelector("header .time_line");
const timeText = document.querySelector(".timer .time_left_txt");
const timeCount = document.querySelector(".timer .timer_sec");
// if startQuiz button clicked
start_btn.onclick = () => {
quiz_box.classList.add("activeQuiz"); //show quiz box
showQuetions(0); //calling showQestions function
queCounter(1); //passing 1 parameter to queCounter
startTimer(15); //calling startTimer function
startTimerLine(0); //calling startTimerLine function
start_btn.style.display = "none";
};
let timeValue = 15;
let que_count = 0;
let que_numb = 1;
let userScore = 0;
let counter;
let counterLine;
let widthValue = 0;
const quit_quiz = result_box.querySelector(".buttons .quit");
// if quitQuiz button clicked
quit_quiz.onclick = () => {
window.location.reload(); //reload the current window
};
const next_btn = document.querySelector("footer .next_btn");
const bottom_ques_counter = document.querySelector("footer .total_que");
// if Next Que button clicked
next_btn.onclick = () => {
if (que_count < questions.length - 1) {
//if question count is less than total question length
que_count++; //increment the que_count value
que_numb++; //increment the que_numb value
showQuetions(que_count); //calling showQestions function
queCounter(que_numb); //passing que_numb value to queCounter
clearInterval(counter); //clear counter
clearInterval(counterLine); //clear counterLine
startTimer(timeValue); //calling startTimer function
startTimerLine(widthValue); //calling startTimerLine function
timeText.textContent = "Time Left"; //change the timeText to Time Left
next_btn.classList.remove("show"); //hide the next button
}
else {
clearInterval(counter); //clear counter
clearInterval(counterLine); //clear counterLine
showResult(); //calling showResult function
}
};
// getting questions and options from array
function showQuetions(index) {
const que_text = document.querySelector(".que_text");
//creating a new span and div tag for question and option and passing the value using array index// Creating a new span and div tag for question and option and passing the value using array index
let que_tag = "<span>" + "Q" + (index + 1) + " : " + questions[index].question + " </span>";
let option_tag =
'<div class="option"><span>' +
questions[index].options[0] +
"</span></div>" +
'<div class="option"><span>' +
questions[index].options[1] +
"</span></div>" +
'<div class="option"><span>' +
questions[index].options[2] +
"</span></div>" +
'<div class="option"><span>' +
questions[index].options[3] +
"</span></div>";
que_text.innerHTML = que_tag; //adding new span tag inside que_tag
option_list.innerHTML = option_tag; //adding new div tag inside option_tag
const option = option_list.querySelectorAll(".option");
// set onclick attribute to all available options
for (i = 0; i < option.length; i++) {
option[i].setAttribute("onclick", "optionSelected(this)");
}
}
// creating the new div tags which for icons
let tickIconTag = '<div class="icon tick"><i class="fas fa-check"></i></div>';
let crossIconTag = '<div class="icon cross"><i class="fas fa-times"></i></div>';
// Global variables
let currentIndex = 0; // To keep track of the current question index
// Function to initialize quiz
function initializeQuiz() {
shuffleQuestions(); // Shuffle the questions array initially (optional)
showQuestions();
}
// Function to shuffle questions array (optional)
function shuffleQuestions() {
for (let i = questions.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[questions[i], questions[j]] = [questions[j], questions[i]];
// Shuffle options within each question
questions[i].options = shuffleArray(questions[i].options);
}
}
// Function to shuffle array (Fisher-Yates shuffle algorithm)
function shuffleArray(array) {
let shuffledArray = array.slice(); // Create a copy of the array
for (let i = shuffledArray.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[shuffledArray[i], shuffledArray[j]] = [shuffledArray[j], shuffledArray[i]];
}
return shuffledArray; // Return shuffled array
}
// Function to handle option selection
function optionSelected(answer) {
clearInterval(counter); // Clear any ongoing timers
clearInterval(counterLine); // Clear any progress bar
let userAns = answer.textContent.trim(); // Get user selected option
let correctAns = questions[currentIndex].answer.trim(); // Get correct answer
// Increment index for the next question
currentIndex++;
}
// Example usage:
initializeQuiz(); // Call this function to start the quiz
function showResult() {
quiz_box.classList.remove("activeQuiz"); //hide quiz box
result_box.classList.add("activeResult"); //show result box
const scoreText = result_box.querySelector(".score_text");
if (userScore > 3) {
// if user scored more than 3
//creating a new span tag and passing the user score number and total question number
let scoreTag =
"<span> You got <p>" +
userScore +
"</p> out of <p>" +
questions.length +
"</p></span>";
scoreText.innerHTML = scoreTag; //adding new span tag inside score_Text
} else if (userScore > 1) {
// if user scored more than 1
let scoreTag =
"<span> You got <p>" +
userScore +
"</p> out of <p>" +
questions.length +
"</p></span>";
scoreText.innerHTML = scoreTag;
} else {
// if user scored less than 1
let scoreTag =
"<span>You got <p>" +
userScore +
"</p> out of <p>" +
questions.length +
"</p></span>";
scoreText.innerHTML = scoreTag;
}
}
function startTimer(time) {
timeCount.textContent = time; // Set the initial time display immediately
counter = setInterval(timer, 1000);
function timer() {
time--; // Decrement the time value
if (time >= 0) {
timeCount.textContent = time < 10 ? `0${time}` : time; // Format time with leading zero if needed
}
if (time < 0) {
clearInterval(counter); // Clear timer
timeText.textContent = "Time Off"; // Update time text
const allOptions = option_list.children.length; // Get all option items
let correcAns = questions[que_count].answer; // Get correct answer from array
for (let i = 0; i < allOptions; i++) {
if (option_list.children[i].textContent.trim() === correcAns) {
option_list.children[i].classList.add("correct"); // Add correct class
option_list.children[i].insertAdjacentHTML("beforeend", tickIconTag); // Add tick icon
}
}
// Disable all options after time runs out
for (let i = 0; i < allOptions; i++) {
option_list.children[i].classList.add("disabled");
}
next_btn.classList.add("show"); // Show the Next button
}
}
}
function startTimerLine(time) {
counterLine = setInterval(timer, 44);
function timer() {
time += 1; // upgrading time value with 1
time_line.style.width = (time / 360) * 93.5 + "vw"; // setting width relative to time
if (time > 360) {
clearInterval(counterLine); // clear counterLine
}
}
}
function queCounter(index) {
//creating a new span tag and passing the question number and total question
let totalQueCounTag =
"<span><p>" +
index +
"</p> of <p>" +
questions.length +
"</p> Questions</span>";
bottom_ques_counter.innerHTML = totalQueCounTag; //adding new span tag inside bottom_ques_counter
}
</script>
<script>
// References
let body = document.body;
let darkModeToggle = document.getElementById('dark-mode-toggle');
// Add 'dark-mode' class to body on page load
document.addEventListener('DOMContentLoaded', function() {
//agar starting me hi dark mode enable chahiye to niche wala rhega
body.classList.add('dark-mode');
});
// Dark mode toggle button click event
darkModeToggle.addEventListener('click', function() {
body.classList.toggle('dark-mode');
});
// Your existing JavaScript code continues below
// ...
</script>
<script>
function optionSelected(answer) {
clearInterval(counter); // Clear any ongoing timers
clearInterval(counterLine); // Clear any progress bar
let userAns = answer.textContent.trim(); // Get user selected option
let correctAns = questions[que_count].answer.trim(); // Get correct answer from array
const allOptions = option_list.children.length; // Get all option items
if (userAns === correctAns) {
// Handle correct answer logic
userScore += 1; // Increase score
answer.classList.add("correct"); // Add correct class
answer.insertAdjacentHTML("beforeend", tickIconTag); // Add tick icon to selected option
console.log("Correct Answer");
console.log("Your correct answers = " + userScore);
// Delay clicking the next button by 0.2 seconds
setTimeout(() => {
if (next_btn) {
next_btn.classList.add("show"); // Ensure the button is visible
// next_btn.click(); // Simulate a click on the next button
console.log("Next button clicked."); // Debugging log
} else {
console.error("Next button not found.");
}
}, 100); // 200 milliseconds delay
} else {
// Handle incorrect answer logic
answer.classList.add("incorrect"); // Add incorrect class
answer.insertAdjacentHTML("beforeend", crossIconTag); // Add cross icon to selected option
console.log("Wrong Answer");
// Highlight the correct answer
for (let i = 0; i < allOptions; i++) {
if (option_list.children[i].textContent.trim() === correctAns) {
option_list.children[i].classList.add("correct");
option_list.children[i].insertAdjacentHTML("beforeend", tickIconTag);
console.log("Auto selected correct answer.");
}
}
// Show the Next button regardless of correctness
next_btn.classList.add("show");
}
// Disable all options after selection
for (let i = 0; i < allOptions; i++) {
option_list.children[i].classList.add("disabled");
}
}
</script>
</body>
</html>
Quiz
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> </title>
<link rel="stylesheet" href="style.css">
<!-- FontAweome CDN Link for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet" />
<script src="/script.js">
/script.js
</script>
<style>
* {
user-select: none;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Poppins", sans-serif;
background-repeat: no-repeat;
background-color: #e0e5ec;
width: 90%;
}
::selection {
color: #fff;
background: #007bff;
}
.quiz_box.activeQuiz,
.result_box.activeResult {
opacity: 1;
z-index: 5;
pointer-events: auto;
}
button {
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;
}
.start_btn {
margin-top: 100px;
margin-left: 30%;
border-radius: 35px;
!important
}
.quiz_box {
width: 99vw;
border-radius: 5px;
margin-top: 20px;
opacity: 0;
margin-top: -50px;
pointer-events: none;
transition: all 0.7s ease;
}
.quiz_box header {
position: relative;
z-index: 2;
height: 70px;
padding: 0 30px;
border-radius: 5px 5px 0 0;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0px 3px 5px 1px rgba(0, 0, 0, 0.1);
}
.quiz_box header .title {
font-size: 15px;
font-weight: 600;
}
.quiz_box header .timer {
color: #004085;
background: #cce5ff;
border: 1px solid #b8daff;
height: 45px;
padding: 0px 5px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: space-between;
}
.quiz_box header .timer .time_left_txt {
font-weight: 400;
font-size: 15px;
user-select: none;
}
.quiz_box header .timer .timer_sec {
font-size: 18px;
font-weight: 500;
width: 45px;
color: #fff;
border-radius: 5px;
line-height: 30px;
text-align: center;
background: #343a40;
border: 1px solid #343a40;
user-select: none;
margin-left: 7px;
}
.quiz_box header .time_line {
position: absolute;
bottom: 0px;
left: 0px;
height: 3px;
background: #007bff;
width: 90vw;
margin-left: 3vw;
border-radius: 4px;
}
section {
padding: 25px 30px 20px 30px;
}
section .que_text {
font-size: 22px;
line-height: 31px;
font-family: Georgia, 'Times New Roman', Times, serif;
}
section .option_list {
padding: 20px 0px;
display: block;
}
section .option_list .option {
background: aliceblue;
border-radius: 5px;
padding: 10px 15px;
font-size: 17px;
margin-bottom: 15px;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.9em;
width: 100%;
padding: 1em;
margin: 1.7em 0;
text-align: left;
outline: none;
/* font-size: 17px;
padding:0.8em;
margin:1.4em 0;
*/
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;
}
section .option_list .option:last-child {
margin-bottom: 0px;
}
section .option_list .option:hover {}
section .option_list .option.correct {
color: #155724;
background: #d4edda;
}
section .option_list .option.incorrect {
color: #721c24;
background: #f8d7da;
}
section .option_list .option.disabled {
pointer-events: none;
}
section .option_list .option .icon {
height: 26px;
width: 26px;
border: 2px solid transparent;
border-radius: 50%;
text-align: center;
font-size: 13px;
pointer-events: none;
position: absolute;
right: 52px;
}
.option_list .option .icon.tick {
color: #23903c;
border-color: #23903c;
background: #d4edda;
padding-top: 5px;
}
.option_list .option .icon.cross {
color: #a42834;
background: #f8d7da;
border-color: #a42834;
padding-top: 5px;
}
footer {
height: 60px;
padding: 0 30px;
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid lightgrey;
}
footer .total_que span {
display: flex;
user-select: none;
}
footer .total_que span p {
font-weight: 500;
padding: 0 5px;
}
footer .total_que span p:first-child {
padding-left: 0px;
}
footer button {
height: 40px;
padding: 0 13px;
font-size: 18px;
font-weight: 400;
cursor: pointer;
border: none;
outline: none;
color: #fff;
border-radius: 5px;
background: #007bff;
border: 1px solid #007bff;
line-height: 10px;
opacity: 0;
pointer-events: none;
transform: scale(0.95);
transition: all 0.3s ease;
}
footer button:hover {
background: #0263ca;
}
footer button.show {
opacity: 1;
pointer-events: auto;
transform: scale(1);
}
.result_box {
display: flex;
padding: 25px 30px;
width: 99vw;
align-items: center;
flex-direction: column;
justify-content: center;
margin-top: -60vh;
opacity: 0;
margin-left: ;
pointer-events: none;
transition: all 0.3s ease;
}
.result_box .icon {
font-size: 100px;
color: #007bff;
margin-bottom: 10px;
}
.result_box .complete_text {
font-size: 20px;
font-weight: 500;
}
.result_box .score_text span {
display: flex;
margin: 10px 0;
font-size: 18px;
font-weight: 500;
}
.result_box .score_text span p {
padding: 0 4px;
font-weight: 600;
}
.result_box .buttons {
display: flex;
margin: 20px 0;
}
.result_box .buttons button {
margin: 0 10px;
height: 45px;
padding: 0 20px;
font-size: 18px;
font-weight: 500;
cursor: pointer;
border: none;
outline: none;
border-radius: 5px;
border: 1px solid #007bff;
transition: all 0.3s ease;
}
.buttons button.restart {
color: #fff;
background: #007bff;
}
.buttons button.restart:hover {
background: #0263ca;
}
.buttons button.quit {
color: #007bff;
background: #fff;
}
.buttons button.quit:hover {
color: #fff;
background: #007bff;
}
.startbutton {
color: black;
background: white;
border: none;
}
#dark-mode-toggle:after {
content: "dark";
}
* .dark-mode {
box-sizing: border-box;
}
/* Dark mode styles */
body.dark-mode {
background: #000;
color: #fff;
}
.dark-mode button {
box-shadow: 0.3rem 0.3rem 0.5rem rgba(15, 13, 18, 0.49), -0.2rem -0.2rem 0.4rem dimgrey;
}
.dark-mode .option_list .option {
background: #000;
border: 1px solid gray;
box-shadow: none;
padding: 0.97em;
background: black;
border: 1px solid rgba(132, 197, 254, 0.51);
}
.dark-mode .startbutton {
background: #000;
border: 1px solid gray;
color: white;
}
.dark-mode #dark-mode-toggle {
background: black;
box-shadow: none;
color: white;
}
.dark-mode .quiz_box header {
box-shadow: 0px 3px 5px 1px rgba(255, 255, 255, 0.15);
}
.dark-mode #dark-mode-toggle:after {
content: "Light";
}
.dark-mode .quiz_box header .timer {
color: white;
background: black;
border: 1px solid gray;
}
</style>
<style>
input,
textarea,
button,
select,
a {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
a:focus,
a:visited,
a:active {
outline: none;
}
* {
-webkit-tap-highlight-color: transparent;
}
</style>
</head>
<body>
<!-- start Quiz button -->
<div class="start_btn"><button class="startbutton">Start Quiz</button></div>
<!-- Info Box -->
<div style="display: none;" class="info_box">
<div class="buttons">
<button class="quit">Exit Quiz</button>
<button class="restart">Continue</button>
</div>
</div>
<!-- Quiz Box -->
<div class="quiz_box">
<header>
<div class="title">Quiz </div>
<button style="padding: 3px; font-size: 10px; border: 1px solid gray;" id="dark-mode-toggle"></button>
<div class="timer">
<div class="time_left_txt">Time Left</div>
<div class="timer_sec">15</div>
</div>
<div class="time_line"></div>
</header>
<section>
<div class="que_text">
<!-- Here I've inserted question from JavaScript -->
</div>
<div class="option_list">
<!-- Here I've inserted options from JavaScript -->
</div>
</section>
<!-- footer of Quiz Box -->
<footer>
<div class="total_que">
<!-- Here I've inserted Question Count Number from JavaScript -->
</div>
<button class="next_btn">Next ➜</button>
</footer>
</div>
<!-- Result Box -->
<div class="result_box">
<div class="icon">
</div>
<div class="complete_text"> You've completed the Quiz!</div>
<div class="score_text">
<!-- Here I've inserted Score Result from JavaScript -->
</div>
<div class="buttons">
<button style="display: none" class="restart">Replay Quiz</button>
<button class="quit">Quit Quiz</button>
</div>
</div>
<script>
let questions = [
];
</script>
<script>
//selecting all required elements
const start_btn = document.querySelector(".start_btn button");
const info_box = document.querySelector(".info_box");
const exit_btn = info_box.querySelector(".buttons .quit");
const continue_btn = info_box.querySelector(".buttons .restart");
const quiz_box = document.querySelector(".quiz_box");
const result_box = document.querySelector(".result_box");
const option_list = document.querySelector(".option_list");
const time_line = document.querySelector("header .time_line");
const timeText = document.querySelector(".timer .time_left_txt");
const timeCount = document.querySelector(".timer .timer_sec");
// if startQuiz button clicked
start_btn.onclick = () => {
quiz_box.classList.add("activeQuiz"); //show quiz box
showQuetions(0); //calling showQestions function
queCounter(1); //passing 1 parameter to queCounter
startTimer(15); //calling startTimer function
startTimerLine(0); //calling startTimerLine function
start_btn.style.display = "none";
};
let timeValue = 15;
let que_count = 0;
let que_numb = 1;
let userScore = 0;
let counter;
let counterLine;
let widthValue = 0;
const restart_quiz = result_box.querySelector(".buttons .restart");
const quit_quiz = result_box.querySelector(".buttons .quit");
// if restartQuiz button clicked
restart_quiz.onclick = () => {
quiz_box.classList.add("activeQuiz"); //show quiz box
result_box.classList.remove("activeResult"); //hide result box
timeValue = 15;
que_count = 0;
que_numb = 1;
userScore = 0;
widthValue = 0;
showQuetions(que_count); //calling showQestions function
queCounter(que_numb); //passing que_numb value to queCounter
clearInterval(counter); //clear counter
clearInterval(counterLine); //clear counterLine
startTimer(timeValue); //calling startTimer function
startTimerLine(widthValue); //calling startTimerLine function
timeText.textContent = "Time Left"; //change the text of timeText to Time Left
next_btn.classList.remove("show"); //hide the next button
};
// if quitQuiz button clicked
quit_quiz.onclick = () => {
window.location.reload(); //reload the current window
};
const next_btn = document.querySelector("footer .next_btn");
const bottom_ques_counter = document.querySelector("footer .total_que");
// if Next Que button clicked
next_btn.onclick = () => {
if (que_count < questions.length - 1) {
//if question count is less than total question length
que_count++; //increment the que_count value
que_numb++; //increment the que_numb value
showQuetions(que_count); //calling showQestions function
queCounter(que_numb); //passing que_numb value to queCounter
clearInterval(counter); //clear counter
clearInterval(counterLine); //clear counterLine
startTimer(timeValue); //calling startTimer function
startTimerLine(widthValue); //calling startTimerLine function
timeText.textContent = "Time Left"; //change the timeText to Time Left
next_btn.classList.remove("show"); //hide the next button
} else {
clearInterval(counter); //clear counter
clearInterval(counterLine); //clear counterLine
showResult(); //calling showResult function
}
};
// getting questions and options from array
function showQuetions(index) {
const que_text = document.querySelector(".que_text");
//creating a new span and div tag for question and option and passing the value using array index
let que_tag =
"<span>" + "Q" +
(index + 1) + " : "
+
questions[index].question +
"</span>";
let option_tag =
'<div class="option"><span>' +
questions[index].options[0] +
"</span></div>" +
'<div class="option"><span>' +
questions[index].options[1] +
"</span></div>" +
'<div class="option"><span>' +
questions[index].options[2] +
"</span></div>" +
'<div class="option"><span>' +
questions[index].options[3] +
"</span></div>";
que_text.innerHTML = que_tag; //adding new span tag inside que_tag
option_list.innerHTML = option_tag; //adding new div tag inside option_tag
const option = option_list.querySelectorAll(".option");
// set onclick attribute to all available options
for (i = 0; i < option.length; i++) {
option[i].setAttribute("onclick", "optionSelected(this)");
}
}
// creating the new div tags which for icons
let tickIconTag = '<div class="icon tick"><i class="fas fa-check"></i></div>';
let crossIconTag = '<div class="icon cross"><i class="fas fa-times"></i></div>';
// Global variables
let currentIndex = 0; // To keep track of the current question index
// Function to initialize quiz
function initializeQuiz() {
shuffleQuestions(); // Shuffle the questions array initially (optional)
showQuestions();
}
// Function to shuffle questions array (optional)
function shuffleQuestions() {
for (let i = questions.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[questions[i], questions[j]] = [questions[j], questions[i]];
// Shuffle options within each question
questions[i].options = shuffleArray(questions[i].options);
}
}
// Function to shuffle array (Fisher-Yates shuffle algorithm)
function shuffleArray(array) {
let shuffledArray = array.slice(); // Create a copy of the array
for (let i = shuffledArray.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[shuffledArray[i], shuffledArray[j]] = [shuffledArray[j], shuffledArray[i]];
}
return shuffledArray; // Return shuffled array
}
// Function to handle option selection
function optionSelected(answer) {
clearInterval(counter); // Clear any ongoing timers
clearInterval(counterLine); // Clear any progress bar
let userAns = answer.textContent.trim(); // Get user selected option
let correctAns = questions[currentIndex].answer.trim(); // Get correct answer
// Increment index for the next question
currentIndex++;
}
// Example usage:
initializeQuiz(); // Call this function to start the quiz
function showResult() {
info_box.classList.remove("activeInfo"); //hide info box
quiz_box.classList.remove("activeQuiz"); //hide quiz box
result_box.classList.add("activeResult"); //show result box
const scoreText = result_box.querySelector(".score_text");
if (userScore > 3) {
// if user scored more than 3
//creating a new span tag and passing the user score number and total question number
let scoreTag =
"<span> You got <p>" +
userScore +
"</p> out of <p>" +
questions.length +
"</p></span>";
scoreText.innerHTML = scoreTag; //adding new span tag inside score_Text
} else if (userScore > 1) {
// if user scored more than 1
let scoreTag =
"<span> You got <p>" +
userScore +
"</p> out of <p>" +
questions.length +
"</p></span>";
scoreText.innerHTML = scoreTag;
} else {
// if user scored less than 1
let scoreTag =
"<span>You got <p>" +
userScore +
"</p> out of <p>" +
questions.length +
"</p></span>";
scoreText.innerHTML = scoreTag;
}
}
function startTimer(time) {
counter = setInterval(timer, 1000);
function timer() {
timeCount.textContent = time; //changing the value of timeCount with time value
time--; //decrement the time value
if (time < 9) {
//if timer is less than 9
let addZero = timeCount.textContent;
timeCount.textContent = "0" + addZero; //add a 0 before time value
}
if (time < 0) {
//if timer is less than 0
clearInterval(counter); //clear counter
timeText.textContent = "Time Off"; //change the time text to time off
const allOptions = option_list.children.length; //getting all option items
let correcAns = questions[que_count].answer; //getting correct answer from array
for (i = 0; i < allOptions; i++) {
if (option_list.children[i].textContent == correcAns) {
//if there is an option which is matched to an array answer
option_list.children[i].setAttribute("class", "option correct"); //adding green color to matched option
option_list.children[i].insertAdjacentHTML("beforeend", tickIconTag); //adding tick icon to matched option
console.log("Time Off: Auto selected correct answer.");
}
}
for (i = 0; i < allOptions; i++) {
option_list.children[i].classList.add("disabled"); //once user select an option then disabled all options
}
next_btn.classList.add("show"); //show the next button if user selected any option
}
}
}
function startTimerLine(time) {
counterLine = setInterval(timer, 44);
function timer() {
time += 1; // upgrading time value with 1
time_line.style.width = (time / 360) * 93.5 + "vw"; // setting width relative to time
if (time > 360) {
clearInterval(counterLine); // clear counterLine
}
}
}
function queCounter(index) {
//creating a new span tag and passing the question number and total question
let totalQueCounTag =
"<span><p>" +
index +
"</p> of <p>" +
questions.length +
"</p> Questions</span>";
bottom_ques_counter.innerHTML = totalQueCounTag; //adding new span tag inside bottom_ques_counter
}
</script>
<script>
// References
let body = document.body;
let darkModeToggle = document.getElementById('dark-mode-toggle');
// Add 'dark-mode' class to body on page load
document.addEventListener('DOMContentLoaded', function() {
//agar starting me hi dark mode enable chahiye to niche wala rhega
// body.classList.add('dark-mode');
});
// Dark mode toggle button click event
darkModeToggle.addEventListener('click', function() {
body.classList.toggle('dark-mode');
});
// Your existing JavaScript code continues below
// ...
</script>
<script>
function optionSelected(answer) {
clearInterval(counter); // Clear any ongoing timers
clearInterval(counterLine); // Clear any progress bar
let userAns = answer.textContent.trim(); // Get user selected option
let correctAns = questions[que_count].answer.trim(); // Get correct answer from array
const allOptions = option_list.children.length; // Get all option items
if (userAns === correctAns) {
// Handle correct answer logic
userScore += 1; // Increase score
answer.classList.add("correct"); // Add correct class
answer.insertAdjacentHTML("beforeend", tickIconTag); // Add tick icon to selected option
console.log("Correct Answer");
console.log("Your correct answers = " + userScore);
// Delay clicking the next button by 0.2 seconds
setTimeout(() => {
if (next_btn) {
next_btn.classList.add("show"); // Ensure the button is visible
// next_btn.click(); // Simulate a click on the next button
console.log("Next button clicked."); // Debugging log
} else {
console.error("Next button not found.");
}
}, 100); // 200 milliseconds delay
} else {
// Handle incorrect answer logic
answer.classList.add("incorrect"); // Add incorrect class
answer.insertAdjacentHTML("beforeend", crossIconTag); // Add cross icon to selected option
console.log("Wrong Answer");
// Highlight the correct answer
for (let i = 0; i < allOptions; i++) {
if (option_list.children[i].textContent.trim() === correctAns) {
option_list.children[i].classList.add("correct");
option_list.children[i].insertAdjacentHTML("beforeend", tickIconTag);
console.log("Auto selected correct answer.");
}
}
// Show the Next button regardless of correctness
next_btn.classList.add("show");
}
// Disable all options after selection
for (let i = 0; i < allOptions; i++) {
option_list.children[i].classList.add("disabled");
}
}
</script>
</body>
Questions adder
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quiz Question Generator</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
padding: 20px;
}
.quiz-container {
max-width: 90%;
margin: 0 auto;
background-color: #fff;
border-radius: 8px;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.input-container {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"],
textarea {
width: 100%;
padding: 8px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.options-container {
margin-top: 10px;
display: flex;
flex-wrap: wrap;
}
.option-box {
cursor: pointer;
padding: 8px;
margin: 5px;
border: 1px solid #ccc;
border-radius: 4px;
transition: background-color 0.3s ease;
text-align: center;
flex: 1 0 45%;
/* Adjust width for responsiveness */
max-width: 200px;
/* Maximum width for each option box */
box-sizing: border-box;
}
.option-box:hover {
background-color: #f0f0f0;
}
.answer-section {
margin-top: 20px;
}
button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
margin-top: 10px;
width: 100%;
box-sizing: border-box;
}
button:hover {
background-color: #45a049;
}
#output{
background: #CACACA;
overflow-x: auto;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="quiz-container">
<div class="input-container">
<label for="question">Question:</label>
<input type="text" id="question" placeholder="Enter your question...">
</div>
<div class="input-container">
<label for="options">Options (separated by commas):</label>
<input type="text" id="options" placeholder="Option 1, Option 2, Option 3...">
</div>
<button onclick="generateOutput()">Generate Output</button>
<div class="options-container" id="optionsContainer"></div>
<div class="answer-section">
<strong>Output:</strong><br>
<pre class="copyable" id="output"></pre>
</div>
</div>
<script>
function generateOutput() {
var question = document.getElementById('question').value.trim();
var optionsString = document.getElementById('options').value.trim();
var options = optionsString.split(',').map(option => option.trim());
var output = {
question: question,
answer: "",
options: options
};
var outputString = `
{
question: "${question}",
answer: "${output.answer}",
options: [ "${options.join('", "')}" ]
},
`.replace(/}$/g, '},'); // Adds comma after }
// Display the output string
document.getElementById('output').textContent = outputString;
// Clear previous options display
var optionsContainer = document.getElementById('optionsContainer');
optionsContainer.innerHTML = ''; // Clear previous options
// Create option boxes
options.forEach(function(option) {
var optionBox = document.createElement('div');
optionBox.classList.add('option-box');
optionBox.textContent = option;
optionBox.onclick = function() {
output.answer = option;
// Update displayed output on option click
document.getElementById('output').textContent = `
{
question: "${question}",
answer: "${output.answer}",
options: [ "${options.join('" , "')}" ]
},
`
.replace(/}$/g, '},'); // Adds comma after }
};
optionsContainer.appendChild(optionBox);
});
}
document.addEventListener('click', (event) => {
if (event.target.classList.contains('copyable')) {
const temp = document.createElement('textarea');
temp.value = event.target.textContent;
document.body.appendChild(temp);
temp.select();
document.execCommand('copy');
document.body.removeChild(temp);
// Add CSS styles directly to the element
event.target.style.cssText = 'opacity: 0.5; color: red; border: none;';
// Reset the styles after 1 second
setTimeout(() => {
event.target.style.cssText = ''; // Reset all styles
}, 1000);
}
});
</script>
</body>
</html>
Dark mode toolger
<!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>Document</title>
<style>
*{
text-align: center;
}
body {
background: silver;
background-color: #e0e5ec;
}
pre {
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
text-align: left;
width: 80vw;
line-height: 20px;
overflow-x: auto;
border-radius: 10px;
box-shadow: 0.3rem 0.3rem 0.5rem rgba(195, 193, 198, 0.9), -0.2rem -0.2rem 0.4rem #fff;
margin: auto;
padding: 9px 15px;
margin-bottom: 30px;
}
span {
margin: 10px;
width: 80vw;
margin: auto;
}
code{
font-family: normal;
font-size: 15px;
}
#dark-mode-toggle:after {
content: "dark";
}
/* Dark mode styles */
body.dark-mode {
background: #000;
color: #fff;
}
.dark-mode pre {
box-shadow: 0.3rem 0.3rem 0.5rem rgba(15, 13, 18, 0.49), -0.2rem -0.2rem 0.4rem gray;
}
.dark-mode
#dark-mode-toggle:after {
content: "light";
}
</style>
</head>
<body>
<br>
<br>
<button id="dark-mode-toggle"></button>
<h1> Dark mode toolger</h1>
<br>
<pre><code class="copyable"><button id="dark-mode-toggle">Dark</button>
</code></pre>
<pre><code class="copyable"><script>
// References
let body = document.body;
let darkModeToggle = document.getElementById('dark-mode-toggle');
// Add 'dark-mode' class to body on page load
document.addEventListener('DOMContentLoaded', function() {
//agar starting me hi dark mode enable chahiye to niche wala rhega
body.classList.add('dark-mode');
});
// Dark mode toggle button click event
darkModeToggle.addEventListener('click', function() {
body.classList.toggle('dark-mode');
});
// Your existing JavaScript code continues below
// ...
</script>
</code></pre>
<pre><code class="copyable">
/* Dark mode styles */
body.dark-mode {
background: #000;
color: #fff;
}
.dark-mode button {
box-shadow: 0.3rem 0.3rem 0.5rem rgba(15, 13, 18, 0.49), -0.2rem -0.2rem 0.4rem dimgrey;
}
</code></pre>
<script>
document.addEventListener('click', (event) => {
if (event.target.classList.contains('copyable')) {
const temp = document.createElement('textarea');
temp.value = event.target.textContent;
document.body.appendChild(temp);
temp.select();
document.execCommand('copy');
document.body.removeChild(temp);
// Add CSS styles directly to the element
event.target.style.cssText = 'opacity: 0.5; color: red; border: none;';
// Reset the styles after 1 second
setTimeout(() => {
event.target.style.cssText = ''; // Reset all styles
}, 1000);
}
});
</script>
<script>
// References
let body = document.body;
let darkModeToggle = document.getElementById('dark-mode-toggle');
// Add 'dark-mode' class to body on page load
document.addEventListener('DOMContentLoaded', function() {
//agar starting me hi dark mode enable chahiye to niche wala rhega
});
// Dark mode toggle button click event
darkModeToggle.addEventListener('click', function() {
body.classList.toggle('dark-mode');
});
// Your existing JavaScript code continues below
// ...
</script>
</body>
</html>
Input answer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quiz</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet" />
<style>
body {
font-family: "Poppins", sans-serif;
}
::selection {
color: #fff;
background: #007bff;
}
button {
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;
}
.quiz_box {
width: 95vw;
border-radius: 5px;
margin: auto;
margin-top: 50px;
pointer-events: auto;
transition: all 0.7s ease;
position: relative;
}
.quiz_box header {
position: relative;
height: 70px;
padding: 0 30px;
border-radius: 5px 5px 0 0;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0px 3px 5px 1px rgba(0, 0, 0, 0.1);
}
.quiz_box header .title {
font-size: 15px;
font-weight: 600;
}
.quiz_box header .timer {
color: #004085;
background: #cce5ff;
border: 1px solid #b8daff;
height: 45px;
padding: 0px 5px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: space-between;
}
.quiz_box header .timer .time_left_txt {
font-weight: 400;
font-size: 15px;
user-select: none;
}
.quiz_box header .timer .timer_sec {
font-size: 18px;
font-weight: 500;
width: 45px;
color: #fff;
border-radius: 5px;
line-height: 30px;
text-align: center;
background: #343a40;
border: 1px solid #343a40;
user-select: none;
margin-left: 7px;
}
section {
padding: 45px 20px 55px 20px;
position: relative;
}
section .que_text {
font-size: 22px;
line-height: 31px;
font-family: Georgia, 'Times New Roman', Times, serif;
}
footer {
height: 60px;
padding: 0 30px;
display: flex;
align-items: center;
justify-content: space-around;
border-top: 1px solid lightgrey;
}
footer .total_que span {
display: flex;
user-select: none;
}
footer .total_que span p {
font-weight: 500;
padding: 0 5px;
}
footer .total_que span p:first-child {
padding-left: 0px;
}
footer button {
height: 40px;
padding: 0 13px;
font-size: 18px;
font-weight: 400;
cursor: pointer;
border: 1px solid #007bff;
outline: none;
color: #fff;
border-radius: 5px;
background: #007bff;
line-height: 10px;
pointer-events: auto;
transform: scale(0.95);
transition: all 0.3s ease;
}
#timer-fill {
height: 3px;
width: 0%;
background-color: #3498db;
border-radius: 5px;
position: absolute;
top: 0;
left: 0;
transition: width 0.1s;
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
padding-top: 60px;
}
.modal-content {
background-color: #fefefe;
margin: 5% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
border-radius: 10px;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.results {
display: flex;
flex-direction: column;
white-space: pre-line;
}
.result-item {
padding: 5px;
margin: 2px;
border-bottom: 1px solid #ccc;
}
.line-gap {
margin: 8px 0;
}
input {
width: 90%;
padding: 10px;
margin: auto;
outline: none;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
transition: border-color 0.3s, box-shadow 0.3s;
}
input:focus {
border-color: #2196F3;
box-shadow: 0 0 5px rgba(33, 150, 243, 0.7);
}
</style>
</head>
<body>
<div class="quiz_box">
<header>
<div class="title">Quiz</div>
<div class="timer">
<div class="time_left_txt">Time Left</div>
<div class="timer_sec" id="timer-text">15</div>
</div>
</header>
<div style="width: 100%; position: relative;">
<div id="timer-fill"></div>
</div>
<section>
<div class="que_text">𝑸𝒖𝒆𝒔𝒕𝒊𝒐𝒏 » </div>
<div class="que_text" id="question"></div>
<br>
<div class="que_text">𝑨𝒏𝒔𝒘𝒆𝒓 » </div>
<input type="text" id="userAnswer" placeholder="Your Answer" oninput="checkInputLength()">
</section>
<footer>
<div class="total_que">
<button id="submitBtn" onclick="checkAnswer()">Submit</button>
<button id="showBtn" onclick="showResults()">Show Incorrect</button>
</footer>
</div>
<div id="resultModal" class="modal">
<div class="modal-content">
<span class="close" onclick="closeModal()">×</span>
<div id="modalBody" class="results"></div>
</div>
</div>
<script>
const questionsAndAnswers = {
};
let questionList = Object.keys(questionsAndAnswers);
let currentQuestion;
let correctAnswer;
let timeLeft = 15;
let isTimerRunning = false;
let timerInterval;
let incorrectAnswers = [];
let timedOutQuestions = [];
let lastQuestionIndex = -1;
function generateQuestion() {
let randomIndex;
do {
randomIndex = Math.floor(Math.random() * questionList.length);
} while (randomIndex === lastQuestionIndex);
lastQuestionIndex = randomIndex;
currentQuestion = questionList[randomIndex];
correctAnswer = questionsAndAnswers[currentQuestion];
document.getElementById("question").innerText = `${currentQuestion}?`;
document.getElementById("userAnswer").value = "";
timeLeft = 20; // Set initial time to 15 seconds
document.getElementById("timer-text").innerText = `${timeLeft}s`;
document.getElementById("timer-fill").style.width = '0%'; // Set initial width to 0%
startTimer();
}
function startTimer() {
if (isTimerRunning) return;
isTimerRunning = true;
const startTime = Date.now();
const totalTime = timeLeft * 1000; // Convert seconds to milliseconds
timerInterval = setInterval(function() {
const elapsed = Date.now() - startTime;
timeLeft = Math.floor((totalTime - elapsed) / 1000); // Use Math.floor to avoid rounding up
const progress = Math.max((elapsed / totalTime), 0); // Calculate progress (0 to 1)
document.getElementById("timer-fill").style.width = `${progress * 100}%`; // Fill from left to right
document.getElementById("timer-text").innerText = `${Math.max(timeLeft, 0)}s`; // Ensure the display is not negative
if (timeLeft <= -1) {
clearInterval(timerInterval);
isTimerRunning = false;
timedOutQuestions.push({ question: currentQuestion, answer: correctAnswer });
alert(`Time's up!!\n\n✔ ${currentQuestion} ➠ ${correctAnswer}`);
generateQuestion();
}
}, 100);
}
function stopTimer() {
clearInterval(timerInterval);
isTimerRunning = false;
}
function resumeTimer() {
startTimer();
}
function checkAnswer() {
stopTimer();
const userAnswer = document.getElementById("userAnswer").value.trim();
if (userAnswer.toLowerCase() === correctAnswer.toLowerCase()) {
generateQuestion();
} else {
incorrectAnswers.push({
question: currentQuestion,
userAnswer: userAnswer,
correctAnswer: correctAnswer
});
alert(`Incorrect!\n✘ ${currentQuestion} = ${userAnswer} ✘\n\n✔ ${currentQuestion} ➠ ${correctAnswer}`);
generateQuestion();
}
}
function checkInputLength() {
const userAnswer = document.getElementById("userAnswer").value;
const answerLength = correctAnswer.length;
if (userAnswer.length === answerLength) {
setTimeout(function() {
document.getElementById("submitBtn").click();
}, 30);
}
}
function showResults() {
stopTimer(); // Stop the timer before showing the modal
if (incorrectAnswers.length === 0 && timedOutQuestions.length === 0) {
showModal("No incorrect answers or timed-out questions yet.");
return;
}
let summary = "";
// Include incorrect answers
incorrectAnswers.forEach(item => {
summary += `\nQuestion: ${item.question}\n\nUser answer: ${item.userAnswer}\n\n✔✔✔✔✔✔ ${item.question}: ${item.correctAnswer}\n\n\n\n\n\n`; // Eight line gaps
});
// Include timed-out questions
timedOutQuestions.forEach(item => {
summary += `Question: ${item.question}\n${item.question}: ${item.answer}\n\n\n\n\n\n`; // Eight line gaps
});
// Clear incorrect answers and timed-out questions after displaying them
incorrectAnswers = [];
timedOutQuestions = [];
showModal(summary);
}
function showModal(content) {
document.getElementById("modalBody").innerText = content;
document.getElementById("resultModal").style.display = "block";
}
function closeModal() {
document.getElementById("resultModal").style.display = "none";
resumeTimer(); // Resume the timer after closing the modal
}
// Initialize the first question
generateQuestion();
</script>
</body>
</html>