㰀栀琀洀氀 氀愀渀最㴀∀攀渀∀㸀
㰀洀攀琀愀 挀栀愀爀猀攀琀㴀∀唀吀䘀ⴀ㠀∀㸀 㰀琀椀琀氀攀㸀刀漀甀琀攀爀愀 伀渀氀椀渀攀 䔀砀愀洀㰀⼀琀椀琀氀攀㸀 㰀氀椀渀欀 栀爀攀昀㴀∀栀琀琀瀀猀㨀⼀⼀昀漀渀琀猀⸀最漀漀最氀攀愀瀀椀猀⸀挀漀洀⼀挀猀猀㈀㼀昀愀洀椀氀礀㴀倀漀瀀瀀椀渀猀㨀眀最栀琀䀀㌀ 㬀㐀 㬀㔀 㬀㘀 㬀㜀 ☀搀椀猀瀀氀愀礀㴀猀眀愀瀀∀ 爀攀氀㴀∀猀琀礀氀攀猀栀攀攀琀∀㸀 㰀猀琀礀氀攀㸀 /* All CSS styles remain exactly the same */ 㨀爀漀漀琀 笀 --primary-color: #4361ee; ⴀⴀ猀攀挀漀渀搀愀爀礀ⴀ挀漀氀漀爀㨀 ⌀㌀愀 挀愀㌀㬀 --accent-color: #4cc9f0; ⴀⴀ氀椀最栀琀ⴀ挀漀氀漀爀㨀 ⌀昀㠀昀㤀昀愀㬀 --dark-color: #212529; ⴀⴀ猀甀挀挀攀猀猀ⴀ挀漀氀漀爀㨀 ⌀㌀㠀戀 㬀 --danger-color: #ff3333; ⴀⴀ眀愀爀渀椀渀最ⴀ挀漀氀漀爀㨀 ⌀昀昀㤀攀 㬀 --info-color: #4895ef; ⴀⴀ戀愀挀欀最爀漀甀渀搀ⴀ最爀愀搀椀攀渀琀㨀 氀椀渀攀愀爀ⴀ最爀愀搀椀攀渀琀⠀㌀㔀搀攀最Ⰰ ⌀昀 昀㐀昀昀 ─Ⰰ ⌀攀㘀昀 昀昀 ─⤀㬀 --card-shadow: 0 10px 30px rgba(67, 97, 238, 0.15); ⴀⴀ戀甀琀琀漀渀ⴀ栀漀瘀攀爀ⴀ猀栀愀搀漀眀㨀 㘀瀀砀 ㈀瀀砀 爀最戀愀⠀㘀㜀Ⰰ 㤀㜀Ⰰ ㈀㌀㠀Ⰰ ⸀㈀㔀⤀㬀 } * { 戀漀砀ⴀ猀椀稀椀渀最㨀 戀漀爀搀攀爀ⴀ戀漀砀㬀 margin: 0; 瀀愀搀搀椀渀最㨀 㬀 font-family: 'Poppins', sans-serif; 紀 戀漀搀礀 笀 background: var(--background-gradient); 洀椀渀ⴀ栀攀椀最栀琀㨀 瘀栀㬀 padding: 20px; 紀 ⸀栀椀搀搀攀渀 笀 display: none; 紀 ⸀挀漀渀琀愀椀渀攀爀 笀 background-color: #fff; 瀀愀搀搀椀渀最㨀 ㌀ 瀀砀㬀 border-radius: 15px; 戀漀砀ⴀ猀栀愀搀漀眀㨀 瘀愀爀⠀ⴀⴀ挀愀爀搀ⴀ猀栀愀搀漀眀⤀㬀 width: 100%; 洀愀砀ⴀ眀椀搀琀栀㨀 瀀砀㬀 margin: 20px auto; 琀爀愀渀猀椀琀椀漀渀㨀 愀氀氀 ⸀㌀猀 攀愀猀攀㬀 } h1, h2, h3, h4 { 挀漀氀漀爀㨀 瘀愀爀⠀ⴀⴀ搀愀爀欀ⴀ挀漀氀漀爀⤀㬀 margin-bottom: 20px; 紀 栀 笀 text-align: center; 挀漀氀漀爀㨀 瘀愀爀⠀ⴀⴀ瀀爀椀洀愀爀礀ⴀ挀漀氀漀爀⤀㬀 font-size: 2.2rem; 洀愀爀最椀渀ⴀ戀漀琀琀漀洀㨀 ㌀ 瀀砀㬀 position: relative; 瀀愀搀搀椀渀最ⴀ戀漀琀琀漀洀㨀 瀀砀㬀 } h1::after { 挀漀渀琀攀渀琀㨀 ✀✀㬀 position: absolute; 戀漀琀琀漀洀㨀 㬀 left: 50%; 琀爀愀渀猀昀漀爀洀㨀 琀爀愀渀猀氀愀琀攀堀⠀ⴀ㔀 ─⤀㬀 width: 100px; 栀攀椀最栀琀㨀 ㌀瀀砀㬀 background: var(--accent-color); 戀漀爀搀攀爀ⴀ爀愀搀椀甀猀㨀 ㌀瀀砀㬀 } h2 { 昀漀渀琀ⴀ猀椀稀攀㨀 ⸀㔀爀攀洀㬀 color: var(--secondary-color); 洀愀爀最椀渀ⴀ琀漀瀀㨀 瀀砀㬀 } select, input[type="checkbox"], input[type="radio"] { 洀愀爀最椀渀ⴀ爀椀最栀琀㨀 瀀砀㬀 } select { 眀椀搀琀栀㨀 ─㬀 padding: 12px 15px; 戀漀爀搀攀爀㨀 ㈀瀀砀 猀漀氀椀搀 ⌀搀搀搀㬀 border-radius: 8px; 昀漀渀琀ⴀ猀椀稀攀㨀 爀攀洀㬀 transition: all 0.3s; 洀愀爀最椀渀ⴀ戀漀琀琀漀洀㨀 ㈀ 瀀砀㬀 } select:focus { 戀漀爀搀攀爀ⴀ挀漀氀漀爀㨀 瘀愀爀⠀ⴀⴀ瀀爀椀洀愀爀礀ⴀ挀漀氀漀爀⤀㬀 outline: none; 戀漀砀ⴀ猀栀愀搀漀眀㨀 ㌀瀀砀 爀最戀愀⠀㘀㜀Ⰰ 㤀㜀Ⰰ ㈀㌀㠀Ⰰ ⸀㈀⤀㬀 } label { 搀椀猀瀀氀愀礀㨀 椀渀氀椀渀攀ⴀ昀氀攀砀㬀 align-items: center; 洀愀爀最椀渀ⴀ戀漀琀琀漀洀㨀 ㈀瀀砀㬀 cursor: pointer; 琀爀愀渀猀椀琀椀漀渀㨀 愀氀氀 ⸀㈀猀㬀 padding: 8px 12px; 戀漀爀搀攀爀ⴀ爀愀搀椀甀猀㨀 㠀瀀砀㬀 } label:hover { 戀愀挀欀最爀漀甀渀搀ⴀ挀漀氀漀爀㨀 爀最戀愀⠀㘀㜀Ⰰ 㤀㜀Ⰰ ㈀㌀㠀Ⰰ ⸀ 㔀⤀㬀 } input[type="checkbox"], input[type="radio"] { 眀椀搀琀栀㨀 㠀瀀砀㬀 height: 18px; 愀挀挀攀渀琀ⴀ挀漀氀漀爀㨀 瘀愀爀⠀ⴀⴀ瀀爀椀洀愀爀礀ⴀ挀漀氀漀爀⤀㬀 } .btn { 瀀愀搀搀椀渀最㨀 ㈀瀀砀 ㈀㔀瀀砀㬀 border: none; 戀愀挀欀最爀漀甀渀搀ⴀ挀漀氀漀爀㨀 瘀愀爀⠀ⴀⴀ瀀爀椀洀愀爀礀ⴀ挀漀氀漀爀⤀㬀 color: white; 戀漀爀搀攀爀ⴀ爀愀搀椀甀猀㨀 㠀瀀砀㬀 cursor: pointer; 昀漀渀琀ⴀ猀椀稀攀㨀 爀攀洀㬀 font-weight: 500; 琀爀愀渀猀椀琀椀漀渀㨀 愀氀氀 ⸀㌀猀㬀 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 搀椀猀瀀氀愀礀㨀 椀渀氀椀渀攀ⴀ戀氀漀挀欀㬀 text-align: center; 洀愀爀最椀渀㨀 瀀砀 㔀瀀砀㬀 } .btn:hover { 戀愀挀欀最爀漀甀渀搀ⴀ挀漀氀漀爀㨀 瘀愀爀⠀ⴀⴀ猀攀挀漀渀搀愀爀礀ⴀ挀漀氀漀爀⤀㬀 transform: translateY(-2px); 戀漀砀ⴀ猀栀愀搀漀眀㨀 瘀愀爀⠀ⴀⴀ戀甀琀琀漀渀ⴀ栀漀瘀攀爀ⴀ猀栀愀搀漀眀⤀㬀 } .btn:active { 琀爀愀渀猀昀漀爀洀㨀 琀爀愀渀猀氀愀琀攀夀⠀ ⤀㬀 } .btn-secondary { 戀愀挀欀最爀漀甀渀搀ⴀ挀漀氀漀爀㨀 瘀愀爀⠀ⴀⴀ椀渀昀漀ⴀ挀漀氀漀爀⤀㬀 } .btn-secondary:hover { 戀愀挀欀最爀漀甀渀搀ⴀ挀漀氀漀爀㨀 ⌀㌀愀㜀戀搀㔀㬀 } .btn-danger { 戀愀挀欀最爀漀甀渀搀ⴀ挀漀氀漀爀㨀 瘀愀爀⠀ⴀⴀ搀愀渀最攀爀ⴀ挀漀氀漀爀⤀㬀 } .btn-danger:hover { 戀愀挀欀最爀漀甀渀搀ⴀ挀漀氀漀爀㨀 ⌀攀㘀 㬀 } .btn-success { 戀愀挀欀最爀漀甀渀搀ⴀ挀漀氀漀爀㨀 瘀愀爀⠀ⴀⴀ猀甀挀挀攀猀猀ⴀ挀漀氀漀爀⤀㬀 } .btn-success:hover { 戀愀挀欀最爀漀甀渀搀ⴀ挀漀氀漀爀㨀 ⌀㌀㈀愀 㬀 } .navigation-buttons { 搀椀猀瀀氀愀礀㨀 昀氀攀砀㬀 justify-content: space-between; 洀愀爀最椀渀ⴀ琀漀瀀㨀 ㌀ 瀀砀㬀 } .question { 洀愀爀最椀渀ⴀ戀漀琀琀漀洀㨀 ㈀㔀瀀砀㬀 padding: 20px; 戀愀挀欀最爀漀甀渀搀ⴀ挀漀氀漀爀㨀 ⌀昀㠀昀㤀昀愀㬀 border-radius: 10px; 戀漀砀ⴀ猀栀愀搀漀眀㨀 ㈀瀀砀 㔀瀀砀 爀最戀愀⠀ Ⰰ Ⰰ Ⰰ ⸀ 㔀⤀㬀 border-left: 4px solid var(--primary-color); 紀 ⸀焀甀攀猀琀椀漀渀 瀀 笀 font-size: 1.1rem; 洀愀爀最椀渀ⴀ戀漀琀琀漀洀㨀 㔀瀀砀㬀 font-weight: 500; 挀漀氀漀爀㨀 瘀愀爀⠀ⴀⴀ搀愀爀欀ⴀ挀漀氀漀爀⤀㬀 } .option { 搀椀猀瀀氀愀礀㨀 昀氀攀砀㬀 align-items: center; 洀愀爀最椀渀ⴀ戀漀琀琀漀洀㨀 瀀砀㬀 padding: 10px 15px; 戀漀爀搀攀爀ⴀ爀愀搀椀甀猀㨀 㠀瀀砀㬀 background-color: white; 戀漀爀搀攀爀㨀 瀀砀 猀漀氀椀搀 ⌀攀攀攀㬀 transition: all 0.2s; 紀 ⸀漀瀀琀椀漀渀㨀栀漀瘀攀爀 笀 border-color: var(--accent-color); 戀愀挀欀最爀漀甀渀搀ⴀ挀漀氀漀爀㨀 爀最戀愀⠀㜀㘀Ⰰ ㈀ Ⰰ ㈀㐀 Ⰰ ⸀ 㔀⤀㬀 } .option input[type="radio"]:checked + label { 昀漀渀琀ⴀ眀攀椀最栀琀㨀 㘀 㬀 color: var(--primary-color); 紀 ⌀琀椀洀攀爀 笀 font-size: 1.3rem; 昀漀渀琀ⴀ眀攀椀最栀琀㨀 㘀 㬀 padding: 10px 20px; 戀愀挀欀最爀漀甀渀搀㨀 氀椀渀攀愀爀ⴀ最爀愀搀椀攀渀琀⠀㌀㔀搀攀最Ⰰ 瘀愀爀⠀ⴀⴀ猀攀挀漀渀搀愀爀礀ⴀ挀漀氀漀爀⤀ ─Ⰰ 瘀愀爀⠀ⴀⴀ瀀爀椀洀愀爀礀ⴀ挀漀氀漀爀⤀ ─⤀㬀 color: white; 戀漀爀搀攀爀ⴀ爀愀搀椀甀猀㨀 㔀 瀀砀㬀 display: inline-block; 洀愀爀最椀渀ⴀ戀漀琀琀漀洀㨀 ㈀ 瀀砀㬀 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 紀 ⌀琀椀洀攀⸀眀愀爀渀椀渀最 笀 color: var(--warning-color); 愀渀椀洀愀琀椀漀渀㨀 瀀甀氀猀攀 猀 椀渀昀椀渀椀琀攀㬀 } #time.danger { 挀漀氀漀爀㨀 瘀愀爀⠀ⴀⴀ搀愀渀最攀爀ⴀ挀漀氀漀爀⤀㬀 animation: pulse 0.5s infinite; 紀 䀀欀攀礀昀爀愀洀攀猀 瀀甀氀猀攀 笀 0% { opacity: 1; } 㔀 ─ 笀 漀瀀愀挀椀琀礀㨀 ⸀㔀㬀 紀 100% { opacity: 1; } 紀 ⸀搀椀瘀椀搀攀爀 笀 height: 2px; 戀愀挀欀最爀漀甀渀搀㨀 氀椀渀攀愀爀ⴀ最爀愀搀椀攀渀琀⠀琀漀 爀椀最栀琀Ⰰ 琀爀愀渀猀瀀愀爀攀渀琀Ⰰ 瘀愀爀⠀ⴀⴀ愀挀挀攀渀琀ⴀ挀漀氀漀爀⤀Ⰰ 琀爀愀渀猀瀀愀爀攀渀琀⤀㬀 margin: 20px 0; 戀漀爀搀攀爀㨀 渀漀渀攀㬀 } .results-card { 戀愀挀欀最爀漀甀渀搀ⴀ挀漀氀漀爀㨀 眀栀椀琀攀㬀 border-radius: 15px; 瀀愀搀搀椀渀最㨀 ㌀ 瀀砀㬀 box-shadow: var(--card-shadow); 洀愀爀最椀渀ⴀ戀漀琀琀漀洀㨀 ㌀ 瀀砀㬀 text-align: center; 戀漀爀搀攀爀ⴀ琀漀瀀㨀 㔀瀀砀 猀漀氀椀搀 瘀愀爀⠀ⴀⴀ瀀爀椀洀愀爀礀ⴀ挀漀氀漀爀⤀㬀 } .score { 昀漀渀琀ⴀ猀椀稀攀㨀 ㌀爀攀洀㬀 font-weight: 700; 挀漀氀漀爀㨀 瘀愀爀⠀ⴀⴀ瀀爀椀洀愀爀礀ⴀ挀漀氀漀爀⤀㬀 margin: 20px 0; 紀 ⸀瀀爀漀最爀攀猀猀ⴀ挀漀渀琀愀椀渀攀爀 笀 width: 100%; 栀攀椀最栀琀㨀 ㈀ 瀀砀㬀 background-color: #e9ecef; 戀漀爀搀攀爀ⴀ爀愀搀椀甀猀㨀 瀀砀㬀 margin: 20px 0; 漀瘀攀爀昀氀漀眀㨀 栀椀搀搀攀渀㬀 } .progress-bar { 栀攀椀最栀琀㨀 ─㬀 background: linear-gradient(to right, var(--accent-color), var(--primary-color)); 戀漀爀搀攀爀ⴀ爀愀搀椀甀猀㨀 瀀砀㬀 transition: width 0.5s ease; 紀 ⸀猀甀洀洀愀爀礀ⴀ椀琀攀洀 笀 margin-bottom: 30px; 瀀愀搀搀椀渀最㨀 ㈀ 瀀砀㬀 background-color: white; 戀漀爀搀攀爀ⴀ爀愀搀椀甀猀㨀 瀀砀㬀 box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); 戀漀爀搀攀爀ⴀ氀攀昀琀㨀 ㌀瀀砀 猀漀氀椀搀 瘀愀爀⠀ⴀⴀ瀀爀椀洀愀爀礀ⴀ挀漀氀漀爀⤀㬀 } .correct-answer { 挀漀氀漀爀㨀 瘀愀爀⠀ⴀⴀ猀甀挀挀攀猀猀ⴀ挀漀氀漀爀⤀㬀 font-weight: 600; 紀 ⸀甀猀攀爀ⴀ挀漀爀爀攀挀琀 笀 color: var(--success-color); 昀漀渀琀ⴀ眀攀椀最栀琀㨀 㘀 㬀 } .user-incorrect { 挀漀氀漀爀㨀 瘀愀爀⠀ⴀⴀ搀愀渀最攀爀ⴀ挀漀氀漀爀⤀㬀 font-weight: 600; 琀攀砀琀ⴀ搀攀挀漀爀愀琀椀漀渀㨀 氀椀渀攀ⴀ琀栀爀漀甀最栀㬀 } .chapter-selection-container { 戀愀挀欀最爀漀甀渀搀ⴀ挀漀氀漀爀㨀 眀栀椀琀攀㬀 padding: 25px; 戀漀爀搀攀爀ⴀ爀愀搀椀甀猀㨀 㔀瀀砀㬀 box-shadow: var(--card-shadow); 洀愀爀最椀渀ⴀ戀漀琀琀漀洀㨀 ㌀ 瀀砀㬀 } .chapter-list { 挀漀氀甀洀渀猀㨀 ㈀㬀 column-gap: 30px; 紀 ⸀洀愀爀欀猀ⴀ氀椀猀琀 笀 background-color: #f8f9fa; 瀀愀搀搀椀渀最㨀 ㈀ 瀀砀㬀 border-radius: 10px; 洀愀爀最椀渀㨀 ㈀ 瀀砀 㬀 } .marks-list label { 搀椀猀瀀氀愀礀㨀 戀氀漀挀欀㬀 margin-bottom: 15px; 瀀愀搀搀椀渀最㨀 㔀瀀砀㬀 background-color: white; 戀漀爀搀攀爀ⴀ爀愀搀椀甀猀㨀 㠀瀀砀㬀 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); 琀爀愀渀猀椀琀椀漀渀㨀 愀氀氀 ⸀㌀猀㬀 } .marks-list label:hover { 琀爀愀渀猀昀漀爀洀㨀 琀爀愀渀猀氀愀琀攀堀⠀㔀瀀砀⤀㬀 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); 紀 ⼀⨀ 䜀爀愀瀀栀椀挀猀 匀攀挀琀椀漀渀 ⨀⼀ .graphics-section { 搀椀猀瀀氀愀礀㨀 昀氀攀砀㬀 flex-wrap: wrap; 樀甀猀琀椀昀礀ⴀ挀漀渀琀攀渀琀㨀 猀瀀愀挀攀ⴀ愀爀漀甀渀搀㬀 margin: 30px 0; 最愀瀀㨀 ㈀ 瀀砀㬀 } .graphic-card { 戀愀挀欀最爀漀甀渀搀㨀 眀栀椀琀攀㬀 border-radius: 10px; 瀀愀搀搀椀渀最㨀 ㈀ 瀀砀㬀 width: 150px; 琀攀砀琀ⴀ愀氀椀最渀㨀 挀攀渀琀攀爀㬀 box-shadow: var(--card-shadow); 琀爀愀渀猀椀琀椀漀渀㨀 琀爀愀渀猀昀漀爀洀 ⸀㌀猀㬀 border-top: 3px solid var(--primary-color); 紀 ⸀最爀愀瀀栀椀挀ⴀ挀愀爀搀㨀栀漀瘀攀爀 笀 transform: translateY(-5px); 紀 ⸀最爀愀瀀栀椀挀ⴀ椀挀漀渀 笀 font-size: 2.5rem; 挀漀氀漀爀㨀 瘀愀爀⠀ⴀⴀ瀀爀椀洀愀爀礀ⴀ挀漀氀漀爀⤀㬀 margin-bottom: 10px; 紀 ⸀最爀愀瀀栀椀挀ⴀ琀椀琀氀攀 笀 font-size: 0.9rem; 昀漀渀琀ⴀ眀攀椀最栀琀㨀 㔀 㬀 color: var(--dark-color); 紀 ⸀猀氀漀最愀渀 笀 text-align: center; 昀漀渀琀ⴀ猀椀稀攀㨀 ⸀㈀爀攀洀㬀 font-style: italic; 挀漀氀漀爀㨀 瘀愀爀⠀ⴀⴀ猀攀挀漀渀搀愀爀礀ⴀ挀漀氀漀爀⤀㬀 margin: 30px 0; 瀀愀搀搀椀渀最㨀 㔀瀀砀㬀 background: rgba(67, 97, 238, 0.1); 戀漀爀搀攀爀ⴀ爀愀搀椀甀猀㨀 㠀瀀砀㬀 border-left: 4px solid var(--primary-color); 紀 ⼀⨀ 䔀砀愀洀 吀礀瀀攀 匀攀氀攀挀琀椀漀渀 ⨀⼀ .exam-type-selection { 戀愀挀欀最爀漀甀渀搀ⴀ挀漀氀漀爀㨀 眀栀椀琀攀㬀 padding: 25px; 戀漀爀搀攀爀ⴀ爀愀搀椀甀猀㨀 㔀瀀砀㬀 box-shadow: var(--card-shadow); 洀愀爀最椀渀ⴀ琀漀瀀㨀 ㈀ 瀀砀㬀 } /* Selected Chapters Display */ ⸀猀攀氀攀挀琀攀搀ⴀ挀栀愀瀀琀攀爀猀ⴀ搀椀猀瀀氀愀礀 笀 background-color: #f8f9fa; 瀀愀搀搀椀渀最㨀 㔀瀀砀㬀 border-radius: 8px; 洀愀爀最椀渀㨀 㔀瀀砀 㬀 } .selected-chapter { 搀椀猀瀀氀愀礀㨀 椀渀氀椀渀攀ⴀ戀氀漀挀欀㬀 background-color: var(--primary-color); 挀漀氀漀爀㨀 眀栀椀琀攀㬀 padding: 5px 10px; 戀漀爀搀攀爀ⴀ爀愀搀椀甀猀㨀 㔀瀀砀㬀 margin: 5px; 昀漀渀琀ⴀ猀椀稀攀㨀 ⸀㤀爀攀洀㬀 } /* Next Button for Chapter Selection */ ⸀挀栀愀瀀琀攀爀ⴀ渀攀砀琀ⴀ戀琀渀 笀 text-align: center; 洀愀爀最椀渀ⴀ琀漀瀀㨀 ㈀ 瀀砀㬀 } /* Subject Selection Cards */ ⸀猀甀戀樀攀挀琀ⴀ猀攀氀攀挀琀椀漀渀ⴀ挀漀渀琀愀椀渀攀爀 笀 display: flex; 昀氀攀砀ⴀ眀爀愀瀀㨀 眀爀愀瀀㬀 justify-content: center; 最愀瀀㨀 ㈀ 瀀砀㬀 margin: 30px 0; 紀 ⸀猀甀戀樀攀挀琀ⴀ挀愀爀搀 笀 width: 150px; 栀攀椀最栀琀㨀 㔀 瀀砀㬀 background: white; 戀漀爀搀攀爀ⴀ爀愀搀椀甀猀㨀 㔀瀀砀㬀 display: flex; 昀氀攀砀ⴀ搀椀爀攀挀琀椀漀渀㨀 挀漀氀甀洀渀㬀 align-items: center; 樀甀猀琀椀昀礀ⴀ挀漀渀琀攀渀琀㨀 挀攀渀琀攀爀㬀 cursor: pointer; 琀爀愀渀猀椀琀椀漀渀㨀 愀氀氀 ⸀㌀猀㬀 box-shadow: var(--card-shadow); 戀漀爀搀攀爀㨀 ㌀瀀砀 猀漀氀椀搀 琀爀愀渀猀瀀愀爀攀渀琀㬀 } .subject-card:hover { 琀爀愀渀猀昀漀爀洀㨀 琀爀愀渀猀氀愀琀攀夀⠀ⴀ㔀瀀砀⤀㬀 box-shadow: var(--button-hover-shadow); 紀 ⸀猀甀戀樀攀挀琀ⴀ挀愀爀搀⸀猀攀氀攀挀琀攀搀 笀 border-color: var(--primary-color); 戀愀挀欀最爀漀甀渀搀ⴀ挀漀氀漀爀㨀 爀最戀愀⠀㘀㜀Ⰰ 㤀㜀Ⰰ ㈀㌀㠀Ⰰ ⸀ 㔀⤀㬀 } .subject-icon { 昀漀渀琀ⴀ猀椀稀攀㨀 ㌀爀攀洀㬀 margin-bottom: 10px; 挀漀氀漀爀㨀 瘀愀爀⠀ⴀⴀ瀀爀椀洀愀爀礀ⴀ挀漀氀漀爀⤀㬀 } .subject-name { 昀漀渀琀ⴀ眀攀椀最栀琀㨀 㔀 㬀 text-align: center; 紀 ⸀猀攀氀攀挀琀攀搀ⴀ猀甀戀樀攀挀琀猀ⴀ搀椀猀瀀氀愀礀 笀 display: flex; 昀氀攀砀ⴀ眀爀愀瀀㨀 眀爀愀瀀㬀 gap: 10px; 洀愀爀最椀渀ⴀ琀漀瀀㨀 ㈀ 瀀砀㬀 justify-content: center; 紀 ⸀猀攀氀攀挀琀攀搀ⴀ猀甀戀樀攀挀琀ⴀ挀栀椀瀀 笀 background-color: var(--primary-color); 挀漀氀漀爀㨀 眀栀椀琀攀㬀 padding: 8px 15px; 戀漀爀搀攀爀ⴀ爀愀搀椀甀猀㨀 ㈀ 瀀砀㬀 display: flex; 愀氀椀最渀ⴀ椀琀攀洀猀㨀 挀攀渀琀攀爀㬀 gap: 8px; 紀 ⸀猀攀氀攀挀琀攀搀ⴀ猀甀戀樀攀挀琀ⴀ挀栀椀瀀 椀 笀 cursor: pointer; 紀 ⼀⨀ 刀攀猀瀀漀渀猀椀瘀攀 猀琀礀氀攀猀 ⨀⼀ @media (max-width: 768px) { ⸀挀漀渀琀愀椀渀攀爀 笀 padding: 20px; 紀 栀 笀 font-size: 1.8rem; 紀 ⸀挀栀愀瀀琀攀爀ⴀ氀椀猀琀 笀 columns: 1; 紀 ⸀渀愀瘀椀最愀琀椀漀渀ⴀ戀甀琀琀漀渀猀 笀 flex-direction: column; 紀 ⸀戀琀渀 笀 width: 100%; 洀愀爀最椀渀㨀 㔀瀀砀 㬀 } .question { 瀀愀搀搀椀渀最㨀 㔀瀀砀㬀 } .graphics-section { 最愀瀀㨀 瀀砀㬀 } .graphic-card { 眀椀搀琀栀㨀 ㈀ 瀀砀㬀 padding: 15px; 紀 ⸀猀甀戀樀攀挀琀ⴀ挀愀爀搀 笀 width: 120px; 栀攀椀最栀琀㨀 ㈀ 瀀砀㬀 } 紀 䀀洀攀搀椀愀 ⠀洀愀砀ⴀ眀椀搀琀栀㨀 㐀㠀 瀀砀⤀ 笀 body { 瀀愀搀搀椀渀最㨀 瀀砀㬀 } .container { 瀀愀搀搀椀渀最㨀 㔀瀀砀㬀 } h1 { 昀漀渀琀ⴀ猀椀稀攀㨀 ⸀㔀爀攀洀㬀 } .score { 昀漀渀琀ⴀ猀椀稀攀㨀 ㈀爀攀洀㬀 } .graphic-card { 眀椀搀琀栀㨀 瀀砀㬀 padding: 10px; 紀 ⸀最爀愀瀀栀椀挀ⴀ椀挀漀渀 笀 font-size: 2rem; 紀 ⸀猀甀戀樀攀挀琀ⴀ挀愀爀搀 笀 width: 100px; 栀攀椀最栀琀㨀 瀀砀㬀 } .subject-icon { 昀漀渀琀ⴀ猀椀稀攀㨀 ㈀爀攀洀㬀 } 紀 㰀猀挀爀椀瀀琀 愀猀礀渀挀 猀爀挀㴀∀栀琀琀瀀猀㨀⼀⼀瀀愀最攀愀搀㈀⸀最漀漀最氀攀猀礀渀搀椀挀愀琀椀漀渀⸀挀漀洀⼀瀀愀最攀愀搀⼀樀猀⼀愀搀猀戀礀最漀漀最氀攀⸀樀猀㼀挀氀椀攀渀琀㴀挀愀ⴀ瀀甀戀ⴀ㐀㤀㌀ ㌀㜀㌀㌀㘀㔀㔀㘀㠀㘀㜀∀ crossorigin="anonymous"> 㰀猀挀爀椀瀀琀 愀猀礀渀挀 猀爀挀㴀∀栀琀琀瀀猀㨀⼀⼀眀眀眀⸀最漀漀最氀攀琀愀最洀愀渀愀最攀爀⸀挀漀洀⼀最琀愀最⼀樀猀㼀椀搀㴀䜀ⴀ䬀䴀娀㤀刀䨀㘀㈀䔀夀∀㸀㰀⼀猀挀爀椀瀀琀㸀 㰀⼀栀攀愀搀㸀 㰀搀椀瘀 挀氀愀猀猀㴀∀挀漀渀琀愀椀渀攀爀∀㸀Question ${currentQuestionIndex + 1} of ${quizQuestions.length}
㰀瀀㸀␀笀挀甀爀爀攀渀琀儀甀攀猀琀椀漀渀⸀焀甀攀猀琀椀漀渀紀㰀⼀瀀㸀 `; currentQuestion.options.forEach((option, index) => { 挀漀渀猀琀 漀瀀琀椀漀渀䐀椀瘀 㴀 搀漀挀甀洀攀渀琀⸀挀爀攀愀琀攀䔀氀攀洀攀渀琀⠀✀搀椀瘀✀⤀㬀 optionDiv.className = 'option'; const radio = document.createElement('input'); 爀愀搀椀漀⸀琀礀瀀攀 㴀 ✀爀愀搀椀漀✀㬀 radio.name = 'option'; 爀愀搀椀漀⸀椀搀 㴀 怀漀瀀琀椀漀渀ⴀ␀笀挀甀爀爀攀渀琀儀甀攀猀琀椀漀渀䤀渀搀攀砀紀ⴀ␀笀椀渀搀攀砀紀怀㬀 radio.value = option; 爀愀搀椀漀⸀挀栀攀挀欀攀搀 㴀 挀甀爀爀攀渀琀儀甀攀猀琀椀漀渀⸀猀攀氀攀挀琀攀搀伀瀀琀椀漀渀 㴀㴀㴀 漀瀀琀椀漀渀㬀 挀漀渀猀琀 氀愀戀攀氀 㴀 搀漀挀甀洀攀渀琀⸀挀爀攀愀琀攀䔀氀攀洀攀渀琀⠀✀氀愀戀攀氀✀⤀㬀 label.htmlFor = `option-${currentQuestionIndex}-${index}`; 氀愀戀攀氀⸀琀攀砀琀䌀漀渀琀攀渀琀 㴀 漀瀀琀椀漀渀㬀 漀瀀琀椀漀渀䐀椀瘀⸀愀瀀瀀攀渀搀䌀栀椀氀搀⠀爀愀搀椀漀⤀㬀 optionDiv.appendChild(label); 焀甀攀猀琀椀漀渀䔀氀攀洀攀渀琀⸀愀瀀瀀攀渀搀䌀栀椀氀搀⠀漀瀀琀椀漀渀䐀椀瘀⤀㬀 }); quizDiv.appendChild(questionElement); 甀瀀搀愀琀攀一愀瘀椀最愀琀椀漀渀䈀甀琀琀漀渀猀⠀⤀㬀 } function updateNavigationButtons() { 搀漀挀甀洀攀渀琀⸀最攀琀䔀氀攀洀攀渀琀䈀礀䤀搀⠀✀瀀爀攀瘀椀漀甀猀✀⤀⸀挀氀愀猀猀䰀椀猀琀⸀琀漀最最氀攀⠀✀栀椀搀搀攀渀✀Ⰰ 挀甀爀爀攀渀琀儀甀攀猀琀椀漀渀䤀渀搀攀砀 㴀㴀㴀 ⤀㬀 document.getElementById('next').classList.toggle('hidden', currentQuestionIndex === quizQuestions.length - 1); 紀 搀漀挀甀洀攀渀琀⸀最攀琀䔀氀攀洀攀渀琀䈀礀䤀搀⠀✀瀀爀攀瘀椀漀甀猀✀⤀⸀愀搀搀䔀瘀攀渀琀䰀椀猀琀攀渀攀爀⠀✀挀氀椀挀欀✀Ⰰ 昀甀渀挀琀椀漀渀⠀⤀ 笀 saveAnswer(); 椀昀 ⠀挀甀爀爀攀渀琀儀甀攀猀琀椀漀渀䤀渀搀攀砀 㸀 ⤀ 笀 currentQuestionIndex--; 搀椀猀瀀氀愀礀儀甀攀猀琀椀漀渀⠀⤀㬀 } 紀⤀㬀 搀漀挀甀洀攀渀琀⸀最攀琀䔀氀攀洀攀渀琀䈀礀䤀搀⠀✀渀攀砀琀✀⤀⸀愀搀搀䔀瘀攀渀琀䰀椀猀琀攀渀攀爀⠀✀挀氀椀挀欀✀Ⰰ 昀甀渀挀琀椀漀渀⠀⤀ 笀 saveAnswer(); 椀昀 ⠀挀甀爀爀攀渀琀儀甀攀猀琀椀漀渀䤀渀搀攀砀 㰀 焀甀椀稀儀甀攀猀琀椀漀渀猀⸀氀攀渀最琀栀 ⴀ ⤀ 笀 currentQuestionIndex++; 搀椀猀瀀氀愀礀儀甀攀猀琀椀漀渀⠀⤀㬀 } 紀⤀㬀 搀漀挀甀洀攀渀琀⸀最攀琀䔀氀攀洀攀渀琀䈀礀䤀搀⠀✀猀甀戀洀椀琀✀⤀⸀愀搀搀䔀瘀攀渀琀䰀椀猀琀攀渀攀爀⠀✀挀氀椀挀欀✀Ⰰ 昀甀渀挀琀椀漀渀⠀⤀ 笀 if (confirm('Are you sure you want to submit your exam?')) { 猀愀瘀攀䄀渀猀眀攀爀⠀⤀㬀 clearInterval(timer); 猀栀漀眀刀攀猀甀氀琀猀⠀⤀㬀 } 紀⤀㬀 昀甀渀挀琀椀漀渀 猀愀瘀攀䄀渀猀眀攀爀⠀⤀ 笀 const selectedOption = document.querySelector('#quiz input[name="option"]:checked'); 椀昀 ⠀猀攀氀攀挀琀攀搀伀瀀琀椀漀渀⤀ 笀 quizQuestions[currentQuestionIndex].selectedOption = selectedOption.value; 紀 } function startTimer() { 琀椀洀攀䰀攀昀琀 㴀 猀攀氀攀挀琀攀搀䴀愀爀欀猀 㴀㴀㴀 㼀 㘀 㨀 猀攀氀攀挀琀攀搀䴀愀爀欀猀 㴀㴀㴀 ㈀ 㼀 㤀 㨀 ㈀ 㬀 甀瀀搀愀琀攀吀椀洀攀爀䐀椀猀瀀氀愀礀⠀⤀㬀 琀椀洀攀爀 㴀 猀攀琀䤀渀琀攀爀瘀愀氀⠀昀甀渀挀琀椀漀渀⠀⤀ 笀 timeLeft--; 甀瀀搀愀琀攀吀椀洀攀爀䐀椀猀瀀氀愀礀⠀⤀㬀 椀昀 ⠀琀椀洀攀䰀攀昀琀 㰀㴀 ⤀ 笀 clearInterval(timer); 愀氀攀爀琀⠀✀吀椀洀攀 椀猀 甀瀀℀ 夀漀甀爀 攀砀愀洀 眀椀氀氀 戀攀 猀甀戀洀椀琀琀攀搀 愀甀琀漀洀愀琀椀挀愀氀氀礀⸀✀⤀㬀 showResults(); 紀 }, 1000); 紀 昀甀渀挀琀椀漀渀 甀瀀搀愀琀攀吀椀洀攀爀䐀椀猀瀀氀愀礀⠀⤀ 笀 const timeElement = document.getElementById('time'); 琀椀洀攀䔀氀攀洀攀渀琀⸀琀攀砀琀䌀漀渀琀攀渀琀 㴀 昀漀爀洀愀琀吀椀洀攀⠀琀椀洀攀䰀攀昀琀⤀㬀 ⼀⼀ 䌀栀愀渀最攀 挀漀氀漀爀 戀愀猀攀搀 漀渀 爀攀洀愀椀渀椀渀最 琀椀洀攀 if (timeLeft <= 60) { 琀椀洀攀䔀氀攀洀攀渀琀⸀挀氀愀猀猀一愀洀攀 㴀 ✀搀愀渀最攀爀✀㬀 } else if (timeLeft <= 180) { 琀椀洀攀䔀氀攀洀攀渀琀⸀挀氀愀猀猀一愀洀攀 㴀 ✀眀愀爀渀椀渀最✀㬀 } else { 琀椀洀攀䔀氀攀洀攀渀琀⸀挀氀愀猀猀一愀洀攀 㴀 ✀✀㬀 } 紀 昀甀渀挀琀椀漀渀 昀漀爀洀愀琀吀椀洀攀⠀猀攀挀漀渀搀猀⤀ 笀 const minutes = Math.floor(seconds / 60); 挀漀渀猀琀 猀攀挀猀 㴀 猀攀挀漀渀搀猀 ─ 㘀 㬀 return `${minutes}:${secs < 10 ? '0' : ''}${secs}`; 紀 昀甀渀挀琀椀漀渀 猀栀漀眀刀攀猀甀氀琀猀⠀⤀ 笀 // Calculate results 挀漀渀猀琀 挀漀爀爀攀挀琀䌀漀甀渀琀 㴀 焀甀椀稀儀甀攀猀琀椀漀渀猀⸀爀攀搀甀挀攀⠀⠀愀挀挀Ⰰ 焀⤀ 㴀㸀 愀挀挀 ⬀ ⠀焀⸀猀攀氀攀挀琀攀搀伀瀀琀椀漀渀 㴀㴀㴀 焀⸀愀渀猀眀攀爀 㼀 㨀 ⤀Ⰰ ⤀㬀 const percentage = Math.round((correctCount / quizQuestions.length) * 100); // Hide exam screen 搀漀挀甀洀攀渀琀⸀最攀琀䔀氀攀洀攀渀琀䈀礀䤀搀⠀✀攀砀愀洀ⴀ猀挀爀攀攀渀✀⤀⸀挀氀愀猀猀䰀椀猀琀⸀愀搀搀⠀✀栀椀搀搀攀渀✀⤀㬀 ⼀⼀ 匀栀漀眀 爀攀猀甀氀琀猀 const resultsDiv = document.getElementById('results'); 爀攀猀甀氀琀猀䐀椀瘀⸀挀氀愀猀猀䰀椀猀琀⸀爀攀洀漀瘀攀⠀✀栀椀搀搀攀渀✀⤀㬀 爀攀猀甀氀琀猀䐀椀瘀⸀椀渀渀攀爀䠀吀䴀䰀 㴀 怀Percentage: ${percentage}%
㰀瀀㸀␀笀瀀攀爀挀攀渀琀愀最攀 㸀㴀 㜀 㼀 ✀䔀砀挀攀氀氀攀渀琀℀✀ 㨀 瀀攀爀挀攀渀琀愀最攀 㸀㴀 㔀 㼀 ✀䜀漀漀搀 樀漀戀℀✀ 㨀 ✀䬀攀攀瀀 瀀爀愀挀琀椀挀椀渀最℀✀紀㰀⼀瀀㸀Question ${index + 1}: ${q.question}
㰀瀀㸀夀漀甀爀 愀渀猀眀攀爀㨀 㰀猀瀀愀渀 挀氀愀猀猀㴀∀␀笀椀猀䌀漀爀爀攀挀琀 㼀 ✀甀猀攀爀ⴀ挀漀爀爀攀挀琀✀ 㨀 ✀甀猀攀爀ⴀ椀渀挀漀爀爀攀挀琀✀紀∀㸀␀笀甀猀攀爀䄀渀猀眀攀爀紀㰀⼀猀瀀愀渀㸀㰀⼀瀀㸀Correct answer: ${q.answer}
怀㬀 猀甀洀洀愀爀礀䐀椀瘀⸀愀瀀瀀攀渀搀䌀栀椀氀搀⠀猀甀洀洀愀爀礀䤀琀攀洀⤀㬀 }); // Add restart button 挀漀渀猀琀 爀攀猀琀愀爀琀䈀甀琀琀漀渀 㴀 搀漀挀甀洀攀渀琀⸀挀爀攀愀琀攀䔀氀攀洀攀渀琀⠀✀戀甀琀琀漀渀✀⤀㬀 restartButton.className = 'btn'; 爀攀猀琀愀爀琀䈀甀琀琀漀渀⸀琀攀砀琀䌀漀渀琀攀渀琀 㴀 ✀吀愀欀攀 䄀渀漀琀栀攀爀 䔀砀愀洀✀㬀 restartButton.addEventListener('click', function() { 氀漀挀愀琀椀漀渀⸀爀攀氀漀愀搀⠀⤀㬀 }); summaryDiv.appendChild(restartButton); 紀 㰀⼀戀漀搀礀㸀