<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Parmar Sir Quiz </title>
<link rel="stylesheet" href="/css/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" />
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/pyq.css">
</head>
<body>
<div id="svg"></div>
<div class="box" id="themeBox" onclick="toggleFloatingBox()">Light</div>
<div class="floating-box" id="floatingBox">
<button class="theme-btn" onclick="setTheme('' , 'Light')">Light</button>
<button class="theme-btn" onclick="setTheme('dark-mode', 'Dark')">Dark</button>
</div>
<div class="start_btn"><button class="startbutton">Start Quiz</button>
<br><br>
<input type="range" id="timeRange" min="10" max="45" value="15" step="5">
<p>Time: <span id="timeValueDisplay">15</span> sec </p>
</div>
<div class="quiz_box">
<br> <br>
<p class="Join" style="font-size: 12px; margin-bottom: 7px; text-align: center;">Join official telegram channel <a style="color: lightseagreen; text-decoration: none; font-size: 15px;" href="http://t.me/parmarsirquiz"> @ParmarSirQuiz </a> </p>
<header>
<div class="title"> </div>
<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"> </div>
<div class="HindiQue_text"></div>
<div class="Shift_text"> </div>
<div class="option_list"> </div>
</section>
<footer>
<div class="total_que"> </div>
<button class="next_btn">Next ➜</button>
</footer>
</div>
<div class="result_box">
<div class="icon"> </div>
<div class="complete_text"> You've completed the Quiz!</div>
<div class="score_text"> </div>
<div class="buttons">
<button class="review_btn" onclick="toggleReviewOptions()" style="background: #007BFF; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 16px;">Review</button>
<div id="reviewOptions" class="review-options" style="display:none; opacity: 0; transition: opacity 0s;">
<button class="option-btn" onclick="handleReviewOption('all')">All</button>
<button class="option-btn" onclick="handleReviewOption('timedOut')">Timed Out</button>
<button class="option-btn" onclick="handleReviewOption('incorrect')">Incorrect</button>
</div>
<br>
<button class="quit">Quit Quiz</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.6/lottie.min.js"></script>
<script>
let questions = [
];
</script>
<script src="/js/script.js"></script>
<script src="/js/alert.js"></script>
</body>
</html>
* {
user-select: none;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Poppins", sans-serif;
background-color: #e0e5ec;
background: #fff;
}
.quiz_box.activeQuiz,
.result_box.activeResult {
opacity: 1;
z-index: 5;
pointer-events: auto;
}
.start_btn {
margin-top: 100px;
justify-content: center;
text-align: center;
}
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: 2px;
opacity: 0;
position: absolute;
top: 4px;
height: auto;
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: 17px;
line-height: 26px;
font-family: Georgia, 'Times New Roman', Times, serif;
}
section .option_list {
padding: 20px 0px;
display: block;
}
section .option_list .option {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border-radius: 0.56em;
font-size: 0.9em;
width: 100%;
padding: 1em;
margin: 1.7em 0;
text-align: left;
outline: none;
}
.option span::before {
padding-right: 5px;
}
.dark-mode .option span::before {}
.option:nth-child(1) span::before {
content: ' a) ';
}
.option:nth-child(2) span::before {
content: ' b) ';
}
.option:nth-child(3) span::before {
content: ' c) ';
}
.option:nth-child(4) span::before {
content: ' d) ';
}
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: 15px;
}
.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;
transform: scale(0.95);
transition: background-color 0.3s ease, transform 0.1s ease;
}
footer button:active {
background: #0263ca;
background-color: #0056b3;
transform: scale(0.85);
}
.next_btn {
pointer-events: none;
}
footer button.show {
opacity: 1;
pointer-events: auto;
transform: scale(1);
z-index: 100000;
}
.result_box {
position: absolute;
display: flex;
padding: 25px 30px;
width: 99vw;
align-items: center;
flex-direction: column;
justify-content: center;
opacity: 0;
top: 40px;
pointer-events: none;
transition: all 0.3s ease;
}
.result_box span {
color: red;
font-weight: 600;
font-size: 25px;
}
.result_box .buttons button {
margin: 0 10px;
height: 45px;
padding: 0 15px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
background: #fff;
border: none;
outline: none;
border-radius: 5px;
transition: all 0.3s ease;
}
.buttons {
display: flex;
margin-top: 50px;
}
.startbutton {
color: black;
background: white;
border: none;
}
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 body {
color: #fff;
background: #000;
}
.dark-mode .option_list .option {
transition: background-color 0.3s, transform 0.2s, box-shadow 0.2s;
background-color: #141414;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.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;
}
.dark-mode .quiz_box header {
background-color: #181818;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7);
}
.dark-mode .quiz_box header .timer {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
color: #fff;
background: #191919;
border: none;
}
.dark-mode footer button {
background: #202020;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
border: none;
background: #171717;
}
.dark-mode .buttons button {
background: #181818;
border: None;
color: #fff;
box-shadow: none;
}
.dark-mode .quit {
background: #171717 !important;
}
.Shift_text {
margin-top: 10px;
text-align: right;
color: red;
font-size: 13px;
}
.hidden {
display: none;
}
.HindiQue_text {
font-size: 15px;
color: deepskyblue;
font-weight: 400;
margin-top: 3px;
}
.timeout-badge {
color: red;
font-size: 14px;
font-weight: 400;
}
.review-options {
position: absolute;
margin-top: 50px;
z-index: 1;
border-radius: 10px;
background: white;
}
.dark-mode .review-options {
background: #070707;
}
section {
max-height: 65vh;
overflow-y: auto;
}
.quesNum {
font-size: 27px;
color: red;
font-weight: bold;
display: inline;
}
.floating-box {
margin-left: 10px;
padding: 15px;
background-color: white;
border-radius: 12px;
display: none;
opacity: 0;
pointer-events: none;
display: flex;
position: absolute;
justify-content: space-around;
right: 10px;
top: 39px;
flex-flow: row wrap;
transform: translateY(-10px);
transition: opacity 0.4s ease, transform 0.4s ease;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
z-index: 10;
}
.floating-box.show {
display: block;
pointer-events: auto;
opacity: 1;
transform: translateY(10px);
}
.dark-mode .theme-btn {
box-shadow: none;
}
.theme-btn,
.box {
padding: 8px 12px;
cursor: pointer;
border: none;
outline: none;
margin: 5px 5px;
border-radius: 8px;
font-size: 14px;
background-color: #f1f1f1;
transition: background-color 0.3s ease;
}
.dark-mode .box {
background: #222;
color: #fff;
}
.dark-mode .floating-box {
background: #000;
border: 1px solid gray;
}
.box {
position: absolute;
right: 10px;
top: 2px;
z-index: 20;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.dark-mode .theme-btn {
color: #fff;
background: #222;
}
#svg {
position: absolute;
z-index: 1000000;
left: -70px;
width: 500px;
overflow: hidden;
}
.title{
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
width: 140px;
padding: 5px;
}
/* Change the width and color of the scrollbar */
.title::-webkit-scrollbar {
height: 3px; /* Set the height of the horizontal scrollbar */
}
/* Style the scrollbar handle (the draggable part) */
.title::-webkit-scrollbar-thumb {
background-color: #888; /* Set the color of the scrollbar handle */
border-radius: 10px; /* Round the corners of the scrollbar thumb */
}
const floatingBox = document.getElementById('floatingBox');
const themeBox = document.getElementById('themeBox');
// Toggle the floating box visibility
function toggleFloatingBox() {
if (floatingBox.classList.contains('show')) {
closeFloatingBox();
} else {
openFloatingBox();
}
}
// Open the floating box with animation
function openFloatingBox() {
floatingBox.classList.add('show');
}
// Close the floating box with animation
function closeFloatingBox() {
floatingBox.classList.remove('show');
}
// Set the theme and update the box content
function setTheme(theme, themeName) {
document.documentElement.className = theme; // Apply theme to the document
themeBox.textContent = themeName; // Update box content
closeFloatingBox(); // Hide floating box after selection
}
document.addEventListener('DOMContentLoaded', function() {
setTheme('dark-mode', 'Dark');
});
// Click outside to close the floating box
window.onclick = function(event) {
if (!themeBox.contains(event.target) && !floatingBox.contains(event.target)) {
closeFloatingBox();
}
};
const start_btn = document.querySelector(".start_btn button");
const svgContainer = document.getElementById("svg");
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");
let correctQuestions = [];
let incorrectQuestions = [];
let timedOutQuestions = [];
let answeredQuestions = [];
start_btn.onclick = () => {
quiz_box.classList.add("activeQuiz");
startTimer(timeValue);
showQuetions(0);
queCounter(1);
startTimerLine(0);
start_btn.style.display = "none";
const elements = document.querySelectorAll('.start_btn');
elements.forEach(element => {
element.style.display = 'none';
});
};
const timeRange = document.getElementById('timeRange');
const timeValueDisplay = document.getElementById('timeValueDisplay');
// Set initial time value
let timeValue = timeRange.value;
// Update the timeValue when the range changes
timeRange.addEventListener('input', function() {
timeValue = timeRange.value;
timeValueDisplay.textContent = timeValue; // Update displayed time
});
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");
quit_quiz.onclick = () => {
// if (confirm('Do you want to replay the quiz? \n\nYou can see review of all questions')) {
{
location.reload();
}
};
const next_btn = document.querySelector("footer .next_btn");
const bottom_ques_counter = document.querySelector("footer .total_que");
next_btn.onclick = () => {
if (que_count < questions.length - 1) {
que_count++;
que_numb++;
showQuetions(que_count);
queCounter(que_numb);
clearInterval(counter);
clearInterval(counterLine);
startTimer(timeValue);
startTimerLine(widthValue);
timeText.textContent = "Time Left";
next_btn.classList.remove("show");
svgContainer.innerHTML = "";
if (que_count === questions.length - 1) {
next_btn.textContent = "Finish";
}
} else {
clearInterval(counter);
clearInterval(counterLine);
showResult();
}
};
function showQuetions(index) {
const que_text = document.querySelector(".que_text");
const Shift_text = document.querySelector(".Shift_text");
const HindiQue_text = document.querySelector(".HindiQue_text");
let que_tag = '<p class="quesNum">' + (index + 1) + '</p>. ' + questions[index].question + '</span>';
let Shift_tag = questions[index].Shift ? questions[index].Shift : "";
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>';
let HindiQue_tag = questions[index].HindiQue ? questions[index].HindiQue : "";
que_text.innerHTML = que_tag;
Shift_text.innerHTML = Shift_tag;
option_list.innerHTML = option_tag;
HindiQue_text.innerHTML = HindiQue_tag;
const option = option_list.querySelectorAll(".option");
for (let i = 0; i < option.length; i++) {
option[i].setAttribute("onclick", "optionSelected(this)");
}
}
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>';
let currentIndex = 0;
function initializeQuiz() {
shuffleQuestions();
showQuestions();
}
/*
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]];
questions[i].options = shuffleArray(questions[i].options);
}
}
function shuffleArray(array) {
let shuffledArray = array.slice();
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;
}
*/
function optionSelected(answer) {
clearInterval(counter);
clearInterval(counterLine);
let userAns = answer.textContent.trim();
let correctAns = questions[currentIndex].answer.trim();
currentIndex++;
}
initializeQuiz();
function showResult() {
quiz_box.classList.remove("activeQuiz");
result_box.classList.add("activeResult");
const scoreText = result_box.querySelector(".score_text");
let scoreTag =
"<p> You got <span>" + userScore + " </span> out of <span> " + questions.length + "</span</p>";
scoreText.innerHTML = scoreTag;
}
function startTimerLine() {
const totalTime = timeValue * 1000 / 20;
let time = 0;
counterLine = setInterval(timer, 20);
function timer() {
time += 1;
time_line.style.width = (time / totalTime) * 93.5 + "vw";
if (time >= totalTime) {
clearInterval(counterLine);
}
}
}
function queCounter(index) {
let totalQueCounTag =
"<span><p>" + index + "</p> of <p>" + questions.length + "</p> Questions</span>";
bottom_ques_counter.innerHTML = totalQueCounTag;
}
function showReviewQuestions() {
const timeline = document.querySelector(".time_line");
if (timeline) {
timeline.style.display = "none";
}
const timeLeftText = document.querySelector(".timer");
if (timeLeftText) {
timeLeftText.style.display = "none";
}
que_count = 0;
quiz_box.classList.add("activeQuiz");
result_box.classList.remove("activeResult");
combineAnsweredQuestions();
showAnsweredQuestion(que_count);
}
function optionSelected(answer) {
clearInterval(counter);
clearInterval(counterLine);
let userAns = answer.textContent.trim();
let correctAns = questions[que_count].answer.trim();
const allOptions = option_list.children.length;
let isCorrect = userAns === correctAns;
if (isCorrect) {
correctQuestions.push({
questionIndex: que_count,
question: questions[que_count].question,
userAnswer: userAns,
correctAnswer: correctAns,
correct: true
});
userScore += 1;
answer.classList.add("correct");
answer.insertAdjacentHTML("beforeend", tickIconTag);
// playAnimation();
}
else {
incorrectQuestions.push({
questionIndex: que_count,
question: questions[que_count].question,
userAnswer: userAns,
correctAnswer: correctAns,
correct: false
});
answer.classList.add("incorrect");
answer.insertAdjacentHTML("beforeend", crossIconTag);
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);
}
}
}
for (let i = 0; i < allOptions; i++) {
option_list.children[i].classList.add("disabled");
}
next_btn.classList.add("show");
}
function playAnimation() {
svgContainer.style.display = "block";
const animItem = lottie.loadAnimation({
container: svgContainer,
renderer: "svg",
loop: false,
autoplay: true,
path: "https://assets2.lottiefiles.com/packages/lf20_u4yrau.json"
});
animItem.addEventListener('complete', () => {
svgContainer.style.display = "none";
svgContainer.innerHTML = "";
});
}
function startTimer(time) {
timeCount.textContent = time;
counter = setInterval(timer, 1000);
function timer() {
time--;
if (time >= 0) {
timeCount.textContent = time < 10 ? `0${time}` : time;
}
if (time < 1) {
clearInterval(counter);
timeText.textContent = "Time Off";
const allOptions = option_list.children.length;
let correctAns = questions[que_count].answer;
for (let i = 0; i < allOptions; i++) {
option_list.children[i].classList.add("disabled");
}
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);
}
}
const que_text = document.querySelector(".que_text");
const badge_tag = '<div class="badge timeout-badge">Time is out</div>';
que_text.innerHTML = badge_tag + que_text.innerHTML;
timedOutQuestions.push({
questionIndex: que_count,
question: questions[que_count].question,
userAnswer: "Time Out",
correctAnswer: correctAns,
correct: false
});
next_btn.classList.add("show");
}
}
}
function showAnsweredQuestion(index) {
if (index < 0 || index >= answeredQuestions.length) {
console.error("Invalid question index.");
return;
}
const que_text = document.querySelector(".que_text");
const Shift_text = document.querySelector(".Shift_text");
const option_list = document.querySelector(".option_list");
const HindiQue_text = document.querySelector(".HindiQue_text");
const question = questions.find(q => q.question === answeredQuestions[index].question);
if (!question) {
console.error("Question not found.");
return;
}
const userAnswer = answeredQuestions[index].userAnswer;
const correctAnswer = answeredQuestions[index].correctAnswer;
let que_tag = `<p class="quesNum">${answeredQuestions[index].questionIndex + 1}.</p> ${answeredQuestions[index].question}`;
let badge_tag = '';
if (userAnswer === "Time Out") {
badge_tag = `<div class="badge timeout-badge">Time out question</div>`;
}
let option_tags = question.options.map(option => {
let className = '';
let iconTag = '';
if (option === correctAnswer) {
className = 'correct';
iconTag = tickIconTag;
} else if (option === userAnswer && userAnswer !== "Time Out") {
className = 'incorrect';
iconTag = crossIconTag;
}
return `<div class="option ${className}"><span>${option}</span>${iconTag}</div>`;
}).join('');
que_text.innerHTML = badge_tag + que_tag;
Shift_text.innerHTML = question.Shift || "";
option_list.innerHTML = option_tags;
HindiQue_text.innerHTML = question.HindiQue || "";
next_btn.onclick = () => {
if (index < answeredQuestions.length - 1) {
showAnsweredQuestion(index + 1);
} else {
result_box.classList.add("activeResult");
quiz_box.classList.remove("activeQuiz");
}
};
next_btn.classList.add("show");
}
function combineAnsweredQuestions() {
answeredQuestions = [
...correctQuestions,
...incorrectQuestions,
...timedOutQuestions
];
answeredQuestions.sort((a, b) => a.questionIndex - b.questionIndex);
}
function styleButtons() {
const buttons = document.querySelectorAll('.option-btn');
buttons.forEach(button => {
button.style.width = 'auto';
button.style.margin = '8px';
});
}
function toggleReviewOptions() {
const reviewOptions = document.getElementById('reviewOptions');
const isVisible = reviewOptions.style.display === 'block';
reviewOptions.style.transition = 'opacity 0.5s';
reviewOptions.style.opacity = isVisible ? '0' : '1';
setTimeout(() => {
reviewOptions.style.display = isVisible ? 'none' : 'block';
if (!isVisible) styleButtons();
}, 500);
const totalCorrect = correctQuestions.length;
const totalIncorrect = incorrectQuestions.length;
const totalTimedOut = timedOutQuestions.length;
const totalQuestions = totalCorrect + totalIncorrect + totalTimedOut;
reviewOptions.querySelector("button[onclick=\"handleReviewOption('all')\"]").innerText = `All (${totalQuestions})`;
const timedOutButton = reviewOptions.querySelector("button[onclick=\"handleReviewOption('timedOut')\"]");
if (totalTimedOut > 0) {
timedOutButton.innerText = `Timed Out (${totalTimedOut})`;
timedOutButton.style.display = 'block';
} else {
timedOutButton.style.display = 'none';
}
const incorrectButton = reviewOptions.querySelector("button[onclick=\"handleReviewOption('incorrect')\"]");
if (totalIncorrect > 0) {
if (totalTimedOut > 0) {
incorrectButton.innerText = `Incorrect (${totalIncorrect}+${totalTimedOut}=${totalIncorrect + totalTimedOut})`;
} else {
incorrectButton.innerText = `Incorrect (${totalIncorrect})`;
}
incorrectButton.style.display = 'block';
}
else {
incorrectButton.style.display = 'none';
}
}
function handleReviewOption(option) {
const reviewOptions = document.getElementById('reviewOptions');
reviewOptions.style.opacity = '0';
reviewOptions.style.transition = 'opacity 0.5s';
setTimeout(() => {
reviewOptions.style.display = 'none';
}, 500);
combineAnsweredQuestions(option);
showReviewQuestions();
}
function combineAnsweredQuestions(filter) {
if (filter === 'all') {
answeredQuestions = [
...correctQuestions,
...incorrectQuestions,
...timedOutQuestions
];
} else if (filter === 'timedOut') {
answeredQuestions = [
...timedOutQuestions
];
} else if (filter === 'incorrect') {
answeredQuestions = [
...incorrectQuestions,
...timedOutQuestions
];
}
answeredQuestions.sort((a, b) => a.questionIndex - b.questionIndex);
}
function showReviewQuestions() {
const timeline = document.querySelector(".time_line");
const timeLeftText = document.querySelector(".timer");
if (timeline) timeline.style.display = "none";
if (timeLeftText) timeLeftText.style.display = "none";
que_count = 0;
quiz_box.classList.add("activeQuiz");
result_box.classList.remove("activeResult");
showAnsweredQuestion(que_count);
const footer = document.querySelector("footer");
footer.innerHTML = "";
footer.style.justifyContent = 'space-around';
const createButton = (text, className, callback, isVisible) => {
const button = document.createElement("button");
button.textContent = text;
button.className = className;
button.style.display = "block";
button.style.opacity = isVisible ? "1" : "0";
button.addEventListener("click", callback);
return button;
};
const backButton = createButton("Back", "back_btn", () => {
if (que_count > 0) {
que_count--;
showAnsweredQuestion(que_count);
updateButtonVisibility();
} else {
console.log("This is the first question.");
}
}, que_count > 0);
const forwardButton = createButton("Next", "forward_btn", () => {
if (que_count < answeredQuestions.length - 1) {
que_count++;
showAnsweredQuestion(que_count);
updateButtonVisibility();
} else {
console.log("This is the last question.");
}
}, que_count < answeredQuestions.length - 1);
const finishButton = createButton("Finish", "finish_btn", () => {
quiz_box.classList.remove("activeQuiz");
result_box.classList.add("activeResult");
}, true);
footer.append(backButton, finishButton, forwardButton);
function updateButtonVisibility() {
backButton.style.opacity = que_count === 0 ? "0" : "1";
forwardButton.style.opacity = que_count === answeredQuestions.length - 1 ? "0" : "1";
}
console.log("Buttons added to footer:", footer);
}