Prepxa Mock Test - NEET Physics

Okay, here is the setup for the Prepxa Mock Test/Exam Page UI. Prepxa Mock Test - NEET Physics

Attempted: 0 Marked: 0 Remaining: 45

Question 1/45

A body of mass 2 kg is thrown vertically upwards with an initial velocity of 20 m/s. What will be its potential energy at the end of 2 seconds? (Assume g = 10 m/s²)

Attempted Marked for Review Unattempted Current

:root { --primary-color: #4834d4; --accent-color: #be2edd; --bs-primary-rgb: 72, 52, 212; /* For Bootstrap components */ --bs-primary: var(--primary-color); --bs-link-color-rgb: var(--bs-primary-rgb); --bs-link-hover-color-rgb: 58, 42, 170; /* Darker primary */ } body { background-color: #f8f9fa; /* Light background */ padding-top: 56px; /* Height of fixed navbar */ padding-bottom: 70px; /* Height of fixed bottom navbar */ } /* Custom primary button color */ .btn-primary-custom { --bs-btn-color: #fff; --bs-btn-bg: var(--primary-color); --bs-btn-border-color: var(--primary-color); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #3a2ab0; --bs-btn-hover-border-color: #3628a3; --bs-btn-focus-shadow-rgb: 49, 132, 253; --bs-btn-active-color: #fff; --bs-btn-active-bg: #3628a3; --bs-btn-active-border-color: #322596; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--primary-color); --bs-btn-disabled-border-color: var(--primary-color); opacity: 0.85; } .bg-primary-custom { background-color: var(--primary-color) !important; } .text-primary-custom { color: var(--primary-color) !important; } .text-primary-emphasis { color: var(--primary-color) !important; } .navbar-brand.subject-title { font-size: 1.1rem; font-weight: 500; color: var(--primary-color); } .timer { font-size: 0.95rem; } .main-content { padding-bottom: 100px; /* Extra padding for bottom nav */ } .question-panel .card-body { padding: 1.5rem; } .question-text { font-size: 1.1rem; line-height: 1.6; } .options-list .btn-option { display: block; width: 100%; text-align: left; margin-bottom: 0.75rem; padding: 0.8rem 1.2rem; border: 1px solid #dee2e6; background-color: #fff; color: #212529; border-radius: 0.375rem; transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, transform 0.1s ease; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } .options-list .btn-option:hover { background-color: #f8f9fa; border-color: #ced4da; } .options-list .btn-option:active { transform: scale(0.98); /* Tap animation */ } .options-list .btn-option.selected { background-color: var(--primary-color); border-color: var(--primary-color); color: #fff; font-weight: 500; box-shadow: 0 4px 8px rgba(72, 52, 212, 0.2); } .options-list .btn-option input[type="radio"] { display: none; /* Hide actual radio button */ } .shadow-top { box-shadow: 0 -0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; } .fixed-bottom { z-index: 1020; /* Below navbar, above offcanvas backdrop */ } /* Question Navigator Grid */ .question-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(45px, 1fr)); gap: 0.75rem; } .question-grid-item { display: flex; justify-content: center; align-items: center; width: 45px; height: 45px; border-radius: 50%; /* Circle */ font-weight: 500; cursor: pointer; transition: background-color 0.2s ease, transform 0.1s ease; border: 1px solid transparent; } .question-grid-item:active { transform: scale(0.95); } .question-grid-item.unattempted { background-color: #f8f9fa; border: 1px solid #dee2e6; color: #6c757d; } .question-grid-item.attempted { background-color: #d1e7dd; /* Bootstrap success bg subtle */ border-color: #a3cfbb; color: #0a3622; } .question-grid-item.marked-for-review { background-color: #fff3cd; /* Bootstrap warning bg subtle */ border-color: #ffe69c; color: #664d03; } .question-grid-item.current { background-color: var(--primary-color); color: white; border: 2px solid #3a2ab0; /* Slightly darker border */ box-shadow: 0 0 0 2px rgba(72, 52, 212, 0.3); } .navigator-legend .badge { font-size: 0.8rem; padding: 0.4em 0.6em; } /* Progress Tracker */ .progress-tracker { border: 1px solid #e9ecef; } /* Responsive Adjustments */ @media (max-width: 575.98px) { .navbar-brand.subject-title { font-size: 1rem; } .timer { font-size: 0.9rem; } .question-text { font-size: 1rem; } .options-list .btn-option { padding: 0.7rem 1rem; } .fixed-bottom .btn { padding: 0.5rem 0.75rem; font-size: 0.9rem; } .fixed-bottom .btn i { margin-right: 0 !important; /* Icons only on small screens */ margin-left: 0 !important; } .main-content { padding-left: 0.75rem; padding-right: 0.75rem; } } document.addEventListener("DOMContentLoaded", () => { // --- Mock Data --- const questions = Array.from({ length: 45 }, (_, i) => ({ id: i + 1, text: `This is the text for Question ${ i + 1 }. It might involve concepts like kinematics, laws of motion, or thermodynamics. A body of mass 2 kg is thrown vertically upwards with an initial velocity of 20 m/s. What will be its potential energy at the end of 2 seconds? (Assume g = 10 m/s²)`, options: [ `${i + 1}00 J`, `${i + 1}50 J`, `${i + 1}80 J`, `${i + 1}20 J`, ], correctAnswer: 0, // Index of the correct option (optional for UI) // image: i % 5 === 0 ? `https://via.placeholder.com/300x150?text=Q${i+1}+Image` : null, // Example image // latex: i % 3 === 0 ? `E = mc^${i+1}` : null // Example LaTeX })); // --- State --- let currentQuestionIndex = 0; const userAnswers = new Array(questions.length).fill(null); // Stores selected option index for each question const markedForReview = new Array(questions.length).fill(false); let timerInterval; let timeLeft = 30 * 60; // 30 minutes in seconds // --- DOM Elements --- const questionNumberEl = document.getElementById("question-number"); const totalQuestionsEl = document.getElementById("total-questions"); const questionTextEl = document.getElementById("question-text"); const optionsContainerEl = document.getElementById("options-container"); const prevBtn = document.getElementById("prev-btn"); const nextBtn = document.getElementById("next-btn"); const markReviewBtn = document.getElementById("mark-review-btn"); const timeLeftEl = document.getElementById("time-left"); const questionGridOffcanvas = document.getElementById( "question-grid-offcanvas" ); const questionGridModal = document.getElementById("question-grid-modal"); const attemptedCountEl = document.getElementById("attempted-count"); const markedCountEl = document.getElementById("marked-count"); const remainingCountEl = document.getElementById("remaining-count"); const progressBarEl = document.getElementById("progress-bar"); const submitAttemptedEl = document.getElementById("submit-attempted"); const submitMarkedEl = document.getElementById("submit-marked"); const submitRemainingEl = document.getElementById("submit-remaining"); const confirmSubmitBtn = document.getElementById("confirm-submit"); const confirmBackBtn = document.getElementById("confirm-back"); // --- Functions --- function renderQuestion(index) { const question = questions[index]; currentQuestionIndex = index; questionNumberEl.textContent = question.id; totalQuestionsEl.textContent = questions.length; questionTextEl.textContent = question.text; // Add image/latex handling here if needed optionsContainerEl.innerHTML = ""; // Clear previous options question.options.forEach((option, i) => { const isSelected = userAnswers[index] === i; const button = document.createElement("button"); button.type = "button"; button.classList.add("btn", "btn-option"); if (isSelected) { button.classList.add("selected"); } button.dataset.optionIndex = i; button.innerHTML = ` ${option} `; button.addEventListener("click", handleOptionSelect); optionsContainerEl.appendChild(button); }); // Update button states prevBtn.disabled = index === 0; nextBtn.disabled = index === questions.length - 1; // Update Mark for Review button state updateMarkReviewButton(); // Update Navigator highlighting updateNavigatorGrid(); updateProgressTracker(); } function handleOptionSelect(event) { const selectedButton = event.currentTarget; const selectedIndex = parseInt(selectedButton.dataset.optionIndex); // Deselect previous if any const previouslySelected = optionsContainerEl.querySelector(".btn-option.selected"); if (previouslySelected) { previouslySelected.classList.remove("selected"); } // Select new selectedButton.classList.add("selected"); userAnswers[currentQuestionIndex] = selectedIndex; // Simulate saving answer console.log( `Question ${currentQuestionIndex + 1} Answered: Option ${ selectedIndex + 1 }` ); // Update state and UI elements updateNavigatorGrid(); updateProgressTracker(); // Optional: Auto-navigate to next question // if (currentQuestionIndex < questions.length - 1) { // setTimeout(() => navigateQuestion(1), 300); // Delay for visual feedback // } } function navigateQuestion(direction) { const newIndex = currentQuestionIndex + direction; if (newIndex >= 0 && newIndex < questions.length) { renderQuestion(newIndex); } } function jumpToQuestion(index) { if (index >= 0 && index < questions.length) { renderQuestion(index); } } function toggleMarkForReview() { markedForReview[currentQuestionIndex] = !markedForReview[currentQuestionIndex]; updateMarkReviewButton(); updateNavigatorGrid(); updateProgressTracker(); console.log( `Question ${currentQuestionIndex + 1} Marked for Review: ${ markedForReview[currentQuestionIndex] }` ); } function updateMarkReviewButton() { if (markedForReview[currentQuestionIndex]) { markReviewBtn.classList.remove("btn-outline-warning"); markReviewBtn.classList.add("btn-warning", "text-dark"); markReviewBtn.innerHTML = ` Marked`; } else { markReviewBtn.classList.add("btn-outline-warning"); markReviewBtn.classList.remove("btn-warning", "text-dark"); markReviewBtn.innerHTML = ` Mark`; } } function updateNavigatorGrid() { const grids = [questionGridOffcanvas, questionGridModal]; grids.forEach((grid) => { if (!grid) return; grid.innerHTML = ""; // Clear previous grid questions.forEach((_, i) => { const item = document.createElement("div"); item.classList.add("question-grid-item"); item.textContent = i + 1; item.dataset.questionIndex = i; if (i === currentQuestionIndex) { item.classList.add("current"); } else if (userAnswers[i] !== null) { item.classList.add("attempted"); } else if (markedForReview[i]) { item.classList.add("marked-for-review"); } else { item.classList.add("unattempted"); } item.addEventListener("click", () => jumpToQuestion(parseInt(item.dataset.questionIndex)) ); grid.appendChild(item); }); }); } function updateProgressTracker() { const attempted = userAnswers.filter((ans) => ans !== null).length; const marked = markedForReview.filter((marked) => marked).length; const remaining = questions.length - attempted; const progress = (attempted / questions.length) * 100; attemptedCountEl.textContent = attempted; markedCountEl.textContent = marked; // Count only marked, regardless of answered status remainingCountEl.textContent = remaining; progressBarEl.style.width = `${progress}%`; progressBarEl.setAttribute("aria-valuenow", attempted); // Update submit modal summary submitAttemptedEl.textContent = attempted; submitMarkedEl.textContent = marked; submitRemainingEl.textContent = questions.length - attempted; // Or calculate differently if needed } function startTimer() { timerInterval = setInterval(() => { timeLeft--; const minutes = Math.floor(timeLeft / 60); const seconds = timeLeft % 60; timeLeftEl.textContent = `${minutes}:${ seconds < 10 ? "0" : "" }${seconds}`; if (timeLeft <= 0) { clearInterval(timerInterval); alert("Time's up! Submitting test."); submitTest(); } }, 1000); } function submitTest() { clearInterval(timerInterval); console.log("Submitting test...", userAnswers, markedForReview); // Add actual submission logic here (e.g., AJAX request) alert("Test Submitted Successfully!"); // Redirect or show results page window.location.href = "#submitted"; // Placeholder action } function leaveTest() { clearInterval(timerInterval); console.log("Leaving test..."); // Add any cleanup or partial save logic if needed window.location.href = "#left"; // Placeholder action (replace with actual back navigation) } // --- Event Listeners --- prevBtn.addEventListener("click", () => navigateQuestion(-1)); nextBtn.addEventListener("click", () => navigateQuestion(1)); markReviewBtn.addEventListener("click", toggleMarkForReview); confirmSubmitBtn.addEventListener("click", submitTest); confirmBackBtn.addEventListener("click", leaveTest); // --- Initialization --- renderQuestion(0); startTimer(); });