Removing all indentation from selected code in Visual Studio using a keyboard shortcut

๐Ÿ“ฆ Key shortcuts
โœจ The Prompt Phrase
What keyboard shortcut, pressed repeatedly after selecting all the code, removes all the indentation in Visual Studio?

~Shift + Tab~    --> (Repeatedly)

๐Ÿ’ป Code Preview

๐Ÿ“ฆ All-in-One Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Removing all indentation from selected code in Visual Studio using a keyboard shortcut - Interactive Tutorial</title>
<style>
:root{
  --bg:#0b0b1a; --bg2:#14142b; --card:rgba(255,255,255,.06); --border:rgba(255,255,255,.14);
  --text:#e8e8f5; --muted:#a3a3c2; --purple:#8b5cf6; --blue:#3b82f6; --green:#22c55e;
  --grad:linear-gradient(135deg,var(--purple),var(--blue) 55%,var(--green));
  --code:#0a0a16; --shadow:0 20px 40px rgba(0,0,0,.35);
}
body.light{--bg:#f4f4ff;--bg2:#e8e8fb;--card:rgba(255,255,255,.75);--border:rgba(80,70,160,.2);--text:#1e1b3a;--muted:#55527a;--code:#1e1b3a;--shadow:0 20px 40px rgba(80,70,160,.15)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Segoe UI',system-ui,sans-serif;background:radial-gradient(circle at 20% 0%,var(--bg2),var(--bg) 60%);color:var(--text);line-height:1.7;min-height:100vh}
.progress{position:fixed;top:0;left:0;height:5px;width:0;background:var(--grad);z-index:100;transition:width .2s}
nav{position:sticky;top:5px;z-index:50;display:flex;gap:6px;align-items:center;justify-content:center;flex-wrap:wrap;padding:10px;margin:10px auto;max-width:1000px;background:var(--card);backdrop-filter:blur(14px);border:1px solid var(--border);border-radius:18px}
nav a{text-decoration:none;color:var(--muted);font-size:.82rem;padding:6px 12px;border-radius:999px;transition:.2s}
nav a:hover,nav a:focus-visible{background:var(--grad);color:#fff;outline:none}
.icon-btn{background:var(--card);border:1px solid var(--border);color:var(--text);border-radius:999px;padding:6px 12px;cursor:pointer;font-size:.85rem}
main{max-width:900px;margin:0 auto;padding:0 18px 60px}
section{margin:34px 0}
.glass{background:var(--card);backdrop-filter:blur(14px);border:1px solid var(--border);border-radius:24px;padding:28px;box-shadow:var(--shadow)}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s,transform .7s}
.reveal.show{opacity:1;transform:none}
h2{font-size:1.6rem;margin-bottom:14px}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
p{margin-bottom:12px}
code{font-family:Consolas,monospace;background:rgba(139,92,246,.18);padding:1px 6px;border-radius:6px}
.hero{text-align:center;padding:50px 20px 30px}
.hero h1{font-size:clamp(1.8rem,5vw,3rem);line-height:1.2;margin-bottom:16px}
.sub{color:var(--muted);max-width:640px;margin:0 auto 22px}
.keys{display:flex;justify-content:center;gap:10px;align-items:center;flex-wrap:wrap;margin:22px 0}
kbd{display:inline-block;text-align:center;padding:8px 16px;border-radius:10px;font-family:Consolas,monospace;font-weight:700;background:linear-gradient(#2b2b4d,#1b1b34);color:#fff;border:1px solid rgba(255,255,255,.25);border-bottom-width:4px;box-shadow:0 6px 14px rgba(0,0,0,.3)}
p kbd,li kbd,td kbd,.body kbd,.status kbd{padding:2px 8px;font-size:.85rem;border-bottom-width:3px}
.keys kbd{animation:float 3s ease-in-out infinite}
.keys kbd:nth-child(3){animation-delay:.4s}
@keyframes float{50%{transform:translateY(-8px)}}
.plus{font-size:1.3rem;color:var(--muted)}
.badges{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.badge{padding:6px 14px;border-radius:999px;border:1px dashed var(--border);color:var(--muted);font-size:.85rem;filter:grayscale(1);opacity:.55;transition:.4s}
.badge.on{filter:none;opacity:1;color:#fff;background:var(--grad);border-style:solid;transform:scale(1.06)}
.btn{background:var(--grad);color:#fff;border:none;border-radius:12px;padding:10px 18px;font-weight:600;cursor:pointer;transition:.2s;font-size:.95rem}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(139,92,246,.4)}
.btn.ghost{background:var(--card);border:1px solid var(--border);color:var(--text)}
:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.quote{border-left:4px solid var(--purple);padding:12px 16px;background:rgba(139,92,246,.12);border-radius:0 12px 12px 0;margin:12px 0;text-align:left}
.tip{border-bottom:1px dotted var(--green);cursor:help;position:relative}
.tip::after{content:attr(data-tip);position:absolute;left:50%;bottom:130%;transform:translateX(-50%);width:max-content;max-width:240px;background:#111;color:#fff;padding:8px 12px;border-radius:10px;font-size:.8rem;opacity:0;pointer-events:none;transition:.2s;z-index:10;line-height:1.4}
.tip:hover::after,.tip:focus::after{opacity:1}
ul.list{padding-left:20px}ul.list li{margin-bottom:8px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.mini{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;transition:.25s}
.mini:hover{transform:translateY(-5px) rotate(-.5deg);border-color:var(--purple)}
.mini .e{font-size:1.8rem}
.steps{list-style:none;counter-reset:s}
.steps li{counter-increment:s;display:flex;gap:14px;margin-bottom:12px;align-items:flex-start;cursor:pointer;padding:10px;border-radius:14px;border:1px solid transparent;transition:.2s}
.steps li:hover{background:var(--card)}
.steps li::before{content:counter(s);flex:none;width:34px;height:34px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:700}
.steps li.done{border-color:var(--green)}
.steps li.done::before{content:"โœ“";background:var(--green)}
.editor{background:var(--code);border-radius:16px;border:1px solid var(--border);padding:14px 0;font-family:Consolas,monospace;font-size:.98rem;color:#e6e6f5;outline:none;white-space:pre;overflow-x:auto}
.editor:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(34,197,94,.25)}
.ln{display:block;padding:2px 14px;transition:.15s}
.ln.sel{background:rgba(139,92,246,.45)}
.ln .n{display:inline-block;width:28px;color:#6b6b8f;user-select:none}
.meter{margin-top:12px;height:10px;border-radius:999px;background:var(--card);border:1px solid var(--border);overflow:hidden}
.meter i{display:block;height:100%;width:0;background:var(--grad);transition:width .3s}
.controls{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;align-items:center}
.status{margin-top:10px;color:var(--muted);font-size:.92rem;min-height:1.5em}
.tabs{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.tab{background:var(--card);border:1px solid var(--border);color:var(--muted);padding:8px 14px;border-radius:12px;cursor:pointer}
.tab[aria-selected="true"]{background:var(--grad);color:#fff;border-color:transparent}
.codebox{position:relative;background:var(--code);border-radius:16px;padding:18px;padding-top:44px;font-family:Consolas,monospace;font-size:.92rem;overflow-x:auto;color:#e6e6f5;white-space:pre;border:1px solid var(--border)}
.k{color:#c4a5ff}.s{color:#7ee787}.c{color:#7c7ca3;font-style:italic}.t{color:#79c0ff}.hl{background:rgba(236,72,153,.28);border-radius:4px;padding:0 3px}
.copy{position:absolute;top:8px;right:8px;font-size:.78rem;padding:5px 10px}
.anno{margin-top:12px;padding:12px 16px;border-radius:12px;background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.3)}
details{background:var(--card);border:1px solid var(--border);border-radius:16px;margin-bottom:10px;overflow:hidden}
summary{cursor:pointer;padding:14px 18px;font-weight:600;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"๏ผ‹";float:right;color:var(--green)}
details[open] summary::after{content:"๏ผ"}
details .body{padding:0 18px 14px}
.bad{color:#fb7185}.good{color:var(--green)}
.q{margin-bottom:22px}
.opts{display:grid;gap:8px;margin-top:10px}
.opt{text-align:left;background:var(--card);border:1px solid var(--border);color:var(--text);padding:12px 14px;border-radius:12px;cursor:pointer;font-size:.95rem;transition:.2s}
.opt:hover:not(:disabled){border-color:var(--purple);transform:translateX(4px)}
.opt.right{background:rgba(34,197,94,.25);border-color:var(--green)}
.opt.wrong{background:rgba(251,113,133,.2);border-color:#fb7185;animation:shake .35s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.fb{margin-top:8px;min-height:1.5em;font-size:.9rem}
.score{font-weight:700;font-size:1.1rem}
.cheat{border:2px solid transparent;background:linear-gradient(var(--bg2),var(--bg2)) padding-box,var(--grad) border-box}
body.light .cheat{background:linear-gradient(#fff,#fff) padding-box,var(--grad) border-box}
table{width:100%;border-collapse:collapse;margin-top:10px}
td,th{padding:10px;border-bottom:1px solid var(--border);text-align:left;font-size:.92rem}
footer{text-align:center;color:var(--muted);padding:30px 18px 50px;font-size:.9rem}
.confetti{position:fixed;top:-20px;font-size:1.4rem;pointer-events:none;z-index:200;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg);opacity:.8}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
@media(max-width:600px){.glass{padding:18px}}
</style>
</head>
<body>
<div class="progress" id="progress" role="progressbar" aria-label="Reading progress" aria-valuemin="0" aria-valuemax="100"></div>

<nav aria-label="Tutorial sections">
  <a href="#what">What</a><a href="#why">Why</a><a href="#how">How</a><a href="#demo">Demo</a>
  <a href="#code">Code</a><a href="#mistakes">Mistakes</a><a href="#tips">Tips</a><a href="#quiz">Quiz</a><a href="#summary">Cheat Sheet</a>
  <button class="icon-btn" id="theme" aria-label="Toggle dark or light theme">๐ŸŒ™ / โ˜€๏ธ</button>
</nav>

<main>
  <header class="hero reveal" id="top">
    <p>๐ŸŽฎ Level 4 ยท Beginner ยท ~6 minutes</p>
    <h1><span class="grad">Removing all indentation from selected code</span> in Visual Studio using a keyboard shortcut</h1>
    <p class="sub">Imagine code that has drifted far to the right. โžก๏ธ One shortcut, pressed again and again, slides it back to the left margin.</p>
    <div class="keys" aria-label="Shift plus Tab, pressed repeatedly">
      <kbd>Shift</kbd><span class="plus">+</span><kbd>Tab</kbd><span class="plus">ร— repeat ๐Ÿ”</span>
    </div>
    <div class="quote"><strong>Question:</strong> What keyboard shortcut, pressed repeatedly after selecting all the code, removes all the indentation in Visual Studio?<br><strong>Answer:</strong> <code>Shift + Tab</code> (repeatedly)</div>
    <div class="badges" aria-live="polite">
      <span class="badge" id="b1">๐Ÿ” Explorer</span>
      <span class="badge" id="b2">โฌ…๏ธ Outdenter</span>
      <span class="badge" id="b3">๐Ÿง  Quiz Master</span>
      <span class="badge" id="b4">๐Ÿ† Shortcut Hero</span>
    </div>
  </header>

  <section id="what" class="glass reveal">
    <h2>๐Ÿค” What Is It?</h2>
    <p>Meet Lina. She pasted a block of code, and every line was pushed far to the right by <span class="tip" tabindex="0" data-tip="Indentation is the empty space (tabs or spaces) at the start of a line.">indentation</span>. ๐Ÿ˜ฉ She wanted everything flush against the left edge.</p>
    <p>The trick is simple:</p>
    <ul class="list">
      <li><kbd>Ctrl</kbd> + <kbd>A</kbd> selects all the code.</li>
      <li><kbd>Shift</kbd> + <kbd>Tab</kbd> moves every selected line <strong>one indent level to the left</strong>.</li>
      <li>Press <kbd>Shift</kbd> + <kbd>Tab</kbd> <strong>repeatedly</strong> until nothing is indented anymore.</li>
    </ul>
    <p>This is also called <span class="tip" tabindex="0" data-tip="Outdenting is the opposite of indenting. It moves text back toward the left margin.">outdenting</span>. The Tab key alone does the reverse and indents lines to the right.</p>
  </section>

  <section id="why" class="glass reveal">
    <h2>๐Ÿš€ Why Use It?</h2>
    <div class="grid">
      <div class="mini"><div class="e">๐Ÿงน</div><strong>Clean pasted code</strong><p>Fix code copied with too much leading space.</p></div>
      <div class="mini"><div class="e">๐Ÿ“</div><strong>Start fresh</strong><p>Flush the code left, then re-format it properly.</p></div>
      <div class="mini"><div class="e">โšก</div><strong>Whole blocks at once</strong><p>Every selected line moves together.</p></div>
      <div class="mini"><div class="e">๐ŸŽ›๏ธ</div><strong>Full control</strong><p>One press equals one level, so you decide how far to go.</p></div>
    </div>
  </section>

  <section id="how" class="glass reveal">
    <h2>๐Ÿ› ๏ธ How Does It Work?</h2>
    <p>Click each step as you read it. โœ…</p>
    <ol class="steps" id="steps">
      <li><div><strong>Open your file</strong> in the Visual Studio editor and click inside it.</div></li>
      <li><div><strong>Select the code</strong> you want to fix. Use <kbd>Ctrl</kbd>+<kbd>A</kbd> for the whole file.</div></li>
      <li><div><strong>Press <kbd>Shift</kbd>+<kbd>Tab</kbd></strong> once. Every selected line moves one level left.</div></li>
      <li><div><strong>Repeat</strong> the press until the deepest line reaches the left margin. ๐Ÿ”</div></li>
      <li><div><strong>Check the result.</strong> Use <kbd>Ctrl</kbd>+<kbd>Z</kbd> to undo if you went too far. ๐ŸŽข</div></li>
    </ol>
  </section>

  <section id="demo" class="glass reveal">
    <h2>๐Ÿ•น๏ธ Live Demo: Push It Left!</h2>
    <p>Click the editor, then press <kbd>Ctrl</kbd>+<kbd>A</kbd> and <kbd>Shift</kbd>+<kbd>Tab</kbd>. The buttons work too. Get every line to the left margin! ๐Ÿ</p>
    <div class="editor" id="editor" tabindex="0" role="application" aria-label="Practice editor. Press Control A to select all, then Shift Tab to outdent."></div>
    <div class="meter" aria-hidden="true"><i id="meter"></i></div>
    <div class="controls">
      <button class="btn ghost" id="bAll">Ctrl + A Select all</button>
      <button class="btn" id="bOut">โฌ…๏ธ Shift + Tab</button>
      <button class="btn ghost" id="bIn">โžก๏ธ Tab (indent)</button>
      <button class="btn ghost" id="reset">๐Ÿ”„ Reset</button>
      <span id="presses" aria-live="polite">Presses: 0</span>
    </div>
    <div class="status" id="status" aria-live="polite">Click the editor and select all.</div>
  </section>

  <section id="code" class="glass reveal">
    <h2>๐Ÿงฉ Code Breakdown</h2>
    <div class="tabs" role="tablist" aria-label="Examples">
      <button class="tab" role="tab" aria-selected="true" data-i="0">Before and after</button>
      <button class="tab" role="tab" aria-selected="false" data-i="1">Step by step</button>
      <button class="tab" role="tab" aria-selected="false" data-i="2">Faster alternatives</button>
    </div>
    <div class="codebox" id="codebox" role="tabpanel"></div>
    <div class="anno" id="anno"></div>
  </section>

  <section id="mistakes" class="glass reveal">
    <h2>โš ๏ธ Common Mistakes</h2>
    <details open><summary>โŒ Forgetting to select the code first</summary><div class="body"><p>With no selection, <kbd>Shift</kbd>+<kbd>Tab</kbd> only moves the current line. Select everything first with <kbd>Ctrl</kbd>+<kbd>A</kbd>.</p></div></details>
    <details><summary>โŒ Using Tab instead of Shift + Tab</summary><div class="body"><p><kbd>Tab</kbd> indents to the right. You need <kbd>Shift</kbd> held down to go left.</p></div></details>
    <details><summary>โŒ Expecting one press to do everything</summary><div class="body"><p>Each press moves one level only. Deeply nested lines need more presses.</p></div></details>
    <details><summary>โŒ Removing indentation in indent-sensitive files</summary><div class="body"><p>In languages such as Python or YAML, indentation is part of the meaning. Removing it can break the file.</p></div></details>
    <details><summary>โŒ Focus in the wrong window</summary><div class="body"><p>Click inside the code editor first. In other windows, Tab moves between controls instead.</p></div></details>
  </section>

  <section id="tips" class="glass reveal">
    <h2>๐Ÿ’Ž Pro Tips</h2>
    <ul class="list">
      <li>๐ŸŽจ After flushing left, use <kbd>Ctrl</kbd>+<kbd>K</kbd>, <kbd>Ctrl</kbd>+<kbd>D</kbd> to format the whole document, or <kbd>Ctrl</kbd>+<kbd>K</kbd>, <kbd>Ctrl</kbd>+<kbd>F</kbd> for the selection.</li>
      <li>๐Ÿ”Ž For a one-shot method, press <kbd>Ctrl</kbd>+<kbd>H</kbd>, turn on regular expressions, find <code>^[ \t]+</code>, replace with nothing, and use <em>Replace All</em> in the selection.</li>
      <li>โ†ฉ๏ธ Overshot? Press <kbd>Ctrl</kbd>+<kbd>Z</kbd>.</li>
      <li>๐Ÿงฑ Select only some lines to outdent just that block.</li>
      <li>โš™๏ธ Check your bindings in <em>Tools โ†’ Options โ†’ Environment โ†’ Keyboard</em> (look for <code>Edit.DecreaseLineIndent</code>).</li>
    </ul>
  </section>

  <section id="quiz" class="glass reveal">
    <h2>๐Ÿง  Practice Quiz</h2>
    <p class="score" id="score">Score: 0 / 3</p>
    <div id="quizBox"></div>
  </section>

  <section id="summary" class="glass cheat reveal">
    <h2>๐Ÿ“Œ Summary Card</h2>
    <table>
      <tr><th>Goal</th><th>Shortcut</th></tr>
      <tr><td>Select all code</td><td><kbd>Ctrl</kbd> + <kbd>A</kbd></td></tr>
      <tr><td>Remove indentation (repeat)</td><td><kbd>Shift</kbd> + <kbd>Tab</kbd></td></tr>
      <tr><td>Add indentation</td><td><kbd>Tab</kbd></td></tr>
      <tr><td>Format selection / document</td><td><kbd>Ctrl</kbd>+<kbd>K</kbd>, <kbd>Ctrl</kbd>+<kbd>F</kbd> / <kbd>Ctrl</kbd>+<kbd>K</kbd>, <kbd>Ctrl</kbd>+<kbd>D</kbd></td></tr>
      <tr><td>Undo</td><td><kbd>Ctrl</kbd> + <kbd>Z</kbd></td></tr>
    </table>
    <div class="controls"><button class="btn" id="copySummary">๐Ÿ“‹ Copy cheat sheet</button></div>
  </section>
</main>

<footer>Made with ๐Ÿ’œ ยท Generated by <strong>AI Prompt Dictionary</strong><br>Keep practicing. Every pro was once a beginner! ๐ŸŒŸ</footer>

<script>
(function(){
  var $=function(s){return document.querySelector(s)}, $$=function(s){return Array.prototype.slice.call(document.querySelectorAll(s))};
  var earned={};
  function badge(id){ if(earned[id])return; earned[id]=1; $('#'+id).classList.add('on'); if(Object.keys(earned).length===3) badge('b4'); }
  $('#theme').onclick=function(){document.body.classList.toggle('light')};

  function onScroll(){
    var h=document.documentElement, p=h.scrollTop/(h.scrollHeight-h.clientHeight)*100||0;
    $('#progress').style.width=p+'%'; $('#progress').setAttribute('aria-valuenow',Math.round(p));
  }
  window.addEventListener('scroll',onScroll,{passive:true}); onScroll();
  var io=new IntersectionObserver(function(es){es.forEach(function(e){if(e.isIntersecting)e.target.classList.add('show')})},{threshold:.1});
  $$('.reveal').forEach(function(el){io.observe(el)});

  function confetti(){
    var em=['๐ŸŽ‰','โœจ','๐Ÿ’œ','๐Ÿ’š','โญ','๐ŸŽŠ'];
    for(var i=0;i<40;i++){
      var s=document.createElement('span'); s.className='confetti'; s.textContent=em[i%em.length];
      s.style.left=Math.random()*100+'vw'; s.style.animationDuration=(2+Math.random()*2)+'s'; s.style.animationDelay=Math.random()*.5+'s';
      document.body.appendChild(s); setTimeout(function(x){x.remove()},4800,s);
    }
  }
  function copy(text,btn){
    function ok(){var o=btn.textContent;btn.textContent='Copied โœ“';setTimeout(function(){btn.textContent=o},1400)}
    function fb(){var a=document.createElement('textarea');a.value=text;document.body.appendChild(a);a.select();document.execCommand('copy');a.remove();ok()}
    if(navigator.clipboard&&navigator.clipboard.writeText){navigator.clipboard.writeText(text).then(ok,fb)}else fb();
  }

  $$('#steps li').forEach(function(li){
    li.tabIndex=0;
    function t(){li.classList.toggle('done'); if($$('#steps li.done').length===5)badge('b1')}
    li.onclick=t; li.onkeydown=function(e){if(e.key==='Enter'||e.key===' '){e.preventDefault();t()}};
  });

  /* demo */
  var base=[['function demo() {',0],['if (ok) {',1],['run();',2],['if (more) {',2],['deep();',3],['}',2],['}',1],['}',0]];
  var start=[2,3,4,5,6,5,4,2]; /* extra indent levels */
  var ed=$('#editor'), lv, selected=false, presses=0, won=false;
  function init(){ lv=base.map(function(b,i){return b[1]+start[i]-b[1]+ (b[1]*0)}); lv=[3,4,5,5,6,5,4,3]; selected=false; presses=0; won=false; render(); $('#status').textContent='Click the editor and select all.'; }
  function render(){
    ed.innerHTML='';
    lv.forEach(function(l,i){
      var d=document.createElement('span'); d.className='ln'+(selected?' sel':'');
      var pad=new Array(l+1).join('    ');
      var n=document.createElement('span'); n.className='n'; n.textContent=i+1;
      d.appendChild(n); d.appendChild(document.createTextNode(pad+base[i][0])); ed.appendChild(d);
    });
    var max=Math.max.apply(null,lv), tot=6;
    $('#meter').style.width=Math.min(100,(1-max/tot)*100+ (max===0?0:0))+'%';
    $('#presses').textContent='Presses: '+presses;
  }
  function selAll(){ selected=true; render(); $('#status').textContent='โœ… All lines selected. Now press Shift + Tab.'; }
  function out(){
    if(!selected){ $('#status').textContent='๐Ÿ‘† Select all first (Ctrl + A), or only the current line would move.'; return; }
    var moved=false;
    lv=lv.map(function(l){ if(l>0){moved=true;return l-1} return l });
    if(!moved){ $('#status').textContent='๐Ÿšง Nothing left to remove. Everything is flush left.'; return; }
    presses++; badge('b2'); render();
    var max=Math.max.apply(null,lv);
    if(max===0 || lv.every(function(l){return l===0})){
      $('#status').textContent='๐ŸŽ‰ Done after '+presses+' presses! Everything is flush left.'; if(!won){won=true;confetti()}
    } else $('#status').textContent='โฌ…๏ธ One level removed. Keep pressing!';
  }
  function ind(){
    if(!selected){ $('#status').textContent='๐Ÿ‘† Select all first.'; return; }
    lv=lv.map(function(l){return l+1}); presses++; render(); $('#status').textContent='โžก๏ธ That moved everything right. Use Shift + Tab to go left.';
  }
  ed.addEventListener('keydown',function(e){
    if(e.ctrlKey&&e.code==='KeyA'){e.preventDefault();selAll();return}
    if(e.code==='Tab'){e.preventDefault(); if(e.shiftKey)out(); else ind();}
  });
  ed.onclick=function(){ed.focus()};
  $('#bAll').onclick=selAll; $('#bOut').onclick=out; $('#bIn').onclick=ind; $('#reset').onclick=init;
  init();
  /* fix meter: progress = how much indent removed vs start */
  var origRender=render;
  render=function(){
    origRender();
    var total=lv.reduce(function(a,b){return a+b},0), startTotal=3+4+5+5+6+5+4+3;
    $('#meter').style.width=Math.max(0,Math.min(100,(1-total/startTotal)*100))+'%';
  };
  render();

  /* code tabs */
  var ex=[
    {code:'<span class="c">// Before: pushed too far right</span>\n            <span class="t">if</span> (ok)\n                <span class="t">run</span>();\n\n<span class="c">// After Ctrl+A, then Shift+Tab repeated</span>\n<span class="hl"><span class="t">if</span> (ok)\n    <span class="t">run</span>();</span>',
     note:'๐Ÿงน Each press removes one indent level from every selected line. The structure stays the same, and the code simply moves left.'},
    {code:'<span class="k">Ctrl + A</span>       <span class="c">โ† select all code</span>\n<span class="k">Shift + Tab</span>    <span class="c">โ† press 1: one level left</span>\n<span class="k">Shift + Tab</span>    <span class="c">โ† press 2: another level</span>\n<span class="k">Shift + Tab</span>    <span class="c">โ† keep going until flush left</span>',
     note:'๐Ÿ” "Repeatedly" is the key word. Press until the deepest line reaches the left edge.'},
    {code:'<span class="c">Ctrl+H โ†’ Use Regular Expressions</span>\n<span class="c">Find:</span>    <span class="s">^[ \\t]+</span>\n<span class="c">Replace:</span> <span class="c">(leave empty)</span>\n<span class="c">Scope:</span>   <span class="s">Selection โ†’ Replace All</span>',
     note:'โšก If the code is very deeply indented, Find and Replace with a regular expression removes all leading spaces and tabs in one step.'}
  ];
  function showEx(i){
    $$('.tab').forEach(function(t){t.setAttribute('aria-selected',String(+t.dataset.i===i))});
    $('#codebox').innerHTML='<button class="btn ghost copy" id="copyCode">Copy</button>'+ex[i].code;
    $('#anno').innerHTML=ex[i].note;
    $('#copyCode').onclick=function(){var tmp=document.createElement('div');tmp.innerHTML=ex[i].code;copy(tmp.textContent,this)};
  }
  $$('.tab').forEach(function(t){t.onclick=function(){showEx(+t.dataset.i)}}); showEx(0);
  $('#copySummary').onclick=function(){
    copy('Visual Studio: Ctrl+A = select all | Shift+Tab (repeat) = remove indentation | Tab = indent | Ctrl+K, Ctrl+D = format document | Ctrl+Z = undo',this);
  };

  /* quiz */
  var quiz=[
    {q:'Which shortcut moves selected lines one level to the left?',o:['Tab','Shift + Tab','Ctrl + Tab','Alt + Tab'],a:1,w:'Shift + Tab outdents the selected lines.'},
    {q:'Why do you press it repeatedly?',o:['Each press removes only one indent level','The first press does nothing','It only works twice','It saves the file'],a:0,w:'One press equals one indent level.'},
    {q:'What should you do before pressing Shift + Tab to affect all lines?',o:['Close the file','Select all the code with Ctrl + A','Restart Visual Studio','Press F5'],a:1,w:'Without a selection, only the current line moves.'}
  ];
  var score=0,answered=0,box=$('#quizBox');
  quiz.forEach(function(item,qi){
    var d=document.createElement('div'); d.className='q';
    var h=document.createElement('strong'); h.textContent=(qi+1)+'. '+item.q; d.appendChild(h);
    var opts=document.createElement('div'); opts.className='opts'; d.appendChild(opts);
    var fb=document.createElement('div'); fb.className='fb'; fb.setAttribute('aria-live','polite'); d.appendChild(fb);
    item.o.forEach(function(txt,oi){
      var b=document.createElement('button'); b.className='opt'; b.textContent=txt;
      b.onclick=function(){
        if(oi===item.a){
          b.classList.add('right'); fb.textContent='โœ… Correct! Great job!'; score++; confetti();
          opts.querySelectorAll('.opt').forEach(function(x){x.disabled=true}); answered++;
          if(answered===3){badge('b3');var m=document.createElement('p');m.className='score grad';m.textContent='๐Ÿ† Quiz complete! You can outdent code like a pro!';box.appendChild(m)}
        } else {
          b.classList.add('wrong'); b.disabled=true; fb.textContent='โŒ Not quite. Try again! ๐Ÿ’ช Hint: '+item.w;
        }
        $('#score').textContent='Score: '+score+' / 3';
      };
      opts.appendChild(b);
    });
    box.appendChild(d);
  });
})();
</script>
</body>
</html>
Live Preview