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