{"id":31159,"date":"2026-10-14T08:46:05","date_gmt":"2026-10-14T08:46:05","guid":{"rendered":"https:\/\/www.codemonkey.com\/?page_id=31159"},"modified":"2026-10-29T16:51:44","modified_gmt":"2026-10-29T16:51:44","slug":"search-race","status":"publish","type":"page","link":"https:\/\/www.codemonkey.com\/es\/interactive-cs-tools\/search-race\/","title":{"rendered":"Search Race"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Search Race<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700;800\" rel=\"stylesheet\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=JetBrains+Mono:wght@400;600\" rel=\"stylesheet\">\n<style>\n  :root{\n    --brown-dark:#39261F; --brown:#795535; --tan:#BF8653; --yellow:#FFC62F;\n    --lime:#9BB33F; --green:#4B571A; --gray:#54595F; --blue:#79ABCB;\n    --sky:#B0D1E5; --purple:#7A6796; --pink:#C64F61; --red:#B2372A;\n    --white:#ffffff;\n    --tint:rgba(176,209,229,.22);\n    --yellow-tint:rgba(255,198,47,.16);\n    --lin:#C64F61; --bin:#9BB33F;\n  }\n  *{box-sizing:border-box}\n  body{margin:0;font-family:'Poppins',system-ui,sans-serif;color:var(--brown-dark);background:var(--white);line-height:1.55;-webkit-font-smoothing:antialiased}\n  h1,h2,h3{font-family:'Poppins',sans-serif;margin:0}\n\n  \/* ---------- Hero ---------- *\/\n  .hero{position:relative;overflow:hidden;color:var(--white);text-align:center;padding:52px 16px 110px}\n  .eyebrow{position:relative;display:inline-block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;background:rgba(255,255,255,.14);padding:6px 14px;border-radius:999px;margin-bottom:14px}\n  .hero h1{position:relative;font-weight:800;text-transform:uppercase;letter-spacing:.01em;font-size:clamp(30px,5.4vw,52px);line-height:1.08;color:var(--yellow)}\n  .hero p{position:relative;max-width:640px;margin:12px auto 0;font-size:16px;opacity:.95}\n  .wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:60px;display:block}\n  .eyebrow:focus-visible{outline:3px solid var(--purple);outline-offset:2px}\n\n  .hero{background-color:var(--green);background-image:radial-gradient(ellipse 460px 150px at 50% 50%,#4B571A 55%,rgba(75,87,26,0) 100%),url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='280' height='280' viewBox='0 0 280 280'%3E%3Cdefs%3E%3Cg id='b'%3E%3Cpath d='M262 572 C330 605 400 618 470 616 C560 612 650 560 712 500 C750 465 785 430 810 402 L843 406 C853 462 851 560 791 630 C731 700 621 748 506 748 C401 748 311 680 258 592 Z' fill='%23E6B94A'\/%3E %3Cpath d='M268 578 C340 612 410 622 470 620 C565 616 655 562 712 505 C750 467 790 428 812 405 C790 470 730 560 640 610 C590 638 540 650 480 652 C400 652 322 622 266 592 Z' fill='%23CDA144'\/%3E %3Cpath d='M262 572 C330 605 400 618 470 616 C560 612 650 560 712 500 C750 465 785 430 810 402 L843 406 C853 462 851 560 791 630 C731 700 621 748 506 748 C401 748 311 680 258 592 Z' fill='none' stroke='%23231F20' stroke-width='10' stroke-linejoin='round'\/%3E %3Cg fill='none' stroke='%23231F20' stroke-width='10' stroke-linecap='butt'%3E %3Cpath d='M302 618 C360 655 420 690 505 692 C620 694 730 610 812 518'\/%3E %3Cpath d='M562 648 C660 610 760 530 815 418'\/%3E %3Cpath d='M780 516 C795 485 808 452 818 420'\/%3E %3C\/g%3E %3Cpath d='M808 405 L826 340 L848 345 L843 408 C835 420 818 422 808 405 Z' fill='%23644E37' stroke='%23231F20' stroke-width='10' stroke-linejoin='round'\/%3E %3Cpath d='M249 555 C246 570 251 584 259 594 C269 588 277 580 282 572 Z' fill='%23644E37' stroke='%23231F20' stroke-width='10' stroke-linejoin='round'\/%3E%3C\/g%3E%3C\/defs%3E%3Cg opacity='.85'%3E%3Cuse href='%23b' transform='translate(55 60) rotate(-15) scale(0.11) translate(-540 -545)'\/%3E%3Cuse href='%23b' transform='translate(185 150) rotate(25) scale(0.09) translate(-540 -545)'\/%3E%3Cuse href='%23b' transform='translate(80 215) rotate(160) scale(0.1) translate(-540 -545)'\/%3E%3Cuse href='%23b' transform='translate(230 40) rotate(-50) scale(0.08) translate(-540 -545)'\/%3E%3C\/g%3E%3C\/svg%3E\");background-size:auto,280px;background-position:center,0 0;background-repeat:no-repeat,repeat}\n  .hero .bb{position:absolute;pointer-events:none}\n  .hero .bb svg{width:100%;height:auto;display:block}\n  .hero .bb.l{width:160px;left:max(16px,calc(50% - 630px));top:92px;transform:rotate(-12deg)}\n  .hero .bb.r{width:125px;right:max(16px,calc(50% - 610px));top:28px;transform:scaleX(-1) rotate(-18deg)}\n  @media (max-width:1180px){.hero .bb.l{width:96px;top:150px}.hero .bb.r{width:80px;top:14px}}\n  @media (max-width:640px){.hero .bb.l{width:58px;left:6px;top:36px}.hero .bb.r{width:50px;right:6px;top:8px}}\n  .eyebrow{text-decoration:none;color:var(--white);transition:background .15s}\n  .eyebrow:hover{background:rgba(255,255,255,.24)}\n\n\n  .lvl{flex:none}\n  .lvl .label{text-align:right}\n  .level{display:inline-flex;background:var(--tint);border-radius:999px;padding:4px;gap:4px}\n  .level button{font:700 14px 'Poppins',sans-serif;border:none;background:transparent;color:var(--gray);border-radius:999px;padding:8px 18px;cursor:pointer}\n  .level button[aria-pressed=\"true\"]{background:var(--brown-dark);color:var(--yellow)}\n  .level button:focus-visible{outline:3px solid var(--purple);outline-offset:2px}\n  .level-note{font-size:12px;color:var(--gray);margin-top:6px;text-align:right}\n  @media (max-width:640px){.lvl{order:-1;width:100%}.lvl .label,.lvl .level-note{text-align:left}}\n  body.easy .adv-only{display:none !important}\n  body.adv .easy-only{display:none !important}\n\n\n  \/* ---------- Layout ---------- *\/\n  .wrap{max-width:1160px;margin:-64px auto 48px;padding:0 16px;position:relative}\n  .card{background:var(--white);border-radius:24px;box-shadow:0 12px 34px rgba(57,38,31,.13);padding:24px}\n  .label{display:block;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--gray);margin-bottom:8px}\n  .row{display:flex;flex-wrap:wrap;gap:18px 28px;align-items:flex-end}\n  .row + .row{margin-top:18px}\n  .grow{flex:1}\n\n  \/* ---------- Controls ---------- *\/\n  .chips{display:flex;flex-wrap:wrap;gap:8px}\n  .chip{font:600 14px 'Poppins',sans-serif;color:var(--brown-dark);background:var(--white);border:2px solid var(--sky);border-radius:999px;padding:8px 16px;cursor:pointer;transition:background .15s,border-color .15s,transform .08s}\n  .chip:hover{border-color:var(--blue)}\n  .chip[aria-pressed=\"true\"]{background:var(--yellow);border-color:var(--yellow);box-shadow:0 3px 0 var(--tan)}\n  .chip:active{transform:translateY(2px)}\n  .chip:disabled{opacity:.5;cursor:not-allowed;transform:none}\n  .speed{min-width:160px}\n  .speed .val{font-weight:700;color:var(--brown)}\n  input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:999px;background:var(--sky);cursor:pointer}\n  input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--yellow);border:3px solid var(--brown-dark)}\n  input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--yellow);border:3px solid var(--brown-dark)}\n  .target{display:flex;gap:8px;align-items:center;flex-wrap:wrap}\n  .target input{width:96px;font:700 18px 'Poppins',sans-serif;color:var(--brown-dark);text-align:center;border:2px solid var(--sky);border-radius:999px;padding:8px 10px;background:var(--white)}\n  .target input:focus{outline:3px solid var(--purple);outline-offset:2px}\n\n  .btn{font:700 14px 'Poppins',sans-serif;border:none;border-radius:999px;padding:11px 20px;cursor:pointer;background:var(--yellow);color:var(--brown-dark);box-shadow:0 4px 0 var(--tan);display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .08s,box-shadow .08s}\n  .btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--tan)}\n  .btn.secondary{background:var(--white);border:2px solid var(--sky);box-shadow:0 4px 0 var(--sky);padding:9px 16px}\n  .btn.secondary:active{box-shadow:0 1px 0 var(--sky)}\n  .btn.go{font-size:16px;padding:13px 28px;text-transform:uppercase;letter-spacing:.05em}\n  .btn:disabled{opacity:.4;cursor:not-allowed;transform:none}\n  .btn svg{width:18px;height:18px;fill:currentColor}\n  .chip:focus-visible,.btn:focus-visible,input[type=range]:focus-visible,.tile:focus-visible{outline:3px solid var(--purple);outline-offset:2px}\n\n  \/* ---------- Lanes ---------- *\/\n  .lanes{display:flex;flex-direction:column;gap:18px;margin-top:22px}\n  .lane{background:var(--tint);border-radius:20px;padding:16px 18px 18px;border-left:8px solid var(--c);position:relative}\n  .lane.lin{--c:var(--lin)} .lane.bin{--c:var(--bin)}\n  .lane-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-bottom:12px}\n  .lane-name{font-weight:800;font-size:20px;text-transform:uppercase;display:flex;align-items:center;gap:10px}\n  .lane-name i{width:14px;height:14px;border-radius:50%;background:var(--c);display:inline-block}\n  .bigo{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;background:var(--white);border-radius:999px;padding:3px 10px;color:var(--brown)}\n  .pill{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;border-radius:999px;padding:4px 12px;background:var(--white);color:var(--gray)}\n  .pill.run{background:var(--yellow);color:var(--brown-dark)}\n  .pill.found{background:var(--green);color:var(--white)}\n  .pill.miss{background:var(--red);color:var(--white)}\n  .pill.first{background:var(--brown-dark);color:var(--yellow)}\n  .counter{margin-left:auto;text-align:right;line-height:1.1}\n  .counter b{font-size:30px;font-weight:800;display:block}\n  .counter small{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--gray)}\n  .lane-body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}\n  @media (max-width:860px){.lane-body{grid-template-columns:1fr}.counter{margin-left:0}}\n  .track{height:10px;border-radius:999px;background:var(--white);margin-bottom:14px;overflow:hidden}\n  .track span{display:block;height:100%;width:0;background:var(--c);border-radius:999px;transition:width .2s}\n\n  .tiles{display:grid;gap:17px 5px;padding-top:16px}\n  .tile{position:relative;height:38px;border-radius:9px;background:var(--white);border:2px solid transparent;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;cursor:pointer;transition:background .15s,opacity .15s,transform .15s;color:var(--brown-dark);padding:0;font-family:'Poppins',sans-serif}\n  .tile:hover{border-color:var(--blue)}\n  .tile.tgt{border:2px dashed var(--brown)}\n  .tile.chk{background:var(--sky);opacity:.55}\n  .tile.out{background:transparent;color:var(--gray);opacity:.35;text-decoration:line-through}\n  .tile.cur{background:var(--yellow);transform:scale(1.08);opacity:1;z-index:1}\n  .tile.found{background:var(--green);color:var(--white);transform:scale(1.12);opacity:1;z-index:1;text-decoration:none}\n  .tile .mk{position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-size:9.5px;font-weight:800;letter-spacing:.04em;color:var(--white);background:var(--brown-dark);border-radius:6px;padding:0 4px;line-height:14px;white-space:nowrap}\n  .tiles.small .tile{height:30px;font-size:11px;border-radius:7px}\n  .lane-msg{margin-top:12px;font-size:14px;font-weight:500;min-height:22px}\n  .lane-vars{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px}\n  .lane-vars span{font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:600;background:var(--white);border-radius:8px;padding:2px 10px}\n  .lane-vars span b{color:var(--purple)}\n  .recipe{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;counter-reset:r}\n  .recipe li{counter-increment:r;display:flex;gap:10px;align-items:flex-start;background:var(--white);border-radius:12px;padding:7px 10px;font-size:13px;font-weight:500;transition:background .15s}\n  .recipe li::before{content:counter(r);flex:none;width:22px;height:22px;border-radius:50%;background:var(--tint);font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center}\n  .recipe li.active{background:var(--yellow);box-shadow:0 3px 0 var(--tan)}\n  .recipe li.active::before{background:var(--brown-dark);color:var(--yellow)}\n\n  .code{background:var(--brown-dark);color:rgba(255,255,255,.82);border-radius:16px;padding:12px 0;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;overflow-x:auto}\n  .code .ln{padding:2px 14px 2px 10px;white-space:pre;border-left:4px solid transparent}\n  .code .ln.active{background:rgba(255,198,47,.16);border-left-color:var(--yellow);color:var(--yellow);font-weight:600}\n\n  .banner{margin-top:18px;border-radius:18px;padding:16px 20px;font-weight:600;font-size:16px;display:flex;gap:14px;align-items:center;border:2px dashed var(--sky)}\n  .banner .dot{flex:none;width:14px;height:14px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 5px var(--yellow-tint)}\n  .banner.win{border:none;background:var(--yellow);box-shadow:0 4px 0 var(--tan)}\n  .banner.win .dot{background:var(--brown-dark);box-shadow:none}\n\n  \/* ---------- Lower cards ---------- *\/\n  .duo{display:grid;grid-template-columns:1fr 1.5fr;gap:24px;margin-top:24px}\n  @media (max-width:900px){.duo{grid-template-columns:1fr}}\n  .card h2{font-weight:800;font-size:clamp(20px,2.6vw,26px);text-transform:uppercase;margin-bottom:6px}\n  .card h2 em{font-style:normal;color:var(--tan)}\n  .sub{font-size:14px;color:var(--gray);margin:0 0 14px}\n  table.tbl{width:100%;border-collapse:collapse;font-size:13.5px}\n  .tbl th{text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--gray);padding:6px 6px;border-bottom:2px solid var(--sky)}\n  .tbl td{padding:7px 6px;border-bottom:1px solid var(--tint)}\n  .tbl td.num,.tbl th.num{text-align:right;font-family:'JetBrains Mono',monospace}\n  .tbl .w{font-weight:700}\n  .sw{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:0}\n  .empty{color:var(--gray);font-size:14px;background:var(--tint);border-radius:14px;padding:14px}\n\n  .chartbox{position:relative}\n  #chart{width:100%;height:auto;display:block}\n  #chart text{font-family:'Poppins',sans-serif}\n  .ax{font-size:12px;fill:var(--gray)}\n  .axt{font-size:12px;font-weight:600;fill:var(--gray)}\n  .grid{stroke:var(--sky);stroke-width:1;opacity:.6}\n  .base{stroke:var(--gray);stroke-width:1.5}\n  .ln-s{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}\n  .ln-s.draw{stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 1.2s ease-out forwards}\n  @keyframes draw{to{stroke-dashoffset:0}}\n  .pt{stroke:var(--white);stroke-width:2}\n  .hitpt{fill:transparent;cursor:pointer}\n  .dlbl{font-size:13px;font-weight:700;fill:var(--brown-dark)}\n  .legend{display:flex;gap:18px;font-size:13px;font-weight:600;margin:4px 0 8px}\n  .legend i{display:inline-block;width:18px;height:4px;border-radius:2px;vertical-align:middle;margin-right:6px}\n  .tip{position:absolute;pointer-events:none;background:var(--brown-dark);color:var(--white);font-size:12.5px;border-radius:10px;padding:8px 12px;opacity:0;transition:opacity .1s;white-space:nowrap;transform:translate(-50%,-115%)}\n  .tip b{color:var(--yellow)}\n  .tip.show{opacity:1}\n  details{margin-top:12px}\n  summary{cursor:pointer;font-weight:700;font-size:14px;color:var(--purple)}\n\n  .info{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;margin-top:24px}\n  @media (max-width:900px){.info{grid-template-columns:1fr}}\n  .bullets{list-style:none;padding:0;margin:10px 0 0}\n  .bullets li{padding-left:28px;position:relative;margin-bottom:8px;font-weight:500}\n  .bullets li::before{content:\"\";position:absolute;left:0;top:7px;width:14px;height:14px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 4px var(--yellow-tint)}\n  .tipbox{background:var(--yellow-tint);border-radius:16px;padding:14px 18px;border-left:6px solid var(--yellow)}\n  .tipbox strong{display:block;font-weight:700;text-transform:uppercase;font-size:12px;letter-spacing:.08em;color:var(--brown);margin-bottom:2px}\n  .tipbox + .tipbox{margin-top:12px}\n  footer{text-align:center;font-size:13px;color:var(--gray);padding:0 16px 32px}\n<\/style>\n<\/head>\n<body class=\"easy\">\n\n<header class=\"hero\">\n  <div class=\"bb l\"><svg viewBox=\"215 325 650 470\" aria-hidden=\"true\"><path d=\"M225 640 C240 628 255 650 265 648 C330 645 410 700 520 718 C610 728 690 705 725 688 C690 740 610 782 505 778 C400 774 300 745 262 705 C242 685 214 662 225 640 Z\" fill=\"#000\" fill-opacity=\".2\"\/><path d=\"M262 572 C330 605 400 618 470 616 C560 612 650 560 712 500 C750 465 785 430 810 402 L843 406 C853 462 851 560 791 630 C731 700 621 748 506 748 C401 748 311 680 258 592 Z\" fill=\"#E6B94A\"\/> <path d=\"M268 578 C340 612 410 622 470 620 C565 616 655 562 712 505 C750 467 790 428 812 405 C790 470 730 560 640 610 C590 638 540 650 480 652 C400 652 322 622 266 592 Z\" fill=\"#CDA144\"\/> <path d=\"M262 572 C330 605 400 618 470 616 C560 612 650 560 712 500 C750 465 785 430 810 402 L843 406 C853 462 851 560 791 630 C731 700 621 748 506 748 C401 748 311 680 258 592 Z\" fill=\"none\" stroke=\"#231F20\" stroke-width=\"10\" stroke-linejoin=\"round\"\/> <g fill=\"none\" stroke=\"#231F20\" stroke-width=\"10\" stroke-linecap=\"butt\"> <path d=\"M302 618 C360 655 420 690 505 692 C620 694 730 610 812 518\"\/> <path d=\"M562 648 C660 610 760 530 815 418\"\/> <path d=\"M780 516 C795 485 808 452 818 420\"\/> <\/g> <path d=\"M808 405 L826 340 L848 345 L843 408 C835 420 818 422 808 405 Z\" fill=\"#644E37\" stroke=\"#231F20\" stroke-width=\"10\" stroke-linejoin=\"round\"\/> <path d=\"M249 555 C246 570 251 584 259 594 C269 588 277 580 282 572 Z\" fill=\"#644E37\" stroke=\"#231F20\" stroke-width=\"10\" stroke-linejoin=\"round\"\/><\/svg><\/div><div class=\"bb r\"><svg viewBox=\"215 325 650 470\" aria-hidden=\"true\"><path d=\"M225 640 C240 628 255 650 265 648 C330 645 410 700 520 718 C610 728 690 705 725 688 C690 740 610 782 505 778 C400 774 300 745 262 705 C242 685 214 662 225 640 Z\" fill=\"#000\" fill-opacity=\".2\"\/><path d=\"M262 572 C330 605 400 618 470 616 C560 612 650 560 712 500 C750 465 785 430 810 402 L843 406 C853 462 851 560 791 630 C731 700 621 748 506 748 C401 748 311 680 258 592 Z\" fill=\"#E6B94A\"\/> <path d=\"M268 578 C340 612 410 622 470 620 C565 616 655 562 712 505 C750 467 790 428 812 405 C790 470 730 560 640 610 C590 638 540 650 480 652 C400 652 322 622 266 592 Z\" fill=\"#CDA144\"\/> <path d=\"M262 572 C330 605 400 618 470 616 C560 612 650 560 712 500 C750 465 785 430 810 402 L843 406 C853 462 851 560 791 630 C731 700 621 748 506 748 C401 748 311 680 258 592 Z\" fill=\"none\" stroke=\"#231F20\" stroke-width=\"10\" stroke-linejoin=\"round\"\/> <g fill=\"none\" stroke=\"#231F20\" stroke-width=\"10\" stroke-linecap=\"butt\"> <path d=\"M302 618 C360 655 420 690 505 692 C620 694 730 610 812 518\"\/> <path d=\"M562 648 C660 610 760 530 815 418\"\/> <path d=\"M780 516 C795 485 808 452 818 420\"\/> <\/g> <path d=\"M808 405 L826 340 L848 345 L843 408 C835 420 818 422 808 405 Z\" fill=\"#644E37\" stroke=\"#231F20\" stroke-width=\"10\" stroke-linejoin=\"round\"\/> <path d=\"M249 555 C246 570 251 584 259 594 C269 588 277 580 282 572 Z\" fill=\"#644E37\" stroke=\"#231F20\" stroke-width=\"10\" stroke-linejoin=\"round\"\/><\/svg><\/div>\n  <a class=\"eyebrow\" href=\"https:\/\/www.codemonkey.com\/interactive-cs-tools\" target=\"_top\">Interactive CS Tools<\/a>\n  <h1>Search Race<\/h1>\n  <p>Linear search checks every item. Binary search keeps cutting the list in half. Pick a target, make your prediction and watch them race!<\/p>\n  <svg class=\"wave\" viewBox=\"0 0 1440 60\" preserveAspectRatio=\"none\" aria-hidden=\"true\"><path d=\"M0,32 C240,64 480,0 720,24 C960,48 1200,8 1440,30 L1440,60 L0,60 Z\" fill=\"#ffffff\"\/><\/svg>\n<\/header>\n\n<main class=\"wrap\">\n  <section class=\"card\" aria-label=\"Search race\">\n    <div class=\"row\">\n      <div>\n        <span class=\"label\" id=\"sizeLbl\">List size<\/span>\n        <div class=\"chips\" id=\"sizeChips\" role=\"group\" aria-labelledby=\"sizeLbl\"><\/div>\n      <\/div>\n      <div class=\"speed\">\n        <label class=\"label\" for=\"speedIn\">Speed: <span class=\"val\" id=\"speedVal\">3<\/span><\/label>\n        <input type=\"range\" id=\"speedIn\" min=\"1\" max=\"5\" value=\"3\">\n      <\/div>\n      <span class=\"grow\"><\/span>\n      <div class=\"lvl\"><span class=\"label\">Level<\/span><div class=\"level\" role=\"group\" aria-label=\"Level\"><button type=\"button\" data-level=\"easy\" aria-pressed=\"true\">Easy<\/button><button type=\"button\" data-level=\"adv\" aria-pressed=\"false\">Advanced<\/button><\/div><div class=\"level-note\" id=\"levelNote\" data-easy=\"Plain words, no code\" data-adv=\"Python code, variables and Big-O\"><\/div><\/div>\n    <\/div>\n\n    <div class=\"row\">\n      <div>\n        <label class=\"label\" for=\"tgtIn\">Target (or click a number)<\/label>\n        <div class=\"target\">\n          <input type=\"number\" id=\"tgtIn\" min=\"1\" max=\"999\" inputmode=\"numeric\">\n          <button class=\"btn secondary\" type=\"button\" id=\"pickIn\">In the list<\/button>\n          <button class=\"btn secondary\" type=\"button\" id=\"pickOut\">Not in the list<\/button>\n        <\/div>\n      <\/div>\n      <div>\n        <span class=\"label\" id=\"predLbl\">Your prediction<\/span>\n        <div class=\"chips\" role=\"group\" aria-labelledby=\"predLbl\">\n          <button class=\"chip\" type=\"button\" data-pred=\"lin\" aria-pressed=\"false\">Linear wins<\/button>\n          <button class=\"chip\" type=\"button\" data-pred=\"bin\" aria-pressed=\"false\">Binary wins<\/button>\n          <button class=\"chip\" type=\"button\" data-pred=\"tie\" aria-pressed=\"false\">Tie<\/button>\n        <\/div>\n      <\/div>\n      <span class=\"grow\"><\/span>\n      <div class=\"chips\">\n        <button class=\"btn secondary\" type=\"button\" id=\"stepBtn\" title=\"One comparison each\">\n          <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M6 5v14l9-7zM16 5h2v14h-2z\"\/><\/svg>Step\n        <\/button>\n        <button class=\"btn secondary\" type=\"button\" id=\"resetBtn\">\n          <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 4a8 8 0 1 1-7.4 5H7a6 6 0 1 0 1.8-3.2L11 8H4V1l2.6 2.6A8 8 0 0 1 12 4z\"\/><\/svg>Reset\n        <\/button>\n        <button class=\"btn go\" type=\"button\" id=\"raceBtn\">\n          <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" id=\"raceIcon\"><path d=\"M7 4v16l13-8z\"\/><\/svg><span id=\"raceTxt\">Race!<\/span>\n        <\/button>\n      <\/div>\n    <\/div>\n\n    <div class=\"lanes\">\n      <div class=\"lane lin\" id=\"laneLin\">\n        <div class=\"lane-head\">\n          <span class=\"lane-name\"><i><\/i>Linear search<\/span>\n          <span class=\"bigo adv-only\">O(n)<\/span><span class=\"bigo easy-only\">Checks one by one<\/span>\n          <span class=\"pill\" id=\"pillLin\">Ready<\/span>\n          <span class=\"counter\"><b id=\"cntLin\">0<\/b><small><span class=\"easy-only\">Checks<\/span><span class=\"adv-only\">Comparisons<\/span><\/small><\/span>\n        <\/div>\n        <div class=\"lane-body\">\n          <div>\n            <div class=\"track\"><span id=\"trkLin\"><\/span><\/div>\n            <div class=\"tiles\" id=\"tilesLin\"><\/div>\n            <div class=\"lane-msg\" id=\"msgLin\"><\/div>\n            <div class=\"lane-vars adv-only\" id=\"varsLin\"><\/div>\n          <\/div>\n          <div class=\"code\" id=\"codeLin\"><\/div>\n        <\/div>\n      <\/div>\n      <div class=\"lane bin\" id=\"laneBin\">\n        <div class=\"lane-head\">\n          <span class=\"lane-name\"><i><\/i>Binary search<\/span>\n          <span class=\"bigo adv-only\">O(log n)<\/span><span class=\"bigo easy-only\">Cuts the list in half<\/span>\n          <span class=\"pill\" id=\"pillBin\">Ready<\/span>\n          <span class=\"counter\"><b id=\"cntBin\">0<\/b><small><span class=\"easy-only\">Checks<\/span><span class=\"adv-only\">Comparisons<\/span><\/small><\/span>\n        <\/div>\n        <div class=\"lane-body\">\n          <div>\n            <div class=\"track\"><span id=\"trkBin\"><\/span><\/div>\n            <div class=\"tiles\" id=\"tilesBin\"><\/div>\n            <div class=\"lane-msg\" id=\"msgBin\"><\/div>\n            <div class=\"lane-vars adv-only\" id=\"varsBin\"><\/div>\n          <\/div>\n          <div class=\"code\" id=\"codeBin\"><\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"banner\" id=\"banner\" aria-live=\"polite\"><span class=\"dot\"><\/span><span id=\"bannerTxt\"><\/span><\/div>\n  <\/section>\n\n  <section class=\"duo\">\n    <div class=\"card\">\n      <h2>Race <em>log<\/em><\/h2>\n      <p class=\"sub\">Every race you run is recorded here.<\/p>\n      <div id=\"logBox\"><\/div>\n    <\/div>\n    <div class=\"card\">\n      <h2>The big <em>experiment<\/em><\/h2>\n      <p class=\"sub\">Test every possible target on lists from 10 to 1,000 items. How do the two searches grow?<span class=\"adv-only\"> Linear grows like n \/ 2 on average. Binary grows like log<sub>2<\/sub> n.<\/span><\/p>\n      <div class=\"row\" style=\"align-items:center\">\n        <button class=\"btn\" type=\"button\" id=\"expBtn\">Run the experiment<\/button>\n        <div class=\"chips\" role=\"group\" aria-label=\"Measure\">\n          <button class=\"chip\" type=\"button\" data-measure=\"avg\" aria-pressed=\"true\">Average case<\/button>\n          <button class=\"chip\" type=\"button\" data-measure=\"worst\" aria-pressed=\"false\">Worst case<\/button>\n        <\/div>\n      <\/div>\n      <div class=\"chartbox\" id=\"chartBox\" style=\"margin-top:14px\">\n        <div class=\"legend\"><span><i style=\"background:var(--lin)\"><\/i>Linear search<\/span><span><i style=\"background:var(--bin)\"><\/i>Binary search<\/span><\/div>\n        <svg id=\"chart\" viewBox=\"0 0 640 320\" role=\"img\" aria-label=\"Comparisons needed as the list grows\"><\/svg>\n        <div class=\"tip\" id=\"tip\"><\/div>\n      <\/div>\n      <details>\n        <summary>Show the numbers as a table<\/summary>\n        <div id=\"expTable\" style=\"margin-top:10px\"><\/div>\n      <\/details>\n    <\/div>\n  <\/section>\n\n  <section class=\"info\">\n    <div class=\"card\">\n      <h2>Linear <em>search<\/em><\/h2>\n      <ul class=\"bullets\">\n        <li>Start at the first item and check each one in order.<\/li>\n        <li>Works on any list, sorted or not.<\/li>\n        <li>A list of 1,000 items can take up to 1,000 checks.<\/li>\n        <li class=\"adv-only\">Time complexity O(n). On average it makes about n \/ 2 comparisons when the target is in the list.<\/li>\n        <li class=\"adv-only\">Also works on linked lists and data that arrives one item at a time.<\/li>\n      <\/ul>\n    <\/div>\n    <div class=\"card\">\n      <h2>Binary <em>search<\/em><\/h2>\n      <ul class=\"bullets\">\n        <li>Check the middle item. Too small? Throw away the left half. Too big? Throw away the right half.<\/li>\n        <li>Only works on a sorted list.<\/li>\n        <li>A list of 1,000 items needs at most 10 checks!<\/li>\n        <li class=\"adv-only\">Time complexity O(log n). The worst case is \u230alog<sub>2<\/sub> n\u230b + 1 comparisons: 20 for a million items.<\/li>\n        <li class=\"adv-only\">Needs random access (an array), because it jumps straight to the middle.<\/li>\n      <\/ul>\n    <\/div>\n    <div class=\"card\">\n      <h2>Try <em>this<\/em><\/h2>\n      <div class=\"tipbox\"><strong>Can linear win?<\/strong>Click the very first number in the list and race. Why does linear search win this time?<\/div>\n      <div class=\"tipbox easy-only\"><strong>Not there<\/strong>Press &#8220;Not in the list&#8221; and race. How many checks does each search need to be sure the number is missing?<\/div>\n      <div class=\"tipbox adv-only\"><strong>Why sorted?<\/strong>Binary search throws away half the list after each comparison. Explain why that is only safe when the list is sorted.<\/div>\n    <\/div>\n  <\/section>\n<\/main>\n\n<footer>Tip: press <b>Enter<\/b> in the target box to start the race.<\/footer>\n\n<script>\n\nconst LEVEL=(function(){\n  let cur='easy'; const cbs=[];\n  try{\n    const q=new URLSearchParams(location.search).get('level');\n    if(q==='advanced'||q==='adv') cur='adv';\n    else if(q==='easy') cur='easy';\n    else { const s=localStorage.getItem('cm-cs-level'); if(s==='adv'||s==='easy') cur=s; }\n  }catch(e){}\n  function paint(){\n    document.querySelectorAll('.level button').forEach(b=>b.setAttribute('aria-pressed',b.dataset.level===cur));\n    const n=document.getElementById('levelNote'); if(n) n.textContent=n.getAttribute('data-'+cur)||'';\n    document.body.classList.toggle('adv',cur==='adv'); document.body.classList.toggle('easy',cur!=='adv');\n  }\n  function set(l){ cur=l; try{ localStorage.setItem('cm-cs-level',l); }catch(e){} paint(); cbs.forEach(f=>f(l)); }\n  document.querySelectorAll('.level button').forEach(b=>b.addEventListener('click',()=>{ if(b.dataset.level!==cur) set(b.dataset.level); }));\n  paint();\n  return {get:()=>cur, on:f=>cbs.push(f), set:set};\n})();\n\nconst SIZES=[10,20,50,100];\nconst REC_LIN=['Start at the first item.','Is it the target? You found it!','Not the target? Move on to the next item.','Reached the end? The target is not in the list.'];\nconst REC_BIN=['Look at the middle item.','Is it the target? You found it!','Too small? Throw away the left half.','Too big? Throw away the right half.','Nothing left to check? The target is not in the list.'];\nconst DELAYS=[850,550,320,160,60];\nconst CODE_LIN=['def linear_search(items, target):','    for i in range(len(items)):','        if items[i] == target:','            return i       # found!','    return -1              # not found'];\nconst CODE_BIN=['def binary_search(items, target):','    low, high = 0, len(items) - 1','    while low <= high:','        mid = (low + high) \/\/ 2','        if items[mid] == target:','            return mid     # found!','        elif items[mid] < target:','            low = mid + 1  # go right','        else:','            high = mid - 1 # go left','    return -1'];\n\nlet size=20, order='sorted', items=[], target=null, predict=null;\nlet SL=[], SB=[], iL=0, iB=0, timer=null, running=false, finished=false, firstDone=null;\nlet logRows=[], raceNo=0, measure='avg', expData=null;\n\nconst $=id=>document.getElementById(id);\nconst both=(a,b)=>a?!!b:false;\n\n\/\/ ---------- data ----------\nfunction makeItems(){\n  const pool=[]; for(let v=1;v<=size*3;v++) pool.push(v);\n  for(let i=pool.length-1;i>0;i--){ const j=Math.floor(Math.random()*(i+1)); const t=pool[i]; pool[i]=pool[j]; pool[j]=t; }\n  items=pool.slice(0,size).sort((a,b)=>a-b);\n}\nfunction shuffle(a){ for(let i=a.length-1;i>0;i--){ const j=Math.floor(Math.random()*(i+1)); const t=a[i]; a[i]=a[j]; a[j]=t; } }\nfunction pickIn(){ target=items[Math.floor(Math.random()*items.length)]; $('tgtIn').value=target; }\nfunction pickOut(){\n  const max=size*3; let v, guard=0;\n  do{ v=1+Math.floor(Math.random()*max); guard++; } while(items.includes(v) ? guard<500 : false);\n  target=v; $('tgtIn').value=v;\n}\n\n\/\/ ---------- algorithms (step recorders) ----------\nfunction linearSteps(a,t){\n  const s=[];\n  for(let i=0;i<a.length;i++){\n    const vv=[['i',i],['items[i]',a[i]],['target',t]];\n    if(a[i]===t){ s.push({cur:i,found:true,done:true,cmp:true,line:3,r:1,vars:vv,msg:'Position '+i+' holds '+t+'. Found it!'}); return s; }\n    s.push({cur:i,cmp:true,line:2,r:2,vars:vv,msg:'Check position '+i+': is '+a[i]+' equal to '+t+'? No, move on.'});\n  }\n  s.push({cur:a.length,done:true,cmp:false,line:4,r:3,vars:[['i',a.length+' (end of list)'],['target',t]],msg:'Checked all '+a.length+' items. '+t+' is not in the list.'});\n  return s;\n}\nfunction binarySteps(a,t){\n  const s=[]; let lo=0, hi=a.length-1;\n  while(lo<=hi){\n    const mid=Math.floor((lo+hi)\/2), v=a[mid];\n    const vv=[['low',lo],['high',hi],['mid',mid],['items[mid]',v],['target',t]];\n    if(v===t){ s.push({lo:lo,hi:hi,mid:mid,found:true,done:true,cmp:true,line:5,r:1,vars:vv,msg:'The middle item is '+t+'. Found it!'}); return s; }\n    if(v<t){ s.push({lo:lo,hi:hi,mid:mid,cmp:true,line:7,r:2,vars:vv,msg:'Middle is '+v+', smaller than '+t+'. Throw away the left half.'}); lo=mid+1; }\n    else { s.push({lo:lo,hi:hi,mid:mid,cmp:true,line:9,r:3,vars:vv,msg:'Middle is '+v+', bigger than '+t+'. Throw away the right half.'}); hi=mid-1; }\n  }\n  s.push({lo:lo,hi:hi,mid:-1,done:true,cmp:false,line:10,r:4,vars:[['low',lo],['high',hi],['target',t]],msg:'Low passed high, so there is nowhere left to look. Binary search says '+t+' is not here.'});\n  return s;\n}\nfunction countCmp(steps,n){ let c=0; const m=Math.min(n,steps.length); for(let i=0;i<m;i++) if(steps[i].cmp) c++; return c; }\n\n\/\/ ---------- rendering ----------\nfunction cols(){\n  if(size<=20) return 10;\n  return window.innerWidth<700 ? 10 : (size>50 ? 20 : 10);\n}\nfunction varsHTML(v){ return (v||[]).map(x=>'<span><b>'+x[0]+'<\/b> = '+x[1]+'<\/span>').join(''); }\nfunction renderRecipe(box,lines,active){\n  box.className='';\n  box.innerHTML='';\n  const ol=document.createElement('ol'); ol.className='recipe';\n  lines.forEach((l,i)=>{ const li=document.createElement('li'); li.textContent=l; if(i===active) li.className='active'; ol.appendChild(li); });\n  box.appendChild(ol);\n}\nfunction renderCode(box,lines,active){\n  box.className='code';\n  box.innerHTML='';\n  lines.forEach((l,i)=>{ const d=document.createElement('div'); d.className='ln'+(i===active?' active':''); d.textContent=l; box.appendChild(d); });\n}\nfunction tilesHTML(kind){\n  const st = kind==='lin' ? (iL ? SL[iL-1] : null) : (iB ? SB[iB-1] : null);\n  let h='';\n  items.forEach((v,i)=>{\n    let c='tile';\n    if(v===target) c+=' tgt';\n    let mk='';\n    if(st){\n      if(kind==='lin'){\n        if(i<st.cur) c+=' chk';\n        if(i===st.cur) c+= st.found ? ' found' : ' cur';\n      } else {\n        const outside = (st.done ? !st.found : false) ? true : (i<st.lo || i>st.hi);\n        if(i===st.mid) c+= st.found ? ' found' : ' cur';\n        else if(outside) c+=' out';\n        if(!st.done){\n          const tags=[]; if(i===st.lo) tags.push('L'); if(i===st.mid) tags.push('M'); if(i===st.hi) tags.push('H');\n          if(tags.length) mk='<span class=\"mk\">'+tags.join(' ')+'<\/span>';\n        }\n      }\n    }\n    h+='<button type=\"button\" class=\"'+c+'\" data-v=\"'+v+'\" aria-label=\"'+v+'\">'+v+mk+'<\/button>';\n  });\n  return h;\n}\nfunction laneState(steps,i){\n  if(i===0) return running ? ['run','Searching'] : ['','Ready'];\n  const st=steps[i-1];\n  if(!st.done) return ['run','Searching'];\n  return st.found ? ['found','Found'] : ['miss','Not found'];\n}\nfunction render(){\n  const c=cols();\n  ['Lin','Bin'].forEach(k=>{\n    const el=$('tiles'+k);\n    el.style.gridTemplateColumns='repeat('+c+',minmax(0,1fr))';\n    el.classList.toggle('small', size>50 ? c===20 : false);\n    el.innerHTML=tilesHTML(k.toLowerCase());\n  });\n  const cl=countCmp(SL,iL), cb=countCmp(SB,iB);\n  $('cntLin').textContent=cl; $('cntBin').textContent=cb;\n  $('trkLin').style.width=(100*cl\/size)+'%';\n  $('trkBin').style.width=(100*cb\/size)+'%';\n  const pl=laneState(SL,iL), pb=laneState(SB,iB);\n  setPill('pillLin',pl,'lin'); setPill('pillBin',pb,'bin');\n  $('msgLin').textContent= iL ? SL[iL-1].msg : 'Starts at position 0 and checks each item in order.';\n  $('msgBin').textContent= iB ? SB[iB-1].msg : 'Starts in the middle and halves the search area each time.';\n  const adv=LEVEL.get()==='adv';\n  if(adv){\n    renderCode($('codeLin'),CODE_LIN, iL ? SL[iL-1].line : -1);\n    renderCode($('codeBin'),CODE_BIN, iB ? SB[iB-1].line : -1);\n  } else {\n    renderRecipe($('codeLin'),REC_LIN, iL ? SL[iL-1].r : 0);\n    renderRecipe($('codeBin'),REC_BIN, iB ? SB[iB-1].r : 0);\n  }\n  $('varsLin').innerHTML=varsHTML(iL ? SL[iL-1].vars : [['i','-'],['target',target]]);\n  $('varsBin').innerHTML=varsHTML(iB ? SB[iB-1].vars : [['low',0],['high',items.length-1],['target',target]]);\n}\nfunction setPill(id,st,kind){\n  const p=$(id);\n  p.className='pill'+(st[0]?' '+st[0]:''); p.textContent=st[1];\n}\nfunction banner(text,win){ $('bannerTxt').textContent=text; $('banner').classList.toggle('win',!!win); }\n\n\/\/ ---------- race control ----------\nfunction prepare(){\n  stop(); finished=false; firstDone=null;\n  SL=linearSteps(items,target); SB=binarySteps(items,target); iL=0; iB=0;\n  render(); setRaceUI();\n  const inList=items.includes(target);\n  banner('Target: '+target+(inList?' (it is in the list).':' (it is NOT in the list).')+' Make a prediction, then press Race!');\n}\nfunction readTarget(){\n  const v=parseInt($('tgtIn').value,10);\n  if(isNaN(v)){ pickIn(); return; }\n  target=Math.max(1,Math.min(999,v)); $('tgtIn').value=target;\n}\nfunction advance(){\n  const doneL=iL>=SL.length, doneB=iB>=SB.length;\n  if(!doneL) iL++;\n  if(!doneB) iB++;\n  if(firstDone===null){\n    const nowL=iL>=SL.length, nowB=iB>=SB.length;\n    if(both(nowL,nowB)) firstDone='tie';\n    else if(nowL) firstDone='lin';\n    else if(nowB) firstDone='bin';\n  }\n  if(both(iL>=SL.length,iB>=SB.length)){ finish(); return false; }\n  render(); return true;\n}\nfunction tick(){ if(advance()) timer=setTimeout(tick,DELAYS[$('speedIn').value-1]); }\nfunction start(){\n  if(finished) prepare();\n  if(both(iL===0,iB===0)) banner('And they\u2019re off! Each tick, both searches make one comparison.',false);\n  running=true; setRaceUI(); render(); tick();\n}\nfunction stop(){ clearTimeout(timer); running=false; setRaceUI(); }\nfunction setRaceUI(){\n  $('raceTxt').textContent= running ? 'Pause' : (finished ? 'Race again' : ((iL+iB)>0 ? 'Resume' : 'Race!'));\n  $('raceIcon').innerHTML= running ? '<path d=\"M6 4h4v16H6zM14 4h4v16h-4z\"\/>' : '<path d=\"M7 4v16l13-8z\"\/>';\n  $('stepBtn').disabled= both(running,true) ? true : finished;\n  document.querySelectorAll('[data-size], .level button').forEach(b=>{ b.disabled=running; });\n}\nfunction finish(){\n  stop(); finished=true; render(); setRaceUI();\n  const cl=countCmp(SL,SL.length), cb=countCmp(SB,SB.length);\n  const inList=items.includes(target);\n  const lFound=SL[SL.length-1].found, bFound=SB[SB.length-1].found;\n  let winner, text;\n  if(both(inList,!bFound)){\n    winner='lin';\n    text='Binary search missed '+target+', but it IS in the list! Binary search only works when the list is sorted.';\n  } else if(cl===cb){ winner='tie'; text='It\u2019s a tie! Both used '+cl+' comparisons.'; }\n  else if(cb<cl){ winner='bin'; text='Binary search wins! '+cb+' comparison'+(cb===1?'':'s')+' vs '+cl+'. That\u2019s '+(cl-cb)+' fewer.'; }\n  else {\n    winner='lin';\n    text='Linear search wins this time, '+cl+' vs '+cb+'! The target was close to the start of the list.';\n  }\n  if(predict){\n    const names={lin:'Linear wins',bin:'Binary wins',tie:'Tie'};\n    text+= predict===winner ? ' Your prediction ('+names[predict]+') was right!' : ' You predicted \"'+names[predict]+'\". Not this time!';\n  }\n  banner(text,true);\n  raceNo++;\n  logRows.unshift({n:raceNo,size:size,order:order,target:target,inList:inList,cl:cl,cb:cb,winner:winner,miss:both(inList,!bFound)});\n  if(logRows.length>10) logRows.pop();\n  renderLog();\n}\n\nfunction renderLog(){\n  if(!logRows.length){ $('logBox').innerHTML='<div class=\"empty\">No races yet. Pick a target and press Race!<\/div>'; return; }\n  const wname={lin:'Linear',bin:'Binary',tie:'Tie'};\n  let h='<table class=\"tbl\"><thead><tr><th>#<\/th><th>List<\/th><th class=\"num\">Target<\/th><th class=\"num\">Linear<\/th><th class=\"num\">Binary<\/th><th>Winner<\/th><\/tr><\/thead><tbody>';\n  logRows.forEach(r=>{\n    const sw= r.winner==='lin' ? '<span class=\"sw\" style=\"background:var(--lin)\"><\/span>' : (r.winner==='bin' ? '<span class=\"sw\" style=\"background:var(--bin)\"><\/span>' : '');\n    h+='<tr><td>'+r.n+'<\/td><td>'+r.size+' items<\/td><td class=\"num\">'+r.target+(r.inList?'':'*')+'<\/td><td class=\"num\">'+r.cl+'<\/td><td class=\"num\">'+r.cb+'<\/td><td class=\"w\">'+sw+wname[r.winner]+'<\/td><\/tr>';\n  });\n  h+='<\/tbody><\/table><p class=\"sub\" style=\"margin:10px 0 0\">* not in the list<\/p>';\n  $('logBox').innerHTML=h;\n}\n\n\/\/ ---------- experiment ----------\nconst EXP_N=[10,50,100,250,500,750,1000];\nfunction runExperiment(){\n  expData=EXP_N.map(n=>{\n    const a=[]; for(let i=1;i<=n;i++) a.push(i*2);\n    let lSum=0, bSum=0, lMax=0, bMax=0;\n    a.forEach(t=>{\n      const l=a.indexOf(t)+1, b=binaryCount(a,t);\n      lSum+=l; bSum+=b; if(l>lMax) lMax=l; if(b>bMax) bMax=b;\n    });\n    return {n:n, lin:{avg:lSum\/n, worst:lMax}, bin:{avg:bSum\/n, worst:bMax}};\n  });\n  drawChart(true); renderExpTable();\n}\nfunction binaryCount(a,t){ let lo=0,hi=a.length-1,c=0; while(lo<=hi){ const m=Math.floor((lo+hi)\/2); c++; if(a[m]===t) return c; if(a[m]<t) lo=m+1; else hi=m-1; } return c; }\nfunction fmt(v){ return Number.isInteger(v) ? String(v) : v.toFixed(1); }\n\nfunction drawChart(animate){\n  const svg=$('chart');\n  const L=54, R=600, T=16, B=272, maxY=1000;\n  const x=n=>L+(R-L)*n\/1000, y=v=>B-(B-T)*v\/maxY;\n  let s='';\n  [0,250,500,750,1000].forEach(v=>{\n    s+='<line x1=\"'+L+'\" x2=\"'+R+'\" y1=\"'+y(v)+'\" y2=\"'+y(v)+'\" class=\"'+(v===0?'base':'grid')+'\"\/>';\n    s+='<text x=\"'+(L-8)+'\" y=\"'+(y(v)+4)+'\" class=\"ax\" text-anchor=\"end\">'+v+'<\/text>';\n  });\n  [0,250,500,750,1000].forEach(n=>{ s+='<text x=\"'+x(n)+'\" y=\"'+(B+18)+'\" class=\"ax\" text-anchor=\"middle\">'+n+'<\/text>'; });\n  s+='<text x=\"'+((L+R)\/2)+'\" y=\"'+(B+40)+'\" class=\"axt\" text-anchor=\"middle\">Items in the list<\/text>';\n  s+='<text x=\"14\" y=\"'+((T+B)\/2)+'\" class=\"axt\" text-anchor=\"middle\" transform=\"rotate(-90 14 '+((T+B)\/2)+')\">Comparisons<\/text>';\n  if(!expData){\n    s+='<text x=\"'+((L+R)\/2)+'\" y=\"'+((T+B)\/2)+'\" class=\"axt\" text-anchor=\"middle\">Press \"Run the experiment\" to fill in the chart<\/text>';\n    svg.innerHTML=s; return;\n  }\n  const series=[['lin','var(--lin)','Linear'],['bin','var(--bin)','Binary']];\n  series.forEach(se=>{\n    const pts=expData.map(d=>x(d.n)+','+y(d[se[0]][measure]));\n    s+='<polyline points=\"'+pts.join(' ')+'\" class=\"ln-s'+(animate?' draw':'')+'\" style=\"stroke:'+se[1]+'\"\/>';\n  });\n  series.forEach(se=>{\n    expData.forEach((d,i)=>{\n      const cx=x(d.n), cy=y(d[se[0]][measure]);\n      s+='<circle cx=\"'+cx+'\" cy=\"'+cy+'\" r=\"4.5\" class=\"pt\" style=\"fill:'+se[1]+'\"\/>';\n      s+='<circle cx=\"'+cx+'\" cy=\"'+cy+'\" r=\"13\" class=\"hitpt\" data-i=\"'+i+'\" data-s=\"'+se[0]+'\"\/>';\n    });\n    const last=expData[expData.length-1], v=last[se[0]][measure];\n    s+='<text x=\"'+(x(last.n)+10)+'\" y=\"'+(y(v)+(se[0]==='bin'?-6:4))+'\" class=\"dlbl\" text-anchor=\"end\" dx=\"-14\" dy=\"'+(se[0]==='bin'?-6:-10)+'\">'+se[2]+': '+fmt(v)+'<\/text>';\n  });\n  svg.innerHTML=s;\n}\nfunction renderExpTable(){\n  let h='<table class=\"tbl\"><thead><tr><th class=\"num\">Items<\/th><th class=\"num\">Linear avg<\/th><th class=\"num\">Linear worst<\/th><th class=\"num\">Binary avg<\/th><th class=\"num\">Binary worst<\/th><\/tr><\/thead><tbody>';\n  expData.forEach(d=>{ h+='<tr><td class=\"num\">'+d.n+'<\/td><td class=\"num\">'+fmt(d.lin.avg)+'<\/td><td class=\"num\">'+d.lin.worst+'<\/td><td class=\"num\">'+fmt(d.bin.avg)+'<\/td><td class=\"num\">'+d.bin.worst+'<\/td><\/tr>'; });\n  $('expTable').innerHTML=h+'<\/tbody><\/table>';\n}\n$('chart').addEventListener('pointermove',e=>{\n  const hit=e.target.closest('.hitpt'), tip=$('tip');\n  if(!hit){ tip.classList.remove('show'); return; }\n  const d=expData[+hit.dataset.i], k=hit.dataset.s;\n  const box=$('chartBox').getBoundingClientRect(), r=hit.getBoundingClientRect();\n  tip.innerHTML='<b>'+(k==='lin'?'Linear':'Binary')+'<\/b> \u00b7 '+d.n+' items<br>'+(measure==='avg'?'Average: ':'Worst case: ')+fmt(d[k][measure])+' comparisons';\n  tip.style.left=(r.left+r.width\/2-box.left)+'px'; tip.style.top=(r.top-box.top)+'px';\n  tip.classList.add('show');\n});\n$('chart').addEventListener('pointerleave',()=>$('tip').classList.remove('show'));\n\n\/\/ ---------- wiring ----------\nSIZES.forEach(n=>{\n  const b=document.createElement('button'); b.type='button'; b.className='chip'; b.dataset.size=n; b.textContent=n+' items';\n  b.setAttribute('aria-pressed',n===size);\n  b.addEventListener('click',()=>{ if(running) return; size=n; document.querySelectorAll('[data-size]').forEach(x=>x.setAttribute('aria-pressed',+x.dataset.size===n)); makeItems(); pickIn(); prepare(); });\n  $('sizeChips').appendChild(b);\n});\nLEVEL.on(()=>render());\ndocument.querySelectorAll('[data-pred]').forEach(b=>b.addEventListener('click',()=>{\n  predict = predict===b.dataset.pred ? null : b.dataset.pred;\n  document.querySelectorAll('[data-pred]').forEach(x=>x.setAttribute('aria-pressed',x.dataset.pred===predict));\n}));\ndocument.querySelectorAll('[data-measure]').forEach(b=>b.addEventListener('click',()=>{\n  measure=b.dataset.measure;\n  document.querySelectorAll('[data-measure]').forEach(x=>x.setAttribute('aria-pressed',x===b));\n  drawChart(false);\n}));\n['tilesLin','tilesBin'].forEach(id=>$(id).addEventListener('click',e=>{\n  const t=e.target.closest('.tile'); if(!t) return; if(running) return;\n  target=+t.dataset.v; $('tgtIn').value=target; prepare();\n}));\n$('pickIn').addEventListener('click',()=>{ if(running) return; pickIn(); prepare(); });\n$('pickOut').addEventListener('click',()=>{ if(running) return; pickOut(); prepare(); });\n$('tgtIn').addEventListener('change',()=>{ if(running) return; readTarget(); prepare(); });\n$('tgtIn').addEventListener('keydown',e=>{ if(e.key==='Enter'){ e.preventDefault(); if(running) return; readTarget(); prepare(); start(); } });\n$('raceBtn').addEventListener('click',()=>{ if(running) stop(); else start(); });\n$('stepBtn').addEventListener('click',()=>{ if(running) return; if(finished) return; if(both(iL===0,iB===0)) banner('Stepping: each click makes one comparison in each lane.'); advance(); setRaceUI(); });\n$('resetBtn').addEventListener('click',()=>prepare());\n$('expBtn').addEventListener('click',()=>{ runExperiment(); $('expBtn').textContent='Run it again'; });\n$('speedIn').addEventListener('input',e=>{ $('speedVal').textContent=e.target.value; });\nlet rz=null; window.addEventListener('resize',()=>{ clearTimeout(rz); rz=setTimeout(render,120); });\n\nmakeItems(); pickIn(); prepare(); renderLog(); drawChart(false);\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Search Race Interactive CS Tools Search Race Linear search checks every item. Binary search keeps cutting the list in half. Pick a target, make your &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/www.codemonkey.com\/es\/interactive-cs-tools\/search-race\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Search Race&#8221;<\/span><\/a><\/p>","protected":false},"author":55,"featured_media":0,"parent":31237,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-31159","page","type-page","status-publish","hentry"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO Pro 5.0.4 - aioseo.com -->\n\t<meta name=\"description\" content=\"Search Race Interactive CS Tools Search Race Linear search checks every item. Binary search keeps cutting the list in half. Pick a target, make your prediction and watch them race! List size Speed: 3 LevelEasyAdvanced Target (or click a number) In the list Not in the list Your prediction Linear wins Binary wins Tie Step\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.codemonkey.com\/es\/interactive-cs-tools\/search-race\/\" \/>\n\t\t<meta name=\"generator\" content=\"All in One SEO Pro (AIOSEO) 5.0.4\" \/>\n\t\t<meta property=\"og:locale\" content=\"es_ES\" \/>\n\t\t<meta property=\"og:site_name\" content=\"CodeMonkey -\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"Search Race - CodeMonkey\" \/>\n\t\t<meta property=\"og:description\" content=\"Search Race Interactive CS Tools Search Race Linear search checks every item. Binary search keeps cutting the list in half. Pick a target, make your prediction and watch them race! List size Speed: 3 LevelEasyAdvanced Target (or click a number) In the list Not in the list Your prediction Linear wins Binary wins Tie Step\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/www.codemonkey.com\/es\/interactive-cs-tools\/search-race\/\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/d3sujgifhk94se.cloudfront.net\/wp-content\/uploads\/2020\/06\/21143425\/codemonkey_logo.png\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/d3sujgifhk94se.cloudfront.net\/wp-content\/uploads\/2020\/06\/21143425\/codemonkey_logo.png\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2026-10-14T08:46:05+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2026-10-29T16:51:44+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Search Race - CodeMonkey\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Search Race Interactive CS Tools Search Race Linear search checks every item. Binary search keeps cutting the list in half. Pick a target, make your prediction and watch them race! List size Speed: 3 LevelEasyAdvanced Target (or click a number) In the list Not in the list Your prediction Linear wins Binary wins Tie Step\" \/>\n\t\t<meta name=\"twitter:image\" content=\"https:\/\/d3sujgifhk94se.cloudfront.net\/wp-content\/uploads\/2020\/06\/21143425\/codemonkey_logo.png\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codemonkey.com\\\/es\\\/interactive-cs-tools\\\/search-race\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.codemonkey.com\\\/es\\\/#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codemonkey.com\\\/es\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.codemonkey.com\\\/es\\\/interactive-cs-tools\\\/#listItem\",\"name\":\"Free Teacher Tools for Computer Science\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.codemonkey.com\\\/es\\\/interactive-cs-tools\\\/#listItem\",\"position\":2,\"name\":\"Free Teacher Tools for Computer Science\",\"item\":\"https:\\\/\\\/www.codemonkey.com\\\/es\\\/interactive-cs-tools\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.codemonkey.com\\\/es\\\/interactive-cs-tools\\\/search-race\\\/#listItem\",\"name\":\"Search Race\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.codemonkey.com\\\/es\\\/#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.codemonkey.com\\\/es\\\/interactive-cs-tools\\\/search-race\\\/#listItem\",\"position\":3,\"name\":\"Search Race\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.codemonkey.com\\\/es\\\/interactive-cs-tools\\\/#listItem\",\"name\":\"Free Teacher Tools for Computer Science\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codemonkey.com\\\/es\\\/#organization\",\"name\":\"CodeMonkey\",\"url\":\"https:\\\/\\\/www.codemonkey.com\\\/es\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/d3sujgifhk94se.cloudfront.net\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/21143425\\\/codemonkey_logo.png\",\"@id\":\"https:\\\/\\\/www.codemonkey.com\\\/es\\\/interactive-cs-tools\\\/search-race\\\/#organizationLogo\",\"width\":200,\"height\":31,\"caption\":\"Codemonkey Coding for Kids\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codemonkey.com\\\/es\\\/interactive-cs-tools\\\/search-race\\\/#organizationLogo\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codemonkey.com\\\/es\\\/interactive-cs-tools\\\/search-race\\\/#webpage\",\"url\":\"https:\\\/\\\/www.codemonkey.com\\\/es\\\/interactive-cs-tools\\\/search-race\\\/\",\"name\":\"Search Race - CodeMonkey\",\"description\":\"Search Race Interactive CS Tools Search Race Linear search checks every item. Binary search keeps cutting the list in half. Pick a target, make your prediction and watch them race! List size Speed: 3 LevelEasyAdvanced Target (or click a number) In the list Not in the list Your prediction Linear wins Binary wins Tie Step\",\"inLanguage\":\"es-ES\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codemonkey.com\\\/es\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codemonkey.com\\\/es\\\/interactive-cs-tools\\\/search-race\\\/#breadcrumblist\"},\"datePublished\":\"2026-10-14T08:46:05+00:00\",\"dateModified\":\"2026-10-29T16:51:44+00:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codemonkey.com\\\/es\\\/#website\",\"url\":\"https:\\\/\\\/www.codemonkey.com\\\/es\\\/\",\"name\":\"CodeMonkey\",\"inLanguage\":\"es-ES\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codemonkey.com\\\/es\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO Pro -->\r\n\t\t<title>Search Race - CodeMonkey<\/title>\n\n","aioseo_head_json":{"title":"Search Race - CodeMonkey","description":"Search Race Interactive CS Tools Search Race Linear search checks every item. Binary search keeps cutting the list in half. Pick a target, make your prediction and watch them race! List size Speed: 3 LevelEasyAdvanced Target (or click a number) In the list Not in the list Your prediction Linear wins Binary wins Tie Step","canonical_url":"https:\/\/www.codemonkey.com\/es\/interactive-cs-tools\/search-race\/","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"BreadcrumbList","@id":"https:\/\/www.codemonkey.com\/es\/interactive-cs-tools\/search-race\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.codemonkey.com\/es\/#listItem","position":1,"name":"Home","item":"https:\/\/www.codemonkey.com\/es\/","nextItem":{"@type":"ListItem","@id":"https:\/\/www.codemonkey.com\/es\/interactive-cs-tools\/#listItem","name":"Free Teacher Tools for Computer Science"}},{"@type":"ListItem","@id":"https:\/\/www.codemonkey.com\/es\/interactive-cs-tools\/#listItem","position":2,"name":"Free Teacher Tools for Computer Science","item":"https:\/\/www.codemonkey.com\/es\/interactive-cs-tools\/","nextItem":{"@type":"ListItem","@id":"https:\/\/www.codemonkey.com\/es\/interactive-cs-tools\/search-race\/#listItem","name":"Search Race"},"previousItem":{"@type":"ListItem","@id":"https:\/\/www.codemonkey.com\/es\/#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/www.codemonkey.com\/es\/interactive-cs-tools\/search-race\/#listItem","position":3,"name":"Search Race","previousItem":{"@type":"ListItem","@id":"https:\/\/www.codemonkey.com\/es\/interactive-cs-tools\/#listItem","name":"Free Teacher Tools for Computer Science"}}]},{"@type":"Organization","@id":"https:\/\/www.codemonkey.com\/es\/#organization","name":"CodeMonkey","url":"https:\/\/www.codemonkey.com\/es\/","logo":{"@type":"ImageObject","url":"https:\/\/d3sujgifhk94se.cloudfront.net\/wp-content\/uploads\/2020\/06\/21143425\/codemonkey_logo.png","@id":"https:\/\/www.codemonkey.com\/es\/interactive-cs-tools\/search-race\/#organizationLogo","width":200,"height":31,"caption":"Codemonkey Coding for Kids"},"image":{"@id":"https:\/\/www.codemonkey.com\/es\/interactive-cs-tools\/search-race\/#organizationLogo"}},{"@type":"WebPage","@id":"https:\/\/www.codemonkey.com\/es\/interactive-cs-tools\/search-race\/#webpage","url":"https:\/\/www.codemonkey.com\/es\/interactive-cs-tools\/search-race\/","name":"Search Race - CodeMonkey","description":"Search Race Interactive CS Tools Search Race Linear search checks every item. Binary search keeps cutting the list in half. Pick a target, make your prediction and watch them race! List size Speed: 3 LevelEasyAdvanced Target (or click a number) In the list Not in the list Your prediction Linear wins Binary wins Tie Step","inLanguage":"es-ES","isPartOf":{"@id":"https:\/\/www.codemonkey.com\/es\/#website"},"breadcrumb":{"@id":"https:\/\/www.codemonkey.com\/es\/interactive-cs-tools\/search-race\/#breadcrumblist"},"datePublished":"2026-10-14T08:46:05+00:00","dateModified":"2026-10-29T16:51:44+00:00"},{"@type":"WebSite","@id":"https:\/\/www.codemonkey.com\/es\/#website","url":"https:\/\/www.codemonkey.com\/es\/","name":"CodeMonkey","inLanguage":"es-ES","publisher":{"@id":"https:\/\/www.codemonkey.com\/es\/#organization"}}]},"og:locale":"es_ES","og:site_name":"CodeMonkey -","og:type":"article","og:title":"Search Race - CodeMonkey","og:description":"Search Race Interactive CS Tools Search Race Linear search checks every item. Binary search keeps cutting the list in half. Pick a target, make your prediction and watch them race! List size Speed: 3 LevelEasyAdvanced Target (or click a number) In the list Not in the list Your prediction Linear wins Binary wins Tie Step","og:url":"https:\/\/www.codemonkey.com\/es\/interactive-cs-tools\/search-race\/","og:image":"https:\/\/d3sujgifhk94se.cloudfront.net\/wp-content\/uploads\/2020\/06\/21143425\/codemonkey_logo.png","og:image:secure_url":"https:\/\/d3sujgifhk94se.cloudfront.net\/wp-content\/uploads\/2020\/06\/21143425\/codemonkey_logo.png","article:published_time":"2026-10-14T08:46:05+00:00","article:modified_time":"2026-10-29T16:51:44+00:00","twitter:card":"summary_large_image","twitter:title":"Search Race - CodeMonkey","twitter:description":"Search Race Interactive CS Tools Search Race Linear search checks every item. Binary search keeps cutting the list in half. Pick a target, make your prediction and watch them race! List size Speed: 3 LevelEasyAdvanced Target (or click a number) In the list Not in the list Your prediction Linear wins Binary wins Tie Step","twitter:image":"https:\/\/d3sujgifhk94se.cloudfront.net\/wp-content\/uploads\/2020\/06\/21143425\/codemonkey_logo.png"},"aioseo_meta_data":{"post_id":"31159","title":null,"description":null,"keywords":null,"keyphrases":{"focus":{"keyphrase":"","score":0,"analysis":{"keyphraseInTitle":{"score":0,"maxScore":9,"error":1}}},"additional":[]},"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"WebPage","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":null,"frequency":"default","local_seo":null,"limit_modified_date":false,"open_ai":null,"created":"2026-10-14 08:30:29","updated":"2026-10-29 16:52:34","focus_keyword":null,"additional_keywords":null,"truseo_locale":null,"ai":{"faqs":[],"keyPoints":[],"schemas":[],"titles":[],"descriptions":[],"socialPosts":{"email":{"subject":"","preview":"","content":""},"linkedin":[],"twitter":[],"facebook":[],"instagram":[]}},"breadcrumb_settings":null,"seo_analyzer_scan_date":"2026-10-29 16:52:34"},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t<a href=\"https:\/\/www.codemonkey.com\/es\/\" title=\"Home\">Home<\/a>\n<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\t<a href=\"https:\/\/www.codemonkey.com\/es\/interactive-cs-tools\/\" title=\"Free Teacher Tools for Computer Science\">Free Teacher Tools for Computer Science<\/a>\n<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\tSearch Race\n<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/www.codemonkey.com\/es\/"},{"label":"Free Teacher Tools for Computer Science","link":"https:\/\/www.codemonkey.com\/es\/interactive-cs-tools\/"},{"label":"Search Race","link":"https:\/\/www.codemonkey.com\/es\/interactive-cs-tools\/search-race\/"}],"_links":{"self":[{"href":"https:\/\/www.codemonkey.com\/es\/wp-json\/wp\/v2\/pages\/31159","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codemonkey.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.codemonkey.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.codemonkey.com\/es\/wp-json\/wp\/v2\/users\/55"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codemonkey.com\/es\/wp-json\/wp\/v2\/comments?post=31159"}],"version-history":[{"count":2,"href":"https:\/\/www.codemonkey.com\/es\/wp-json\/wp\/v2\/pages\/31159\/revisions"}],"predecessor-version":[{"id":31228,"href":"https:\/\/www.codemonkey.com\/es\/wp-json\/wp\/v2\/pages\/31159\/revisions\/31228"}],"up":[{"embeddable":true,"href":"https:\/\/www.codemonkey.com\/es\/wp-json\/wp\/v2\/pages\/31237"}],"wp:attachment":[{"href":"https:\/\/www.codemonkey.com\/es\/wp-json\/wp\/v2\/media?parent=31159"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}