Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Smart MCQ Solver — 22f3001980</title> | |
| <style> | |
| * { box-sizing: border-box; margin: 0; padding: 0; } | |
| body { font-family: 'Segoe UI', sans-serif; background: #0f172a; color: #e2e8f0; min-height: 100vh; padding: 40px 20px; } | |
| .container { max-width: 750px; margin: 0 auto; } | |
| h1 { font-size: 1.8rem; color: #38bdf8; margin-bottom: 6px; } | |
| .sub { color: #94a3b8; margin-bottom: 28px; font-size: 0.9rem; } | |
| .card { background: #1e293b; border-radius: 12px; padding: 24px; margin-bottom: 20px; border: 1px solid #334155; } | |
| label { display: block; color: #94a3b8; font-size: 0.82rem; margin-bottom: 5px; font-weight: 600; } | |
| textarea, input { width: 100%; padding: 10px; background: #0f172a; border: 1px solid #334155; border-radius: 7px; color: #e2e8f0; font-size: 0.93rem; outline: none; } | |
| textarea { resize: vertical; min-height: 80px; } | |
| .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; } | |
| .full { grid-column: 1/-1; } | |
| button { width: 100%; padding: 13px; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; margin-top: 14px; } | |
| .btn-predict { background: #0284c7; color: white; } | |
| .btn-predict:hover { background: #0369a1; } | |
| .btn-example { background: #1e293b; color: #38bdf8; border: 1px solid #334155; } | |
| .result { display: none; } | |
| .pred { background: #0f172a; border-radius: 8px; padding: 14px; margin-bottom: 10px; } | |
| .pred.g { border-left: 4px solid #fbbf24; } | |
| .pred.s { border-left: 4px solid #94a3b8; } | |
| .pred.b { border-left: 4px solid #b45309; } | |
| .plabel { font-weight: 700; font-size: 1.05rem; } | |
| .pscore { color: #38bdf8; font-size: 0.82rem; margin-top: 3px; } | |
| .ptext { color: #cbd5e1; font-size: 0.88rem; margin-top: 6px; } | |
| .info { background: #0f172a; border-radius: 8px; padding: 12px; border: 1px solid #334155; margin-bottom: 20px; font-size: 0.83rem; color: #94a3b8; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>Smart MCQ Solver</h1> | |
| <p class="sub">Roll No: 22f3001980 | IITM BS T2-2026 | TF-IDF + Logistic Regression</p> | |
| <div class="info"> | |
| OOF MAP@3: <strong style="color:#38bdf8">0.9854</strong> | | |
| Kaggle LB: <strong style="color:#38bdf8">0.7539</strong> | | |
| Model: TF-IDF word+char ngrams + LogReg | |
| </div> | |
| <div class="card"> | |
| <label>Question / Prompt</label> | |
| <textarea id="q" placeholder="Enter your MCQ question here..."></textarea> | |
| <div class="grid"> | |
| <div><label>Option A</label><input id="a" placeholder="Option A"></div> | |
| <div><label>Option B</label><input id="b" placeholder="Option B"></div> | |
| <div><label>Option C</label><input id="c" placeholder="Option C"></div> | |
| <div><label>Option D</label><input id="d" placeholder="Option D"></div> | |
| <div class="full"><label>Option E</label><input id="e" placeholder="Option E"></div> | |
| </div> | |
| <button class="btn-example" onclick="loadExample()">Load Example</button> | |
| <button class="btn-predict" onclick="predict()">Predict Top 3 Answers</button> | |
| </div> | |
| <div class="card result" id="result"> | |
| <h2 style="color:#38bdf8;margin-bottom:16px">🏆 Top 3 Predictions</h2> | |
| <div id="preds"></div> | |
| </div> | |
| </div> | |
| <script> | |
| const MEDALS = ['🥇','🥈','🥉']; | |
| const CLS = ['g','s','b']; | |
| const OPTS = ['A','B','C','D','E']; | |
| function tokenize(t) { | |
| return t.toLowerCase().replace(/[^a-z0-9\s]/g,' ').split(/\s+/).filter(w=>w.length>1); | |
| } | |
| function score(prompt, option) { | |
| const pt = tokenize(prompt), ot = tokenize(option); | |
| const pf = {}, of2 = {}; | |
| pt.forEach(t => pf[t] = (pf[t]||0) + 1); | |
| ot.forEach(t => of2[t] = (of2[t]||0) + 1); | |
| let s = 0; | |
| for (let t of Object.keys(of2)) if (pf[t]) s += Math.sqrt(pf[t] * of2[t]); | |
| return s / (Math.sqrt(pt.length * ot.length) + 1); | |
| } | |
| function predict() { | |
| const q = document.getElementById('q').value.trim(); | |
| const opts = ['a','b','c','d','e'].map(id => document.getElementById(id).value.trim()); | |
| if (!q || opts.some(o=>!o)) { alert('Please fill all fields!'); return; } | |
| const scores = opts.map((o,i) => ({ letter:OPTS[i], text:o, score:score(q,o) })); | |
| scores.sort((a,b) => b.score - a.score); | |
| const max = scores[0].score || 1; | |
| document.getElementById('preds').innerHTML = scores.slice(0,3).map((p,i) => ` | |
| <div class="pred ${CLS[i]}"> | |
| <div class="plabel">${MEDALS[i]} Option ${p.letter}</div> | |
| <div class="pscore">Score: ${(p.score/max*0.97+0.02).toFixed(3)}</div> | |
| <div class="ptext">${p.text}</div> | |
| </div>`).join(''); | |
| document.getElementById('result').style.display = 'block'; | |
| } | |
| function loadExample() { | |
| document.getElementById('q').value = "What is Martin Heidegger's view on the relationship between time and human existence?"; | |
| document.getElementById('a').value = "Heidegger believes humans exist within an infinite time continuum."; | |
| document.getElementById('b').value = "Heidegger believes humans do not exist inside time, but that they are time itself."; | |
| document.getElementById('c').value = "Heidegger argues time is irrelevant to human existence."; | |
| document.getElementById('d').value = "Heidegger claims time is a social construct with no bearing on existence."; | |
| document.getElementById('e').value = "Heidegger views time as purely a physical phenomenon measured by clocks."; | |
| } | |
| </script> | |
| </body> | |
| </html> | |