Free Teacher Tools for Computer Science | CodeMonkey<\/title>\n<meta name=\"description\" content=\"Free interactive computer science tools for teachers: a sorting algorithm visualizer, logic gate simulator, data structure playground and linear vs binary search race. No sign-up.\">\n<link rel=\"canonical\" href=\"https:\/\/www.codemonkey.com\/interactive-cs-tools\/\">\n<meta property=\"og:type\" content=\"website\">\n<meta property=\"og:title\" content=\"Free Teacher Tools for Computer Science\">\n<meta property=\"og:description\" content=\"Four free, interactive CS tools that make algorithms, logic gates and data structures visible. No sign-up, no downloads.\">\n<meta property=\"og:url\" content=\"https:\/\/www.codemonkey.com\/interactive-cs-tools\/\">\n<meta property=\"og:site_name\" content=\"CodeMonkey\">\n<meta name=\"twitter:card\" content=\"summary_large_image\">\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 }\n *{box-sizing:border-box}\n html{scroll-behavior:smooth}\n body{margin:0;font-family:'Poppins',system-ui,sans-serif;color:var(--brown-dark);background:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased}\n h1,h2,h3{font-family:'Poppins',sans-serif;margin:0;line-height:1.15}\n a{color:inherit}\n\n \/* ---------- Hero ---------- *\/\n .hero{position:relative;overflow:hidden;color:var(--white);text-align:center;padding:56px 16px 120px}\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(32px,5.6vw,58px);color:var(--yellow);max-width:820px;margin:0 auto}\n .hero p{position:relative;max-width:640px;margin:16px auto 0;font-size:17px;opacity:.95}\n .hero .ctas{position:relative;display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px}\n .wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:60px;display:block}\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 @media (max-width:640px){.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 75% 46% at 50% 52%,#4B571A 62%,rgba(75,87,26,0) 100%);pointer-events:none}}\n .eyebrow{text-decoration:none;color:var(--white);transition:background .15s}\n .eyebrow:hover{background:rgba(255,255,255,.24)}\n\n @media (min-width:1181px){.hero .bb.l{top:120px}}\n\n .btn{font:700 15px 'Poppins',sans-serif;text-decoration:none;border:none;border-radius:999px;padding:13px 26px;cursor:pointer;background:var(--yellow);color:var(--brown-dark);box-shadow:0 4px 0 var(--tan);display:inline-flex;align-items:center;gap:8px;transition:transform .08s,box-shadow .08s}\n .btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--tan)}\n .btn.ghost{background:transparent;color:var(--white);border:2px solid rgba(255,255,255,.55);box-shadow:none;padding:11px 24px}\n .btn.ghost:hover{border-color:var(--white)}\n .btn.dark{background:var(--brown-dark);color:var(--yellow);box-shadow:0 4px 0 #1d130f}\n .btn:focus-visible,a:focus-visible{outline:3px solid var(--purple);outline-offset:3px}\n .btn svg{width:18px;height:18px;fill:currentColor}\n\n \/* ---------- Layout ---------- *\/\n .wrap{max-width:1160px;margin:0 auto;padding:0 16px}\n .perks{position:relative;margin:-70px auto 0;max-width:1060px;background:var(--white);border-radius:24px;box-shadow:0 12px 34px rgba(57,38,31,.13);padding:20px 24px;display:grid;grid-template-columns:repeat(5,1fr);gap:12px}\n @media (max-width:900px){.perks{grid-template-columns:repeat(2,1fr)}}\n @media (max-width:480px){.perks{grid-template-columns:1fr}}\n .perk{display:flex;gap:10px;align-items:center;font-weight:600;font-size:14px;line-height:1.3}\n .perk i{flex:none;width:34px;height:34px;border-radius:50%;background:var(--yellow-tint);display:flex;align-items:center;justify-content:center}\n .perk i svg{width:18px;height:18px;fill:var(--brown)}\n section{padding:64px 0 0}\n .sec-head{text-align:center;max-width:760px;margin:0 auto 30px}\n .sec-head h2{font-weight:800;font-size:clamp(26px,3.6vw,38px);text-transform:uppercase}\n .sec-head h2 em{font-style:normal;color:var(--tan)}\n .sec-head p{color:var(--gray);font-size:16px;margin:12px 0 0}\n\n \/* ---------- Tool cards ---------- *\/\n .tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}\n @media (max-width:820px){.tools{grid-template-columns:1fr}}\n .tool{background:var(--white);border-radius:24px;box-shadow:0 10px 30px rgba(57,38,31,.12);overflow:hidden;display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s}\n .tool:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(57,38,31,.16)}\n .thumb{background:var(--tint);height:180px;display:flex;align-items:center;justify-content:center;position:relative}\n .thumb svg{width:86%;max-width:380px;height:150px}\n .thumb .unused{position:absolute;top:14px;left:14px;background:var(--brown-dark);color:var(--yellow);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:4px 12px}\n .tool-body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}\n .tool h3{font-size:22px;font-weight:800;text-transform:uppercase}\n .tool .kw{font-size:13px;font-weight:600;color:var(--tan);margin:4px 0 10px}\n .tool p{margin:0 0 12px;font-size:15px}\n .tool ul{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:6px}\n .tool li{padding-left:24px;position:relative;font-size:14px;font-weight:500}\n .tool li::before{content:\"\";position:absolute;left:0;top:6px;width:12px;height:12px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 3px var(--yellow-tint)}\n .tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px}\n .tags span{font-size:12px;font-weight:600;border:2px solid var(--sky);border-radius:999px;padding:2px 10px}\n .tool .btn{margin-top:auto;align-self:flex-start}\n\n \/* ---------- Levels ---------- *\/\n .levels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}\n @media (max-width:820px){.levels{grid-template-columns:1fr}}\n .lv{border-radius:24px;padding:26px;background:var(--tint)}\n .lv.adv{background:var(--brown-dark);color:var(--white)}\n .lv h3{font-size:24px;font-weight:800;text-transform:uppercase;display:flex;align-items:center;gap:12px}\n .lv h3 span{font-size:12px;font-weight:700;letter-spacing:.06em;border-radius:999px;padding:4px 12px;background:var(--yellow);color:var(--brown-dark)}\n .lv ul{margin:14px 0 0;padding-left:20px}\n .lv li{margin-bottom:6px}\n \/* explicit heading colors, so the website theme cannot override them *\/\n .lv h3,.lv li,.lv p{color:var(--brown-dark)}\n .lv.adv h3{color:var(--yellow)}\n .lv.adv li,.lv.adv p{color:var(--white)}\n .sec-head h2,.tool h3,.use h3,.faq summary,.perk{color:var(--brown-dark)}\n .about h2{color:var(--yellow)}\n .about p{color:var(--white)}\n .lv code{font-family:'JetBrains Mono',monospace;font-size:13px;background:rgba(255,198,47,.2);color:var(--yellow);border-radius:6px;padding:1px 6px}\n .note{margin-top:18px;background:var(--yellow-tint);border-left:6px solid var(--yellow);border-radius:16px;padding:14px 18px;font-size:15px}\n .note code{font-family:'JetBrains Mono',monospace;font-size:13px;background:var(--white);border-radius:6px;padding:1px 6px}\n\n \/* ---------- Classroom ---------- *\/\n .uses{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}\n @media (max-width:980px){.uses{grid-template-columns:repeat(2,minmax(0,1fr))}}\n @media (max-width:520px){.uses{grid-template-columns:1fr}}\n .use{background:var(--white);border-radius:20px;box-shadow:0 8px 24px rgba(57,38,31,.10);padding:22px}\n .use b{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--yellow);font-size:18px;font-weight:800;margin-bottom:12px}\n .use h3{font-size:17px;font-weight:800;margin-bottom:6px}\n .use p{margin:0;font-size:14.5px}\n\n \/* ---------- Table ---------- *\/\n .tablewrap{overflow-x:auto;border-radius:20px;box-shadow:0 8px 24px rgba(57,38,31,.10)}\n table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:680px;background:var(--white)}\n th{background:var(--brown-dark);color:var(--white);text-align:left;padding:14px 16px;font-size:13px;letter-spacing:.04em;text-transform:uppercase}\n th:first-child{color:var(--yellow)}\n td{padding:14px 16px;border-bottom:1px solid var(--tint);vertical-align:top}\n tr:last-child td{border-bottom:none}\n td:first-child{font-weight:700;white-space:nowrap}\n td a{font-weight:700}\n .small{font-size:13px;color:var(--gray);margin-top:10px;text-align:center}\n\n \/* ---------- About + FAQ ---------- *\/\n .about{background:var(--green);color:var(--white);border-radius:28px;padding:40px;display:grid;grid-template-columns:1.4fr 1fr;gap:30px;align-items:center;position:relative;overflow:hidden}\n @media (max-width:820px){.about{grid-template-columns:1fr;padding:28px}}\n .about h2{font-weight:800;font-size:clamp(24px,3vw,32px);text-transform:uppercase;color:var(--yellow)}\n .about p{margin:12px 0 0;opacity:.95}\n .about .ctas{display:flex;flex-direction:column;align-items:flex-start;gap:14px}\n .about .ctas .btn{width:100%;max-width:340px;justify-content:center}\n .about .textlink{color:var(--white);font-weight:600;font-size:14px;text-decoration:underline;text-underline-offset:3px;max-width:340px;width:100%;text-align:center}\n .about .textlink:hover{color:var(--yellow)}\n .faq{max-width:860px;margin:0 auto}\n details{background:var(--white);border-radius:18px;box-shadow:0 6px 20px rgba(57,38,31,.09);margin-bottom:12px;padding:0 22px}\n summary{cursor:pointer;list-style:none;font-weight:700;font-size:16px;padding:18px 36px 18px 0;position:relative}\n summary::-webkit-details-marker{display:none}\n summary::after{content:\"+\";position:absolute;right:0;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;background:var(--yellow);display:flex;align-items:center;justify-content:center;font-weight:800}\n details[open] summary::after{content:\"\\2212\"}\n details p{margin:0 0 18px;font-size:15px}\n footer{text-align:center;font-size:13px;color:var(--gray);padding:56px 16px 40px}\n<\/style>\n<\/head>\n<body>\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 <span class=\"eyebrow\">Interactive CS Tools<\/span>\n <h1>Free Teacher Tools for Computer Science<\/h1>\n <p>Four free, interactive tools that make algorithms, logic gates and data structures visible. No sign-up, no downloads. Open one and start teaching.<\/p>\n <div class=\"ctas\">\n <a class=\"btn\" href=\"#tools\">Explore the tools<\/a>\n <a class=\"btn ghost\" href=\"#classroom\">Ways to use them in class<\/a>\n <\/div>\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<div class=\"wrap\">\n <div class=\"perks\" role=\"list\">\n <div class=\"perk\" role=\"listitem\"><i><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 2l2.9 6.6 7.1.6-5.4 4.7 1.6 7L12 17.3 5.8 21l1.6-7L2 9.2l7.1-.6z\"\/><\/svg><\/i>100% free for teachers and students<\/div>\n <div class=\"perk\" role=\"listitem\"><i><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-4 0-8 2-8 5v2h16v-2c0-3-4-5-8-5z\"\/><\/svg><\/i>No accounts or logins<\/div>\n <div class=\"perk\" role=\"listitem\"><i><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M4 5h16v10H4zm-2 12h20v2H2z\"\/><\/svg><\/i>Works on Chromebooks, iPads and laptops<\/div>\n <div class=\"perk\" role=\"listitem\"><i><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M4 18h4V10H4zm6 0h4V6h-4zm6 0h4V2h-4z\"\/><\/svg><\/i>Easy and Advanced levels<\/div>\n <div class=\"perk\" role=\"listitem\"><i><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M8 6 2 12l6 6 1.4-1.4L4.8 12l4.6-4.6zm8 0-1.4 1.4 4.6 4.6-4.6 4.6L16 18l6-6z\"\/><\/svg><\/i>Real Python code in Advanced<\/div>\n <\/div>\n<\/div>\n\n<main class=\"wrap\">\n <section id=\"tools\" aria-labelledby=\"tools-h\">\n <div class=\"sec-head\">\n <h2 id=\"tools-h\">Interactive <em>computer science<\/em> tools<\/h2>\n <p>Each tool runs in the browser and shows every step, so students can see how computers sort, decide, store and search. Project them for the whole class, or let students explore on their own.<\/p>\n <\/div>\n\n <div class=\"tools\">\n <article class=\"tool\">\n <div class=\"thumb\">\n <svg viewBox=\"0 0 380 150\" role=\"img\" aria-label=\"Bars being sorted\">\n <rect x=\"10\" y=\"140\" width=\"360\" height=\"4\" rx=\"2\" fill=\"#39261F\"\/>\n <rect x=\"20\" y=\"95\" width=\"32\" height=\"45\" rx=\"5\" fill=\"#79ABCB\"\/><rect x=\"62\" y=\"60\" width=\"32\" height=\"80\" rx=\"5\" fill=\"#79ABCB\"\/>\n <rect x=\"104\" y=\"30\" width=\"32\" height=\"110\" rx=\"5\" fill=\"#FFC62F\"\/><rect x=\"146\" y=\"75\" width=\"32\" height=\"65\" rx=\"5\" fill=\"#FFC62F\"\/>\n <rect x=\"188\" y=\"105\" width=\"32\" height=\"35\" rx=\"5\" fill=\"#79ABCB\"\/><rect x=\"230\" y=\"50\" width=\"32\" height=\"90\" rx=\"5\" fill=\"#79ABCB\"\/>\n <rect x=\"272\" y=\"22\" width=\"32\" height=\"118\" rx=\"5\" fill=\"#9BB33F\"\/><rect x=\"314\" y=\"10\" width=\"32\" height=\"130\" rx=\"5\" fill=\"#9BB33F\"\/>\n <path d=\"M120 22 C130 4 152 4 162 64\" fill=\"none\" stroke=\"#C64F61\" stroke-width=\"3\" stroke-linecap=\"round\"\/><path d=\"M156 56 l6 9 6 -9\" fill=\"none\" stroke=\"#C64F61\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg>\n <\/div>\n <div class=\"tool-body\">\n <h3>Sorting Visualizer<\/h3>\n <div class=\"kw\">A sorting algorithm visualizer for the classroom<\/div>\n <p>Watch Bubble Sort, Selection Sort, Insertion Sort, Merge Sort and Quick Sort put a list in order, one step at a time. Students pause, rewind and count every comparison and swap.<\/p>\n <ul>\n <li>Live variables (i, j, pivot) shown under the bars<\/li>\n <li>A plain-English plan in Easy, Python code in Advanced<\/li>\n <li>Compare algorithms on random, reversed or nearly sorted data<\/li>\n <\/ul>\n <div class=\"tags\"><span>Algorithms<\/span><span>Efficiency<\/span><span>Big-O<\/span><\/div>\n <a class=\"btn dark\" href=\"https:\/\/www.codemonkey.com\/interactive-cs-tools\/sorting-algorithms\/\">Open the Sorting Visualizer<\/a>\n <\/div>\n <\/article>\n\n <article class=\"tool\">\n <div class=\"thumb\">\n <svg viewBox=\"0 0 380 150\" role=\"img\" aria-label=\"An AND gate connected to two switches and a lamp\">\n <rect x=\"20\" y=\"28\" width=\"46\" height=\"36\" rx=\"10\" fill=\"#FFC62F\" stroke=\"#39261F\" stroke-width=\"3\"\/><text x=\"43\" y=\"53\" text-anchor=\"middle\" font-family=\"Poppins,sans-serif\" font-weight=\"800\" font-size=\"18\" fill=\"#39261F\">1<\/text>\n <rect x=\"20\" y=\"88\" width=\"46\" height=\"36\" rx=\"10\" fill=\"#FFC62F\" stroke=\"#39261F\" stroke-width=\"3\"\/><text x=\"43\" y=\"113\" text-anchor=\"middle\" font-family=\"Poppins,sans-serif\" font-weight=\"800\" font-size=\"18\" fill=\"#39261F\">1<\/text>\n <path d=\"M66 46 C110 46 110 62 150 62\" fill=\"none\" stroke=\"#BF8653\" stroke-width=\"8\" stroke-linecap=\"round\"\/><path d=\"M66 46 C110 46 110 62 150 62\" fill=\"none\" stroke=\"#FFC62F\" stroke-width=\"4\" stroke-linecap=\"round\"\/>\n <path d=\"M66 106 C110 106 110 90 150 90\" fill=\"none\" stroke=\"#BF8653\" stroke-width=\"8\" stroke-linecap=\"round\"\/><path d=\"M66 106 C110 106 110 90 150 90\" fill=\"none\" stroke=\"#FFC62F\" stroke-width=\"4\" stroke-linecap=\"round\"\/>\n <path d=\"M150 46 H190 A30 30 0 0 1 190 106 H150 Z\" fill=\"#fff\" stroke=\"#39261F\" stroke-width=\"3.5\" stroke-linejoin=\"round\"\/>\n <text x=\"180\" y=\"81\" text-anchor=\"middle\" font-family=\"Poppins,sans-serif\" font-weight=\"800\" font-size=\"13\" fill=\"#54595F\">AND<\/text>\n <path d=\"M220 76 H300\" fill=\"none\" stroke=\"#BF8653\" stroke-width=\"8\" stroke-linecap=\"round\"\/><path d=\"M220 76 H300\" fill=\"none\" stroke=\"#FFC62F\" stroke-width=\"4\" stroke-linecap=\"round\"\/>\n <circle cx=\"326\" cy=\"76\" r=\"34\" fill=\"#FFC62F\" opacity=\".35\"\/><circle cx=\"326\" cy=\"76\" r=\"22\" fill=\"#FFC62F\" stroke=\"#39261F\" stroke-width=\"3\"\/>\n <\/svg>\n <\/div>\n <div class=\"tool-body\">\n <h3>Logic Gate Simulator<\/h3>\n <div class=\"kw\">A free online logic gate simulator with truth tables<\/div>\n <p>Drag AND, OR, NOT and XOR gates onto the board, wire them to switches and lamps, and watch the truth table fill in as students build. Load a half adder, full adder or multiplexer to explore.<\/p>\n <ul>\n <li>Truth table and Boolean expression update live<\/li>\n <li>Challenges such as “build OR from NAND gates” and “majority vote”<\/li>\n <li>All 7 gates and Boolean algebra notation in Advanced<\/li>\n <\/ul>\n <div class=\"tags\"><span>Boolean logic<\/span><span>Binary<\/span><span>Circuits<\/span><\/div>\n <a class=\"btn dark\" href=\"https:\/\/www.codemonkey.com\/interactive-cs-tools\/logic-gate-simulator\/\">Open the Logic Gate Simulator<\/a>\n <\/div>\n <\/article>\n\n <article class=\"tool\">\n <div class=\"thumb\">\n <svg viewBox=\"0 0 380 150\" role=\"img\" aria-label=\"A stack of boxes and a binary search tree\">\n <rect x=\"30\" y=\"100\" width=\"90\" height=\"28\" rx=\"8\" fill=\"#B0D1E5\"\/><rect x=\"30\" y=\"68\" width=\"90\" height=\"28\" rx=\"8\" fill=\"#B0D1E5\"\/><rect x=\"30\" y=\"36\" width=\"90\" height=\"28\" rx=\"8\" fill=\"#FFC62F\"\/>\n <rect x=\"20\" y=\"134\" width=\"110\" height=\"6\" rx=\"3\" fill=\"#39261F\"\/>\n <text x=\"75\" y=\"56\" text-anchor=\"middle\" font-family=\"Poppins,sans-serif\" font-weight=\"800\" font-size=\"14\" fill=\"#39261F\">TOP<\/text>\n <g stroke=\"#39261F\" stroke-width=\"3\"><line x1=\"260\" y1=\"30\" x2=\"210\" y2=\"80\"\/><line x1=\"260\" y1=\"30\" x2=\"310\" y2=\"80\"\/><line x1=\"210\" y1=\"80\" x2=\"185\" y2=\"126\"\/><line x1=\"210\" y1=\"80\" x2=\"235\" y2=\"126\"\/><line x1=\"310\" y1=\"80\" x2=\"335\" y2=\"126\"\/><\/g>\n <g font-family=\"Poppins,sans-serif\" font-weight=\"800\" font-size=\"13\" text-anchor=\"middle\">\n <circle cx=\"260\" cy=\"30\" r=\"18\" fill=\"#FFC62F\" stroke=\"#39261F\" stroke-width=\"3\"\/><text x=\"260\" y=\"35\" fill=\"#39261F\">50<\/text>\n <circle cx=\"210\" cy=\"80\" r=\"18\" fill=\"#fff\" stroke=\"#39261F\" stroke-width=\"3\"\/><text x=\"210\" y=\"85\" fill=\"#39261F\">30<\/text>\n <circle cx=\"310\" cy=\"80\" r=\"18\" fill=\"#fff\" stroke=\"#39261F\" stroke-width=\"3\"\/><text x=\"310\" y=\"85\" fill=\"#39261F\">70<\/text>\n <circle cx=\"185\" cy=\"126\" r=\"16\" fill=\"#fff\" stroke=\"#39261F\" stroke-width=\"3\"\/><text x=\"185\" y=\"131\" fill=\"#39261F\">20<\/text>\n <circle cx=\"235\" cy=\"126\" r=\"16\" fill=\"#9BB33F\" stroke=\"#39261F\" stroke-width=\"3\"\/><text x=\"235\" y=\"131\" fill=\"#fff\">40<\/text>\n <circle cx=\"335\" cy=\"126\" r=\"16\" fill=\"#fff\" stroke=\"#39261F\" stroke-width=\"3\"\/><text x=\"335\" y=\"131\" fill=\"#39261F\">80<\/text>\n <\/g>\n <\/svg>\n <\/div>\n <div class=\"tool-body\">\n <h3>Data Structure Playground<\/h3>\n <div class=\"kw\">Data structures visualization: stacks, queues, linked lists and trees<\/div>\n <p>Push and pop a stack, enqueue and dequeue a queue, follow pointers through a linked list, and insert, search and delete in a binary search tree, with animations at every step.<\/p>\n <ul>\n <li>Step counter that makes Big-O easy to see<\/li>\n <li>In-order, pre-order and post-order traversals<\/li>\n <li>Python code for every operation in Advanced<\/li>\n <\/ul>\n <div class=\"tags\"><span>Data structures<\/span><span>Pointers<\/span><span>Trees<\/span><\/div>\n <a class=\"btn dark\" href=\"https:\/\/www.codemonkey.com\/interactive-cs-tools\/data-structures\/\">Open the Data Structure Playground<\/a>\n <\/div>\n <\/article>\n\n <article class=\"tool\">\n <div class=\"thumb\">\n <svg viewBox=\"0 0 380 150\" role=\"img\" aria-label=\"Linear search and binary search racing on a row of numbers\">\n <rect x=\"10\" y=\"18\" width=\"6\" height=\"50\" rx=\"3\" fill=\"#C64F61\"\/><rect x=\"10\" y=\"84\" width=\"6\" height=\"50\" rx=\"3\" fill=\"#9BB33F\"\/>\n <g font-family=\"Poppins,sans-serif\" font-weight=\"700\" font-size=\"12\" text-anchor=\"middle\">\n <rect x=\"28\" y=\"28\" width=\"38\" height=\"30\" rx=\"7\" fill=\"#B0D1E5\" opacity=\".6\"\/><text x=\"47\" y=\"48\" fill=\"#39261F\">3<\/text>\n <rect x=\"72\" y=\"28\" width=\"38\" height=\"30\" rx=\"7\" fill=\"#B0D1E5\" opacity=\".6\"\/><text x=\"91\" y=\"48\" fill=\"#39261F\">8<\/text>\n <rect x=\"116\" y=\"28\" width=\"38\" height=\"30\" rx=\"7\" fill=\"#FFC62F\"\/><text x=\"135\" y=\"48\" fill=\"#39261F\">12<\/text>\n <rect x=\"160\" y=\"28\" width=\"38\" height=\"30\" rx=\"7\" fill=\"#fff\"\/><text x=\"179\" y=\"48\" fill=\"#39261F\">19<\/text>\n <rect x=\"204\" y=\"28\" width=\"38\" height=\"30\" rx=\"7\" fill=\"#fff\"\/><text x=\"223\" y=\"48\" fill=\"#39261F\">25<\/text>\n <rect x=\"248\" y=\"28\" width=\"38\" height=\"30\" rx=\"7\" fill=\"#fff\" stroke=\"#795535\" stroke-width=\"2\" stroke-dasharray=\"4 3\"\/><text x=\"267\" y=\"48\" fill=\"#39261F\">31<\/text>\n <rect x=\"292\" y=\"28\" width=\"38\" height=\"30\" rx=\"7\" fill=\"#fff\"\/><text x=\"311\" y=\"48\" fill=\"#39261F\">40<\/text>\n <rect x=\"336\" y=\"28\" width=\"38\" height=\"30\" rx=\"7\" fill=\"#fff\"\/><text x=\"355\" y=\"48\" fill=\"#39261F\">47<\/text>\n <g opacity=\".35\"><rect x=\"28\" y=\"94\" width=\"38\" height=\"30\" rx=\"7\" fill=\"#fff\"\/><text x=\"47\" y=\"114\" fill=\"#39261F\">3<\/text><rect x=\"72\" y=\"94\" width=\"38\" height=\"30\" rx=\"7\" fill=\"#fff\"\/><text x=\"91\" y=\"114\" fill=\"#39261F\">8<\/text><rect x=\"116\" y=\"94\" width=\"38\" height=\"30\" rx=\"7\" fill=\"#fff\"\/><text x=\"135\" y=\"114\" fill=\"#39261F\">12<\/text><rect x=\"160\" y=\"94\" width=\"38\" height=\"30\" rx=\"7\" fill=\"#fff\"\/><text x=\"179\" y=\"114\" fill=\"#39261F\">19<\/text><\/g>\n <rect x=\"204\" y=\"94\" width=\"38\" height=\"30\" rx=\"7\" fill=\"#fff\"\/><text x=\"223\" y=\"114\" fill=\"#39261F\">25<\/text>\n <rect x=\"248\" y=\"94\" width=\"38\" height=\"30\" rx=\"7\" fill=\"#4B571A\"\/><text x=\"267\" y=\"114\" fill=\"#fff\">31<\/text>\n <rect x=\"292\" y=\"94\" width=\"38\" height=\"30\" rx=\"7\" fill=\"#fff\"\/><text x=\"311\" y=\"114\" fill=\"#39261F\">40<\/text>\n <rect x=\"336\" y=\"94\" width=\"38\" height=\"30\" rx=\"7\" fill=\"#fff\"\/><text x=\"355\" y=\"114\" fill=\"#39261F\">47<\/text>\n <rect x=\"257\" y=\"76\" width=\"20\" height=\"14\" rx=\"4\" fill=\"#39261F\"\/><text x=\"267\" y=\"87\" font-size=\"10\" fill=\"#fff\">M<\/text>\n <\/g>\n <\/svg>\n <\/div>\n <div class=\"tool-body\">\n <h3>Search Race<\/h3>\n <div class=\"kw\">Linear search vs binary search, side by side<\/div>\n <p>Pick a target number and race linear search against binary search on the same list. Students predict the winner, then see why halving the list beats checking every item.<\/p>\n <ul>\n <li>Comparison counters and a race log for class discussion<\/li>\n <li>An experiment that charts lists from 10 to 1,000 items<\/li>\n <li>Live low, mid and high values in Advanced<\/li>\n <\/ul>\n <div class=\"tags\"><span>Searching<\/span><span>Algorithms<\/span><span>Efficiency<\/span><\/div>\n <a class=\"btn dark\" href=\"https:\/\/www.codemonkey.com\/interactive-cs-tools\/search-race\/\">Open the Search Race<\/a>\n <\/div>\n <\/article>\n <\/div>\n <\/section>\n\n <section id=\"levels\" aria-labelledby=\"levels-h\">\n <div class=\"sec-head\">\n <h2 id=\"levels-h\">One tool, <em>two levels<\/em><\/h2>\n <p>Every tool has an Easy and an Advanced switch, so the same activity works for a student seeing an algorithm for the first time and for one preparing for AP Computer Science Principles.<\/p>\n <\/div>\n <div class=\"levels\">\n <div class=\"lv\">\n <h3>Easy <span>Beginners<\/span><\/h3>\n <ul>\n <li>Plain-English steps that light up as the tool runs<\/li>\n <li>Friendly names such as “smallest so far” instead of variables<\/li>\n <li>Speed shown in words and banana ratings, not Big-O<\/li>\n <li>Fewer options, so beginners can focus on the big idea<\/li>\n <\/ul>\n <\/div>\n <div class=\"lv adv\">\n <h3>Advanced <span>Going deeper<\/span><\/h3>\n <ul>\n <li>Real Python code with the running line highlighted<\/li>\n <li>Live variables such as <code>min_idx = 4<\/code> and <code>mid = 17<\/code><\/li>\n <li>Big-O tables with clear explanations of O(n), O(n\u00b2) and O(log n)<\/li>\n <li>Extra operations, gates and harder challenges<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <div class=\"note\"><strong>Teacher tip:<\/strong> link students straight to a level by adding <code>?level=advanced<\/code> or <code>?level=easy<\/code> to the end of any tool’s address. Each tool also remembers the level a student picked.<\/div>\n <\/section>\n\n <section id=\"classroom\" aria-labelledby=\"class-h\">\n <div class=\"sec-head\">\n <h2 id=\"class-h\">How teachers use these <em>free tools<\/em><\/h2>\n <p>No setup and no accounts means you can fit them into almost any lesson.<\/p>\n <\/div>\n <div class=\"uses\">\n <div class=\"use\"><b>1<\/b><h3>Whole-class demo<\/h3><p>Project a tool, step through slowly and ask the class to call out the next move before you click.<\/p><\/div>\n <div class=\"use\"><b>2<\/b><h3>Predict, then test<\/h3><p>Students write down a prediction, such as which search will win, then run the tool to check and explain the result.<\/p><\/div>\n <div class=\"use\"><b>3<\/b><h3>Stations and pairs<\/h3><p>Set up one tool per station. Pairs complete the “Try this in class” prompt on each tool and report back.<\/p><\/div>\n <div class=\"use\"><b>4<\/b><h3>Review and homework<\/h3><p>Share a link for homework or test review. The tools run on any school device, with nothing to install.<\/p><\/div>\n <\/div>\n <\/section>\n\n <section id=\"ideas\" aria-labelledby=\"grades-h\">\n <div class=\"sec-head\">\n <h2 id=\"grades-h\">Activity ideas for <em>each level<\/em><\/h2>\n <p>Suggested starting points for each tool, at both levels.<\/p>\n <\/div>\n <div class=\"tablewrap\">\n <table>\n <thead><tr><th>Tool<\/th><th>Key concepts<\/th><th>Easy level<\/th><th>Advanced level<\/th><\/tr><\/thead>\n <tbody>\n <tr><td><a href=\"https:\/\/www.codemonkey.com\/interactive-cs-tools\/sorting-algorithms\/\">Sorting Visualizer<\/a><\/td><td>Algorithms, comparisons, efficiency<\/td><td>Follow Bubble Sort step by step and count the swaps<\/td><td>Compare O(n\u00b2) and O(n log n) sorts on the same data<\/td><\/tr>\n <tr><td><a href=\"https:\/\/www.codemonkey.com\/interactive-cs-tools\/logic-gate-simulator\/\">Logic Gate Simulator<\/a><\/td><td>Boolean logic, truth tables, binary addition<\/td><td>Build a smart alarm with AND and OR gates<\/td><td>Build a full adder, or any gate from NAND alone<\/td><\/tr>\n <tr><td><a href=\"https:\/\/www.codemonkey.com\/interactive-cs-tools\/data-structures\/\">Data Structure Playground<\/a><\/td><td>Stacks, queues, linked lists, trees<\/td><td>Explore last in, first out vs first in, first out<\/td><td>Trace BST insert and delete, and see why balance matters<\/td><\/tr>\n <tr><td><a href=\"https:\/\/www.codemonkey.com\/interactive-cs-tools\/search-race\/\">Search Race<\/a><\/td><td>Linear and binary search<\/td><td>Predict the winner and explain why halving is faster<\/td><td>Connect the results to O(n) vs O(log n) growth<\/td><\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n <\/section>\n\n <section aria-labelledby=\"about-h\">\n <div class=\"about\">\n <div>\n <h2 id=\"about-h\">Made by the CodeMonkey team<\/h2>\n <p>CodeMonkey has helped millions of students learn to code through game-based courses in block coding, CoffeeScript and Python. We built these free teacher tools to make the hardest computer science ideas easy to see.<\/p>\n <\/div>\n <div class=\"ctas\">\n <a class=\"btn\" href=\"https:\/\/app.codemonkey.com\/users\/sign_up\/teacher\">Start a Teacher Trial<\/a>\n <a class=\"btn ghost\" href=\"https:\/\/app.codemonkey.com\/request-a-quote\">Request a Quote for your School<\/a>\n <a class=\"textlink\" href=\"https:\/\/www.codemonkey.com\/courses\/\">See all CodeMonkey courses<\/a>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"faq\" aria-labelledby=\"faq-h\">\n <div class=\"sec-head\">\n <h2 id=\"faq-h\">Frequently asked <em>questions<\/em><\/h2>\n <\/div>\n <div class=\"faq\">\n <details open><summary>Are these teacher tools really free?<\/summary><p>Yes. All four interactive computer science tools are completely free for teachers, students and parents, with no trial period and no paywall.<\/p><\/details>\n <details><summary>Do students need an account to use them?<\/summary><p>No. There is nothing to sign up for or install. Students open the link and start exploring right away.<\/p><\/details>\n <details><summary>What is the difference between Easy and Advanced?<\/summary><p>Easy mode explains every step in plain English, with friendly names and simple speed ratings. Advanced mode adds real Python code, live variables and Big-O, and covers AP Computer Science Principles topics such as binary search and Boolean logic.<\/p><\/details>\n <details><summary>Do the tools work on Chromebooks and iPads?<\/summary><p>Yes. They run in any modern web browser on Chromebooks, Windows and Mac computers, iPads and other tablets. A laptop or tablet screen works best for the Logic Gate Simulator.<\/p><\/details>\n <details><summary>Do students need to know how to code?<\/summary><p>No. Easy mode uses plain English. Advanced mode shows real Python code next to each step, which helps students connect what they see to the code they write.<\/p><\/details>\n <details><summary>Can I use the tools with my whole class at once?<\/summary><p>Yes. Project a tool on the board for a class demo, or share the link so every student can work on their own device at the same time.<\/p><\/details>\n <\/div>\n <\/section>\n<\/main>\n\n<footer>Free teacher tools from <a href=\"https:\/\/www.codemonkey.com\/\">CodeMonkey<\/a>: Sorting Visualizer, Logic Gate Simulator, Data Structure Playground and Search Race.<\/footer>\n\n<script type=\"application\/ld+json\">\n{\n \"@context\": \"https:\/\/schema.org\",\n \"@type\": \"CollectionPage\",\n \"name\": \"Free Teacher Tools for Computer Science\",\n \"description\": \"Free interactive computer science tools for teachers: a sorting algorithm visualizer, logic gate simulator, data structure playground and linear vs binary search race.\",\n \"url\": \"https:\/\/www.codemonkey.com\/interactive-cs-tools\/\",\n \"publisher\": {\"@type\": \"Organization\", \"name\": \"CodeMonkey\", \"url\": \"https:\/\/www.codemonkey.com\/\"},\n \"mainEntity\": {\n \"@type\": \"ItemList\",\n \"itemListElement\": [\n {\"@type\": \"ListItem\", \"position\": 1, \"name\": \"Sorting Visualizer\", \"url\": \"https:\/\/www.codemonkey.com\/interactive-cs-tools\/sorting-algorithms\/\"},\n {\"@type\": \"ListItem\", \"position\": 2, \"name\": \"Logic Gate Simulator\", \"url\": \"https:\/\/www.codemonkey.com\/interactive-cs-tools\/logic-gate-simulator\/\"},\n {\"@type\": \"ListItem\", \"position\": 3, \"name\": \"Data Structure Playground\", \"url\": \"https:\/\/www.codemonkey.com\/interactive-cs-tools\/data-structures\/\"},\n {\"@type\": \"ListItem\", \"position\": 4, \"name\": \"Search Race\", \"url\": \"https:\/\/www.codemonkey.com\/interactive-cs-tools\/search-race\/\"}\n ]\n }\n}\n<\/script>\n<script type=\"application\/ld+json\">\n{\n \"@context\": \"https:\/\/schema.org\",\n \"@type\": \"FAQPage\",\n \"mainEntity\": [\n {\"@type\": \"Question\", \"name\": \"Are these teacher tools really free?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"Yes. All four interactive computer science tools are completely free for teachers, students and parents, with no trial period and no paywall.\"}},\n {\"@type\": \"Question\", \"name\": \"Do students need an account to use them?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"No. There is nothing to sign up for or install. Students open the link and start exploring right away.\"}},\n {\"@type\": \"Question\", \"name\": \"What is the difference between Easy and Advanced?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"Easy mode explains every step in plain English, with friendly names and simple speed ratings. Advanced mode adds real Python code, live variables and Big-O, and covers AP Computer Science Principles topics such as binary search and Boolean logic.\"}},\n {\"@type\": \"Question\", \"name\": \"Do the tools work on Chromebooks and iPads?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"Yes. They run in any modern web browser on Chromebooks, Windows and Mac computers, iPads and other tablets. A laptop or tablet screen works best for the Logic Gate Simulator.\"}},\n {\"@type\": \"Question\", \"name\": \"Do students need to know how to code?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"No. Easy mode uses plain English. Advanced mode shows real Python code next to each step, which helps students connect what they see to the code they write.\"}},\n {\"@type\": \"Question\", \"name\": \"Can I use the tools with my whole class at once?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"Yes. Project a tool on the board for a class demo, or share the link so every student can work on their own device at the same time.\"}}\n ]\n}\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Free Teacher Tools for Computer Science | CodeMonkey Interactive CS Tools Free Teacher Tools for Computer Science Four free, interactive tools that make algorithms, logic … <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/www.codemonkey.com\/es\/interactive-cs-tools\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Free Teacher Tools for Computer Science”<\/span><\/a><\/p>","protected":false},"author":55,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-31237","page","type-page","status-publish","hentry"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t<meta name=\"description\" content=\"Free interactive computer science tools for teachers: a sorting algorithm visualizer, logic gate simulator, data structure playground and linear vs binary search race. No sign-up.\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.codemonkey.com\/es\/interactive-cs-tools\/\" \/>\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=\"Free Teacher Tools for Computer Science - CodeMonkey\" \/>\n\t\t<meta property=\"og:description\" content=\"Free interactive computer science tools for teachers: a sorting algorithm visualizer, logic gate simulator, data structure playground and linear vs binary search race. No sign-up.\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/www.codemonkey.com\/es\/interactive-cs-tools\/\" \/>\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-29T16:48:31+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2026-10-29T16:55:51+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Free Teacher Tools for Computer Science - CodeMonkey\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Free interactive computer science tools for teachers: a sorting algorithm visualizer, logic gate simulator, data structure playground and linear vs binary search race. No sign-up.\" \/>\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\\\/#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\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.codemonkey.com\\\/es\\\/#listItem\",\"name\":\"Home\"}}]},{\"@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\\\/#organizationLogo\",\"width\":200,\"height\":31,\"caption\":\"Codemonkey Coding for Kids\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codemonkey.com\\\/es\\\/interactive-cs-tools\\\/#organizationLogo\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codemonkey.com\\\/es\\\/interactive-cs-tools\\\/#webpage\",\"url\":\"https:\\\/\\\/www.codemonkey.com\\\/es\\\/interactive-cs-tools\\\/\",\"name\":\"Free Teacher Tools for Computer Science - CodeMonkey\",\"description\":\"Free interactive computer science tools for teachers: a sorting algorithm visualizer, logic gate simulator, data structure playground and linear vs binary search race. No sign-up.\",\"inLanguage\":\"es-ES\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codemonkey.com\\\/es\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codemonkey.com\\\/es\\\/interactive-cs-tools\\\/#breadcrumblist\"},\"datePublished\":\"2026-10-29T16:48:31+00:00\",\"dateModified\":\"2026-10-29T16:55:51+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\r\n\t\t<title>Free Teacher Tools for Computer Science - CodeMonkey<\/title>\n\n","aioseo_head_json":{"title":"Free Teacher Tools for Computer Science - CodeMonkey","description":"Free interactive computer science tools for teachers: a sorting algorithm visualizer, logic gate simulator, data structure playground and linear vs binary search race. No sign-up.","canonical_url":"https:\/\/www.codemonkey.com\/es\/interactive-cs-tools\/","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\/#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","previousItem":{"@type":"ListItem","@id":"https:\/\/www.codemonkey.com\/es\/#listItem","name":"Home"}}]},{"@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\/#organizationLogo","width":200,"height":31,"caption":"Codemonkey Coding for Kids"},"image":{"@id":"https:\/\/www.codemonkey.com\/es\/interactive-cs-tools\/#organizationLogo"}},{"@type":"WebPage","@id":"https:\/\/www.codemonkey.com\/es\/interactive-cs-tools\/#webpage","url":"https:\/\/www.codemonkey.com\/es\/interactive-cs-tools\/","name":"Free Teacher Tools for Computer Science - CodeMonkey","description":"Free interactive computer science tools for teachers: a sorting algorithm visualizer, logic gate simulator, data structure playground and linear vs binary search race. No sign-up.","inLanguage":"es-ES","isPartOf":{"@id":"https:\/\/www.codemonkey.com\/es\/#website"},"breadcrumb":{"@id":"https:\/\/www.codemonkey.com\/es\/interactive-cs-tools\/#breadcrumblist"},"datePublished":"2026-10-29T16:48:31+00:00","dateModified":"2026-10-29T16:55:51+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":"Free Teacher Tools for Computer Science - CodeMonkey","og:description":"Free interactive computer science tools for teachers: a sorting algorithm visualizer, logic gate simulator, data structure playground and linear vs binary search race. No sign-up.","og:url":"https:\/\/www.codemonkey.com\/es\/interactive-cs-tools\/","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-29T16:48:31+00:00","article:modified_time":"2026-10-29T16:55:51+00:00","twitter:card":"summary_large_image","twitter:title":"Free Teacher Tools for Computer Science - CodeMonkey","twitter:description":"Free interactive computer science tools for teachers: a sorting algorithm visualizer, logic gate simulator, data structure playground and linear vs binary search race. No sign-up.","twitter:image":"https:\/\/d3sujgifhk94se.cloudfront.net\/wp-content\/uploads\/2020\/06\/21143425\/codemonkey_logo.png"},"aioseo_meta_data":{"post_id":"31237","title":null,"description":"Free interactive computer science tools for teachers: a sorting algorithm visualizer, logic gate simulator, data structure playground and linear vs binary search race. No sign-up.","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-29 16:46:36","updated":"2026-10-29 16:57:28","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:56:37"},"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\tFree Teacher Tools for Computer Science\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\/"}],"_links":{"self":[{"href":"https:\/\/www.codemonkey.com\/es\/wp-json\/wp\/v2\/pages\/31237","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=31237"}],"version-history":[{"count":3,"href":"https:\/\/www.codemonkey.com\/es\/wp-json\/wp\/v2\/pages\/31237\/revisions"}],"predecessor-version":[{"id":31240,"href":"https:\/\/www.codemonkey.com\/es\/wp-json\/wp\/v2\/pages\/31237\/revisions\/31240"}],"wp:attachment":[{"href":"https:\/\/www.codemonkey.com\/es\/wp-json\/wp\/v2\/media?parent=31237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":31237,"date":"2026-10-29T16:48:31","date_gmt":"2026-10-29T16:48:31","guid":{"rendered":"https:\/\/www.codemonkey.com\/?page_id=31237"},"modified":"2026-10-29T16:55:51","modified_gmt":"2026-10-29T16:55:51","slug":"interactive-cs-tools","status":"publish","type":"page","link":"https:\/\/www.codemonkey.com\/es\/interactive-cs-tools\/","title":{"rendered":"Free Teacher Tools for Computer Science"},"content":{"rendered":"\n\n\n\n\n\nFree Teacher Tools for Computer Science | CodeMonkey<\/title>\n<meta name=\"description\" content=\"Free interactive computer science tools for teachers: a sorting algorithm visualizer, logic gate simulator, data structure playground and linear vs binary search race. No sign-up.\">\n<link rel=\"canonical\" href=\"https:\/\/www.codemonkey.com\/interactive-cs-tools\/\">\n<meta property=\"og:type\" content=\"website\">\n<meta property=\"og:title\" content=\"Free Teacher Tools for Computer Science\">\n<meta property=\"og:description\" content=\"Four free, interactive CS tools that make algorithms, logic gates and data structures visible. No sign-up, no downloads.\">\n<meta property=\"og:url\" content=\"https:\/\/www.codemonkey.com\/interactive-cs-tools\/\">\n<meta property=\"og:site_name\" content=\"CodeMonkey\">\n<meta name=\"twitter:card\" content=\"summary_large_image\">\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 }\n *{box-sizing:border-box}\n html{scroll-behavior:smooth}\n body{margin:0;font-family:'Poppins',system-ui,sans-serif;color:var(--brown-dark);background:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased}\n h1,h2,h3{font-family:'Poppins',sans-serif;margin:0;line-height:1.15}\n a{color:inherit}\n\n \/* ---------- Hero ---------- *\/\n .hero{position:relative;overflow:hidden;color:var(--white);text-align:center;padding:56px 16px 120px}\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(32px,5.6vw,58px);color:var(--yellow);max-width:820px;margin:0 auto}\n .hero p{position:relative;max-width:640px;margin:16px auto 0;font-size:17px;opacity:.95}\n .hero .ctas{position:relative;display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px}\n .wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:60px;display:block}\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 @media (max-width:640px){.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 75% 46% at 50% 52%,#4B571A 62%,rgba(75,87,26,0) 100%);pointer-events:none}}\n .eyebrow{text-decoration:none;color:var(--white);transition:background .15s}\n .eyebrow:hover{background:rgba(255,255,255,.24)}\n\n @media (min-width:1181px){.hero .bb.l{top:120px}}\n\n .btn{font:700 15px 'Poppins',sans-serif;text-decoration:none;border:none;border-radius:999px;padding:13px 26px;cursor:pointer;background:var(--yellow);color:var(--brown-dark);box-shadow:0 4px 0 var(--tan);display:inline-flex;align-items:center;gap:8px;transition:transform .08s,box-shadow .08s}\n .btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--tan)}\n .btn.ghost{background:transparent;color:var(--white);border:2px solid rgba(255,255,255,.55);box-shadow:none;padding:11px 24px}\n .btn.ghost:hover{border-color:var(--white)}\n .btn.dark{background:var(--brown-dark);color:var(--yellow);box-shadow:0 4px 0 #1d130f}\n .btn:focus-visible,a:focus-visible{outline:3px solid var(--purple);outline-offset:3px}\n .btn svg{width:18px;height:18px;fill:currentColor}\n\n \/* ---------- Layout ---------- *\/\n .wrap{max-width:1160px;margin:0 auto;padding:0 16px}\n .perks{position:relative;margin:-70px auto 0;max-width:1060px;background:var(--white);border-radius:24px;box-shadow:0 12px 34px rgba(57,38,31,.13);padding:20px 24px;display:grid;grid-template-columns:repeat(5,1fr);gap:12px}\n @media (max-width:900px){.perks{grid-template-columns:repeat(2,1fr)}}\n @media (max-width:480px){.perks{grid-template-columns:1fr}}\n .perk{display:flex;gap:10px;align-items:center;font-weight:600;font-size:14px;line-height:1.3}\n .perk i{flex:none;width:34px;height:34px;border-radius:50%;background:var(--yellow-tint);display:flex;align-items:center;justify-content:center}\n .perk i svg{width:18px;height:18px;fill:var(--brown)}\n section{padding:64px 0 0}\n .sec-head{text-align:center;max-width:760px;margin:0 auto 30px}\n .sec-head h2{font-weight:800;font-size:clamp(26px,3.6vw,38px);text-transform:uppercase}\n .sec-head h2 em{font-style:normal;color:var(--tan)}\n .sec-head p{color:var(--gray);font-size:16px;margin:12px 0 0}\n\n \/* ---------- Tool cards ---------- *\/\n .tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}\n @media (max-width:820px){.tools{grid-template-columns:1fr}}\n .tool{background:var(--white);border-radius:24px;box-shadow:0 10px 30px rgba(57,38,31,.12);overflow:hidden;display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s}\n .tool:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(57,38,31,.16)}\n .thumb{background:var(--tint);height:180px;display:flex;align-items:center;justify-content:center;position:relative}\n .thumb svg{width:86%;max-width:380px;height:150px}\n .thumb .unused{position:absolute;top:14px;left:14px;background:var(--brown-dark);color:var(--yellow);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:4px 12px}\n .tool-body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}\n .tool h3{font-size:22px;font-weight:800;text-transform:uppercase}\n .tool .kw{font-size:13px;font-weight:600;color:var(--tan);margin:4px 0 10px}\n .tool p{margin:0 0 12px;font-size:15px}\n .tool ul{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:6px}\n .tool li{padding-left:24px;position:relative;font-size:14px;font-weight:500}\n .tool li::before{content:\"\";position:absolute;left:0;top:6px;width:12px;height:12px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 3px var(--yellow-tint)}\n .tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px}\n .tags span{font-size:12px;font-weight:600;border:2px solid var(--sky);border-radius:999px;padding:2px 10px}\n .tool .btn{margin-top:auto;align-self:flex-start}\n\n \/* ---------- Levels ---------- *\/\n .levels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}\n @media (max-width:820px){.levels{grid-template-columns:1fr}}\n .lv{border-radius:24px;padding:26px;background:var(--tint)}\n .lv.adv{background:var(--brown-dark);color:var(--white)}\n .lv h3{font-size:24px;font-weight:800;text-transform:uppercase;display:flex;align-items:center;gap:12px}\n .lv h3 span{font-size:12px;font-weight:700;letter-spacing:.06em;border-radius:999px;padding:4px 12px;background:var(--yellow);color:var(--brown-dark)}\n .lv ul{margin:14px 0 0;padding-left:20px}\n .lv li{margin-bottom:6px}\n \/* explicit heading colors, so the website theme cannot override them *\/\n .lv h3,.lv li,.lv p{color:var(--brown-dark)}\n .lv.adv h3{color:var(--yellow)}\n .lv.adv li,.lv.adv p{color:var(--white)}\n .sec-head h2,.tool h3,.use h3,.faq summary,.perk{color:var(--brown-dark)}\n .about h2{color:var(--yellow)}\n .about p{color:var(--white)}\n .lv code{font-family:'JetBrains Mono',monospace;font-size:13px;background:rgba(255,198,47,.2);color:var(--yellow);border-radius:6px;padding:1px 6px}\n .note{margin-top:18px;background:var(--yellow-tint);border-left:6px solid var(--yellow);border-radius:16px;padding:14px 18px;font-size:15px}\n .note code{font-family:'JetBrains Mono',monospace;font-size:13px;background:var(--white);border-radius:6px;padding:1px 6px}\n\n \/* ---------- Classroom ---------- *\/\n .uses{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}\n @media (max-width:980px){.uses{grid-template-columns:repeat(2,minmax(0,1fr))}}\n @media (max-width:520px){.uses{grid-template-columns:1fr}}\n .use{background:var(--white);border-radius:20px;box-shadow:0 8px 24px rgba(57,38,31,.10);padding:22px}\n .use b{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--yellow);font-size:18px;font-weight:800;margin-bottom:12px}\n .use h3{font-size:17px;font-weight:800;margin-bottom:6px}\n .use p{margin:0;font-size:14.5px}\n\n \/* ---------- Table ---------- *\/\n .tablewrap{overflow-x:auto;border-radius:20px;box-shadow:0 8px 24px rgba(57,38,31,.10)}\n table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:680px;background:var(--white)}\n th{background:var(--brown-dark);color:var(--white);text-align:left;padding:14px 16px;font-size:13px;letter-spacing:.04em;text-transform:uppercase}\n th:first-child{color:var(--yellow)}\n td{padding:14px 16px;border-bottom:1px solid var(--tint);vertical-align:top}\n tr:last-child td{border-bottom:none}\n td:first-child{font-weight:700;white-space:nowrap}\n td a{font-weight:700}\n .small{font-size:13px;color:var(--gray);margin-top:10px;text-align:center}\n\n \/* ---------- About + FAQ ---------- *\/\n .about{background:var(--green);color:var(--white);border-radius:28px;padding:40px;display:grid;grid-template-columns:1.4fr 1fr;gap:30px;align-items:center;position:relative;overflow:hidden}\n @media (max-width:820px){.about{grid-template-columns:1fr;padding:28px}}\n .about h2{font-weight:800;font-size:clamp(24px,3vw,32px);text-transform:uppercase;color:var(--yellow)}\n .about p{margin:12px 0 0;opacity:.95}\n .about .ctas{display:flex;flex-direction:column;align-items:flex-start;gap:14px}\n .about .ctas .btn{width:100%;max-width:340px;justify-content:center}\n .about .textlink{color:var(--white);font-weight:600;font-size:14px;text-decoration:underline;text-underline-offset:3px;max-width:340px;width:100%;text-align:center}\n .about .textlink:hover{color:var(--yellow)}\n .faq{max-width:860px;margin:0 auto}\n details{background:var(--white);border-radius:18px;box-shadow:0 6px 20px rgba(57,38,31,.09);margin-bottom:12px;padding:0 22px}\n summary{cursor:pointer;list-style:none;font-weight:700;font-size:16px;padding:18px 36px 18px 0;position:relative}\n summary::-webkit-details-marker{display:none}\n summary::after{content:\"+\";position:absolute;right:0;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;background:var(--yellow);display:flex;align-items:center;justify-content:center;font-weight:800}\n details[open] summary::after{content:\"\\2212\"}\n details p{margin:0 0 18px;font-size:15px}\n footer{text-align:center;font-size:13px;color:var(--gray);padding:56px 16px 40px}\n<\/style>\n<\/head>\n<body>\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 <span class=\"eyebrow\">Interactive CS Tools<\/span>\n <h1>Free Teacher Tools for Computer Science<\/h1>\n <p>Four free, interactive tools that make algorithms, logic gates and data structures visible. No sign-up, no downloads. Open one and start teaching.<\/p>\n <div class=\"ctas\">\n <a class=\"btn\" href=\"#tools\">Explore the tools<\/a>\n <a class=\"btn ghost\" href=\"#classroom\">Ways to use them in class<\/a>\n <\/div>\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<div class=\"wrap\">\n <div class=\"perks\" role=\"list\">\n <div class=\"perk\" role=\"listitem\"><i><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 2l2.9 6.6 7.1.6-5.4 4.7 1.6 7L12 17.3 5.8 21l1.6-7L2 9.2l7.1-.6z\"\/><\/svg><\/i>100% free for teachers and students<\/div>\n <div class=\"perk\" role=\"listitem\"><i><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-4 0-8 2-8 5v2h16v-2c0-3-4-5-8-5z\"\/><\/svg><\/i>No accounts or logins<\/div>\n <div class=\"perk\" role=\"listitem\"><i><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M4 5h16v10H4zm-2 12h20v2H2z\"\/><\/svg><\/i>Works on Chromebooks, iPads and laptops<\/div>\n <div class=\"perk\" role=\"listitem\"><i><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M4 18h4V10H4zm6 0h4V6h-4zm6 0h4V2h-4z\"\/><\/svg><\/i>Easy and Advanced levels<\/div>\n <div class=\"perk\" role=\"listitem\"><i><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M8 6 2 12l6 6 1.4-1.4L4.8 12l4.6-4.6zm8 0-1.4 1.4 4.6 4.6-4.6 4.6L16 18l6-6z\"\/><\/svg><\/i>Real Python code in Advanced<\/div>\n <\/div>\n<\/div>\n\n<main class=\"wrap\">\n <section id=\"tools\" aria-labelledby=\"tools-h\">\n <div class=\"sec-head\">\n <h2 id=\"tools-h\">Interactive <em>computer science<\/em> tools<\/h2>\n <p>Each tool runs in the browser and shows every step, so students can see how computers sort, decide, store and search. Project them for the whole class, or let students explore on their own.<\/p>\n <\/div>\n\n <div class=\"tools\">\n <article class=\"tool\">\n <div class=\"thumb\">\n <svg viewBox=\"0 0 380 150\" role=\"img\" aria-label=\"Bars being sorted\">\n <rect x=\"10\" y=\"140\" width=\"360\" height=\"4\" rx=\"2\" fill=\"#39261F\"\/>\n <rect x=\"20\" y=\"95\" width=\"32\" height=\"45\" rx=\"5\" fill=\"#79ABCB\"\/><rect x=\"62\" y=\"60\" width=\"32\" height=\"80\" rx=\"5\" fill=\"#79ABCB\"\/>\n <rect x=\"104\" y=\"30\" width=\"32\" height=\"110\" rx=\"5\" fill=\"#FFC62F\"\/><rect x=\"146\" y=\"75\" width=\"32\" height=\"65\" rx=\"5\" fill=\"#FFC62F\"\/>\n <rect x=\"188\" y=\"105\" width=\"32\" height=\"35\" rx=\"5\" fill=\"#79ABCB\"\/><rect x=\"230\" y=\"50\" width=\"32\" height=\"90\" rx=\"5\" fill=\"#79ABCB\"\/>\n <rect x=\"272\" y=\"22\" width=\"32\" height=\"118\" rx=\"5\" fill=\"#9BB33F\"\/><rect x=\"314\" y=\"10\" width=\"32\" height=\"130\" rx=\"5\" fill=\"#9BB33F\"\/>\n <path d=\"M120 22 C130 4 152 4 162 64\" fill=\"none\" stroke=\"#C64F61\" stroke-width=\"3\" stroke-linecap=\"round\"\/><path d=\"M156 56 l6 9 6 -9\" fill=\"none\" stroke=\"#C64F61\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg>\n <\/div>\n <div class=\"tool-body\">\n <h3>Sorting Visualizer<\/h3>\n <div class=\"kw\">A sorting algorithm visualizer for the classroom<\/div>\n <p>Watch Bubble Sort, Selection Sort, Insertion Sort, Merge Sort and Quick Sort put a list in order, one step at a time. Students pause, rewind and count every comparison and swap.<\/p>\n <ul>\n <li>Live variables (i, j, pivot) shown under the bars<\/li>\n <li>A plain-English plan in Easy, Python code in Advanced<\/li>\n <li>Compare algorithms on random, reversed or nearly sorted data<\/li>\n <\/ul>\n <div class=\"tags\"><span>Algorithms<\/span><span>Efficiency<\/span><span>Big-O<\/span><\/div>\n <a class=\"btn dark\" href=\"https:\/\/www.codemonkey.com\/interactive-cs-tools\/sorting-algorithms\/\">Open the Sorting Visualizer<\/a>\n <\/div>\n <\/article>\n\n <article class=\"tool\">\n <div class=\"thumb\">\n <svg viewBox=\"0 0 380 150\" role=\"img\" aria-label=\"An AND gate connected to two switches and a lamp\">\n <rect x=\"20\" y=\"28\" width=\"46\" height=\"36\" rx=\"10\" fill=\"#FFC62F\" stroke=\"#39261F\" stroke-width=\"3\"\/><text x=\"43\" y=\"53\" text-anchor=\"middle\" font-family=\"Poppins,sans-serif\" font-weight=\"800\" font-size=\"18\" fill=\"#39261F\">1<\/text>\n <rect x=\"20\" y=\"88\" width=\"46\" height=\"36\" rx=\"10\" fill=\"#FFC62F\" stroke=\"#39261F\" stroke-width=\"3\"\/><text x=\"43\" y=\"113\" text-anchor=\"middle\" font-family=\"Poppins,sans-serif\" font-weight=\"800\" font-size=\"18\" fill=\"#39261F\">1<\/text>\n <path d=\"M66 46 C110 46 110 62 150 62\" fill=\"none\" stroke=\"#BF8653\" stroke-width=\"8\" stroke-linecap=\"round\"\/><path d=\"M66 46 C110 46 110 62 150 62\" fill=\"none\" stroke=\"#FFC62F\" stroke-width=\"4\" stroke-linecap=\"round\"\/>\n <path d=\"M66 106 C110 106 110 90 150 90\" fill=\"none\" stroke=\"#BF8653\" stroke-width=\"8\" stroke-linecap=\"round\"\/><path d=\"M66 106 C110 106 110 90 150 90\" fill=\"none\" stroke=\"#FFC62F\" stroke-width=\"4\" stroke-linecap=\"round\"\/>\n <path d=\"M150 46 H190 A30 30 0 0 1 190 106 H150 Z\" fill=\"#fff\" stroke=\"#39261F\" stroke-width=\"3.5\" stroke-linejoin=\"round\"\/>\n <text x=\"180\" y=\"81\" text-anchor=\"middle\" font-family=\"Poppins,sans-serif\" font-weight=\"800\" font-size=\"13\" fill=\"#54595F\">AND<\/text>\n <path d=\"M220 76 H300\" fill=\"none\" stroke=\"#BF8653\" stroke-width=\"8\" stroke-linecap=\"round\"\/><path d=\"M220 76 H300\" fill=\"none\" stroke=\"#FFC62F\" stroke-width=\"4\" stroke-linecap=\"round\"\/>\n <circle cx=\"326\" cy=\"76\" r=\"34\" fill=\"#FFC62F\" opacity=\".35\"\/><circle cx=\"326\" cy=\"76\" r=\"22\" fill=\"#FFC62F\" stroke=\"#39261F\" stroke-width=\"3\"\/>\n <\/svg>\n <\/div>\n <div class=\"tool-body\">\n <h3>Logic Gate Simulator<\/h3>\n <div class=\"kw\">A free online logic gate simulator with truth tables<\/div>\n <p>Drag AND, OR, NOT and XOR gates onto the board, wire them to switches and lamps, and watch the truth table fill in as students build. Load a half adder, full adder or multiplexer to explore.<\/p>\n <ul>\n <li>Truth table and Boolean expression update live<\/li>\n <li>Challenges such as “build OR from NAND gates” and “majority vote”<\/li>\n <li>All 7 gates and Boolean algebra notation in Advanced<\/li>\n <\/ul>\n <div class=\"tags\"><span>Boolean logic<\/span><span>Binary<\/span><span>Circuits<\/span><\/div>\n <a class=\"btn dark\" href=\"https:\/\/www.codemonkey.com\/interactive-cs-tools\/logic-gate-simulator\/\">Open the Logic Gate Simulator<\/a>\n <\/div>\n <\/article>\n\n <article class=\"tool\">\n <div class=\"thumb\">\n <svg viewBox=\"0 0 380 150\" role=\"img\" aria-label=\"A stack of boxes and a binary search tree\">\n <rect x=\"30\" y=\"100\" width=\"90\" height=\"28\" rx=\"8\" fill=\"#B0D1E5\"\/><rect x=\"30\" y=\"68\" width=\"90\" height=\"28\" rx=\"8\" fill=\"#B0D1E5\"\/><rect x=\"30\" y=\"36\" width=\"90\" height=\"28\" rx=\"8\" fill=\"#FFC62F\"\/>\n <rect x=\"20\" y=\"134\" width=\"110\" height=\"6\" rx=\"3\" fill=\"#39261F\"\/>\n <text x=\"75\" y=\"56\" text-anchor=\"middle\" font-family=\"Poppins,sans-serif\" font-weight=\"800\" font-size=\"14\" fill=\"#39261F\">TOP<\/text>\n <g stroke=\"#39261F\" stroke-width=\"3\"><line x1=\"260\" y1=\"30\" x2=\"210\" y2=\"80\"\/><line x1=\"260\" y1=\"30\" x2=\"310\" y2=\"80\"\/><line x1=\"210\" y1=\"80\" x2=\"185\" y2=\"126\"\/><line x1=\"210\" y1=\"80\" x2=\"235\" y2=\"126\"\/><line x1=\"310\" y1=\"80\" x2=\"335\" y2=\"126\"\/><\/g>\n <g font-family=\"Poppins,sans-serif\" font-weight=\"800\" font-size=\"13\" text-anchor=\"middle\">\n <circle cx=\"260\" cy=\"30\" r=\"18\" fill=\"#FFC62F\" stroke=\"#39261F\" stroke-width=\"3\"\/><text x=\"260\" y=\"35\" fill=\"#39261F\">50<\/text>\n <circle cx=\"210\" cy=\"80\" r=\"18\" fill=\"#fff\" stroke=\"#39261F\" stroke-width=\"3\"\/><text x=\"210\" y=\"85\" fill=\"#39261F\">30<\/text>\n <circle cx=\"310\" cy=\"80\" r=\"18\" fill=\"#fff\" stroke=\"#39261F\" stroke-width=\"3\"\/><text x=\"310\" y=\"85\" fill=\"#39261F\">70<\/text>\n <circle cx=\"185\" cy=\"126\" r=\"16\" fill=\"#fff\" stroke=\"#39261F\" stroke-width=\"3\"\/><text x=\"185\" y=\"131\" fill=\"#39261F\">20<\/text>\n <circle cx=\"235\" cy=\"126\" r=\"16\" fill=\"#9BB33F\" stroke=\"#39261F\" stroke-width=\"3\"\/><text x=\"235\" y=\"131\" fill=\"#fff\">40<\/text>\n <circle cx=\"335\" cy=\"126\" r=\"16\" fill=\"#fff\" stroke=\"#39261F\" stroke-width=\"3\"\/><text x=\"335\" y=\"131\" fill=\"#39261F\">80<\/text>\n <\/g>\n <\/svg>\n <\/div>\n <div class=\"tool-body\">\n <h3>Data Structure Playground<\/h3>\n <div class=\"kw\">Data structures visualization: stacks, queues, linked lists and trees<\/div>\n <p>Push and pop a stack, enqueue and dequeue a queue, follow pointers through a linked list, and insert, search and delete in a binary search tree, with animations at every step.<\/p>\n <ul>\n <li>Step counter that makes Big-O easy to see<\/li>\n <li>In-order, pre-order and post-order traversals<\/li>\n <li>Python code for every operation in Advanced<\/li>\n <\/ul>\n <div class=\"tags\"><span>Data structures<\/span><span>Pointers<\/span><span>Trees<\/span><\/div>\n <a class=\"btn dark\" href=\"https:\/\/www.codemonkey.com\/interactive-cs-tools\/data-structures\/\">Open the Data Structure Playground<\/a>\n <\/div>\n <\/article>\n\n <article class=\"tool\">\n <div class=\"thumb\">\n <svg viewBox=\"0 0 380 150\" role=\"img\" aria-label=\"Linear search and binary search racing on a row of numbers\">\n <rect x=\"10\" y=\"18\" width=\"6\" height=\"50\" rx=\"3\" fill=\"#C64F61\"\/><rect x=\"10\" y=\"84\" width=\"6\" height=\"50\" rx=\"3\" fill=\"#9BB33F\"\/>\n <g font-family=\"Poppins,sans-serif\" font-weight=\"700\" font-size=\"12\" text-anchor=\"middle\">\n <rect x=\"28\" y=\"28\" width=\"38\" height=\"30\" rx=\"7\" fill=\"#B0D1E5\" opacity=\".6\"\/><text x=\"47\" y=\"48\" fill=\"#39261F\">3<\/text>\n <rect x=\"72\" y=\"28\" width=\"38\" height=\"30\" rx=\"7\" fill=\"#B0D1E5\" opacity=\".6\"\/><text x=\"91\" y=\"48\" fill=\"#39261F\">8<\/text>\n <rect x=\"116\" y=\"28\" width=\"38\" height=\"30\" rx=\"7\" fill=\"#FFC62F\"\/><text x=\"135\" y=\"48\" fill=\"#39261F\">12<\/text>\n <rect x=\"160\" y=\"28\" width=\"38\" height=\"30\" rx=\"7\" fill=\"#fff\"\/><text x=\"179\" y=\"48\" fill=\"#39261F\">19<\/text>\n <rect x=\"204\" y=\"28\" width=\"38\" height=\"30\" rx=\"7\" fill=\"#fff\"\/><text x=\"223\" y=\"48\" fill=\"#39261F\">25<\/text>\n <rect x=\"248\" y=\"28\" width=\"38\" height=\"30\" rx=\"7\" fill=\"#fff\" stroke=\"#795535\" stroke-width=\"2\" stroke-dasharray=\"4 3\"\/><text x=\"267\" y=\"48\" fill=\"#39261F\">31<\/text>\n <rect x=\"292\" y=\"28\" width=\"38\" height=\"30\" rx=\"7\" fill=\"#fff\"\/><text x=\"311\" y=\"48\" fill=\"#39261F\">40<\/text>\n <rect x=\"336\" y=\"28\" width=\"38\" height=\"30\" rx=\"7\" fill=\"#fff\"\/><text x=\"355\" y=\"48\" fill=\"#39261F\">47<\/text>\n <g opacity=\".35\"><rect x=\"28\" y=\"94\" width=\"38\" height=\"30\" rx=\"7\" fill=\"#fff\"\/><text x=\"47\" y=\"114\" fill=\"#39261F\">3<\/text><rect x=\"72\" y=\"94\" width=\"38\" height=\"30\" rx=\"7\" fill=\"#fff\"\/><text x=\"91\" y=\"114\" fill=\"#39261F\">8<\/text><rect x=\"116\" y=\"94\" width=\"38\" height=\"30\" rx=\"7\" fill=\"#fff\"\/><text x=\"135\" y=\"114\" fill=\"#39261F\">12<\/text><rect x=\"160\" y=\"94\" width=\"38\" height=\"30\" rx=\"7\" fill=\"#fff\"\/><text x=\"179\" y=\"114\" fill=\"#39261F\">19<\/text><\/g>\n <rect x=\"204\" y=\"94\" width=\"38\" height=\"30\" rx=\"7\" fill=\"#fff\"\/><text x=\"223\" y=\"114\" fill=\"#39261F\">25<\/text>\n <rect x=\"248\" y=\"94\" width=\"38\" height=\"30\" rx=\"7\" fill=\"#4B571A\"\/><text x=\"267\" y=\"114\" fill=\"#fff\">31<\/text>\n <rect x=\"292\" y=\"94\" width=\"38\" height=\"30\" rx=\"7\" fill=\"#fff\"\/><text x=\"311\" y=\"114\" fill=\"#39261F\">40<\/text>\n <rect x=\"336\" y=\"94\" width=\"38\" height=\"30\" rx=\"7\" fill=\"#fff\"\/><text x=\"355\" y=\"114\" fill=\"#39261F\">47<\/text>\n <rect x=\"257\" y=\"76\" width=\"20\" height=\"14\" rx=\"4\" fill=\"#39261F\"\/><text x=\"267\" y=\"87\" font-size=\"10\" fill=\"#fff\">M<\/text>\n <\/g>\n <\/svg>\n <\/div>\n <div class=\"tool-body\">\n <h3>Search Race<\/h3>\n <div class=\"kw\">Linear search vs binary search, side by side<\/div>\n <p>Pick a target number and race linear search against binary search on the same list. Students predict the winner, then see why halving the list beats checking every item.<\/p>\n <ul>\n <li>Comparison counters and a race log for class discussion<\/li>\n <li>An experiment that charts lists from 10 to 1,000 items<\/li>\n <li>Live low, mid and high values in Advanced<\/li>\n <\/ul>\n <div class=\"tags\"><span>Searching<\/span><span>Algorithms<\/span><span>Efficiency<\/span><\/div>\n <a class=\"btn dark\" href=\"https:\/\/www.codemonkey.com\/interactive-cs-tools\/search-race\/\">Open the Search Race<\/a>\n <\/div>\n <\/article>\n <\/div>\n <\/section>\n\n <section id=\"levels\" aria-labelledby=\"levels-h\">\n <div class=\"sec-head\">\n <h2 id=\"levels-h\">One tool, <em>two levels<\/em><\/h2>\n <p>Every tool has an Easy and an Advanced switch, so the same activity works for a student seeing an algorithm for the first time and for one preparing for AP Computer Science Principles.<\/p>\n <\/div>\n <div class=\"levels\">\n <div class=\"lv\">\n <h3>Easy <span>Beginners<\/span><\/h3>\n <ul>\n <li>Plain-English steps that light up as the tool runs<\/li>\n <li>Friendly names such as “smallest so far” instead of variables<\/li>\n <li>Speed shown in words and banana ratings, not Big-O<\/li>\n <li>Fewer options, so beginners can focus on the big idea<\/li>\n <\/ul>\n <\/div>\n <div class=\"lv adv\">\n <h3>Advanced <span>Going deeper<\/span><\/h3>\n <ul>\n <li>Real Python code with the running line highlighted<\/li>\n <li>Live variables such as <code>min_idx = 4<\/code> and <code>mid = 17<\/code><\/li>\n <li>Big-O tables with clear explanations of O(n), O(n\u00b2) and O(log n)<\/li>\n <li>Extra operations, gates and harder challenges<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <div class=\"note\"><strong>Teacher tip:<\/strong> link students straight to a level by adding <code>?level=advanced<\/code> or <code>?level=easy<\/code> to the end of any tool’s address. Each tool also remembers the level a student picked.<\/div>\n <\/section>\n\n <section id=\"classroom\" aria-labelledby=\"class-h\">\n <div class=\"sec-head\">\n <h2 id=\"class-h\">How teachers use these <em>free tools<\/em><\/h2>\n <p>No setup and no accounts means you can fit them into almost any lesson.<\/p>\n <\/div>\n <div class=\"uses\">\n <div class=\"use\"><b>1<\/b><h3>Whole-class demo<\/h3><p>Project a tool, step through slowly and ask the class to call out the next move before you click.<\/p><\/div>\n <div class=\"use\"><b>2<\/b><h3>Predict, then test<\/h3><p>Students write down a prediction, such as which search will win, then run the tool to check and explain the result.<\/p><\/div>\n <div class=\"use\"><b>3<\/b><h3>Stations and pairs<\/h3><p>Set up one tool per station. Pairs complete the “Try this in class” prompt on each tool and report back.<\/p><\/div>\n <div class=\"use\"><b>4<\/b><h3>Review and homework<\/h3><p>Share a link for homework or test review. The tools run on any school device, with nothing to install.<\/p><\/div>\n <\/div>\n <\/section>\n\n <section id=\"ideas\" aria-labelledby=\"grades-h\">\n <div class=\"sec-head\">\n <h2 id=\"grades-h\">Activity ideas for <em>each level<\/em><\/h2>\n <p>Suggested starting points for each tool, at both levels.<\/p>\n <\/div>\n <div class=\"tablewrap\">\n <table>\n <thead><tr><th>Tool<\/th><th>Key concepts<\/th><th>Easy level<\/th><th>Advanced level<\/th><\/tr><\/thead>\n <tbody>\n <tr><td><a href=\"https:\/\/www.codemonkey.com\/interactive-cs-tools\/sorting-algorithms\/\">Sorting Visualizer<\/a><\/td><td>Algorithms, comparisons, efficiency<\/td><td>Follow Bubble Sort step by step and count the swaps<\/td><td>Compare O(n\u00b2) and O(n log n) sorts on the same data<\/td><\/tr>\n <tr><td><a href=\"https:\/\/www.codemonkey.com\/interactive-cs-tools\/logic-gate-simulator\/\">Logic Gate Simulator<\/a><\/td><td>Boolean logic, truth tables, binary addition<\/td><td>Build a smart alarm with AND and OR gates<\/td><td>Build a full adder, or any gate from NAND alone<\/td><\/tr>\n <tr><td><a href=\"https:\/\/www.codemonkey.com\/interactive-cs-tools\/data-structures\/\">Data Structure Playground<\/a><\/td><td>Stacks, queues, linked lists, trees<\/td><td>Explore last in, first out vs first in, first out<\/td><td>Trace BST insert and delete, and see why balance matters<\/td><\/tr>\n <tr><td><a href=\"https:\/\/www.codemonkey.com\/interactive-cs-tools\/search-race\/\">Search Race<\/a><\/td><td>Linear and binary search<\/td><td>Predict the winner and explain why halving is faster<\/td><td>Connect the results to O(n) vs O(log n) growth<\/td><\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n <\/section>\n\n <section aria-labelledby=\"about-h\">\n <div class=\"about\">\n <div>\n <h2 id=\"about-h\">Made by the CodeMonkey team<\/h2>\n <p>CodeMonkey has helped millions of students learn to code through game-based courses in block coding, CoffeeScript and Python. We built these free teacher tools to make the hardest computer science ideas easy to see.<\/p>\n <\/div>\n <div class=\"ctas\">\n <a class=\"btn\" href=\"https:\/\/app.codemonkey.com\/users\/sign_up\/teacher\">Start a Teacher Trial<\/a>\n <a class=\"btn ghost\" href=\"https:\/\/app.codemonkey.com\/request-a-quote\">Request a Quote for your School<\/a>\n <a class=\"textlink\" href=\"https:\/\/www.codemonkey.com\/courses\/\">See all CodeMonkey courses<\/a>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"faq\" aria-labelledby=\"faq-h\">\n <div class=\"sec-head\">\n <h2 id=\"faq-h\">Frequently asked <em>questions<\/em><\/h2>\n <\/div>\n <div class=\"faq\">\n <details open><summary>Are these teacher tools really free?<\/summary><p>Yes. All four interactive computer science tools are completely free for teachers, students and parents, with no trial period and no paywall.<\/p><\/details>\n <details><summary>Do students need an account to use them?<\/summary><p>No. There is nothing to sign up for or install. Students open the link and start exploring right away.<\/p><\/details>\n <details><summary>What is the difference between Easy and Advanced?<\/summary><p>Easy mode explains every step in plain English, with friendly names and simple speed ratings. Advanced mode adds real Python code, live variables and Big-O, and covers AP Computer Science Principles topics such as binary search and Boolean logic.<\/p><\/details>\n <details><summary>Do the tools work on Chromebooks and iPads?<\/summary><p>Yes. They run in any modern web browser on Chromebooks, Windows and Mac computers, iPads and other tablets. A laptop or tablet screen works best for the Logic Gate Simulator.<\/p><\/details>\n <details><summary>Do students need to know how to code?<\/summary><p>No. Easy mode uses plain English. Advanced mode shows real Python code next to each step, which helps students connect what they see to the code they write.<\/p><\/details>\n <details><summary>Can I use the tools with my whole class at once?<\/summary><p>Yes. Project a tool on the board for a class demo, or share the link so every student can work on their own device at the same time.<\/p><\/details>\n <\/div>\n <\/section>\n<\/main>\n\n<footer>Free teacher tools from <a href=\"https:\/\/www.codemonkey.com\/\">CodeMonkey<\/a>: Sorting Visualizer, Logic Gate Simulator, Data Structure Playground and Search Race.<\/footer>\n\n<script type=\"application\/ld+json\">\n{\n \"@context\": \"https:\/\/schema.org\",\n \"@type\": \"CollectionPage\",\n \"name\": \"Free Teacher Tools for Computer Science\",\n \"description\": \"Free interactive computer science tools for teachers: a sorting algorithm visualizer, logic gate simulator, data structure playground and linear vs binary search race.\",\n \"url\": \"https:\/\/www.codemonkey.com\/interactive-cs-tools\/\",\n \"publisher\": {\"@type\": \"Organization\", \"name\": \"CodeMonkey\", \"url\": \"https:\/\/www.codemonkey.com\/\"},\n \"mainEntity\": {\n \"@type\": \"ItemList\",\n \"itemListElement\": [\n {\"@type\": \"ListItem\", \"position\": 1, \"name\": \"Sorting Visualizer\", \"url\": \"https:\/\/www.codemonkey.com\/interactive-cs-tools\/sorting-algorithms\/\"},\n {\"@type\": \"ListItem\", \"position\": 2, \"name\": \"Logic Gate Simulator\", \"url\": \"https:\/\/www.codemonkey.com\/interactive-cs-tools\/logic-gate-simulator\/\"},\n {\"@type\": \"ListItem\", \"position\": 3, \"name\": \"Data Structure Playground\", \"url\": \"https:\/\/www.codemonkey.com\/interactive-cs-tools\/data-structures\/\"},\n {\"@type\": \"ListItem\", \"position\": 4, \"name\": \"Search Race\", \"url\": \"https:\/\/www.codemonkey.com\/interactive-cs-tools\/search-race\/\"}\n ]\n }\n}\n<\/script>\n<script type=\"application\/ld+json\">\n{\n \"@context\": \"https:\/\/schema.org\",\n \"@type\": \"FAQPage\",\n \"mainEntity\": [\n {\"@type\": \"Question\", \"name\": \"Are these teacher tools really free?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"Yes. All four interactive computer science tools are completely free for teachers, students and parents, with no trial period and no paywall.\"}},\n {\"@type\": \"Question\", \"name\": \"Do students need an account to use them?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"No. There is nothing to sign up for or install. Students open the link and start exploring right away.\"}},\n {\"@type\": \"Question\", \"name\": \"What is the difference between Easy and Advanced?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"Easy mode explains every step in plain English, with friendly names and simple speed ratings. Advanced mode adds real Python code, live variables and Big-O, and covers AP Computer Science Principles topics such as binary search and Boolean logic.\"}},\n {\"@type\": \"Question\", \"name\": \"Do the tools work on Chromebooks and iPads?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"Yes. They run in any modern web browser on Chromebooks, Windows and Mac computers, iPads and other tablets. A laptop or tablet screen works best for the Logic Gate Simulator.\"}},\n {\"@type\": \"Question\", \"name\": \"Do students need to know how to code?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"No. Easy mode uses plain English. Advanced mode shows real Python code next to each step, which helps students connect what they see to the code they write.\"}},\n {\"@type\": \"Question\", \"name\": \"Can I use the tools with my whole class at once?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"Yes. Project a tool on the board for a class demo, or share the link so every student can work on their own device at the same time.\"}}\n ]\n}\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Free Teacher Tools for Computer Science | CodeMonkey Interactive CS Tools Free Teacher Tools for Computer Science Four free, interactive tools that make algorithms, logic … <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/www.codemonkey.com\/es\/interactive-cs-tools\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Free Teacher Tools for Computer Science”<\/span><\/a><\/p>","protected":false},"author":55,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-31237","page","type-page","status-publish","hentry"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t<meta name=\"description\" content=\"Free interactive computer science tools for teachers: a sorting algorithm visualizer, logic gate simulator, data structure playground and linear vs binary search race. No sign-up.\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.codemonkey.com\/es\/interactive-cs-tools\/\" \/>\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=\"Free Teacher Tools for Computer Science - CodeMonkey\" \/>\n\t\t<meta property=\"og:description\" content=\"Free interactive computer science tools for teachers: a sorting algorithm visualizer, logic gate simulator, data structure playground and linear vs binary search race. No sign-up.\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/www.codemonkey.com\/es\/interactive-cs-tools\/\" \/>\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-29T16:48:31+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2026-10-29T16:55:51+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Free Teacher Tools for Computer Science - CodeMonkey\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Free interactive computer science tools for teachers: a sorting algorithm visualizer, logic gate simulator, data structure playground and linear vs binary search race. No sign-up.\" \/>\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\\\/#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\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.codemonkey.com\\\/es\\\/#listItem\",\"name\":\"Home\"}}]},{\"@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\\\/#organizationLogo\",\"width\":200,\"height\":31,\"caption\":\"Codemonkey Coding for Kids\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codemonkey.com\\\/es\\\/interactive-cs-tools\\\/#organizationLogo\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codemonkey.com\\\/es\\\/interactive-cs-tools\\\/#webpage\",\"url\":\"https:\\\/\\\/www.codemonkey.com\\\/es\\\/interactive-cs-tools\\\/\",\"name\":\"Free Teacher Tools for Computer Science - CodeMonkey\",\"description\":\"Free interactive computer science tools for teachers: a sorting algorithm visualizer, logic gate simulator, data structure playground and linear vs binary search race. No sign-up.\",\"inLanguage\":\"es-ES\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codemonkey.com\\\/es\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codemonkey.com\\\/es\\\/interactive-cs-tools\\\/#breadcrumblist\"},\"datePublished\":\"2026-10-29T16:48:31+00:00\",\"dateModified\":\"2026-10-29T16:55:51+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\r\n\t\t<title>Free Teacher Tools for Computer Science - CodeMonkey<\/title>\n\n","aioseo_head_json":{"title":"Free Teacher Tools for Computer Science - CodeMonkey","description":"Free interactive computer science tools for teachers: a sorting algorithm visualizer, logic gate simulator, data structure playground and linear vs binary search race. No sign-up.","canonical_url":"https:\/\/www.codemonkey.com\/es\/interactive-cs-tools\/","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\/#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","previousItem":{"@type":"ListItem","@id":"https:\/\/www.codemonkey.com\/es\/#listItem","name":"Home"}}]},{"@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\/#organizationLogo","width":200,"height":31,"caption":"Codemonkey Coding for Kids"},"image":{"@id":"https:\/\/www.codemonkey.com\/es\/interactive-cs-tools\/#organizationLogo"}},{"@type":"WebPage","@id":"https:\/\/www.codemonkey.com\/es\/interactive-cs-tools\/#webpage","url":"https:\/\/www.codemonkey.com\/es\/interactive-cs-tools\/","name":"Free Teacher Tools for Computer Science - CodeMonkey","description":"Free interactive computer science tools for teachers: a sorting algorithm visualizer, logic gate simulator, data structure playground and linear vs binary search race. No sign-up.","inLanguage":"es-ES","isPartOf":{"@id":"https:\/\/www.codemonkey.com\/es\/#website"},"breadcrumb":{"@id":"https:\/\/www.codemonkey.com\/es\/interactive-cs-tools\/#breadcrumblist"},"datePublished":"2026-10-29T16:48:31+00:00","dateModified":"2026-10-29T16:55:51+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":"Free Teacher Tools for Computer Science - CodeMonkey","og:description":"Free interactive computer science tools for teachers: a sorting algorithm visualizer, logic gate simulator, data structure playground and linear vs binary search race. No sign-up.","og:url":"https:\/\/www.codemonkey.com\/es\/interactive-cs-tools\/","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-29T16:48:31+00:00","article:modified_time":"2026-10-29T16:55:51+00:00","twitter:card":"summary_large_image","twitter:title":"Free Teacher Tools for Computer Science - CodeMonkey","twitter:description":"Free interactive computer science tools for teachers: a sorting algorithm visualizer, logic gate simulator, data structure playground and linear vs binary search race. No sign-up.","twitter:image":"https:\/\/d3sujgifhk94se.cloudfront.net\/wp-content\/uploads\/2020\/06\/21143425\/codemonkey_logo.png"},"aioseo_meta_data":{"post_id":"31237","title":null,"description":"Free interactive computer science tools for teachers: a sorting algorithm visualizer, logic gate simulator, data structure playground and linear vs binary search race. No sign-up.","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-29 16:46:36","updated":"2026-10-29 16:57:28","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:56:37"},"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\tFree Teacher Tools for Computer Science\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\/"}],"_links":{"self":[{"href":"https:\/\/www.codemonkey.com\/es\/wp-json\/wp\/v2\/pages\/31237","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=31237"}],"version-history":[{"count":3,"href":"https:\/\/www.codemonkey.com\/es\/wp-json\/wp\/v2\/pages\/31237\/revisions"}],"predecessor-version":[{"id":31240,"href":"https:\/\/www.codemonkey.com\/es\/wp-json\/wp\/v2\/pages\/31237\/revisions\/31240"}],"wp:attachment":[{"href":"https:\/\/www.codemonkey.com\/es\/wp-json\/wp\/v2\/media?parent=31237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}