शैक्षणिक परिसरों की खबरें

/* quiz.css — save as quiz.css and place in same folder as quiz.html */ /* Simple, responsive and accessible styles */ :root{ --bg:#f7f9fc; --card:#ffffff; --accent:#0b6efd; --success:#2ea44f; --danger:#d73a49; --muted:#6b7280; --radius:12px; --shadow: 0 6px 18px rgba(22, 33, 62, 0.06); --max-width:760px; --font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } *{box-sizing:border-box} body{ margin:0; font-family:var(--font-family); background: linear-gradient(180deg, #eef3fb 0%, var(--bg) 100%); padding:28px 16px; color:#0f1724; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } .quiz-wrap{ max-width:var(--max-width); margin:0 auto; background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; overflow:hidden; } .quiz-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; } .quiz-title{ font-size:1.15rem; font-weight:700; } .quiz-meta{ font-size:0.92rem; color:var(--muted); } /* Question card */ .question-card{ border-radius:10px; padding:18px; background:linear-gradient(180deg, #ffffff 0%, #fbfdff 100%); border:1px solid rgba(11,110,253,0.06); margin-bottom:14px; } .q-number{ display:inline-block; background:rgba(11,110,253,0.08); color:var(--accent); padding:6px 10px; border-radius:999px; font-weight:700; margin-right:10px; font-size:0.9rem; } .question-text{ margin:6px 0 14px 0; font-size:1.05rem; } .options{ display:flex; flex-direction:column; gap:10px; } .option{ border-radius:8px; padding:12px; background:#fff; border:1px solid rgba(15,23,36,0.06); cursor:pointer; display:flex; align-items:center; gap:12px; transition:all .14s ease; user-select:none; } .option:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(2,6,23,0.04); } .option.disabled{ opacity:0.7; pointer-events:none; transform:none; } .option .label{ display:inline-flex; min-width:34px; height:34px; border-radius:8px; align-items:center; justify-content:center; font-weight:700; color:var(--accent); background:rgba(11,110,253,0.06); font-size:0.95rem; } .option .text{ flex:1; font-size:0.98rem; color:#0b1220; } /* Feedback badges */ .feedback{ margin-top:12px; font-weight:700; padding:10px 12px; border-radius:8px; display:inline-flex; gap:8px; align-items:center; } .feedback.correct{ background:rgba(46,164,79,0.12); color:var(--success); border:1px solid rgba(46,164,79,0.12); } .feedback.wrong{ background:rgba(215,58,73,0.08); color:var(--danger); border:1px solid rgba(215,58,73,0.08); } /* Controls */ .controls{ display:flex; gap:10px; margin-top:14px; align-items:center; justify-content:space-between; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; gap:8px; background:var(--accent); color:white; border:none; padding:10px 14px; border-radius:10px; font-weight:700; cursor:pointer; box-shadow:0 6px 12px rgba(11,110,253,0.12); } .btn.secondary{ background:#eef2ff; color:var(--accent); box-shadow:none; border:1px solid rgba(11,110,253,0.06); } .scoreboard{ font-weight:700; color:var(--muted); } .progress{ width:100%; height:8px; background:linear-gradient(90deg,#eef2ff,#f7fafc); border-radius:999px; overflow:hidden; margin-top:12px; } .progress > i{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--accent), #5b8bff); transition:width .35s ease; } /* small screens */ @media (max-width:520px){ .quiz-header{ flex-direction:column; align-items:flex-start; gap:6px; } .btn{ width:100%; justify-content:center; } .controls{ flex-direction:column; align-items:stretch; } }

2020 की पोस्ट दिखाई जा रही हैं

सभी देखें

संदेश