Student Model Test

<link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;500;600;700&family=Noto+Sans+Bengali:wght@400;600;700;800&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root{--primary:#6366f1;--primary-dark:#4f46e5;--success:#10b981;--danger:#ef4444;--warning:#f59e0b;--bg:#0f172a;--card:#1e293b;--border:#334155;--text:#e2e8f0;--muted:#94a3b8}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--text);font-family:'Hind Siliguri','Noto Sans Bengali','Segoe UI',sans-serif;font-size:16px}
*{font-family:'Hind Siliguri','Noto Sans Bengali','Segoe UI',sans-serif}
.smt-header{background:linear-gradient(135deg,#1e1b4b,#312e81);padding:24px;border-bottom:1px solid rgba(99,102,241,.3)}
.smt-header h1{font-size:1.5rem;font-weight:800;color:#fff;margin:4px 0 0}
.smt-header p{color:#a5b4fc;font-size:.85rem;margin:4px 0 0}
.back-btn{display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,.5);text-decoration:none;
  font-size:.78rem;padding:4px 12px;border:1px solid rgba(255,255,255,.15);border-radius:8px;
  background:rgba(255,255,255,.04);transition:all .2s;margin-bottom:10px}
.back-btn:hover{color:#fff;border-color:rgba(255,255,255,.4)}
.smt-wrap{max-width:880px;margin:0 auto;padding:24px 16px}
#smt-setup{min-height:calc(100vh - 120px);display:flex;align-items:center;justify-content:center;padding:16px}
#smt-setup .smt-wrap-inner{width:100%;max-width:880px}
@media(max-width:640px){
  #smt-setup{min-height:calc(100vh - 90px);align-items:stretch;padding:8px}
  #smt-setup .smt-wrap-inner{display:flex;flex-direction:column;height:100%}
  #smt-setup .smt-wrap-inner .smt-card{
    flex:1;display:flex;flex-direction:column;justify-content:space-between;
    margin-bottom:0;padding:20px 16px;border-radius:16px
  }
  #smt-setup .smt-wrap-inner .smt-card .g2{margin-bottom:12px}
  #smt-setup .smt-wrap-inner .smt-card .g3{margin-bottom:12px}
  #smt-setup .smt-wrap-inner .smt-card .f-select,
  #smt-setup .smt-wrap-inner .smt-card .f-input{font-size:1rem !important;padding:14px 13px !important}
  #smt-setup .smt-wrap-inner .smt-card .f-label{font-size:.9rem !important;margin-bottom:7px}
  #smt-setup .smt-wrap-inner .smt-card h3{font-size:1.1rem !important;margin-bottom:18px}
  #smt-setup .smt-wrap-inner .smt-card .btn-start{padding:16px !important;font-size:1.05rem !important;margin-top:14px}
  #smt-setup .smt-wrap-inner .smt-card .info-strip{font-size:.88rem !important;padding:12px 14px !important}
  #smt-setup .smt-wrap-inner .smt-card select[multiple]{min-height:110px !important}
}
.smt-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:22px;margin-bottom:18px}
.smt-card h3{font-size:.95rem;font-weight:700;color:#a5b4fc;margin-bottom:16px}
.f-label{font-size:.75rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px;display:block}
.f-select,.f-input{background:rgba(255,255,255,.06);border:1px solid var(--border);color:#fff;
  border-radius:10px;font-size:.9rem;padding:10px 13px;width:100%;outline:none;transition:border-color .2s}
.f-select:focus,.f-input:focus{border-color:var(--primary)}
.f-select:disabled{opacity:.4;cursor:not-allowed}
.f-select option{background:#1e293b;color:#fff}
/* Swipe category tabs */
.cat-tabs-wrap{position:relative;margin-bottom:4px}
.cat-tabs{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 8px;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;cursor:grab}
.cat-tabs::-webkit-scrollbar{display:none}
.cat-tabs.dragging{cursor:grabbing;user-select:none}
.cat-tab{flex-shrink:0;scroll-snap-align:start;padding:8px 16px;border-radius:20px;
  font-size:.82rem;font-weight:600;cursor:pointer;border:1px solid var(--border);
  background:rgba(255,255,255,.05);color:var(--muted);transition:all .2s;white-space:nowrap}
.cat-tab:hover{border-color:var(--primary);color:#c7d2fe}
.cat-tab.active{background:rgba(99,102,241,.2);border-color:var(--primary);color:#a5b4fc}
.cat-tabs-fade-r{position:absolute;right:0;top:0;bottom:8px;width:32px;
  background:linear-gradient(to right,transparent,var(--card));pointer-events:none;border-radius:0 10px 10px 0}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:14px}
.info-strip{background:rgba(99,102,241,.1);border:1px solid rgba(99,102,241,.2);border-radius:10px;
  padding:10px 14px;font-size:.8rem;color:#a5b4fc;margin:14px 0;display:flex;gap:14px;flex-wrap:wrap}
.info-strip strong{color:#fff}
.btn-start{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;
  border:none;padding:13px;border-radius:12px;font-weight:700;font-size:1rem;cursor:pointer;
  width:100%;margin-top:8px;transition:all .2s}
.btn-start:hover{opacity:.9}
.btn-start:disabled{opacity:.5;cursor:not-allowed}
/* Exam */
.exam-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;
  background:var(--card);padding:14px 20px;border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:100}
.timer{background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.3);color:#fca5a5;
  padding:8px 16px;border-radius:10px;font-weight:700;font-size:1rem;font-variant-numeric:tabular-nums}
.timer.warn{background:rgba(239,68,68,.3);color:#fff;animation:blink 1s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.6}}
.prog-bar{height:5px;background:rgba(255,255,255,.08);margin:0 20px 0}
.prog-fill{height:5px;background:linear-gradient(90deg,var(--primary),var(--success));transition:width .3s}
.q-area{padding:18px;max-width:860px;margin:0 auto}
.q-card{background:var(--card);border:1px solid var(--border);border-radius:13px;padding:18px;margin-bottom:14px}
.q-card.done{border-color:rgba(99,102,241,.35)}
.q-label{font-size:.72rem;color:var(--muted);font-weight:700;text-transform:uppercase;margin-bottom:5px}
.q-txt{font-size:1rem;line-height:1.7;font-weight:500;margin-bottom:14px}
.opt{display:flex;align-items:center;gap:11px;padding:11px 14px;border-radius:10px;
  border:1px solid var(--border);cursor:pointer;margin-bottom:7px;transition:all .15s;font-size:.9rem}
.opt:hover{border-color:var(--primary);background:rgba(99,102,241,.08)}
.opt.sel{border-color:var(--primary);background:rgba(99,102,241,.12);color:#c7d2fe}
.opt input{accent-color:var(--primary);width:16px;height:16px;flex-shrink:0;pointer-events:none}
.q-foot{display:flex;justify-content:space-between;padding:13px 20px;
  background:var(--card);border-top:1px solid var(--border);position:sticky;bottom:0;flex-wrap:wrap;gap:8px}
.btn-q{padding:9px 20px;border-radius:10px;font-weight:600;font-size:.88rem;cursor:pointer;border:none}
.btn-prev{background:rgba(255,255,255,.08);color:#fff}
.btn-next{background:var(--primary);color:#fff}
.btn-sub{background:var(--success);color:#fff}
.kbd-hint{padding:6px 20px;font-size:.68rem;color:rgba(255,255,255,.18);text-align:center}
/* Results */
.res-tabs-wrap{position:sticky;top:0;z-index:90;background:var(--bg);border-bottom:1px solid var(--border);margin:-24px -16px 20px;padding:0 16px}
.res-tabs{display:flex;gap:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.res-tabs::-webkit-scrollbar{display:none}
.res-tab{flex-shrink:0;padding:13px 20px;border-radius:0;font-weight:600;font-size:.88rem;cursor:pointer;
  border:none;border-bottom:3px solid transparent;background:transparent;color:var(--muted);transition:all .2s;white-space:nowrap}
.res-tab:hover{color:#c7d2fe;background:rgba(255,255,255,.04)}
.res-tab.on{border-bottom-color:var(--primary);color:#a5b4fc;background:rgba(99,102,241,.07)}
.res-panels{overflow:hidden;position:relative}
.res-panel-track{display:flex;transition:transform .3s cubic-bezier(.4,0,.2,1);will-change:transform}
.res-panel{flex:0 0 100%;min-width:100%}
@media(max-width:640px){
  .res-tab{font-size:1rem !important;padding:14px 18px !important}
  .stat-v{font-size:2rem !important}
  .stat-l{font-size:.85rem !important}
  .stat-b{padding:18px 10px !important}
  .s-pct{font-size:3rem !important}
  .s-lbl{font-size:.85rem !important}
  .score-ring{width:180px !important;height:180px !important}
  .smt-card h3{font-size:1.1rem !important}
  .smt-card{padding:18px 14px !important}
  .rv-q{font-size:1.05rem !important;line-height:1.8 !important}
  .rv-a,.rv-e{font-size:.95rem !important}
  .ai-box p,.ai-box div{font-size:.95rem !important;line-height:1.8 !important}
}
.score-ring{width:150px;height:150px;border-radius:50%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;margin:0 auto 14px;font-weight:800}
.score-ring.pass{background:radial-gradient(rgba(16,185,129,.2),rgba(16,185,129,.04));border:4px solid var(--success)}
.score-ring.fail{background:radial-gradient(rgba(239,68,68,.2),rgba(239,68,68,.04));border:4px solid var(--danger)}
.s-pct{font-size:2.3rem;color:#fff}
.s-lbl{font-size:.7rem;color:var(--muted)}
.stat-g{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0}
.stat-b{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:10px;padding:13px;text-align:center}
.stat-v{font-size:1.5rem;font-weight:800}
.stat-l{font-size:.7rem;color:var(--muted);margin-top:2px}
.chart-g{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0}
.chart-b{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:12px;padding:14px}
.chart-t{font-size:.75rem;font-weight:700;color:var(--muted);margin-bottom:10px;text-transform:uppercase;letter-spacing:.05em}
.rv-item{background:rgba(255,255,255,.03);border-radius:10px;padding:13px;margin-bottom:9px;border-left:3px solid var(--border)}
.rv-item.ok{border-left-color:var(--success)}
.rv-item.ng{border-left-color:var(--danger)}
.rv-q{font-size:.88rem;font-weight:600;margin-bottom:6px}
.rv-a{font-size:.8rem;margin-bottom:3px}
.rv-e{font-size:.76rem;color:var(--muted);margin-top:5px;line-height:1.5;background:rgba(255,255,255,.03);padding:7px 9px;border-radius:6px}
.ai-box{background:rgba(99,102,241,.06);border:1px solid rgba(99,102,241,.2);border-radius:12px;padding:15px;margin-bottom:12px}
.ai-box h4{font-size:.85rem;color:#a5b4fc;font-weight:700;margin-bottom:7px}
.ai-box p,.ai-box div{font-size:.83rem;line-height:1.6}
/* Spinner */
#smt-ov{position:fixed;inset:0;background:rgba(15,23,42,.95);z-index:9999;
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.sp{width:50px;height:50px;border:5px solid rgba(99,102,241,.2);border-top-color:var(--primary);
  border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.sp-msg{color:#fff;font-size:.95rem;font-weight:600}
.sp-bar-w{width:210px;background:rgba(255,255,255,.08);border-radius:999px;height:5px}
.sp-bar{width:0%;background:var(--primary);height:5px;border-radius:999px;transition:width .4s}
@media(max-width:640px){
  html,body{font-size:16px !important}
  .g2,.g3{grid-template-columns:1fr !important}
  .stat-g{grid-template-columns:1fr 1fr}
  .chart-g{grid-template-columns:1fr}
  .f-select,.f-input,select,input{font-size:16px !important;padding:12px !important}
  .f-label{font-size:.88rem !important}
  .q-txt{font-size:1.1rem !important;line-height:1.75 !important}
  .opt{font-size:1rem !important;padding:13px 14px !important}
  .opt input{width:20px !important;height:20px !important}
  .btn-start{font-size:1rem !important;padding:15px !important}
  .btn-q{font-size:.95rem !important;padding:11px 18px !important}
  .smt-header h1{font-size:1.3rem !important}
  .smt-card h3{font-size:1rem !important}
  .info-strip{font-size:.88rem !important}
  .exam-top{flex-direction:column;align-items:flex-start;gap:8px}
  .timer{font-size:1.1rem !important}
  .q-label{font-size:.82rem !important}
  .s-pct{font-size:2.5rem !important}
  .stat-v{font-size:1.6rem !important}
  /* res-tab mobile handled in main css */
  .rv-q{font-size:.95rem !important}
  .rv-a,.rv-e{font-size:.85rem !important}
  .ai-box p,.ai-box div{font-size:.88rem !important}
}
</style>



<div id="smt-ov">
  <div class="sp"></div>
  <div class="sp-msg" id="smt-sp-msg">লোড হচ্ছে...</div>
  <div class="sp-bar-w"><div class="sp-bar" id="smt-sp-bar"></div></div>
  <div style="font-size:.75rem;color:var(--muted);margin-top:3px" id="smt-sp-sub"></div>
</div>

<div class="smt-header">
  <div style="max-width:880px;margin:0 auto">
    <a href="/" class="back-btn">← হোম</a>
    <h1>📝 Student Model Test</h1>
    <p>নির্ধারিত সময়ে মডেল টেস্ট দিন এবং বিশদ রিপোর্ট পান</p>
  </div>
</div>

<!-- Setup -->
<div id="smt-setup">
  <div class="smt-wrap-inner smt-wrap">
  <div class="smt-card">
    <h3>⚙️ পরীক্ষা কনফিগারেশন</h3>
    <div class="g2">
      <div>
        <label class="f-label">শ্রেণী / ক্যাটাগরি *</label>
        <select class="f-select" id="s-cat" onchange="loadCourses()">
          <option value="">-- নির্বাচন করুন --</option>
          
          <option value="181">প্রথম শ্রেণী</option>
          
          <option value="182">দ্বিতীয় শ্রেণী</option>
          
          <option value="183">তৃতীয় শ্রেণী</option>
          
          <option value="184">চতুর্থ শ্রেণী</option>
          
          <option value="185">পঞ্চম শ্রেণী</option>
          
          <option value="186">ষষ্ঠ শ্রেণী</option>
          
          <option value="187">সপ্তম শ্রেণী</option>
          
          <option value="188">অষ্টম শ্রেণী</option>
          
          <option value="212">নবম ও দশম শ্রেণী</option>
          
          <option value="211">একাদশ ও দ্বাদশ শ্রেণী</option>
          
          <option value="14">Academic English</option>
          
          <option value="45">ACT</option>
          
          <option value="88">Affiliate Marketing</option>
          
          <option value="244">Agradut</option>
          
          <option value="92">AI</option>
          
          <option value="160">AI Content Generation Courses</option>
          
          <option value="108">Airflow</option>
          
          <option value="74">Al Art Generation</option>
          
          <option value="79">Artificial Intelligence (AI)</option>
          
          <option value="38">ASVAB</option>
          
          <option value="37">B2 First</option>
          
          <option value="232">Bangladesh Affairs</option>
          
          <option value="230">Bangla Language</option>
          
          <option value="231">Bangla Literature</option>
          
          <option value="213">BBA</option>
          
          <option value="217">BCS Exam Preparation</option>
          
          <option value="243">BCS GK</option>
          
          <option value="174">Bing Ads</option>
          
          <option value="90">Bloggings</option>
          
          <option value="85">Book Marketing</option>
          
          <option value="15">Business English</option>
          
          <option value="227">Cambridge IELTS</option>
          
          <option value="30">Career</option>
          
          <option value="162">CCAT</option>
          
          <option value="33">CELPIP</option>
          
          <option value="98">ChatGPT</option>
          
          <option value="12">Coding Interview</option>
          
          <option value="228">Comprehensive Passage</option>
          
          <option value="78">Content Creation</option>
          
          <option value="81">Content Marketing</option>
          
          <option value="76">Content Writing</option>
          
          <option value="75">DALL.E</option>
          
          <option value="201">Data Analysis with AI</option>
          
          <option value="103">Databricks</option>
          
          <option value="110">Dbt</option>
          
          <option value="154">Digital Marketing</option>
          
          <option value="105">Docker</option>
          
          <option value="32">Duolingo English Test</option>
          
          <option value="197">eCommerce</option>
          
          <option value="252">Ed-Tech Platforms</option>
          
          <option value="51">English</option>
          
          <option value="20">English Conversation Courses</option>
          
          <option value="163">English Grammar</option>
          
          <option value="233">English language</option>
          
          <option value="22">English Language Courses</option>
          
          <option value="234">English Literature</option>
          
          <option value="8">English Phrasal Verbs</option>
          
          <option value="18">English Pronunciation Courses</option>
          
          <option value="16">English Vocabulary Courses</option>
          
          <option value="161">ESL</option>
          
          <option value="235">Ethics</option>
          
          <option value="27">Facebook Marketing</option>
          
          <option value="6">French Language</option>
          
          <option value="44">GED</option>
          
          <option value="71">Generative AI (GenAl)</option>
          
          <option value="236">Geography</option>
          
          <option value="104">Git</option>
          
          <option value="46">GMAT</option>
          
          <option value="173">Google Ads</option>
          
          <option value="47">GRE</option>
          
          <option value="237">ICT</option>
          
          <option value="2">Idioms</option>
          
          <option value="50">IELTS</option>
          
          <option value="250">Imported PDF Course</option>
          
          <option value="167">Instagram Marketing</option>
          
          <option value="238">International Affairs</option>
          
          <option value="216">IT &amp; Telecommunication</option>
          
          <option value="220">Jobs Preparation</option>
          
          <option value="107">Kubernets</option>
          
          <option value="251">Language Practice</option>
          
          <option value="7">Learning a Foreign Language</option>
          
          <option value="168">LinkedIn Marketing</option>
          
          <option value="19">Listening Skills Courses</option>
          
          <option value="198">LLC</option>
          
          <option value="43">LSAT</option>
          
          <option value="66">Management Skills</option>
          
          <option value="199">Marketing Agency</option>
          
          <option value="245">Master</option>
          
          <option value="31">Math</option>
          
          <option value="239">Mathmatics</option>
          
          <option value="214">MBA</option>
          
          <option value="41">MCAT</option>
          
          <option value="240">Mental Ability</option>
          
          <option value="247">Miracle BCS Preli</option>
          
          <option value="52">OpenAI</option>
          
          <option value="175">Pinterest Marketing</option>
          
          <option value="86">PowerBI</option>
          
          <option value="34">Praxis Tests</option>
          
          <option value="224">Primary Teacher Recruitment Guide</option>
          
          <option value="222">Professors Job Solution</option>
          
          <option value="159">Programming</option>
          
          <option value="126">Project Management</option>
          
          <option value="127">Project Monitoring and Evaluation</option>
          
          <option value="72">Prompt Engineering</option>
          
          <option value="129">Proposal Writing</option>
          
          <option value="40">PSAT</option>
          
          <option value="35">PTE Academic</option>
          
          <option value="87">Python</option>
          
          <option value="99">PyTorch</option>
          
          <option value="248">Questions Bank</option>
          
          <option value="169">Quora Marketing</option>
          
          <option value="94">R</option>
          
          <option value="170">Reddit Marketing</option>
          
          <option value="128">Report Writing</option>
          
          <option value="48">SAT</option>
          
          <option value="241">Science</option>
          
          <option value="89">SEO</option>
          
          <option value="106">Shell</option>
          
          <option value="196">Shopify</option>
          
          <option value="177">Snapchat Marketing</option>
          
          <option value="102">Snowflake</option>
          
          <option value="172">Social Media Marketing</option>
          
          <option value="109">Spark</option>
          
          <option value="178">Spotify Ads</option>
          
          <option value="93">SQL</option>
          
          <option value="95">Tableau</option>
          
          <option value="152">Teachers Training</option>
          
          <option value="36">TESOL</option>
          
          <option value="229">Test Paper - English 1st Paper</option>
          
          <option value="17">Test Taking Skills Courses</option>
          
          <option value="49">TOEFEL</option>
          
          <option value="39">TOEIC</option>
          
          <option value="166">Twitter Marketing</option>
          
          <option value="221">University Admission</option>
          
          <option value="42">USMLE</option>
          
          <option value="82">Viral Marketing</option>
          
          <option value="215">Vocabulary</option>
          
          <option value="176">WhatsApp Marketing</option>
          
          <option value="23">Writing Courses</option>
          
          <option value="219">WritixAI</option>
          
          <option value="165">YouTube Marketing</option>
          
          <option value="194">এম এ</option>
          
          <option value="246">দ্য ক্যাডার</option>
          
          <option value="249">বাংলা মাধ্যম</option>
          
          <option value="193">বি এ</option>
          
        </select>
      </div>
      <div>
        <label class="f-label">বিষয় / কোর্স *</label>
        <select class="f-select" id="s-course" disabled onchange="loadChapters()">
          <option value="">-- আগে ক্যাটাগরি নির্বাচন করুন --</option>
        </select>
      </div>
    </div>
    <div style="margin-bottom:14px">
      <label class="f-label">অধ্যায় * (Ctrl/Cmd চেপে একাধিক নির্বাচন করুন)</label>
      <select class="f-select" id="s-chaps" multiple disabled style="min-height:90px">
        <option>-- আগে বিষয় নির্বাচন করুন --</option>
      </select>
    </div>
    <div class="g3">
      <div>
        <label class="f-label">প্রশ্ন সংখ্যা</label>
        <select class="f-select" id="s-count">
          <option value="10">১০টি</option>
          <option value="20" selected>২০টি</option>
          <option value="30">৩০টি</option>
          <option value="40">৪০টি</option>
          <option value="50">৫০টি</option>
        </select>
      </div>
      <div>
        <label class="f-label">প্রশ্নের ধরন</label>
        <select class="f-select" id="s-type">
          <option value="all">সব ধরন</option>
          <option value="mcq">MCQ</option>
          <option value="true_false">সত্য/মিথ্যা</option>
          <option value="fill_blanks">শূন্যস্থান</option>
        </select>
      </div>
      <div>
        <label class="f-label">সময় সীমা</label>
        <select class="f-select" id="s-time">
          <option value="600">১০ মিনিট</option>
          <option value="900">১৫ মিনিট</option>
          <option value="1200" selected>২০ মিনিট</option>
          <option value="1800">৩০ মিনিট</option>
          <option value="2700">৪৫ মিনিট</option>
          <option value="3600">৬০ মিনিট</option>
        </select>
      </div>
    </div>
    <div class="info-strip">
      <span>📌 পাসের মার্ক: <strong>৬০%</strong></span>
      <span>⏱️ সময় শেষে স্বয়ংক্রিয় জমা</span>
      <span>🔀 র‍্যান্ডম প্রশ্ন</span>
    </div>
    <button class="btn-start" id="s-start" onclick="startExam()" disabled>🚀 মডেল টেস্ট শুরু করুন</button>
  </div>
  </div><!-- /smt-wrap-inner -->
</div><!-- /smt-setup -->

<!-- Exam -->
<div id="smt-exam" style="display:none">
  <div class="exam-top">
    <div>
      <div style="font-size:.75rem;color:var(--muted)" id="e-course"></div>
      <div style="font-size:.92rem;font-weight:700" id="e-prog">প্রশ্ন ১/২০</div>
    </div>
    <div class="timer" id="e-timer">20:00</div>
    <div style="font-size:.75rem;color:var(--muted)">পাস: <strong style="color:var(--success)">৬০%</strong></div>
  </div>
  <div class="prog-bar"><div class="prog-fill" id="e-bar" style="width:0%"></div></div>
  <div class="q-area" id="e-qbox"></div>
  <div style="text-align:center;font-size:.78rem;color:var(--muted);padding:4px 0" id="e-ans-count"></div>
  <div class="q-foot">
    <button class="btn-q btn-prev" onclick="goPrev()">← আগের</button>
    <button class="btn-q btn-next" id="e-next" onclick="goNext()">পরের →</button>
    <button class="btn-q btn-sub" id="e-sub" onclick="confirmSub()" style="display:none">✅ জমা দিন</button>
  </div>
  <div class="kbd-hint">⌨️ ←→ নেভিগেট &nbsp;|&nbsp; ↑↓ অপশন &nbsp;|&nbsp; 1-4/A-D উত্তর &nbsp;|&nbsp; Space সিলেক্ট &nbsp;|&nbsp; Enter পরের &nbsp;|&nbsp; Esc বাতিল</div>
</div>

<!-- Results -->
<div class="smt-wrap" id="smt-res" style="display:none">
  <div class="res-tabs-wrap">
    <div class="res-tabs" id="res-tabs">
      <button class="res-tab on" onclick="showTab('ov',0)">📊 Overview</button>
      <button class="res-tab" onclick="showTab('ch',1)">📈 Charts</button>
      <button class="res-tab" onclick="showTab('rv',2)">📝 Review</button>
      <button class="res-tab" onclick="showTab('ai',3)">🤖 AI Analysis</button>
    </div>
  </div>
  <div class="res-panels" id="res-panels">
  <div class="res-panel-track" id="res-track">
  <div class="res-panel"><div id="t-ov">
    <div class="smt-card" style="text-align:center">
      <div class="score-ring" id="r-ring"><div class="s-pct" id="r-pct">0%</div><div class="s-lbl" id="r-lbl">-</div></div>
      <div style="font-size:1.1rem;font-weight:800;margin-bottom:12px" id="r-msg"></div>
      <div class="stat-g">
        <div class="stat-b"><div class="stat-v" style="color:var(--success)" id="r-c">0</div><div class="stat-l">সঠিক</div></div>
        <div class="stat-b"><div class="stat-v" style="color:var(--danger)" id="r-w">0</div><div class="stat-l">ভুল</div></div>
        <div class="stat-b"><div class="stat-v" style="color:#60a5fa" id="r-t">0</div><div class="stat-l">মোট</div></div>
        <div class="stat-b"><div class="stat-v" style="color:var(--warning)" id="r-tm">0m</div><div class="stat-l">সময়</div></div>
      </div>
      <div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px">
        <button class="btn-q btn-next" onclick="retake()">🔄 আবার চেষ্টা</button>
        <a href="/" class="btn-q" style="background:rgba(255,255,255,.08);color:#fff;text-decoration:none;padding:9px 20px">🏠 হোম</a>
      </div>
    </div>
  </div>
  <div id="t-ch" style="display:none">
    <div class="chart-g">
      <div class="chart-b"><div class="chart-t">সঠিক / ভুল</div><canvas id="c-donut"></canvas></div>
      <div class="chart-b"><div class="chart-t">সেকশন স্কোর</div><canvas id="c-bar"></canvas></div>
      <div class="chart-b"><div class="chart-t">ক্রমিক স্কোর</div><canvas id="c-line"></canvas></div>
      <div class="chart-b"><div class="chart-t">স্কোর অনুপাত</div><canvas id="c-pie"></canvas></div>
    </div>
  </div>
  <div id="t-rv" style="display:none"><div class="smt-card"><h3>📝 উত্তর পর্যালোচনা</h3><div id="rv-body"></div></div></div>
  </div></div><!-- /t-ov panel -->
  <div class="res-panel"><div id="t-ch" style="display:block"></div></div>
  <div class="res-panel"><div id="t-rv" style="display:block"></div></div>
  <div class="res-panel"><div id="t-ai" style="display:block"><div class="smt-card"><h3>🤖 AI বিশ্লেষণ</h3><div id="ai-body"><div style="color:var(--muted);padding:20px;text-align:center">লোড হচ্ছে...</div></div></div></div></div>
  </div></div><!-- /res-panels -->
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
const IS_AUTH=false;
var Qs=[],As={},cur=0,tmr=null,tLeft=1200,t0=null,resData=null,catId=null;

function gc(n){var v=document.cookie.match('(^|;) *'+n+' *= *([^;]+)');return v?v.pop():'';}

function spin(on,msg,sub){
  var el=document.getElementById('smt-ov'); el.style.display=on?'flex':'none';
  if(msg)document.getElementById('smt-sp-msg').textContent=msg;
  if(sub)document.getElementById('smt-sp-sub').textContent=sub;
  if(on){var b=document.getElementById('smt-sp-bar'),p=0;
    el._iv=setInterval(function(){p=Math.min(p+2,88);b.style.width=p+'%';},250);
  }else{clearInterval(el._iv);document.getElementById('smt-sp-bar').style.width='100%';}
}

function selectCat(btn){
  document.querySelectorAll('.cat-tab').forEach(function(t){t.classList.remove('active');});
  btn.classList.add('active');
  btn.scrollIntoView({behavior:'smooth',block:'nearest',inline:'center'});
  var sel=document.getElementById('s-cat');
  sel.value=btn.dataset.id;
  loadCourses();
}
// Drag-to-scroll for desktop
(function(){
  var el=document.getElementById('cat-tabs');
  if(!el)return;
  var isDown=false,startX,scrollLeft;
  el.addEventListener('mousedown',function(e){isDown=true;el.classList.add('dragging');startX=e.pageX-el.offsetLeft;scrollLeft=el.scrollLeft;});
  el.addEventListener('mouseleave',function(){isDown=false;el.classList.remove('dragging');});
  el.addEventListener('mouseup',function(){isDown=false;el.classList.remove('dragging');});
  el.addEventListener('mousemove',function(e){if(!isDown)return;e.preventDefault();var x=e.pageX-el.offsetLeft;el.scrollLeft=scrollLeft-(x-startX)*1.5;});
})();
async function loadCourses(){
  var cid=document.getElementById('s-cat').value; catId=cid;
  var cs=document.getElementById('s-course');
  cs.disabled=true;cs.innerHTML='<option>লোড...</option>';
  document.getElementById('s-chaps').disabled=true;
  document.getElementById('s-start').disabled=true;
  if(!cid){cs.innerHTML='<option>-- আগে ক্যাটাগরি --</option>';return;}
  var r=await fetch('/api/practice/courses/'+cid+'/');
  var d=await r.json();
  cs.innerHTML='<option value="">-- বিষয় নির্বাচন করুন --</option>';
  (d.courses||[]).forEach(function(c){cs.innerHTML+='<option value="'+c.id+'">'+c.title+'</option>';});
  cs.disabled=false;
}

async function loadChapters(){
  var cid=document.getElementById('s-course').value;
  var ch=document.getElementById('s-chaps');
  ch.disabled=true;ch.innerHTML='<option>লোড...</option>';
  document.getElementById('s-start').disabled=!cid;
  if(!cid){ch.innerHTML='<option>-- আগে বিষয় --</option>';return;}
  var r=await fetch('/api/practice/chapters/'+cid+'/');
  var d=await r.json();
  ch.innerHTML='';
  (d.chapters||[]).forEach(function(c){ch.innerHTML+='<option value="'+c.id+'">'+c.title+'</option>';});
  ch.disabled=false;
}

async function startExam(){
  var chaps=Array.from(document.getElementById('s-chaps').selectedOptions).map(function(o){return parseInt(o.value);}).filter(Boolean);
  if(!chaps.length){alert('অন্তত একটি অধ্যায় নির্বাচন করুন।');return;}
  tLeft=parseInt(document.getElementById('s-time').value)||1200;
  spin(true,'প্রশ্ন লোড হচ্ছে...','ডেটাবেস থেকে প্রশ্ন সংগ্রহ করা হচ্ছে');
  try{
    var r=await fetch('/api/database/questions/load/',{method:'POST',
      headers:{'Content-Type':'application/json','X-CSRFToken':gc('csrftoken')},
      body:JSON.stringify({chapter_ids:chaps,question_count:parseInt(document.getElementById('s-count').value)||20,
        question_type:document.getElementById('s-type').value})});
    var d=await r.json();
    spin(false);
    if(!d.success){alert(d.error||'প্রশ্ন পাওয়া যায়নি।');return;}
    Qs=d.questions;As={};cur=0;
    document.getElementById('e-course').textContent=
      (document.getElementById('s-course').options[document.getElementById('s-course').selectedIndex]||{}).text||'';
    document.getElementById('smt-setup').style.display='none';
    document.getElementById('smt-exam').style.display='block';
    t0=Date.now(); startTimer(); renderQ();
  }catch(e){spin(false);alert('ত্রুটি: '+e.message);}
}

function startTimer(){
  clearInterval(tmr); updateTimer();
  tmr=setInterval(function(){tLeft--;updateTimer();
    if(tLeft<=0){clearInterval(tmr);submit();}
    if(tLeft<=120)document.getElementById('e-timer').classList.add('warn');
  },1000);
}
function updateTimer(){var m=Math.floor(tLeft/60),s=tLeft%60;
  document.getElementById('e-timer').textContent=(m<10?'0':'')+m+':'+(s<10?'0':'')+s;}

function renderQ(){
  var q=Qs[cur]; if(!q) return;
  var tot=Qs.length;
  document.getElementById('e-prog').textContent='প্রশ্ন '+(cur+1)+'/'+tot;
  document.getElementById('e-bar').style.width=((cur+1)/tot*100)+'%';
  document.getElementById('e-ans-count').textContent='উত্তর: '+Object.keys(As).length+'/'+tot;
  document.getElementById('e-next').style.display=cur<tot-1?'':'none';
  document.getElementById('e-sub').style.display=cur===tot-1?'':'none';
  var qt=(q.type||'').toLowerCase();
  var html='<div class="q-card'+(As[q.id]?' done':'')+'">';
  html+='<div class="q-label">প্রশ্ন '+(cur+1)+'</div>';
  html+='<div class="q-txt">'+q.question+'</div>';
  if(qt==='true_false'){
    ['True','False'].forEach(function(o){
      var s=As[q.id]===o?' sel':'';
      html+='<div class="opt'+s+'" data-id="'+q.id+'" data-val="'+o+'"><input type="radio" '+(s?'checked':'')+'>'+o+'</div>';
    });
  } else if(q.options&&typeof q.options==='object'){
    Object.entries(q.options).forEach(function(e){
      if(!e[1]) return;
      var s=As[q.id]===e[0]?' sel':'';
      html+='<div class="opt'+s+'" data-id="'+q.id+'" data-val="'+e[0]+'"><input type="radio" '+(s?'checked':'')+'>'+
        '<span><strong>'+e[0]+'.</strong> '+e[1]+'</span></div>';
    });
  } else {
    html+='<input type="text" class="f-input" placeholder="উত্তর লিখুন..." value="'+(As[q.id]||'')+'" '+
      'data-fillid="'+q.id+'" oninput="fillAns(this)" style="margin-top:6px">';
  }
  html+='</div>';
  document.getElementById('e-qbox').innerHTML=html;
  // Add click listeners via event delegation
  document.getElementById('e-qbox').querySelectorAll('.opt').forEach(function(el){
    el.addEventListener('click', function(){pick(this);});
  });
}
function pickVal(id,v){As[id]=v;renderQ();}
function fillAns(el){As[el.getAttribute('data-fillid')]=el.value;}
function pick(el){
  var id=el.getAttribute('data-id');
  var v=el.getAttribute('data-val');
  As[id]=v; renderQ();
}
function goPrev(){if(cur>0){cur--;renderQ();}}
function goNext(){if(cur<Qs.length-1){cur++;renderQ();}}
function confirmSub(){
  var a=Object.keys(As).length,t=Qs.length;
  if(a<t){if(!confirm('আপনি '+(t-a)+'টি প্রশ্নের উত্তর দেননি। তবুও জমা দিতে চান?'))return;}
  submit();
}
async function submit(){
  clearInterval(tmr);
  var tt=Math.round((Date.now()-t0)/1000);
  document.getElementById('smt-exam').style.display='none';
  spin(true,'উত্তর মূল্যায়ন করা হচ্ছে...','AI বিশ্লেষণ তৈরি হচ্ছে...');
  var ua={};Object.keys(As).forEach(function(k){ua[String(k)]=As[k];});
  try{
    var r=await fetch('/api/database/exam/validate/',{method:'POST',
      headers:{'Content-Type':'application/json','X-CSRFToken':gc('csrftoken')},
      body:JSON.stringify({
        questions:Qs.map(function(q){return {id:String(q.id),question:q.question,
          correct_answer:q.correct_answer,type:q.type,explanation:q.explanation,options:q.options||{}};}),
        user_answers:ua
      })});
    var d=await r.json();
    spin(false);
    if(!d.success){alert(d.error||'ত্রুটি');return;}
    resData=d; renderResults(d,tt);
  }catch(e){spin(false);alert('ত্রুটি: '+e.message);}
}

function renderResults(d,tt){
  var c=d.summary.correct,t=d.summary.total;
  var pct=d.summary.score_percentage||Math.round((c/t)*100)||0;
  var pass=pct>=60;
  document.getElementById('smt-res').style.display='block';
  document.getElementById('smt-res').scrollIntoView({behavior:'smooth'});
  var ring=document.getElementById('r-ring');
  ring.className='score-ring '+(pass?'pass':'fail');
  document.getElementById('r-pct').textContent=pct+'%';
  document.getElementById('r-lbl').textContent=pass?'উত্তীর্ণ ✅':'অনুত্তীর্ণ ❌';
  document.getElementById('r-msg').textContent=pass?'🎉 অভিনন্দন! আপনি পাস করেছেন!':'😔 পাস হয়নি। আবার চেষ্টা করুন।';
  document.getElementById('r-c').textContent=c;
  document.getElementById('r-w').textContent=t-c;
  document.getElementById('r-t').textContent=t;
  var m=Math.floor(tt/60),s=tt%60;
  document.getElementById('r-tm').textContent=m+'m '+s+'s';
  setTimeout(function(){renderCharts(d);},300);
  renderReview(d.results);
  renderAI(d);
}

function renderCharts(d){
  var c=d.summary.correct,t=d.summary.total,rs=d.results||[];
  var pct=d.summary.score_percentage||Math.round((c/t)*100)||0;
  try{
    new Chart(document.getElementById('c-donut'),{type:'doughnut',
      data:{labels:['সঠিক','ভুল'],datasets:[{data:[c,t-c],backgroundColor:['#10b981','#ef4444'],borderWidth:0}]},
      options:{plugins:{legend:{labels:{color:'#e2e8f0'}}}}});
    var q=Math.ceil(t/4);
    var s=[rs.slice(0,q),rs.slice(q,2*q),rs.slice(2*q,3*q),rs.slice(3*q)].map(function(seg){
      return seg.filter(function(r){return r.is_correct;}).length;});
    new Chart(document.getElementById('c-bar'),{type:'bar',
      data:{labels:['১ম','২য়','৩য়','৪র্থ'],datasets:[{label:'সঠিক',data:s,backgroundColor:'#6366f1',borderRadius:5}]},
      options:{plugins:{legend:{labels:{color:'#e2e8f0'}}},
        scales:{x:{ticks:{color:'#64748b'},grid:{color:'rgba(255,255,255,.05)'}},
          y:{ticks:{color:'#64748b'},grid:{color:'rgba(255,255,255,.05)'}}}}});
    var cum=[],run=0;
    rs.forEach(function(r){if(r.is_correct)run++;cum.push(run);});
    new Chart(document.getElementById('c-line'),{type:'line',
      data:{labels:cum.map(function(_,i){return i+1;}),
        datasets:[{label:'স্কোর',data:cum,borderColor:'#f59e0b',backgroundColor:'rgba(245,158,11,.1)',tension:.3,fill:true,pointRadius:0},
          {label:'পাস (৬০%)',data:cum.map(function(_,i){return Math.round((i+1)*.6);}),borderColor:'#10b981',borderDash:[5,5],pointRadius:0}]},
      options:{plugins:{legend:{labels:{color:'#e2e8f0'}}},
        scales:{x:{ticks:{color:'#64748b',maxTicksLimit:10},grid:{color:'rgba(255,255,255,.05)'}},
          y:{ticks:{color:'#64748b'},grid:{color:'rgba(255,255,255,.05)'}}}}});
    new Chart(document.getElementById('c-pie'),{type:'pie',
      data:{labels:['স্কোর','বাকি'],datasets:[{data:[pct,100-pct],backgroundColor:['#6366f1','rgba(255,255,255,.08)'],borderWidth:0}]},
      options:{plugins:{legend:{labels:{color:'#e2e8f0'}}}}});
  }catch(e){console.error(e);}
}

function renderReview(results){
  if(!results||!results.length){document.getElementById('rv-body').innerHTML='<p style="color:var(--muted)">ডেটা নেই।</p>';return;}
  var h='';
  results.forEach(function(r,i){
    var ok=r.is_correct;
    h+='<div class="rv-item '+(ok?'ok':'ng')+'">';
    h+='<div class="rv-q">'+(ok?'✅':'❌')+' '+(i+1)+'. '+r.question+'</div>';
    if(!ok){
      h+='<div class="rv-a" style="color:#fca5a5">আপনার: '+(r.user_answer||'কোনো উত্তর নেই')+'</div>';
      h+='<div class="rv-a" style="color:#6ee7b7">সঠিক: '+r.correct_answer+'</div>';
    }
    if(r.explanation&&r.explanation!=='No explanation provided')
      h+='<div class="rv-e">💡 '+r.explanation+'</div>';
    h+='</div>';
  });
  document.getElementById('rv-body').innerHTML=h;
}

function renderAI(d){
  var rs=d.results||[],c=d.summary.correct,t=d.summary.total;
  var pct=d.summary.score_percentage||Math.round((c/t)*100)||0;
  var wrong=rs.filter(function(r){return !r.is_correct;});
  var h='';
  h+='<div class="ai-box"><h4>📋 সামগ্রিক মূল্যায়ন</h4><p>';
  if(pct>=80) h+='চমৎকার! '+pct+'% স্কোর অর্জন করেছেন।';
  else if(pct>=60) h+='ভালো! পাস করেছেন। আরও উন্নতি সম্ভব।';
  else h+='আরও অনুশীলন প্রয়োজন। ভুল প্রশ্নগুলো পর্যালোচনা করুন।';
  h+='</p></div>';
  if(wrong.length){
    h+='<div class="ai-box"><h4>⚠️ ভুল উত্তর ('+(wrong.length)+'টি)</h4>';
    wrong.slice(0,5).forEach(function(r,i){
      h+='<div style="margin-bottom:10px;padding:10px;background:rgba(239,68,68,.05);border-radius:8px">';
      h+='<div style="font-size:.85rem;font-weight:600;margin-bottom:3px">'+(i+1)+'. '+r.question+'</div>';
      h+='<div style="font-size:.78rem;color:#fca5a5">❌ আপনার: '+(r.user_answer||'কোনো উত্তর নেই')+'</div>';
      h+='<div style="font-size:.78rem;color:#6ee7b7">✅ সঠিক: '+r.correct_answer+'</div>';
      if(r.explanation&&r.explanation!=='No explanation provided')
        h+='<div style="font-size:.76rem;color:var(--muted);margin-top:3px">💡 '+r.explanation+'</div>';
      h+='</div>';
    });
    h+='</div>';
  }
  h+='<div class="ai-box"><h4>📚 পরামর্শ</h4><p>';
  if(wrong.length===0) h+='সব প্রশ্নের সঠিক উত্তর দিয়েছেন!';
  else if(pct<60) h+='Review ট্যাবে ভুল উত্তরগুলো দেখুন এবং সংশ্লিষ্ট অধ্যায়গুলো আবার পড়ুন।';
  else h+='ভুল প্রশ্নগুলো পর্যালোচনা করুন।';
  h+='</p></div>';
  document.getElementById('ai-body').innerHTML=h;
}

var _tabIdx={'ov':0,'ch':1,'rv':2,'ai':3};
var _tabKeys=['ov','ch','rv','ai'];
function showTab(tab,idx){
  if(idx===undefined) idx=_tabIdx[tab]||0;
  var track=document.getElementById('res-track');
  if(track) track.style.transform='translateX(-'+idx+'00%)';
  document.querySelectorAll('.res-tab').forEach(function(b,i){
    b.classList.toggle('on',i===idx);
  });
  var tabEl=document.querySelectorAll('.res-tab')[idx];
  if(tabEl) tabEl.scrollIntoView({behavior:'smooth',block:'nearest',inline:'center'});
  if(tab==='ch'&&resData) renderCharts(resData);
}
// Touch swipe on result panels
(function(){
  var el=document.getElementById('res-panels');
  if(!el) return;
  var sx=0,sy=0,curIdx=0;
  el.addEventListener('touchstart',function(e){sx=e.touches[0].clientX;sy=e.touches[0].clientY;},{ passive:true});
  el.addEventListener('touchend',function(e){
    var dx=e.changedTouches[0].clientX-sx;
    var dy=e.changedTouches[0].clientY-sy;
    if(Math.abs(dx)<30||Math.abs(dy)>Math.abs(dx)) return;
    var tabs=document.querySelectorAll('.res-tab');
    tabs.forEach(function(b,i){if(b.classList.contains('on'))curIdx=i;});
    var next=dx<0?Math.min(curIdx+1,3):Math.max(curIdx-1,0);
    if(next!==curIdx) showTab(_tabKeys[next],next);
  },{passive:true});
})();

function retake(){
  clearInterval(tmr);Qs=[];As={};cur=0;resData=null;
  document.getElementById('smt-res').style.display='none';
  document.getElementById('smt-setup').style.display='block';
  document.getElementById('s-start').disabled=false;
}

// Keyboard navigation
document.addEventListener('keydown',function(e){
  if(document.getElementById('smt-exam').style.display==='none') return;
  var q=Qs[cur]; if(!q) return;
  var qt=(q.type||'').toLowerCase();
  var opts=qt==='true_false'?['True','False']:(q.options&&typeof q.options==='object'?Object.keys(q.options):[]);
  switch(e.key){
    case 'ArrowRight': e.preventDefault(); goNext(); break;
    case 'ArrowLeft':  e.preventDefault(); goPrev(); break;
    case 'ArrowDown':  e.preventDefault();
      var ci=opts.indexOf(As[q.id]||''); pickVal(q.id,opts[Math.min(Math.max(ci,0)+1,opts.length-1)]||opts[0]); break;
    case 'ArrowUp':    e.preventDefault();
      var ci2=opts.indexOf(As[q.id]||''); pickVal(q.id,opts[Math.max(ci2-1,0)]); break;
    case '1':case 'a':case 'A': e.preventDefault(); if(opts[0]) pickVal(q.id,opts[0]); break;
    case '2':case 'b':case 'B': e.preventDefault(); if(opts[1]) pickVal(q.id,opts[1]); break;
    case '3':case 'c':case 'C': e.preventDefault(); if(opts[2]) pickVal(q.id,opts[2]); break;
    case '4':case 'd':case 'D': e.preventDefault(); if(opts[3]) pickVal(q.id,opts[3]); break;
    case ' ': e.preventDefault();
      var si=opts.indexOf(As[q.id]||''); pickVal(q.id,opts[si<0?0:(si+1)%opts.length]); break;
    case 'Enter': e.preventDefault();
      if(cur===Qs.length-1) confirmSub(); else goNext(); break;
    case 'Escape': e.preventDefault();
      if(confirm('মডেল টেস্ট বাতিল করতে চান?')){clearInterval(tmr);retake();} break;
  }
});
</script>