Exam Interface - Copy this React, Tailwind Component to your project
User-Exam-Page-Design-Prompt-Overview:-The-User-Exam-Page-provides-a-single-question-view-for-online-exams-with-no-navigation-between-questions.-The-page-transitions-automatically-to-the-next-question-when-time-expires.-Upon-answering,-the-option-is-locked-until-the-next-question-appears.-This-design-incorporates-real-time-updates-using-Socket.IO-to-broadcast-questions-and-timers.-Key-Components:-Question-Display-Area:-Question-Number-and-Timer:-At-the-top-center-of-the-page,-display-the-question-number-and-remaining-time-prominently.-Timer-should-countdown-in-real-time-with-a-warning-color-(e.g.,-red)-as-time-runs-low.-Styling:-Use-a-larger,-bold-font-with-a-contrasting-background-(like-a-soft-blue)-for-visibility.-Question-Text:-Display-the-question-text-centered-on-the-screen-in-a-large,-easy-to-read-font.-If-an-image-is-included,-place-it-below-the-question-text-with-proper-padding-and-responsive-scaling.-Styling:-Use-a-clean,-sans-serif-font,-ensuring-enough-white-space-around-the-question-for-clarity.-Options-Section:-Answer-Options:-Display-options-as-individual-buttons-or-cards,-each-with-a-hover-effect-for-desktop-and-an-outline-highlight-for-mobile.-Locked-State-After-Selection:-When-a-user-selects-an-option,-lock-the-selected-answer-and-visually-indicate-it-(e.g.,-grayed-out-or-dimmed-effect).-Display-the-selected-answer-with-a-subtle-animation-for-feedback,-preventing-further-clicks-until-the-next-question.-Styling:-Use-distinct-colors-(like-green-for-selected)-to-show-answer-selection-and-a-clear-layout-with-padding-around-options-to-prevent-accidental-selection.-Actions-and-Real-Time-Interaction:-Submit-Answer-Button:-Place-a-“Submit”-button-below-the-options,-which-becomes-disabled-after-answering.-On-smaller-screens,-make-the-button-full-width,-and-on-larger-screens,-align-it-center-or-left-aligned-for-easy-access.-Styling:-Use-a-prominent-color-for-the-button-(e.g.,-blue),-and-make-it-appear-disabled-after-selection.-Next-Question-Countdown:-After-a-question-is-answered-or-time-runs-out,-show-a-countdown-(e.g.,-“Next-question-in-3…2…1”)-to-indicate-when-the-next-question-will-appear.-No-Navigation-Controls:-There-should-be-no-back/forward-or-navigation-options,-keeping-focus-on-one-question-at-a-time.-Implement-functionality-to-restrict-tab-switching-with-a-warning-message-on-the-page-for-users-attempting-to-switch-tabs.-Full-Screen-Exam-Mode:-Full-Screen-Activation:-Upon-starting,-prompt-the-user-to-switch-to-full-screen-mode-to-maintain-focus.-Exit-Restriction-Warning:-If-users-try-to-exit-full-screen-or-switch-tabs,-issue-a-warning-or-lockout-notification.-Styling-and-Theme:-Color-Scheme:-Choose-calming-colors-(e.g.,-white,-light-gray)-with-contrasting-accents-for-timers,-buttons,-and-text-for-a-focused-environment.-Typography:-Use-large,-readable-fonts-with-a-clean,-modern-sans-serif-typeface-for-clarity-and-readability.-Responsive-Layout:-Stack-elements-vertically-on-mobile,-with-options-in-a-single-column.-For-larger-screens,-arrange-options-in-a-two-column-layout-if-space-permits.-Behavior-Summary:-Question-Transition:-Each-question-displays-one-at-a-time,-automatically-loading-the-next-question-when-time-runs-out.-Answer-Locking:-Once-an-answer-is-submitted,-the-question-locks-and-prevents-further-changes-until-the-next-question.-Tab-Switch-Restriction:-Detect-and-restrict-tab-switching-with-real-time-feedback-to-discourage-switching-tabs-during-the-exam.-Real-Time-Updates:-The-exam-uses-Socket.IO-to-receive-real-time-updates-for-questions,-timers,-and-next-question-triggers.-This-User-Exam-Page-design-keeps-the-interface-minimal-and-distraction-free,-making-the-exam-experience-intuitive-and-controlled-while-enforcing-the-necessary-restrictions-for-exam-integrity.
