Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	End of Clash of Code 2024: Final Results!
ID	5471838495490048
Created	10 months ago, 1710459386743
Updated	10 months ago, 1710461363264
Code	<!DOCTYPE html> <!-- End of Clash of Code 2024: Results by LeaferStudios Don't know what this competition is? Clash of Code 2024 link: https://www.khanacademy.org/computer-programming/clash-of-code-2024/4768036735336448 RESULTS: 1st Place - LeaferStudios's Team 🏆 at 118.12 points (a 23.48 points victory) 2nd Place - F4stBo1's Team 🥈 at 94.64 points (0.74 points more than 3rd place) 3rd Place - Captain Longtreader's Team 🥉 at 93.9 points (55.2 points more than 4th place) 4th Place - Fifth's Team 🎖️ at 38.7 points Over 1.7k lines of HTML, CSS, and JavaScript to create the special slideshow and detailed final results website. I am a team captain, but the hosts wanted me to create this program (and the Clash of Code 2024 homepage 2 months ago as well). I can't believe I won the Clash of Code! This means I am now a 2x Clash of Code winner (Team Volturious back in 2020 and Team LeaferStudios in 2024) and 1x Clash of Code Champion (the team captain of the 1st place team this year). I have learned a lot about programming and teamwork throughout this competition. --> <!-- (c) 2024-Present Programmed by LeaferStudios@LeaferStudios (https://www.khanacademy.org/profile/kaid_553656479258879622339276/) @Profile: https://www.khanacademy.org/profile/kaid_553656479258879622339276/ @KA_Website: https://www.khanacademy.org/computer-programming/leaferstudios/4934504502870016 --> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, iRUN123ial-scale=1"> <title>End of Clash of Code 2024: Final Results!</title> <script> var scores = { leaferstudios: 118.12, fastboi: 94.64, longtreader: 93.9, fifth: 38.7, }; </script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-components-web/14.0.0/material-components-web.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.min.css"> <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" /> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@250;300;400;500;700;900&family=Google+Sans+Text:ital,wght@0,300..800;1,300..800&family=Roboto+Serif:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet"> <script> var programs = [{ names: "LeaferStudios, Vortex, Washington, Peter, YokieBob, WESTY MEZTY, A+10333", captain: "LeaferStudios", link: "https://www.khanacademy.org/computer-programming/asphalt-ka/5408594426773504", }, { names: "Bearkirb, RedRackham, The Wogglebug, WalkWorthy, Fireball", captain: "Bearkirb", link: "https://www.khanacademy.org/computer-programming/desmos-the-game-beta/6288584194310144", }, { names: "F4stB01, Ackvonhey, ST, Cooke's Ghost, Virtuosa, Electric Dolphin", captain: "F4stB01", link: "https://www.khanacademy.org/computer-programming/new-program/6331321055100928", }, { names: "LeaferStudios, YokieBob, cloudy skies", captain: "LeaferStudios", link: "https://www.khanacademy.org/computer-programming/interactive-khan-academy-clone/5190520652611584?width=700px&height=700px", }, { names: "F4stB01, Cooke's, ST", captain: "Fastboi", link: "https://www.khanacademy.org/computer-programming/i/4932686216085504?width=700&&height=450", }, { names: "NL, Astro, CanonRouge24", captain: "Fifth", link: "https://www.khanacademy.org/computer-programming/hmes/4616905053880320", }, { names: "Ackvonhey, Electric Dolphin, Virtuosa", captain: "F4stB01", link: "https://www.khanacademy.org/computer-programming/mtg-heroes-vs-monsters-card-gamecoc/5089908392902656", }, { names: "Washington, Peter, Vortex", captain: "LeaferStudios", link: "https://www.khanacademy.org/computer-programming/whispers-of-the-night-coc24-trios/5139850239066112", }, { names: "Bearkirb, SufficingPit, Fireball", captain: "Captain Longtreader", link: "https://www.khanacademy.org/computer-programming/wormlike-dirtbike-official-release/4603221086748672", }, { names: "HM Wogglebug TE, Ace Rogers", captain: "Captain Longtreader", link: "https://www.khanacademy.org/computer-programming/ace/5631883154210816", }, { names: "Washington, Peter", captain: "LeaferStudios", link: "https://www.khanacademy.org/computer-programming/pears-challenge/4694765414301696", }, { names: "LeaferStudios, Cloudy Skies", captain: "LeaferStudios", link: "https://www.khanacademy.org/computer-programming/home-team-leaferstudios-clash-of-code-2024/5888601423527936?width=600px", }, { names: "Ackvonhey, Electric Dolphin", captain: "Fastboi", link: "https://www.khanacademy.org/computer-programming/crab-apples-coc/6741196300009472", }, { names: "NL, CanonRogue24", captain: "Fifth", link: "https://www.khanacademy.org/computer-programming/untitled-duck-game-6/5608759125786624", }, { names: "Bearkirb, The Wogglebug", captain: "Captain Longtreader", link: "https://www.khanacademy.org/computer-programming/fruit-ninja-3d/5655503662399488", }, { names: "Cooke's, Virtuosa", captain: "Fastboi", link: "https://www.khanacademy.org/computer-programming/hungry-birds-coc24/6079368599355392", }, { names: "ST, F4stB01", captain: "F4stB01", link: "https://www.khanacademy.org/cs/-/5110133152727040", }, { names: "Vortex, TDJ, YokieBob", captain: "LeaferStudios", link: "https://www.khanacademy.org/cs/i/6632956597813248", }, { names: "Fifth, Mojo", captain: "Fifth", link: "https://khanacademy.org/cs/i/6079968300941312", }, ]; </script> <style> html, body { font-family: 'EB Garamond', 'Lora', arial; height: 100%; width: 100%; margin: 0; padding: 0; background-color: rgb(0, 0, 0); --mdc-typography-font-family: 'Roboto', sans-serif; margin: 0; --mdc-typography-button-text-transform: none; --mdc-theme-primary: rgb(53, 143, 53); --mdc-theme-on-primary: #FFF; } h1 { font-weight: 400; letter-spacing: 0.0px; font-size: 45px; font-family: 'Lora', arial; } h3 { font-family: 'Inter', arial; font-size: 26px; } .p { padding: 45px; line-height: 30px; font-size: 20px; color: #21242c; font-family: 'Inter', arial; } a { color: rgb(37, 121, 230); text-decoration: none; } p a { text-decoration: underline; } a:hover { text-decoration: underline; color: rgb(14, 91, 184); } .big-btn { background-image: url("https://upload.wikimedia.org/wikipedia/commons/6/60/Matterhorn_from_Domh%C3%BCtte_-_2.jpg"); background-size: 108%; background-position: top; background-attachment: none; border: 3px solid rgb(128, 128, 128); background-repeat: none; padding: 45px; color: #FFF; font-size: 15px; cursor: pointer; transition: all 0.2s; box-shadow: inset -400px -400px 0px rgba(0, 0, 0, 0.4); border-radius: 2.54px; } .big-btn:hover { box-shadow: inset -400px -400px 0px rgba(0, 0, 0, 0.3); background-size: 115%; background-position: center -20px; border: 3px solid rgb(0, 179, 255); } .big-btn:active { transform: scale(0.98); border: 3px solid rgb(150, 225, 255); } .big-btn p { letter-spacing: 1.2px; color: rgb(242, 239, 242); font-size: 15px; } .upd { width: 150px; animation: upd 3s infinite; } @keyframes upd { 0% { position: relative; top: 0px; } 50% { position: relative; top: 6px; } 100% { position: relative; top: 0px; } } #programs { width: 100%; display: flex; flex-flow: row wrap; } .program { width: 200px; height: 270px; margin-right: 32px; margin-bottom: 16px; transition: all 0.5s; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15); padding-bottom: 10px; border-radius: 4px; } .program:hover { box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.2); } .program:hover img {} .program img { width: 200px; height: 200px; cursor: pointer; border: none; } .program a { color: #000; font-size: 16px; text-decoration: none; font-family: 'Inter', 'Roboto', 'Google Sans Text', arial; margin: 0; width: 200px; font-weight: 700; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 20px; padding: 0 10px; } .program a:hover { text-decoration: underline; } .program a.userlink { font-size: 14px; font-weight: 400; line-height: 18px; } .program span { padding: 0 10px; line-height: 18px; display: block; width: 200px; font-size: 14px; color: #21242Ca3; } .program span i.material-symbols-outlined { vertical-align: middle; } .top-bar { display: flex; justify-content: space-between; border-bottom: 1px solid rgba(33, 36, 44, 0.16); margin-bottom: 22px; padding-bottom: 10px; } .top-bar .btns { display: inline-flex; } .top-bar .btns .nortnom { background-color: transparent; border: none; margin: 0 0 0 10px; font-family: "Roboto", arial, sans-serif; height: 40px; color: rgb(82, 82, 82); font-weight: 500; outline: none; border-radius: 4px; cursor: pointer; font-size: 16px; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: relative; } .top-bar .btns .active { background-color: transparent; border: none; margin: 0 0 0 10px; font-family: "Roboto", arial, sans-serif; height: 40px; color: rgba(17, 138, 43); font-weight: 500; outline: none; border-radius: 4px; cursor: default; font-size: 16px; pointer-events: none; } .top-bar .btns .nortnom span { position: relative; line-height: 20px; display: inline-block; } .top-bar .btns .nortnom:hover span:after { content: ''; position: absolute; right: 0; bottom: 0; height: 2px; width: 100%; border-radius: 2px; background-color: rgb(82, 82, 82); } .bronze { display: -webkit-flex; -webkit-flex-flow: row wrap; } .logo { position: absolute; bottom: 0px; right: 0px; z-index: 336; opacity: 1; } .logo img { transition: all 0.12s; width: 50px; } .logo:hover img { transform: scale(1.1); } .bcg { position: fixed; top: 0; left: 0; right: 0; bottom: 0; } h1 { color: #ffffff; font-weight: 600; width: 100%; margin: 0 0 20px 0; font-size: 60px; text-align: center; } .hGlad123 { position: absolute; height: 100%; width: 100%; } .top { overflow: hidden; position: absolute; top: 20px; left: 40px; right: 40px; bottom: 50%; box-shadow: 0px -10px 130px rgba(0, 187, 255, 0.9); } .top h1 { padding-top: 10px; } .hS123 { position: absolute; width: 100%; height: 100%; } .hS123:not(:first-child) { box-shadow: inset -1600px -1600px 0px rgba(0, 14, 66, 0.25); } .hS123.slide01 { background: url('https://upload.wikimedia.org/wikipedia/commons/8/8f/Harald_Sohlberg_-_Winter_Night_in_the_Mountains_-_Google_Art_Project.jpg') no-repeat top center; background-size: 100%; } .bottom .hS123.slide01 { background: url('https://www.khanacademy.org/computer-programming/clash-of-code-2024/4768036735336448/4890481212440576.png') no-repeat center center; background-size: 33%; } .hS123.slide02 { background: url('https://upload.wikimedia.org/wikipedia/commons/c/cc/Digital_rain_animation_medium_letters_shine.gif') no-repeat top center; background-size: cover; } .bottom .hS123.slide02 { background: url('https://upload.wikimedia.org/wikipedia/commons/8/8f/Harald_Sohlberg_-_Winter_Night_in_the_Mountains_-_Google_Art_Project.jpg') no-repeat top center; background-size: 100%; } .hS123.slide03 { background: url('https://upload.wikimedia.org/wikipedia/commons/7/71/Sea_ice_terrain.jpg') no-repeat top center; background-size: cover; } .bottom .hS123.slide03 { background: url('https://upload.wikimedia.org/wikipedia/commons/8/8f/Harald_Sohlberg_-_Winter_Night_in_the_Mountains_-_Google_Art_Project.jpg') no-repeat bottom center; background-size: 100%; } .hS123.slide05 { background: url('https://upload.wikimedia.org/wikipedia/commons/a/a4/Anatomy_of_a_Sunset-2.jpg') no-repeat top center; background-size: cover; } .bottom .hS123.slide05 { background: url('https://upload.wikimedia.org/wikipedia/commons/8/8f/Harald_Sohlberg_-_Winter_Night_in_the_Mountains_-_Google_Art_Project.jpg') no-repeat bottom center; background-size: 100%; } .hS123.slide04 { background: url('https://upload.wikimedia.org/wikipedia/commons/7/7b/P5191496c1resized500.jpg') no-repeat center center; background-size: cover; } .bottom .hS123.slide04 { background: url('https://upload.wikimedia.org/wikipedia/commons/8/8f/Harald_Sohlberg_-_Winter_Night_in_the_Mountains_-_Google_Art_Project.jpg') no-repeat top center; background-size: 100%; } .hS123.slide06 { background: url('https://upload.wikimedia.org/wikipedia/commons/8/87/Chiapas_Rainforest_crop.jpg') no-repeat center center; background-size: cover; box-shadow: inset -16000px -16000px 30px rgba(0, 0, 0, 0.55); } .bottom .hS123.slide06 { background: url('https://upload.wikimedia.org/wikipedia/commons/8/8f/Harald_Sohlberg_-_Winter_Night_in_the_Mountains_-_Google_Art_Project.jpg') no-repeat top center; background-size: 100%; } .hS123.slide07 { background: url('https://upload.wikimedia.org/wikipedia/commons/d/d7/Confetti_%285879576562%29.jpg') no-repeat top center; background-size: cover; } .bottom .hS123.slide07 { background: url('https://upload.wikimedia.org/wikipedia/commons/b/bb/Brooklyn_Bridge_at_night.jpg') no-repeat TOP center; background-size: 120%; } .bottom { overflow: hidden; position: absolute; top: 50%; left: 40px; right: 40px; bottom: 20px; box-shadow: 0px 10px 130px rgba(0, 187, 255, 0.9); } .bottom p { font-family: 'Roboto', sans-serif; font-size: 16px; color: #FFF; font-weight: 300; line-height: 20px; text-align: center; padding: 0 20px; } .bottom a { color: #fff; } #slideNav { z-index: 05; position: fixed; right: 0px; top: 50%; width: 50px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } #slideNav ul { list-style: none; color: #ffffff; font-size: 13px; text-align: center; margin: 0; padding: 0; } #slideNav li { width: 50px; height: 50px; line-height: 50px; background-color: rgba(0, 0, 0, 0.7); margin-bottom: 1px; } #slideNav a { display: block; width: 50px; height: 50px; position: relative; overflow: hidden; text-decoration: none; color: #ffffff; } .chart { background-image: linear-gradient(-90deg, rgb(200, 250, 215, 0.8), rgb(255, 255, 255)); padding: 0px; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); transition: all 0.12s; cursor: pointer; margin-bottom: 45px; position: absolute; top: 0; left: 50%; transform: translateX(-50%); } .chart:hover { box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.4); } h1 a { color: rgb(186, 219, 255); transition: all 0.3s; } h1 a:hover { color: rgb(214, 234, 255); } </style> </head> <body> <div class='scene'> <div class="bcg"> <a href="https://www.khanacademy.org/profile/kaid_553656479258879622339276/projects" class="logo"><img src="https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/avatars/leafers-ultimate.png" /></a> <div class="hGlad123"> <div class="top"> <a href="https://www.khanacademy.org/profile/kaid_553656479258879622339276/projects" class="logo" style='display:none;'><img src="https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/avatars/leafers-ultimate.png" /></a> <div class="hS123 slide01 on123"> <h1 class='mdc-typography mdc-typography--headline3' style='font-family:"Roboto Serif", "Roboto", sans-serif;'>Clash of Code 2024 Final Results</h1> <p class='mdc-typography mdc-typography--body2' style='color:#FFF;text-align:center;'>Click on the arrows to the right to navigate up and down.</p> </div> <div class="hS123 slide02" style='box-shadow:inset -10000px -10000px 300px rgba(0,0,0,0.45);'> <h1 class='mdc-typography mdc-typography--headline3'>Total Team Scores</h1> <p class='mdc-typography mdc-typography--body2' style='color:#FFF;text-align:center;'>Hover over the graph bars to view the total scores.</p> </div> <div class="hS123 slide03"> <h1 class='mdc-typography mdc-typography--headline3'>4th Place: <a href='https://www.khanacademy.org/computer-programming/the-aviators-homepage-wip/5012988001173504' target='_blank'>Fifth's Team</a></h1> <p class='mdc-typography mdc-typography--body2' style='color:#FFF;text-align:center;'>38.7 points</p> </div> <div class="hS123 slide04"> <h1 class='mdc-typography mdc-typography--headline3'>3rd Place: <a href='https://www.khanacademy.org/computer-programming/homepage-wip/5727621854969856' target='_blank'>Captain Longtreader's Team</a></h1> <p class='mdc-typography mdc-typography--body2' style='color:#FFF;text-align:center;'>93.9 points</p> </div> <div class="hS123 slide05"> <h1 class='mdc-typography mdc-typography--headline3'>2nd Place:<a href='https://www.khanacademy.org/computer-programming/i/6414097013981184' target='_blank'> F4stBo1's Team</a></h1> <p class='mdc-typography mdc-typography--body2' style='color:#FFF;text-align:center;'>94.64 points</p> </div> <div class="hS123 slide06"> <h1 class='mdc-typography mdc-typography--headline3'>1st Place: <a href='https://www.khanacademy.org/computer-programming/team-leaferstudios-clash-of-code-2024/5888601423527936' target='_blank'>LeaferStudios's Team</a></h1> <p class='mdc-typography mdc-typography--body2' style='color:#FFF;text-align:center;'>118.12 points</p> </div> <div class="hS123 slide07" style='box-shadow:inset -10000px -10000px 300px rgba(0,0,0,0.45);'> <h1 class='mdc-typography mdc-typography--headline3'>Congratulations, Team LeaferStudios!</h1> </div> </div> <div class="bottom"> <div class="hS123 slide01 on123"> <a href='https://www.khanacademy.org/computer-programming/clash-of-code-2024/4768036735336448?width=600px&height=600px' target='_blank'> <p style='position:absolute;bottom:0px;right:0px;'> <i class='material-symbols-outlined'>open_in_new</i> </p> </a> </div> <div class="hS123 slide02"> <canvas id="myChart" class="chart"></canvas> <a href='https://www.khanacademy.org/computer-programming/clash-of-code-2024/4768036735336448?qa_expand_key=ag5zfmtoYW4tYWNhZGVteXJACxIIVXNlckRhdGEiHWthaWRfNTUzNjU2NDc5MjU4ODc5NjIyMzM5Mjc2DAsSCEZlZWRiYWNrGICAi--MisEIDA&qa_expand_type=comment' target='_blank'> <p style='position:absolute;bottom:0px;right:0px;'> <i class='material-symbols-outlined'>open_in_new</i> </p> </a> </div> <div class="hS123 slide03"> <p> Team FifthState had a rocky start, only entering 2/3 of their first round projects, which put them at a severe disadvantage to the other teams. While they managed to create some of the most unique and original programs throughout the challenges, they ultimately fell short in the final challenge and were unable to produce an entry. </p> </div> <div class="hS123 slide04"> <p> Team Bearkirb (formerly Longtreader) suffered early on with the inactivity of their captain and the majority of their team, putting them at a significant disadvantage after the first challenge. However, after a change in leadership made Bearkirb the acting captain, they delivered a series of strong entries that capitalized on Bearkirb's advanced programming knowledge. Their programs only managed to get better as the competition progressed. </p> </div> <div class="hS123 slide05"> <p> Team F4stBo1 lept off to a blazing start, taking first place after the pairs challenge and delivering some smashing games and graphics. On and off KA, they proved to be one of the chattiest teams, and communication seemed to be one of their strongest assets. While their activity level tapered off by the final round, they still managed to put forth a strong effort throughout the competition. </p> </div> <div class="hS123 slide06"> <p> Team LeaferStudios was the most consistent team throughout the competition. Led by an expert in both web design and gameplay, they created a wide variety of stunning programs. Because they never suffered from the same plague of inactivity like other teams, they quickly overtook Team Fastboi after the second challenge, propelling them into 1st place for the grand finale. </p> </div> <div class="hS123 slide07"> <p> Team Roster: LeaferStudios [Team Captain], Vortex (Inactive), TDJ (Inactive), Washington, cloudy skies (Inactive), Peter, YokieBob, WESTY MEZTY, and A+10333. <br><br> For more information, <a href='https://www.khanacademy.org/computer-programming/home-team-leaferstudios-clash-of-code-2024/5888601423527936?width=600px' target='_blank'>Visit their homepage!</a><br><br> <button onclick='switchScene(1);' class="mdc-button mdc-button--raised mdc-button--leading" style='position:relative;top:-4px;'> <span class="mdc-button__ripple"></span> <i class="material-symbols-outlined mdc-button__icon" aria-hidden="true">home</i> <span class="mdc-button__label">Next</span> </button> </p> </div> </div> </div> <div id="slideNav"> <ul> <li class="sN_P123"> <a href="#" title="Go to previous slide"> <span class="material-symbols-outlined"> arrow_upward </span> </a> </li> <li class="sN_N123"> <a href="#" title="Go to next slide"> <span class="material-symbols-outlined"> arrow_downward </span> </a> </li> </ul> </div> </div> </div> <div class='scene p' style='background-color:#FFF;'> <div class='top-bar'> <div> <h2 style='padding:0px;margin:0px;'>Clash of Code '24</h2> </div> <div class='btns'> <button class='nortnom' onclick='switchIQ(0);'><span>Results</span></button> <button class='nortnom' onclick='switchIQ(1);'><span>Entries</span></button> <button class='nortnom' onclick='switchIQ(2);'><span>About</span></button> </div> </div> <div class='iq2'> <h1 style='line-height:60px;color:#333;font-size:40px;font-family:"Roboto"'>Congratulations to <span style='color: rgb(12, 125, 33);'>Team LeaferStudios</span> for winning Clash of Code 2024!</h1><button class="mdc-button mdc-button--raised" onclick='switchScene(0);'> <span class="mdc-button__ripple"></span> <i class="material-symbols-outlined mdc-button__icon" aria-hidden="true">replay</i> <span class="mdc-button__label">Back </span> </button> <button class="mdc-button mdc-button--outlined mdc-button--icon-leading" onclick='runPw(1);'> <span class="mdc-button__ripple"></span> <i class="material-symbols-outlined mdc-button__icon" aria-hidden="true">celebration</i> <span class="mdc-button__label">Circle Confetti </span> </button> <button class="mdc-button mdc-button--outlined mdc-button--icon-leading" onclick='runPw(0);'> <span class="mdc-button__ripple"></span> <i class="material-symbols-outlined mdc-button__icon" aria-hidden="true">celebration</i> <span class="mdc-button__label">Avatar Confetti </span> </button> <div class="mdc-card" style='margin: 20px 0;'> <div class="mdc-card__primary-action" tabindex="0"> <div class="mdc-card__ripple"> </div> <div style='padding:0px 15px;'> <h2>LeaferStudios@LeaferStudios</h2> <p style='font-size:16px;line-height:20px;'>Team Captain - Clash of Code 2024 Champion. Below are my teammates and my final messages to them.</p> </div> </div> <div class="mdc-card__actions"> <a href='https://www.khanacademy.org/profile/kaid_553656479258879622339276' target='_blank'><button class="mdc-button mdc-card__action mdc-card__action--button"> <div class="mdc-button__ripple"></div> <span class="mdc-button__label">Profile Link</span> </button></a> </div> </div> <div class="mdc-card" style='margin: 20px 0;'> <div class="mdc-card__primary-action" tabindex="0"> <div class="mdc-card__ripple"> </div> <div style='padding:0px 15px;'> <h2>Vortex@ZacharyBellante</h2> <p style='font-size:16px;line-height:20px;'>My first round pick, programmed very high quality entries for the 1st and 2nd rounds and contributed to the grand finale project as well. Also made a great PJS intro for us!</p> </div> </div> <div class="mdc-card__actions"> <a href='https://www.khanacademy.org/profile/kaid_1191832568232610683566773/' target='_blank'><button class="mdc-button mdc-card__action mdc-card__action--button"> <div class="mdc-button__ripple"></div> <span class="mdc-button__label">Profile Link</span> </button></a> </div> </div> <div class="mdc-card" style='margin: 20px 0;'> <div class="mdc-card__primary-action" tabindex="0"> <div class="mdc-card__ripple"> </div> <div style='padding:0px 15px;'> <h2>TDJ@tdj.ka</h2> <p style='font-size:16px;line-height:20px;'>My second round pick, very active for the first round but went inactive for the second round. Still, great work!</p> </div> </div> <div class="mdc-card__actions"> <a href='https://www.khanacademy.org/profile/kaid_682972421482671044758972/' target='_blank'><button class="mdc-button mdc-card__action mdc-card__action--button"> <div class="mdc-button__ripple"></div> <span class="mdc-button__label">Profile Link</span> </button></a> </div> </div> <div class="mdc-card" style='margin: 20px 0;'> <div class="mdc-card__primary-action" tabindex="0"> <div class="mdc-card__ripple"> </div> <div style='padding:0px 15px;'> <h2>Washington@SnowFalcon</h2> <p style='font-size:16px;line-height:20px;'>Was very active throughout and contributed a lot during all 3 rounds. Great communication between me and the rest of the team as well!</p> </div> </div> <div class="mdc-card__actions"> <a href='https://www.khanacademy.org/profile/kaid_701855056246665520276831/' target='_blank'><button class="mdc-button mdc-card__action mdc-card__action--button"> <div class="mdc-button__ripple"></div> <span class="mdc-button__label">Profile Link</span> </button></a> </div> </div> <div class="mdc-card" style='margin: 20px 0;'> <div class="mdc-card__primary-action" tabindex="0"> <div class="mdc-card__ripple"> </div> <div style='padding:0px 15px;'> <h2>cloudy skies@cloudy000</h2> <p style='font-size:16px;line-height:20px;'>Great teammate who contributed on the 1st and 2nd rounds before going inactive. Worked very well with me on the 2 HTML entries we made!</p> </div> </div> <div class="mdc-card__actions"> <a href='https://www.khanacademy.org/profile/kaid_880912573786397212785584/' target='_blank'><button class="mdc-button mdc-card__action mdc-card__action--button"> <div class="mdc-button__ripple"></div> <span class="mdc-button__label">Profile Link</span> </button></a> </div> </div> <div class="mdc-card" style='margin: 20px 0;'> <div class="mdc-card__primary-action" tabindex="0"> <div class="mdc-card__ripple"> </div> <div style='padding:0px 15px;'> <h2>Peter@petercarnahan</h2> <p style='font-size:16px;line-height:20px;'>Amazing game developer who was very active throughout the competition and contributed a lot to our high-scoring entries! Great communicator and collaborator, especially when we were working on our grand finale project: ASPHALT KA. </p> </div> </div> <div class="mdc-card__actions"> <a href='https://www.khanacademy.org/profile/kaid_678430895752882629315799/' target='_blank'><button class="mdc-button mdc-card__action mdc-card__action--button"> <div class="mdc-button__ripple"></div> <span class="mdc-button__label">Profile Link</span> </button></a> </div> </div> <div class="mdc-card" style='margin: 20px 0;'> <div class="mdc-card__primary-action" tabindex="0"> <div class="mdc-card__ripple"> </div> <div style='padding:0px 15px;'> <h2>YokieBob@YokieBob</h2> <p style='font-size:16px;line-height:20px;'>Our first free agent pick, I wanted him on the team because he was very good with 3D and also since TDJ went inactive. Was active for all rounds and programmed a stunning WebGL platformer and contributed to our grand finale project.</p> </div> </div> <div class="mdc-card__actions"> <a href='https://www.khanacademy.org/profile/kaid_681887786554114354822051/' target='_blank'><button class="mdc-button mdc-card__action mdc-card__action--button"> <div class="mdc-button__ripple"></div> <span class="mdc-button__label">Profile Link</span> </button></a> </div> </div> <div class="mdc-card" style='margin: 20px 0;'> <div class="mdc-card__primary-action" tabindex="0"> <div class="mdc-card__ripple"> </div> <div style='padding:0px 15px;'> <h2>WESTY MEZTY@WESTYMEZTY</h2> <p style='font-size:16px;line-height:20px;'>Our second free agent pick, since @cloudy000 went inactive for the grand finale round. Worked very well on a time sensitive project by optimizing the particle system. Active and a great communicator!</p> </div> </div> <div class="mdc-card__actions"> <a href='https://www.khanacademy.org/profile/kaid_7615172111979300259760122/' target='_blank'><button class="mdc-button mdc-card__action mdc-card__action--button"> <div class="mdc-button__ripple"></div> <span class="mdc-button__label">Profile Link</span> </button></a> </div> </div> <div class="mdc-card" style='margin: 20px 0;'> <div class="mdc-card__primary-action" tabindex="0"> <div class="mdc-card__ripple"> </div> <div style='padding:0px 15px;'> <h2>A+10333@a10333</h2> <p style='font-size:16px;line-height:20px;'>Our third free agent pick, since Vortex went inactive a few days before the grand finale round ended. Created amazing car graphics in a short amount of time (just a few days before the grand finale ended) and communicated well with the rest of the team.</p> </div> </div> <div class="mdc-card__actions"> <a href='https://www.khanacademy.org/profile/kaid_7615172111979300259760122/' target='_blank'><button class="mdc-button mdc-card__action mdc-card__action--button"> <div class="mdc-button__ripple"></div> <span class="mdc-button__label">Profile Link</span> </button></a> </div> </div> <p>Clash of Code 2024 Note: Teams may replace inactive members with a free agent, but the total number of active members must not exceed six (including the team captain). I have three free agent members because three of my original drafted members went inactive sometime during the competition.</p> <a href='https://www.khanacademy.org/computer-programming/home-team-leaferstudios-clash-of-code-2024/5888601423527936?width=600px' target='_blank'><button class="mdc-button mdc-button--raised mdc-button--leading"> <span class="mdc-button__ripple"></span> <i class="material-symbols-outlined mdc-button__icon" aria-hidden="true">diversity_3</i> <span class="mdc-button__label"> Team Homepage</span> </button></a> <a href='https://www.khanacademy.org/computer-programming/leaferstudios/4934504502870016?width=600px' target='_blank'><button class="mdc-button mdc-button--raised mdc-button--leading"> <span class="mdc-button__ripple"></span> <i class="material-symbols-outlined mdc-button__icon" aria-hidden="true">notifications_active</i> <span class="mdc-button__label">Subscribe to LeaferStudios</span> </button></a> <br><br> <h1 style='line-height:80px;color:#000;font-family:"Roboto",arial;margin-top:30px;font-size:40px;'>Want to join the fun <b>next year</b>?</h1> <p>The <a href='https://www.khanacademy.org/computer-programming/clash-of-code-2024/4768036735336448' target='_blank'>Clash of Code 2024</a> website has a <b>news thread</b> in the Tips & Thanks section under the program where you can subscribe to get notified when <em>Clash of Code 2025</eM> gets released. Clash of Code is an annual winter competition taking place between February and March. <br><br>If you have any questions about anything on this website, you are welcome to post a question in the Questions section under <b>this program</b>!</p> </div> <div class='iq2'> <h1 style='color:#000;padding: 40px 0px;'>All Entries</h1> <p>Every single Clash of Code 2024 entry by all 4 teams! The number shows which challenge they are for (1 = Challenge One, 2 = Challenge Two, 3 = Challenge Three).</p> <div id='stats'></div> <div id="programs"></div> </div> <div class='iq2'> <h1 style='color:#000;padding: 40px 0px;'>Summary</h1> <p><a href='https://www.khanacademy.org/computer-programming/clash-of-code-2024/4768036735336448' target='_blank'>Clash of Code 2024</a> was the 2024 version of Clash of Code, the biggest annual winter coding competition on Khan Academy. Four expert programmers (Fifth, F4stBo1, Captain Longtreader, and LeaferStudios) each drafted five qualified members to their team, and the competition officially began on February 15th. Throughout 3 challenges lasting 1, 2, and 3 weeks each, the teams had to battle inactivity and create great team projects that would be judged by a panel of strict judges. After challenge 1, Team F4stBo1 had a less than 1 point lead over Team LeaferStudios. Challenge 1 was the duo project, where teams could create a maximum of three projects. Then, after challenge 2, Team LeaferStudios was on top with a solid 5-point lead over Team F4stBo1. Challenge 2 was the trio project, where teams could complete two projects maximum. The grand finale, or challenge 3, was the most important challenge. Each team could submit only one big entry. LeaferStudios's team managed to hold on to the lead after challenge 3, while Team F4stBo1 managed to hold on to second (by less than a point)! Even though Captain Longtreader's team created a high-scoring entry for the grand finale, the gap between them and Team F4stBo1 was too big to catch up. The biggest challenge for all teams was inactivity, with at least a few members from all teams going inactive for various reasons. Fortunately, inactive members can be replaced by people from the free agent list who did not get drafted originally.<br><br>Note: this is just a summary of the overall competition, if you want team summaries then <a onclick='switchScene(0);' href='#'>rewatch the slideshow</a>.</p> </div> <br> <br><br><br> </div> <script src="https://cdn.jsdelivr.net/npm/@tsparticles/confetti@3.0.3/tsparticles.confetti.bundle.min.js"></script> <script type> var runPw = function(t) { var colors = ["#2E7D32", "#00E676"]; var going = false; function frame() { if (t === 0) { confetti({ particleCount: 2, angle: 60, spread: 55, origin: { x: 0 }, colors: colors, shapes: ["image"], decay: 0.9, scalar: 3.2, shapeOptions: { image: { src: "https://cdn.kastatic.org/images/avatars/svg/leafers-ultimate.svg", replaceColor: true, width: 50, height: 50, }, }, }); confetti({ particleCount: 2, angle: 120, spread: 55, origin: { x: 1 }, colors: colors, decay: 0.9, scalar: 3.2, shapes: ["image"], shapeOptions: { image: { src: "https://cdn.kastatic.org/images/avatars/svg/leafers-seed.svg", replaceColor: true, width: 50, height: 50, }, }, }); } else if (t === 1) { confetti({ particleCount: 2, angle: 60, spread: 55, origin: { x: 0 }, colors: colors, }); confetti({ particleCount: 2, angle: 120, spread: 55, origin: { x: 1 }, colors: colors, }); } }; setTimeout(function() { going = true; }, 3500); setInterval(function() { if (going === false) { requestAnimationFrame(frame); } else { } }, 25); }; var devMode = false; function switchScene(index) { if (index === 1) { runPw(1); } for (var i = 0; i < document.getElementsByClassName("scene").length; i++) { document.getElementsByClassName("scene")[i].style.display = 'none'; } document.getElementsByClassName("scene")[index].style.display = 'block'; } function switchIQ(index) { for (var i = 0; i < document.getElementsByClassName("iq2").length; i++) { document.getElementsByClassName("iq2")[i].style.display = 'none'; } for (var i = 0; i < document.getElementsByClassName("nortnom").length; i++) { document.getElementsByClassName("nortnom")[i].classList.remove('active'); } document.getElementsByClassName("nortnom")[index].classList.add('active'); if (devMode === true) { setTimeout(function() { document.getElementsByClassName("iq2")[index].style.display = 'block'; }, 100); } document.getElementsByClassName("iq2")[index].style.display = 'block'; } switchScene(0); switchIQ(0); function runP() { document.getElementById("programs").innerHTML += ` <div class="program"> <img src='https://www.khanacademy.org/computer-programming/clash-of-code-2024/4768036735336448/4890481212440576.png'> <a href='https://www.khanacademy.org/computer-programming/clash-of-code-2024/4768036735336448?qa_expand_key=ag5zfmtoYW4tYWNhZGVteXJACxIIVXNlckRhdGEiHWthaWRfMTYwNjUzMDc5NDYzOTkyMDg1MDkwNDI4DAsSCEZlZWRiYWNrGICAq-TiseYIDA&qa_expand_type=comment' target='_blank'>Challenge 3 Entries! <i class='material-symbols-outlined'style='position:relative;top:6px;'>arrow_forward</i></a> <span> </span> </div> `; for (var i = 0; i < 3; i++) { document.getElementById("programs").innerHTML += ` <a href=${programs[i].link} target="_blank" style='margin:0;padding:0px !important;'> <div class="program"> <img src='https://upload.wikimedia.org/wikipedia/commons/9/9c/Eo_circle_red_white_number-3.svg'> <a style='' href=${programs[i].link} target="_blank">Team: ${programs[i].captain}</a> <span> by ${programs[i].names} </span> </div> </a> `; } document.getElementById("programs").innerHTML += ` <div class="program"> <img src='https://www.khanacademy.org/computer-programming/clash-of-code-2024/4768036735336448/4890481212440576.png'> <a href='https://www.khanacademy.org/computer-programming/clash-of-code-2024/4768036735336448?qa_expand_key=ag5zfmtoYW4tYWNhZGVteXJACxIIVXNlckRhdGEiHWthaWRfNTUzNjU2NDc5MjU4ODc5NjIyMzM5Mjc2DAsSCEZlZWRiYWNrGICAy83r0IkJDA&qa_expand_type=comment' target='_blank'>Challenge 2 Entries! <i class='material-symbols-outlined'style='position:relative;top:6px;'>arrow_forward</i></a> <span> </span> </div> `; for (var i = 3; i < 10; i++) { document.getElementById("programs").innerHTML += ` <a href=${programs[i].link} target="_blank" style='margin:0;padding:0px !important;'> <div class="program"> <img src='https://upload.wikimedia.org/wikipedia/commons/c/c7/Eo_circle_yellow_number-2.svg'> <a style='' href=${programs[i].link} target="_blank">Team: ${programs[i].captain}</a> <span> by ${programs[i].names} </span> </div> </a> `; } document.getElementById("programs").innerHTML += ` <div class="program"> <img src='https://www.khanacademy.org/computer-programming/clash-of-code-2024/4768036735336448/4890481212440576.png'> <a href='https://www.khanacademy.org/computer-programming/clash-of-code-2024/4768036735336448?qa_expand_key=ag5zfmtoYW4tYWNhZGVteXJACxIIVXNlckRhdGEiHWthaWRfMTYwNjUzMDc5NDYzOTkyMDg1MDkwNDI4DAsSCEZlZWRiYWNrGICAy5yYhZEJDA&qa_expand_type=comment' target='_blank'>Challenge 1 Entries! <i class='material-symbols-outlined'style='position:relative;top:6px;'>arrow_forward</i></a> <span> </span> </div> `; for (var i = 10; i < programs.length; i++) { document.getElementById("programs").innerHTML += ` <a href=${programs[i].link} target="_blank" style='margin:0;padding:0px !important;'> <div class="program"> <img src='https://upload.wikimedia.org/wikipedia/commons/6/66/Eo_circle_green_number-1.svg'> <a style='' href=${programs[i].link} target="_blank">Team: ${programs[i].captain}</a> <span> by ${programs[i].names} </span> </div> </a> `; } }; runP(); </script> <!-- KA_Legacy_LeaferStudios 1.0 by LeaferStudios (https://www.khanacademy.org/profile/kaid_553656479258879622339276) --> <script src='https://cdn.jsdelivr.net/gh/longfields/KA_Legacy_LeaferStudios@aa6b4467fb683ebebe198797f39ba2000ef17112/legacy.js'></script> <script type> KA_Legacy_LeaferStudios(590, 700, 600, 'https://www.khanacademy.org/computer-programming/end-of-clash-of-code-2024-final-results/5471838495490048', 300, 600, 400); </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenLite.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TimelineLite.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/plugins/CSSPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/material-components-web/14.0.0/material-components-web.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js@4.3.0/dist/chart.umd.min.js"></script> <script type> (function($) { const ctx = document.getElementById('myChart'); new Chart(ctx, { type: 'bar', data: { labels: ['Fifth', 'Captain Longtreader', 'F4stBo1', 'LeaferStudios'], datasets: [{ label: 'Total Team Points', data: [scores.fifth, scores.longtreader, scores.fastboi, scores.leaferstudios], backgroundColor: ["blue", 'gray', "orange", 'green'], borderWidth: 2, }], }, options: { layout: { padding: 0 }, scales: { y: { beginAtZero: true } } } }); var $on123Slide = $(".on123"), $hS123 = $(".hS123"), $sN_P123 = $(".sN_P123"), $sN_N123 = $(".sN_N123") $sN_P123A = $(".sN_P123 a"), $sN_N123A = $(".sN_N123 a"), $hGlad123 = $(".hGlad123"); var buttons = document.querySelectorAll('.mdc-button'); for (var button of buttons) { mdc.ripple.MDCRipple.attachTo(button); } var textFields = document.querySelectorAll('.mdc-text-field'); for (var textField of textFields) { mdc.textField.MDCTextField.attachTo(textField); } $(document).mousemove(function(event) { var xPos = (event.clientX / $(window).width()) - 0.5; var yPos = (event.clientY / $(window).height()) - 0.5; TweenLite.to($hGlad123, 0.5, { rotationY: 17 * xPos, rotationX: 17 * yPos, ease: Power1.easeOut, transformPerspective: 650, transformOrigin: "center" }); }); function iRUN123() { TweenLite.set($hS123.not($on123Slide), { autoAlpha: 0 }); TweenLite.set($sN_P123, { autoAlpha: 0.2 }); } iRUN123(); function gT_N_S123(slideOut, slideIn) { var tl = new TimelineLite(), slideOutH1 = slideOut.find('h1'), slideOutP = slideOut.find('p'), slideInH1 = slideIn.find('h1'), slideInP = slideIn.find('p'), index = slideIn.index(), size = $('.top .hS123').length; if (slideIn.length !== 0) { tl .set(slideIn, { y: '100%', autoAlpha: 1, className: '+=on123' }) .set(slideOut, { className: '-=on123' }) .to([slideOutH1, slideOutP], 0.3, { y: '-=15px', autoAlpha: 0, ease: Power3.easeInOut }, 0) .to(slideOut, 0.5, { y: '-100%', ease: Power3.easeInOut }, 0) .to(slideIn, 0.5, { y: '-=100%', ease: Power3.easeInOut }, 0) .fromTo([slideInH1, slideInP], 0.3, { y: '+=20px', autoAlpha: 0 }, { autoAlpha: 1, y: 0, ease: Power1.easeInOut }, 0.3); } TweenLite.set($sN_P123, { autoAlpha: 1 }); if (index === size) { TweenLite.to($sN_N123, 0.3, { autoAlpha: 0.2, ease: Linear.easeNone }); } } $sN_N123.click(function(e) { e.preventDefault(); var slideOut = $('.hS123.on123'), slideIn = $('.hS123.on123').next('.hS123'); gT_N_S123(slideOut, slideIn); }); function gT_P_S123(slideOut, slideIn) { var tl = new TimelineLite(), slideOutH1 = slideOut.find('h1'), slideOutP = slideOut.find('p'), slideInH1 = slideIn.find('h1'), slideInP = slideIn.find('p'), index = slideIn.index(), size = $('.top .hS123').length; if (slideIn.length !== 0) { tl .set(slideIn, { y: '-100%', autoAlpha: 1, className: '+=on123' }) .set(slideOut, { className: '-=on123' }) .to([slideOutH1, slideOutP], 0.3, { y: '+=15px', autoAlpha: 0, ease: Power3.easeInOut }, 0) .to(slideOut, 0.5, { y: '100%', ease: Power3.easeInOut }, 0) .to(slideIn, 0.5, { y: '+=100%', ease: Power3.easeInOut }, '-=0.5') .fromTo([slideInH1, slideInP], 0.3, { y: '-=20px', autoAlpha: 0 }, { autoAlpha: 1, y: 0, ease: Power1.easeInOut }, 0.3); } TweenLite.set($sN_N123, { autoAlpha: 1 }); if (index === 1) { TweenLite.to($sN_P123, 0.3, { autoAlpha: 0.2, ease: Linear.easeNone }); } } $sN_P123.click(function(e) { e.preventDefault(); var slideOut = $('.hS123.on123'), slideIn = $('.hS123.on123').prev('.hS123'); gT_P_S123(slideOut, slideIn); }); })(jQuery); </script> <script> console.log('(c) 2024-Present Programmed by LeaferStudios@LeaferStudios (https://www.khanacademy.org/profile/kaid_553656479258879622339276/projects)'); </script> <script type> /** * Image for Thumbnail by LeaferStudios * For a better thumbnail */ document.body.addEventListener("keydown", function(e) { if (e.code === "Escape") { document.body.innerHTML = ` <div style='position:absolute;top:0;left:0;right:0;bottom:0;background-image:linear-gradient(-184deg,rgb(3, 50, 82),rgb(27, 114, 143));'></div> <div class='center' style="overflow:hidden;height:600px;width:600px;background-image:url('https://upload.wikimedia.org/wikipedia/commons/0/0b/Hans_Gude--Vinterettermiddag--1847.jpg');background-repeat:no-repeat;background-size:120%;background-position:center;opacity:0.8;"> </div> <h1 style="position:relative;top:-542px;font-size:45px;margin-bottom:10px;letter-spacing:5px;color:rgb(255, 255, 255);text-align:center;text-shadow:5px 5px 6px rgba(5, 54, 79);opacity:1;font-family:georgia;">Clash of Code 2024 <div style='margin-top:20px;font-size:130px;color:rgb(180, 240, 158);font-family:"Roboto Serif";position:relative;top:-35px;'>Results</div></h1> <p style="text-shadow:5px 5px 20px rgba(0, 0, 0);position: absolute;top:460px;left:50%;transform:translateX(-50%);width:600px;font-size:26px;letter-spacing:3px;color:rgb(255, 255, 255);text-align:center;"> 1750+ lines of code</p> <p style="text-shadow:5px 5px 20px rgba(255, 255, 255,0.4);position: absolute;top:307px;left:0%;transform:translateX(-15%);width:600px;font-size:40px;margin: 0 90px;letter-spacing:3px;color:rgb(255, 255, 255);text-align:center;font-family:'Roboto';"> The moment you've been<br> waiting for!</p> <p style="text-shadow:5px 5px 30px rgba(255, 255, 255);position: relative;top:-279px;height:0px;font-size:23px;letter-spacing:3px;color:rgb(255, 255, 255);text-align:center;font-family:'Roboto Serif', serif;">"A <span style='font-weight:500;color:rgb(88, 245, 94);'>LeaferStudios</span> <em>Phase II</em> Website"</p> <div style='background:rgba(255, 255, 255,0.8);height:60px;position: relative;top:-990px;'> <p style="text-shadow:5px 5px 30px rgba(207, 155, 35);position:relative;top:112px;height:0px;font-size:35px;letter-spacing:7px;color:rgb(255, 221, 143);text-align:center;font-family:'Roboto';font-weight:500;">THE WINNER REVEALED</p> </div><img src='https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/avatars/leafers-ultimate.png' style='position:absolute;top:87%;left:87%;transform:translate(-50%,-50%);width:153px;display:none;'> `; } }); </script> <!-- The Thumbnail Script 2.0.0 10/24/2023 by Bluebird@kaid_157624541333313939750668 --> <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script> <script type> // The Thumbnail Script 2.0.0 10/24/2023 by Bluebird@kaid_157624541333313939750668 var r = 600; var s = document.documentElement.clientWidth; window.parent.html2canvas = e => { try { html2canvas(document.body, { width: s, height: s, useCORS: true, }).then(e => { var c = document.createElement("canvas"); c.width = r; c.height = r; c.getContext('2d').drawImage(e, 0, 0, e.width, e.height, 0, 0, r, r); window.top.postMessage(c.toDataURL(), ""); }).catch(e => { alert("Thumbnail Script Error: " + e); }); } catch { window.top.postMessage(document.createElement("canvas").toDataURL(), "*"); } }; </script> </body> </html> <!-- (c) 2024-Present Programmed by LeaferStudios@LeaferStudios (https://www.khanacademy.org/profile/kaid_553656479258879622339276/) You CANNOT COPY this program unless you create a Spin-Off of this program on Khan Academy. You will get flagged otherwise. However, I am willing to answer any question you have to help you achieve your web development goals! Ask below in the Questions tab. -->
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgKvuupPcCQw
Votes	8
Spin-Offs	0
Type	WEBPAGE
Width	400
Height	400
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	true
By Child	false
Author Nick	LeaferStudios
Author Name	LeaferStudios
Author ID	kaid_553656479258879622339276
Author Profile Access	PUBLIC

Archive Data

Added	10 months ago, 1710461406663
Updated	10 months ago, 1710461406663
Source Deleted	unknown