---
format: 1
concept: "binary-search"
kind: "figure"
title: "दायरा सिकुड़ते देखिए"
labels: {"lang":"hi","level":"beginner","approach":"visual"}
base: "a3042e7ca8d007dd70cf82f2ee672a0a71852fb03deb14a853846e9cac223865"
changes: []
by: "si"
declaration: {"company":"anthropic","model":"claude-opus","version":"5.5","thinking":"high","app":"claude-code","tools":[],"sources":[]}
---
क्रम में लगे पंद्रह गिने हुए डिब्बे और ढूँढने के लिए एक लक्ष्य संख्या। **अगला कदम** दबाने पर बचे हुए दायरे का बीच वाला डिब्बा देखा जाता है, बताया जाता है कि वह लक्ष्य से छोटा है या बड़ा, और वह आधा धूसर हो जाता है जिसमें लक्ष्य नहीं हो सकता। कदमों की गिनती और हर कदम का वाक्य डिब्बों के नीचे लिखा दिखता है। **नया लक्ष्य** दूसरी संख्या चुनता है (कभी-कभी ऐसी जो सूची में नहीं है)। तीर वाली कुंजियों से भी कदम बढ़ा और दोबारा शुरू कर सकते हैं।

```html
<!doctype html>
<html lang="hi">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
:root{--paper:#fbfbfd;--ink:#1d1f24;--muted:#6b6f78;--line:#dcdee3;--accent:#3d6fb6;--soft:#e6edf7;--out:#c9ccd2;color-scheme:light dark}
@media (prefers-color-scheme:dark){:root{--paper:#16181c;--ink:#eceef2;--muted:#9aa0aa;--line:#33363d;--accent:#7aa5e8;--soft:#1f2a3b;--out:#4a4e57}}
body{margin:0;font:16px/1.5 system-ui,sans-serif;background:var(--paper);color:var(--ink);display:flex;flex-direction:column;gap:14px;padding:16px;min-height:100vh;box-sizing:border-box}
.row{display:grid;grid-template-columns:repeat(15,1fr);gap:4px}
.box{border:1px solid var(--line);border-radius:6px;text-align:center;padding:8px 0;font-variant-numeric:tabular-nums;font-size:clamp(11px,2.6vw,16px);transition:background .25s ease-out,color .25s ease-out,opacity .25s ease-out}
.box.out{opacity:.35;background:var(--out)}
.box.mid{background:var(--accent);color:var(--paper);border-color:var(--accent);font-weight:700}
.box.found{outline:3px solid var(--accent);outline-offset:2px}
.idx{display:block;font-size:10px;color:var(--muted)}
.box.mid .idx{color:inherit}
.bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
button{font:inherit;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:8px;padding:6px 14px;min-height:40px;cursor:pointer}
button.go{background:var(--accent);color:var(--paper);border-color:var(--accent)}
button:disabled{opacity:.5;cursor:default}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
#say{min-height:3em}
.target{font-size:20px;font-weight:700}
@media (prefers-reduced-motion:reduce){.box{transition:none}}
</style>
</head>
<body>
<div class="bar"><span>ढूँढिए: <span class="target" id="target"></span></span><span id="count" style="color:var(--muted)"></span></div>
<div class="row" id="row" role="list" aria-label="क्रमबद्ध संख्याएँ"></div>
<p id="say" aria-live="polite"></p>
<div class="bar"><button class="go" id="step">अगला कदम</button><button id="again">नया लक्ष्य</button></div>
<script>
const values = [2,5,8,12,16,23,38,45,56,61,72,77,85,91,99];
const row = document.getElementById("row"), say = document.getElementById("say"), stepBtn = document.getElementById("step");
const boxes = values.map((v, i) => { const d = document.createElement("div"); d.className = "box"; d.setAttribute("role", "listitem"); d.innerHTML = `${v}<span class="idx">${i}</span>`; row.append(d); return d; });
let target, lo, hi, steps, done;
function draw(mid) {
  boxes.forEach((b, i) => { b.classList.toggle("out", i < lo || i > hi); b.classList.toggle("mid", i === mid); });
  document.getElementById("count").textContent = `· ${steps} कदम`;
}
function reset() {
  const pool = [...values, 30, 70, 3, 100];
  let next; do { next = pool[Math.floor(Math.random() * pool.length)]; } while (next === target);
  target = next; lo = 0; hi = values.length - 1; steps = 0; done = false;
  boxes.forEach((b) => b.classList.remove("found"));
  document.getElementById("target").textContent = target;
  say.textContent = `पूरी सूची, स्थान 0 से ${hi} तक, में ${target} हो सकता है। अगला कदम दबाइए।`;
  stepBtn.disabled = false; draw(-1);
}
function step() {
  if (done) return;
  if (lo > hi) { say.textContent = `खोजने को कुछ नहीं बचा: ${target} सूची में नहीं है। इसमें ${steps} कदम लगे।`; done = true; stepBtn.disabled = true; draw(-1); return; }
  const mid = Math.floor((lo + hi) / 2), v = values[mid]; steps++;
  if (v === target) { say.textContent = `स्थान ${mid} पर ${v} है। ${steps} कदम में मिल गया।`; boxes[mid].classList.add("found"); done = true; stepBtn.disabled = true; draw(mid); return; }
  if (v < target) { say.textContent = `स्थान ${mid} पर ${v} है, जो ${target} से छोटा है, इसलिए यहाँ तक सब हट जाता है। अब स्थान ${mid + 1} से ${hi} तक खोजिए।`; draw(mid); lo = mid + 1; }
  else { say.textContent = `स्थान ${mid} पर ${v} है, जो ${target} से बड़ा है, इसलिए यहाँ से आगे सब हट जाता है। अब स्थान ${lo} से ${mid - 1} तक खोजिए।`; draw(mid); hi = mid - 1; }
  setTimeout(() => draw(-1), matchMedia("(prefers-reduced-motion: reduce)").matches ? 0 : 700);
}
stepBtn.addEventListener("click", step);
document.getElementById("again").addEventListener("click", reset);
addEventListener("keydown", (e) => { if (e.key === "ArrowRight") step(); if (e.key === "ArrowLeft") reset(); });
reset();
</script>
</body>
</html>
```

```json
{
  "libraries": [],
  "strings": {
    "step": "अगला कदम",
    "again": "नया लक्ष्य"
  }
}
```
