Viewing Program

Program Data

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

Title	A Tribute to All Programmers
ID	5329072303800320
Created	7 years ago, 1546029184389
Updated	3 years ago, 1667112419046
Code	<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>A Tribute to All Programmers</title> <!-- Loads special Web fonts --> <link href="https://fonts.googleapis.com/css?family=Space+Mono:700,400\|Open+Sans:700,600,400\|Google+Sans+Display:500\|Material+Icons\|Spirax" rel="stylesheet" /> <script> /* Each cell of the winston mission / var winstonCells = ["<div class='cell' style='background-color:#A1887F;'></div>", "<div class='cell death' style='background-color:#03A9F4;'></div>", "<div class='cell' style='background-color:#A1887F;'><img src='https://www.kasandbox.org/programming-images/cute/WoodBlock.png'/>", "<div class='cell' style='background-color:#A1887F;'><img src='https://www.kasandbox.org/programming-images/cute/WindowTall.png' draggable='false' style='top: -35px;'/>"]; / Objects containing level data / var winstonLevels = [{ title: "Introduction", details: "<p>Winston needs some help getting to his home.</p><p style='font-size:13px;'><b>Click on the block in the menu on the left to add it to the editor on the right. Drag and drop to sort. Right click on the block to delete it. Scroll down to see the map.</b></p>", blocks: "<div class='block' draggable='false'>setWinston(0, 0);</div><div class='block' draggable='false'>moveRight();</div>", cells: [0, 0, 0, 0, 0, 0, 0, 3, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], winner: 7, varLength: 8, }, { title: "Moving Directions", details: "<p>Winston can now move right, down, and up... not just left. See if you can get him home! <b>Note: If you go in water, you drown.</b></p>", blocks: "<div class='block' draggable='false'>setWinston(0, 0);</div><div class='block' draggable='false'>moveLeft();</div><div class='block' draggable='false'>moveDown();</div><div class='block' draggable='false'>moveRight();</div><div class='block' draggable='false'>moveUp();</div>", cells: [0, 0, 0, 1, 0, 0, 0, 0, 1, 1, 0, 1, 0, 1, 1, 0, 1, 1, 0, 0, 0, 1, 3, 0, 1, 1, 1, 1, 1, 1, 1, 1], winner: 22, varLength: 15, }, { title: "For Loops", details: "<p>Isn't there a lot of blocks you need to add? How can you make your code more efficient? You can use a loop to repeat things.</p><p>To use the <b>for loop</b> block, you need to add it first. Then, you can edit the repeating count in the textbox. To add functions inside it, click on the loop block and then click on your function.</p>", blocks: "<div class='block' draggable='false'>setWinston(0, 0);</div><div class='block loop loopCount' draggable='false'>for (var i = 0; i < <span class='select'>[x];</span> i++) {<span class='select'>[y]</span>}</div><div class='block' draggable='false'>moveRight();</div>", cells: [0, 0, 0, 0, 0, 0, 0, 3, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], winner: 7, varLength: 2, }, { title: "For Loops Part 2", details: "<p>Use your skills in for loops to solve the puzzle from before more efficiently.</p>", blocks: "<div class='block' draggable='false'>setWinston(0, 0);</div><div class='block loop loopCount' draggable='false'>for (var i = 0; i < <span class='select'>[x];</span> i++) {<span class='select'>[y]</span>}</div><div class='block' draggable='false'>moveLeft();</div><div class='block' draggable='false'>moveDown();</div><div class='block' draggable='false'>moveRight();</div><div class='block' draggable='false'>moveUp();</div>", cells: [0, 0, 0, 1, 0, 0, 0, 0, 1, 1, 0, 1, 0, 1, 1, 0, 1, 1, 0, 0, 0, 1, 3, 0, 1, 1, 1, 1, 1, 1, 1, 1], winner: 22, varLength: 8, }, { title: "Using Variables", details: "<p>Sometimes, you may want to store information, so you can dynamically use and change it in your program. We can store information in programming with variables. Use the <b>var</b> block to create your own variable.</p><p>When writing a variable in JavaScript, it is broken into pieces:<br><code>var name = content;</code><br><br>The name can be whatever you want as long as it doesn't start with a number. The content can be a string (letters/characters), a number (what we will use), an array, function, etc.</p><p>When calling a variable, you call it by its name without the quotes for the string indicating its a variable. Multiple variables can also be separated by commas: <code>var x = 0, y = 1;</code></p><p><b>Strings:</b> In quotes, <code>var test = "text"</code></p><p><b>Numbers:</b> In no quotes, <code>var test = 5;</code></p><p><b>Other Variables:</b> In no quotes, <code>var test = 5, test2 = test;</code></p>", blocks: "<div class='block' draggable='false'>setWinston(0, 0);</div><div class='block var' draggable='false'>var [x] = [y];</div><div class='block loop' draggable='false'>for (var i = 0; i < loopCount; i++) {<span class='select'>[y]</span>}</div><div class='block' draggable='false'>moveRight();</div>", cells: [0, 0, 0, 0, 0, 0, 0, 3, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], winner: 7, varLength: 3, }, ]; </script> <style> / All the CSS styling / { box-sizing: border-box; } #blocksA .block { padding: 5px; width: 180px; margin: 10px; background-color: #7986CB; color: white; font-family: "Space Mono", sans-serif; font-weight: 400; font-size: 13px; border-radius: 2px; cursor: pointer; } #editorA .block.over { background-color: white !important; color: white !important; border: 2px dashed #EFEFEF; } #editorA .block { width: 100%; margin: 0; padding: 5px; font-family: "Space Mono", sans-serif; background-color: #FAFAFA; color: #7986CB; font-weight: 700; cursor: pointer; font-size: 13px; } #editorA .block:hover { background-color: #EFEFEF; } .cell { width: 10%; padding-top: 10%; position: relative; float: left; margin-left: 2.25%; margin-top: 2.25%; } .cell img { position: absolute; display: inline-block; top: 0; left: 0; width: 100%; height: auto; } .cell .text { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } strong { display: inline-block; margin-top: 15px; width: auto; position: relative; } strong::after { content: ""; position: absolute; bottom: -7px; width: 100%; background-color: #8BC34A; height: 4px; border-radius: 100px; left: 0; animation: grow 0.7s; } .redStrong::after { background-color: #ef5350; } .tealStrong::after { background-color: #009688; } .blueStrong::after { background-color: #26A69A; } @keyframes grow { from { width: 0; } to { width: 100%; } } .scene { position: fixed; top: 0; left: 0; right: 0; bottom: 0; padding: 50px; overflow-y: auto; overflow-x: hidden; display: none; transition: all 0.7s; animation: fade 0.7s; } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } .center { text-align: center; } h1 { font-family: 'Space Mono', sans-serif; margin: 0 0 35px 0; } p { font-family: 'Open Sans', sans-serif; font-size: 16px; } b { font-weight: 600; } .container { position: relative; display: block; } .container::after { content: ""; clear: both; display: table; } .column { float: left; padding: 0 7px; } .c3 { width: 33%; } .fillBg { border-radius: 2px; background-color: #EFEFEF; padding: 10px; height: 100px; position: relative; overflow: hidden; cursor: pointer; background-size: 100%; background-position: center; transition: all 0.3s; } .fillBg p { margin: 0; color: white; } .fillBg p b { font-weight: 700; letter-spacing: 1px; } .fillBg .fillText { position: absolute; bottom: -16px; left: 13px; pointer-events: none; transition: all 0.3s; z-index: 2; } .fillBg:hover { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); transform: scale(1.05); } .fillBg::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6)); background-image: -webikt-linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6)); z-index: 1; transition: all 0.3s; } .fillBg::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8)); background-image: -webikt-linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8)); z-index: 1; opacity: 0; transition: all 0.3s; } .fillBg:hover::before { opacity: 1; } .fillBg:hover::after { opacity: 0; } .fillBg:hover .fillText { bottom: 10px; } .text { position: absolute; top: 50%; left: 50%; transform: translateX(-50%)translateY(-50%); width: 100%; } #stuff1 { animation: floatIn 1s; position: relative; } @keyframes floatIn { 0% { transform: translateX(-50px); opacity: 0; } 10% { transform: translateX(-50px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } .circle { position: absolute; border-radius: 100%; opacity: 0.02; animation: infinite; } #background1 { z-index: -1; position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; transition: all 0.5s; } @keyframes circleAnimation1 { 0% { opacity: 0.05; } 40% { transform: translateX(50px)translateY(100px); opacity: 0.2; } 80% { transform: translateX(-25px)translateY(30px); opacity: 0.1; } 100% { transform: translateX(0px)translateY(0px); opacity: 0.05; } } @keyframes circleAnimation2 { 0% { opacity: 0.1; } 40% { transform: translateX(-50px)translateY(40px); opacity: 0.15; } 80% { transform: translateX(75px)translateY(-30px); opacity: 0.25; } 100% { transform: translateX(0px)translateY(0px); opacity: 0.1; } } #loader { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; } #loader .bar1 { position: absolute; top: 0; left: 0; width: 0; height: 12.5%; background-color: #66BB6A; animation: barIn 0.7s forwards; } #loader .bar2 { position: absolute; top: 12.5%; right: 0; width: 0; height: 12.5%; background-color: #66BB6A; animation: barIn 0.7s 0.1s forwards; } #loader .bar3 { position: absolute; top: 25%; left: 0; width: 0; height: 12.5%; background-color: #66BB6A; animation: barIn 0.7s 0.2s forwards; } #loader .bar4 { position: absolute; top: 37.5%; right: 0; width: 0; height: 12.5%; background-color: #66BB6A; animation: barIn 0.7s 0.3s forwards; } #loader .bar5 { position: absolute; top: 50%; left: 0; width: 0; height: 12.5%; background-color: #66BB6A; animation: barIn 0.7s 0.4s forwards; } #loader .bar6 { position: absolute; top: 62.5%; right: 0; width: 0; height: 12.5%; background-color: #66BB6A; animation: barIn 0.7s 0.5s forwards; } #loader .bar7 { position: absolute; top: 75%; left: 0; width: 0; height: 12.5%; background-color: #66BB6A; animation: barIn 0.7s 0.6s forwards; } #loader .bar8 { position: absolute; top: 87.5%; right: 0; width: 0; height: 12.5%; background-color: #66BB6A; animation: barIn 0.7s 0.7s forwards; } #loader .loading { opacity: 0; animation: leftIn 0.5s 0.6s forwards; position: absolute; top: 50%; left: 50%; transform: translateX(-50%)translateY(-50%); color: white; z-index: 10; text-align: center; width: 50%; margin: 0; } @keyframes leftIn { from { margin-left: -70px; opacity: 0; } to { margin-left: 0; opacity: 1; } } @keyframes barIn { from { width: 0; } to { width: 100%; } } h2 { font-family: "Open Sans", sans-serif; font-weight: 700; font-size: 24px; } .heading { padding: 50px; } .homeBtn { position: absolute; top: 20px; right: 20px; padding: 15px; color: rgba(255, 255, 255, 0.7); cursor: pointer; transition: all 0.1s; } .homeBtn:hover { color: white; text-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); } blockquote { background-color: #EFEFEF; margin: 0; padding: 20px 20px 20px 55px; border-radius: 2px; border-left: 5px solid grey; font-family: "Open Sans", sans-serif; font-size: 15px; font-weight: 500; line-height: 25px; position: relative; } blockquote::before { content: open-quote; position: absolute; top: 30px; left: 15px; font-size: 64px; transform: rotateY(180deg); font-family: "Spirax", sans-serif; color: grey; } blockquote::after { content: close-quote; font-size: 20px; font-weight: bold; font-family: "Spirax", sans-serif; color: grey; } h3 { font-family: "Open Sans", sans-serif; font-size: 20px; } p.label { font-size: 10px !important; font-weight: 600; } .article p { font-size: 13px; line-height: 25px; } .hoverIcon { color: grey; transition: all 0.3s; cursor: pointer; transform: translateX(10px); } .hoverIcon:hover { color: #212121; transform: translateX(0px); } .sceneBg { background-size: cover; background-position: center; background-attachment: fixed; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; } .sceneBg::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(top, rgb(255, 255, 255, 0.3), rgb(255, 255, 255, 1)); background: -webkit-linear-gradient(top, rgb(255, 255, 255, 0.6), rgb(255, 255, 255, 0.9), rgb(255, 255, 255, 1)); } .progBtn { padding: 0 12px; height: 27.5px; border-radius: 2px; border: 2px solid #424242; color: #424242; background-color: transparent; font-size: 13px; font-family: sans-serif; font-weight: bold; position: absolute; top: 19px; left: 140px; filter: blur(0.4px); cursor: pointer; transition: all 0s 0.05s; outline: none; } .progBtn:hover { background-color: #212121; color: white; } .scene.dark { background-color: #212121; } .scene.dark h1, .scene.dark h2, .scene.dark h3, .scene.dark h4, .scene.dark h5, .scene.dark h6, .scene.dark p, .scene.dark li, .scene.dark a { color: white; } .scene.dark i.material-icons { color: white !important; } .progress { position: absolute; top: 50%; left: 50%; transform: translateX(-50%)translateY(-50%); width: 65%; height: 10px; background-color: white; border-radius: 50px; font-family: "Open Sans", sans-serif; font-size: 13px; color: white; font-weight: 700; } .progressInner { position: absolute; top: 3px; left: 4px; bottom: 3px; background-color: #03A9F4; border-radius: 50px; width: 0; transition: all 0.7s; animation: loadingInterim 1.5s infinite; } @keyframes loadingInterim { 0% { width: 0; left: 4px; } 50% { width: 97.5%; left: 4px; } 100% { width: 0; left: 100%; } } .scene.game { padding: 0; } .gameHeader { width: 100%; height: 36px; background-color: #3949AB; font-size: 0; } .gameHeader a { font-family: "Open Sans"; font-size: 13px; line-height: 36px; color: rgb(255, 255, 255, 0.7); padding: 0 20px; text-decoration: none; cursor: pointer; display: inline-block; } .gameHeader a:hover { color: white; text-decoration: underline; } .gameHeader i.material-icons { font-size: 18px; position: relative; top: 3.5px; } .modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.7); display: none; } .modal .body { overflow: auto; position: absolute; top: 50%; left: 50%; width: 400px; height: 200px; background-color: white; margin-left: -200px; margin-top: -100px; border-radius: 2px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); padding: 20px 50px 20px 20px; } .modal i.material-icons { position: absolute; top: 5px; right: 5px; padding: 5px; color: #636363; cursor: pointer; } .modal i.material-icons:hover { color: #212121; } .modal .body h2 { margin: 0; } button.normal { padding: 0 20px; height: 42px; background-color: #00BCD4; font-family: "Open Sans", sans-serif; font-size: 15px; font-weight: 600; color: white; border-radius: 2px; margin-right: 10px; border: 0; cursor: pointer; } button.normal:hover { background-color: #0097A7; } .block.focused { border: 2px dashed lightgrey; padding: 3px !important; } #saveScrn { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; } </style> </head> <body> <div id='saveScrn'> <img src='https://cdn.kastatic.org/images/donate/donation-illustration-earth-v2.png' width='200px' style='display:block;margin:50px auto 0 auto;z-index:6;'/> <h1 class='center' style='margin:0;font-family:open sans;font-size:56px;'>Contest: Be Creative<br>To13's Entry</h1><br> <p style='font-weight:500;font-size:39px;letter-spacing:3px;text-align:center;font-family:google sans display!important;font-weight:500;'><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Circle-icons-trophy.svg/120px-Circle-icons-trophy.svg.png' width='100' style='position:relative;margin-right:0;margin-left:35px;top:0;float:left;'/> WINNER OF ADVANCED WEBPAGES BRACKET</p><br> </div> <!-- All the HTML scene displays --> <div class='scene' style="z-index:5;background:#8BC34A;overflow:hidden;"> <div class='progress' id="outer"> <div class='progressInner' id="inner"></div> <br>Loading external scripts... </div> </div> <div class='scene'> <div id='background1'></div> <h1 id='programmersHeading' class='center' style='margin-bottom:0;position:absolute;left:50%;top:50%;transform:translateX(-50%)translateY(-50%);width:100%;transition: all 0.3s;'></h1> <p id='stuff1' class='center' style='margin-top:80px;display:none;font-size:18px;'>Programmers are more than the stereotypical geeks.<strong>Programmers create our world.</strong></p> <br> <div class='container' id='menu' style='display:none;margin:10px auto 0 auto;animation:floatIn 1s;'> <div class='column c3'> <div class='fillBg' style='background-image:url(https://cdn.kastatic.org/images/donate/donation-illustration-earth.svg);background-color:#E3F2FD;' onclick="sceneSpecial(2, '#039BE5')"> <div class='fillText'> <p><b>Explore</b><br><span style='font-size:13px;' class='fillDesc'>What do we make?</span></p> </div> </div> </div> <div class='column c3'> <div class='fillBg' style='background-image:url(https://cdn.kastatic.org/images/badges/meteorite/cs-scholar-512x512.png);background-size:60%;background-repeat:no-repeat;background-color:#ffcdd2;' onclick="sceneSpecial(3, '#ef5350')"> <div class='fillText'> <p><b>Meet</b><br><span style='font-size:13px;' class='fillDesc'>What do people say?</span></p> </div> </div> </div> <div class='column c3'> <div class='fillBg' style='background-image:url(https://cdn.kastatic.org/genfiles/topic-icons/icons/computing.png-f455e2-128c.png);' onclick="sceneSpecial(4, '#26A69A')"> <div class='fillText'> <p><b>Learn</b><br><span style='font-size:13px;' class='fillDesc'>What do you think?</span></p> </div> </div> </div> </div> </div> <div class='scene' style='padding:0;'> <div class='heading' style='background-color: #039BE5;'> <i class='material-icons homeBtn' onclick="sceneSpecial(1, '#8BC34A')">home</i> <h1 style='color:white;margin-bottom:15px;'>Explore</h1> <p style='margin: 0;color:white;font-weight:600;'>See how programmers strive to bring you everything.</p> </div> <div style='padding:50px;background-color:#FAFAFA;'> <h2 style='margin: 0;'>Games</h2> <p>Your favorite video games (online, on PC, and mobile), are all brought to you by <b>programming</b>.</p> <div class='container' style='margin:20px 0 0 0;'> <div class='column c3'> <div class='fillBg' style='background-image:url(https://upload.wikimedia.org/wikipedia/en/5/57/Pacmance1.jpg);background-color:#E3F2FD;' onclick="changeScene(5)"> <div class='fillText'> <p><b>Pac Man</b><br><span style='font-size:13px;' class='fillDesc'>Code from the past</span></p> </div> </div> </div> <div class='column c3'> <div class='fillBg' style='background-image:url(https://upload.wikimedia.org/wikipedia/en/thumb/c/c9/Minecraft_Mobs.png/330px-Minecraft_Mobs.png);background-color:#ffcdd2;' onclick="changeScene(6)"> <div class='fillText'> <p><b>Minecraft</b><br><span style='font-size:13px;' class='fillDesc'>Programming in 3D</span></p> </div> </div> </div> <div class='column c3'> <div class='fillBg' style='background-image:url(https://upload.wikimedia.org/wikipedia/en/thumb/9/9d/Agario-gameplay.jpg/220px-Agario-gameplay.jpg);' onclick="changeScene(7)"> <div class='fillText'> <p><b>Agar.io</b><br><span style='font-size:13px;' class='fillDesc'>Games on the web</span></p> </div> </div> </div> </div> <br> <h2>Streaming</h2> <p>Your favorite video/music streaming apps is all made with <b>programming</b>! Spotify... Youtube... Netflix... etc.</p> <div class='container' style='margin:20px 0 0 0;'> <div class='column c3'> <div class='fillBg' style='background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Youtube_icon.svg/600px-Youtube_icon.svg.png);background-color:white;' onclick="changeScene(8)"> <div class='fillText'> <p><b>YouTube</b><br><span style='font-size:13px;' class='fillDesc'>Video streaming</span></p> </div> </div> </div> <div class='column c3'> <div class='fillBg' style='background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/1/19/Spotify_logo_without_text.svg/1024px-Spotify_logo_without_text.svg.png);background-color:#DCEDC8;' onclick="changeScene(9)"> <div class='fillText'> <p><b>Spotify</b><br><span style='font-size:13px;' class='fillDesc'>Music streaming</span></p> </div> </div> </div> <div class='column c3'> <div class='fillBg' style='background-image:url(https://upload.wikimedia.org/wikipedia/commons/6/69/Netflix_logo.svg);' onclick="changeScene(10)"> <div class='fillText'> <p><b>Netflix</b><br><span style='font-size:13px;' class='fillDesc'>Movie streaming</span></p> </div> </div> </div> </div> <br> <h2>Education</h2> <p>Being educated is something that is very important for a succesful life. Some people can't access it, but people and companies with ideas use <b>programming</b> to bring it to them.</p> <div class='container' style='margin:20px 0 0 0;'> <div class='column c3'> <div class='fillBg' style='background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/Google_Classroom_Logo.png/220px-Google_Classroom_Logo.png);background-color:white;' onclick="changeScene(12)"> <div class='fillText'> <p><b>Google</b><br><span style='font-size:13px;' class='fillDesc'>Online classrooms</span></p> </div> </div> </div> <div class='column c3'> <div class='fillBg' style='background-image:url(https://cdn.kastatic.org/images/khan-logo-dark-background.new.png);background-color:white;' onclick="changeScene(13)"> <div class='fillText'> <p><b>KA</b><br><span style='font-size:13px;' class='fillDesc'>Online education</span></p> </div> </div> </div> <div class='column c3'> <div class='fillBg' style='background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Coursera.svg/2000px-Coursera.svg.png);background-repeat:no-repeat;background-size:80%;background-position:15px 25px;background-color:white;' onclick="changeScene(14)"> <div class='fillText'> <p><b>Coursera</b><br><span style='font-size:13px;' class='fillDesc'>Online degrees</span></p> </div> </div> </div> </div> <br><br> <p>You can make even more with code! Sports, health, economy, etc. are all subjects that programming can support. Programmers are what makes modern day, modern.</p> </div> </div> <div class='scene' style='padding: 0;'> <div class='heading' style='background-color: #ef5350;'> <i class='material-icons homeBtn' onclick="sceneSpecial(1, '#8BC34A')">home</i> <h1 style='color:white;margin-bottom:15px;'>Meet</h1> <p style='margin: 0;color:white;font-weight:600;'>Hear real voices about how programming creates the world.</p> </div> <div style='padding:50px;background-color:#fafafa;'> <blockquote> Everyone should know how to program a computer, because it teaches you how to think. </blockquote> <p style='margin:0;'><strong class='redStrong'>Quoted by Steve Jobs</strong></p> <br><br> <h3>From the Street to Success</h3> <p style='font-size:13px;font-weight:700;color:grey'>The story of <a href='https://medium.freecodecamp.org/become-how-i-went-from-selling-food-in-the-street-to-working-for-top-firms-in-tech-6aa61a2d0629' target='_blank'>Alvaro Videla</a></p> <br> <blockquote>Back in my hometown of Durazno, Uruguay, my wife was working long hours for a meager $160 (USD) a month. Yes, that’s $1,920 a year. We had sacrificed our time together so I could become a teacher and get a better job because we were dreaming of a better future.</blockquote> <div class='article'> <p>It is no magic to be a good programmer. Stories like Alvaro's shows that even the poorest can become the best, if they seize their chance to be <b>creative</b>.</p> <p>A programmer needs to show creativity, to bring greatness to the world. Creativity is indeed a philosophical theory about imagination and ideas. You may think one who was barely educated, lives in a shack, and has no money has barely a chance to become a well-paid programmer.</p> <blockquote>How do you land a job as a computer programmer when you have almost no programming experience and you lack a university degree to prove your knowledge?</blockquote> <p>Alvaro taught himself how to program in many languages from the basic to the advanced. He persisted, and learned how to code. He didn't give up, like many would do. Programming doesn't only require <b>creativity</b>, but <b>patience</b> and <b>persistence</b> as well. Alvaro had all of that in his programming career.</p> <br> <h3>Hop on the train to success</h3> <button class='normal' onclick="window.open('https://www.khanacademy.org/computing/computer-programming/programming')">Start learning JavaScript</button> </div> </div> </div> <div class='scene' style='padding: 0;'> <div class='heading' style='background-color: #26A69A;'> <i class='material-icons homeBtn' onclick="sceneSpecial(1, '#8BC34A')">home</i> <h1 style='color:white;margin-bottom:15px;'>Learn</h1> <p style='margin: 0;color:white;font-weight:600;'>Now that you know why programmers are important, you can try to program at the most basic level!</p> </div> <div style='padding:50px;background-color:#fafafa;'> <h2 style='margin: 0;'>Get Started</h2> <br> <button class='normal' onclick='changeScene(11)'>Open Winston Mission</button> <br><br><br> <h2>Got it?</h2> <p>Take the full advanced courses on Khan Academy!</p> <button class='normal' onclick="window.open('https://www.khanacademy.org/cs')">Open Khan Academy Computer Science</button> </div> </div> <div class='scene article'> <div class='sceneBg' style='background-image:url(https://upload.wikimedia.org/wikipedia/en/5/57/Pacmance1.jpg)'></div> <h2 style="margin-top:75px;"><i class='material-icons hoverIcon' onclick="changeScene(2)">arrow_backward</i> <strong>Programming in Pac-Man</strong></h2> <br><br> <div style='float:left;width:150px;margin-right:50px;'> <img src="https://upload.wikimedia.org/wikipedia/en/5/57/Pacman-cutscene.png" width="100%" /> <p class='label'>An image of PacMan, an old video game from the 1980s</p> <br> <img src="https://upload.wikimedia.org/wikipedia/en/1/16/Pac_flyer.png" width="100%" /> <p class='label'>Old North American flyer of Pac-Man arcade game</p> <br> <img src="https://upload.wikimedia.org/wikipedia/en/b/b4/Pacman-puckman.jpg" width="100%" /> </div> <h3 style='margin:0;'>Introduction</h3> <p>Pac-Man is an old Japanese arcade game from the 80s. Soon, it became licensed in the U.S. by Midway Games, and became a popular arcade game in the U.S., and soon around the world. In the U.S., if you tell someone Pac-Man, the ywill probably know what it means. Pac-Man, like all other games, required programming. Programming was only at its early stages at the time, when companies like Microsoft and Apple were starting to form.</p> <br> <h3>Creating the Game</h3> <p>Pac-Man was developed by one of the older founding programming languages called C. C is a general purpose, powerful programming language with very structured semantics and lexical variable scope. C is the language that grew into more modern langauges like Java.</p> </div> <div class='scene article'> <div class='sceneBg' style='background-image:url(https://upload.wikimedia.org/wikipedia/en/thumb/c/c9/Minecraft_Mobs.png/330px-Minecraft_Mobs.png)'></div> <h2 style="margin-top:75px;position:relative;"><i class='material-icons hoverIcon' onclick="changeScene(2)">arrow_backward</i> <strong>Programming in <img src="https://upload.wikimedia.org/wikipedia/en/thumb/3/32/Minecraft_logo.svg/330px-Minecraft_logo.svg.png" height="25px" style='margin-left:5px;position:relative;top:3px;' /></strong></h2> <br><br> <div style='float:left;width:150px;margin-right:50px;'> <img src="https://upload.wikimedia.org/wikipedia/en/thumb/b/b1/Minecraft_-_Crafting_a_stone_axe_screenshot.png/330px-Minecraft_-_Crafting_a_stone_axe_screenshot.png" width="100%" /> <p class='label'>Crafting screen</p> <br> <img src="https://upload.wikimedia.org/wikipedia/en/thumb/7/74/Minecraft_city_hall.png/330px-Minecraft_city_hall.png" width="100%" /> <p class='label'>Example construction</p> <br> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Markus_Persson_at_GDC_2011.jpg/330px-Markus_Persson_at_GDC_2011.jpg" width="100%" /> <p class='label'>Creator of Minecraft</p> <br> <img src="https://upload.wikimedia.org/wikipedia/en/thumb/f/fb/OpenGL_logo_%28Nov14%29.svg/330px-OpenGL_logo_%28Nov14%29.svg.png" width="100%" /> <p class='label'>OpenGL logo</p> </div> <h3 style='margin:0;'>Introduction</h3> <p>Minecraft is a 2009 sandbox video game created by Swedish game developer Markus Persson and later developed by Mojang. The game allows players to build with a variety of different blocks in a 3D procedurally generated world, requiring creativity from players. Other activities in the game include exploration, resource gathering, crafting, and combat. (Wikipedia)</p> <br> <h3>Creating the Game</h3> <p>The original version of Minecraft was written with Java along with some lightweight frameworks and built in frameworks such as OpenGL (for creating 2D/3D graphics with programming), so it isn't "pure Java."</p> <p>Open Graphics Library is a cross-language, cross-platform application programming interface for rendering 2D and 3D vector graphics. The API is typically used to interact with a graphics processing unit, to achieve hardware-accelerated rendering. (Wikipedia)</p> <br> <h1>Play with OpenGL</h1> <p>The same technique Minecraft was built with in Java, can be applied with JavaScript in the web as well. See an example of an animated 3D cube on an HTML canvas below using the Processing JavaScript library:</p> <div style='border:1px solid #efefef;position:relative;width:400px;height:400px;overflow:hidden;'> <a href='https://www.khanacademy.org/computer-programming/3d-cube-pjs/6754636696551424/embedded'><button class='progBtn'>Open Code Editor</button></a> <script src="https://www.khanacademy.org/computer-programming/3d-cube-pjs/6754636696551424/embed.js?editor=no&buttons=yes&author=yes&embed=yes" id='program2'></script> </div> </div> <div class='scene article'> <div class='sceneBg' style='background-image:url(https://upload.wikimedia.org/wikipedia/en/thumb/9/9d/Agario-gameplay.jpg/220px-Agario-gameplay.jpg)'></div> <h2 style="margin-top:75px;position:relative;"><i class='material-icons hoverIcon' onclick="changeScene(2)">arrow_backward</i> <strong>Programming in Agar.io</strong></h2> <br><br> <div style='float:left;width:150px;margin-right:50px;'> <img src="https://upload.wikimedia.org/wikipedia/en/1/19/Agar.io_appstore_logo.png" width="100%" /> <p class='label' style='text-align:center;'>Agar.io mobile logo</p> <br><br> <img src="https://upload.wikimedia.org/wikipedia/en/9/9d/Agario-gameplay.jpg" width="100%" /> <p class='label'>Agar.io gameplay</p> <br><br> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/180px-HTML5_logo_and_wordmark.svg.png" width="100%" /> <p class='label' style='text-align:center;'>HTML5 Logo</p> </div> <h3 style='margin:0;'>Introduction</h3> <p>Agar.io is a massively multiplayer online action game created by Matheus Valadares. Players control one or more cells in a map representing a Petri dish. The goal is to gain as much mass as possible by eating agar and cells smaller than the player's cell while avoiding larger ones which can eat the player's cells. Each player starts with one cell, but players can split a cell into two once it reaches a sufficient mass, allowing them to control multiple cells. The name comes from the substance agar, used to culture bacteria.</p> <br> <h3>Creating the Game</h3> <p>Agar.io was built by HTML, CSS, and JS. It is one of the most popular games built with web technologies rather than the fastly dying Flash tool. HTML is a markup language that provides the display (HTML5 Canvas), CSS styles anything that is not written with JavaScript, and JavaScript puts everything inside the canvas and runs the gameplay!</p> <br> <h1>Play with HTML5 Canvas</h1> <p>Agar.io is one of the most popular games built with the growing technology of HTML5 Canvas and JavaScript. As Flash is soon to be deprecated, HTML5 Canvas is the leading the way to develop games. Here is a simple program made with the HTML5 Canvas with the help of Procesing JavaScript:</p> <p><b>Instructions:</b><br>Use the arrow keys to move Hopper through the canvas!</p> <div style='border:1px solid #efefef;position:relative;width:400px;height:400px;overflow:hidden;'> <a href='https://www.khanacademy.org/computer-programming/moving-a-character-example/5747279915286528/embedded' target="_blank"><button style='left:240px;' class='progBtn'>Open Code Editor</button></a> <script src="https://www.khanacademy.org/computer-programming/moving-a-character-example/5747279915286528/embed.js?editor=no&buttons=yes&author=yes&embed=yes" id="program1"></script> </div> </div> <div class='scene'> <i class='material-icons hoverIcon' style='position:absolute;top:30px;left:40px;' onclick="changeScene(2)">arrow_backward</i> <br> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/YouTube_Logo_2017.svg/300px-YouTube_Logo_2017.svg.png" width="40%" style="display:block;margin:auto;" /> <br><br> <h3>What is YouTube?</h3> <p style='font-size:15px;line-height:25px;'>YouTube, LLC is an American video-sharing website headquartered in San Bruno, California. Three former PayPal employees—Chad Hurley, Steve Chen, and Jawed Karim—created the service in February 2005. Google bought the site in November 2006 for US$1.65 billion; YouTube now operates as one of Google's subsidiaries (Wikipedia).</p> <br> <h3>YouTube Development</h3> <p style='font-size:15px;line-height:25px;'>The way the fast, efficient YouTube player has evolved is interesting. It has changed from the Flash Player to using HTML5.</p> <p style='font-size:15px;line-height:25px;'><b>You can see here how Youtube uses HTML5:</b> <a href='https://www.youtube.com/html5'>click here</a>.</p> </div> <div class='scene dark'> <i class='material-icons hoverIcon' style='position:absolute;top:30px;left:40px;' onclick="changeScene(2)">arrow_backward</i> <br> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Spotify_logo_with_text.svg/375px-Spotify_logo_with_text.svg.png" width="40%" style="display:block;margin:auto;" /> <br><br> <h3>What is Spotify?</h3> <p style='font-size:15px;line-height:25px;'>Spotify is a music streaming platform developed by Swedish company Spotify AB, headquartered in Stockholm, Sweden and listed on the New York Stock Exchange. Launched on 7 October 2008, it is currently (as of 14 November 2018) available in 78 countries and regions throughout the world. It provides DRM-protected content from record labels and media companies. Spotify is a freemium service; basic features are free with advertisements or automatic music videos, while additional features, such as improved streaming quality are offered via paid subscriptions. (Wikipedia).</p> <br> <h3>Spotify Development</h3> <p style='font-size:15px;line-height:25px;'>Spotify can be found on many platforms: mobile, web, TV, etc. Mobile: iOS (Swift programming language) and Android (Java is primary)... Web: HTML5/CSS/JS (languages)... TV: various.</p> <br><br> <h1>Play with App Making</h1> <p>Feeling like being that person who makes a world-changing app?</p> <p><b>You need to get the skills down:</b></p> <ul> <li>App Design</li> <li>App Programming</li> </ul> <br> <p><a href='https://studio.code.org/s/applab-intro/stage/1/puzzle/1'>Click here</a> to learn about app design starting with block coding or JavaScript.</p> <br> <h3>Program your own app with Android</h3> <p>Know how to program in Java and think you got it? <a href='https://codelabs.developers.google.com/codelabs/build-your-first-android-app/#0'>Click Here</a></p> </div> <div class='scene'> <i class='material-icons hoverIcon' style='position:absolute;top:30px;left:40px;' onclick="changeScene(2)">arrow_backward</i> <br> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Netflix_2015_logo.svg/2000px-Netflix_2015_logo.svg.png" width="40%" style="display:block;margin:auto;" /> <br><br> <h3>What is Netflix?</h3> <p style='font-size:15px;line-height:25px;'>Netflix, Inc. is an American media-services provider headquartered in Los Gatos, California, founded in 1997 by Reed Hastings and Marc Randolph in Scotts Valley, California. The company's primary business is its subscription-based streaming OTT service which offers online streaming of a library of films and television programs, including those produced in-house. As of October 2018, Netflix has 137 million total subscribers worldwide, including 58.46 million in the United States. It is available worldwide except in mainland China, Syria, North Korea, and Crimea. The company also has offices in the Netherlands, Brazil, India, Japan, and South Korea. (Wikipedia)</p> <br> <h3>Netflix Development</h3> <p style='font-size:15px;line-height:25px;'>Spotify can be found on many platforms: mobile, web, TV, etc. Mobile: iOS (Swift programming language) and Android (Java is primary)... Web: HTML5/CSS/JS (languages)... TV: various.</p> <p style='font-size:15px;line-height:25px;'><b>You can see here how Youtube uses HTML5:</b> <a href='https://www.youtube.com/html5'>click here</a>.</p> <br><br> <h1>TV Development</h1> <p style='font-size:15px;line-height:25px;'>You know that people make stuff in mobile and the web, but what about TVs? What is the story behind that?</p> <p style='font-size:15px;line-height:25px;'><b>TV</b> development requires not just programming skills, but a lot of designing skills. TVs work different than a website or app and you need to know HOW you can make a TV app user friendly.</p> <p style='font-size:15px;line-height:25px;'>What do you notice about TV app designs? Take a look at some examples to ponder this question. <a href='https://uimovement.com/category/14/tv/'>Click here</a>.</p> <br> <h3>Start Programming</h3> <p style='font-size:15px;line-height:25px;'><a href='https://developer.android.com/training/tv/start/start'>Click here to learn how to use Android TV</a>.</p> </div> <div class='scene game'> <div class='gameHeader'> <a href="javascript:changeScene(4);displayLevelA(0);"><i class='material-icons'>home</i></a> <a>Levels</a> <a>Progress</a> <a>Settings</a> </div> <div style='padding:30px;' id='game1'> <h2 style='margin:0;' id='titleA'></h2> <div id='detailsA'> <p></p> <p></p> </div> <br> <div id='blocksA' style='width:200px;height:200px;border:1px solid lightgrey;float:left;overflow-y:auto;overflow-x:hidden;'> </div> <div id='editorA' style='overflow:auto;height:200px;border:1px solid lightgrey;border-left:0;'> </div> <div style='width:100%;height:48px;border:1px solid lightgrey;border-top: 0;padding:10px;'> <button id='runBtn' class='progBtn' style='position:static;' onclick="runJavascript()">Run Program</button> <button class='progBtn' style='position:static;margin-left:5px;' onclick="viewJavascript()">View JavaScript</button> <button class='progBtn' style='position:static;margin-left:5px;' onclick="document.getElementById('editorA').innerHTML='';">Clear Editor</button> </div> <div id='previewA' style='width:100%;height:270px;border:1px solid lightgrey;border-top: 0;'> </div> </div> <div class='modal' id='modalWinston'> <div class='body'> <div id='modalMsgWinston'></div> </div> </div> </div> <div class='scene'> <i class='material-icons hoverIcon' style='position:absolute;top:30px;left:40px;' onclick="changeScene(2)">arrow_backward</i> <br> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/375px-Google_2015_logo.svg.png" width="40%" style="display:block;margin:auto;" /> <br><br> <h3>Google Classroom</h3> <p style='font-size:15px;line-height:25px;'>Google Classroom is a free web service developed by Google for schools that aim to simplify creating, distributing and grading assignments in a paperless way. The primary purpose of Google Classroom is to streamline the process of sharing files between teachers and students. (Wikipedia)</p> <br> <h3>Google Development</h3> <p style='font-size:15px;line-height:25px;'>Google Classroom is a web service, developed in HTML/CSS/JS and scripting languages. It has expanded into mobile applications as well, but is still primarily web-based.</p> <br> <h1>Play with Web Apps</h1> <p style='font-size:15px;line-height:25px;'>Web development is a growing technology, and everyone uses the internet! Websites are more important than ever for a business to have. Learn to create websites in HTML, CSS, and JavaScript.</p> <button class='normal' onclick="window.open('https://www.khanacademy.org/computing/hour-of-code/hour-of-html')">Open Khan Academy HTML Hour of Code</button> </div> <div class='scene' style='padding:0;'> <i class='material-icons' style='position:fixed;top:30px;left:40px;color:white;cursor:pointer;' onclick="changeScene(2)">arrow_backward</i> <div style='width:100%;height:300px;background-image:url(https://cdn.kastatic.org/images/khan-logo-dark-background.new.png);background-size:100%;background-position:0 0;background-attachment:fixed;'></div> <div style='padding:35px;background-color:white;position:relative;'> <h3 style='margin:0;'>Education for All</h3> <br> <blockquote>Our mission is to provide a free, world‑class education for anyone, anywhere.</blockquote> <p style='font-size:15px;line-height:25px;'>With programming and web technologies, Khan Academy was able to fulfill their mission for education.</p> <br> <h3>Teaching Computer Science</h3> <img src="https://cdn.kastatic.org/images/donate/donation-illustration-earth.svg" style='float:left;width:120px;margin-right:25px;position:relative;top:-2px;' /> <p style='font-size:15px;line-height:25px;'>To share the love of programming, the concept that gave them success to their mission, Khan Academy offers many courses in computer science and programming and a community for young programmers, 13+, to share their knowledge.</p> <br> <button class='normal' onclick="window.open('https://www.khanacademy.org/computing')">Visit Khan Academy Computing</button> </div> </div> <div class='scene'> <i class='material-icons hoverIcon' style='position:absolute;top:30px;left:40px;' onclick="changeScene(2)">arrow_backward</i> <br> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Coursera.svg/300px-Coursera.svg.png" width="40%" style="display:block;margin:auto;" /> <br><br> <h3>Mission</h3> <blockquote>We envision a world where anyone, anywhere can transform their life by accessing the world’s best learning experience.</blockquote> <br> <h3>Courses</h3> <p style='font-size:15px;line-height:25px;'>Every course on Coursera is taught by top instructors from the world’s best universities and educational institutions. Courses include recorded video lectures, auto-graded and peer-reviewed assignments, and community discussion forums. When you complete a course, you’ll receive a sharable electronic Course Certificate.</p> <br> <h1>Programming in Coursera</h1> <p style='font-size:15px;line-height:25px;'>Coursera's website made with code, helps others how to get a degree/certification on their future, and includes programming!</p> </div> <div class='scene'> <img src="https://www.kasandbox.org/programming-images/creatures/Winston.png" width="110px" style='float:left;margin-right:40px;' /> <h1>Congratulations!</h1> <h3>You have completed the mission.</h3><br> <button class='normal' onclick="changeScene(4)">Return to "Learn"</button> <button class='normal' onclick="changeScene(11);displayLevelA(0)">Restart Mission</button><br><br><br> <h3 style='float:left; margin-right:30px;'>Go Beyond this Mission</h3> <button class='normal' style='position:relative;top:12px;' onclick="window.open('https://www.khanacademy.org/computing')">Click here</button> </div> <div id='loader'> <div class='bar bar1'></div> <div class='bar bar2'></div> <div class='bar bar3'></div> <div class='bar bar4'></div> <div class='bar bar5'></div> <div class='bar bar6'></div> <div class='bar bar7'></div> <div class='bar bar8'></div> <h2 class='loading'>Bringing you awesome...<br><span style='font-size:16px;'>With programming.</span></h2> </div> <script> /* Type writer after loading scene / var i = 0; var speed = 0; function typeWriter(textId, txt, newSpeed) { speed = newSpeed; if (i < txt.length) { document.getElementById(textId).innerHTML += txt.charAt(i); i++; setTimeout(function() { typeWriter(textId, txt, speed); }, speed); } else { i = 0; } } / Run function after load / function runLoading() { typeWriter('programmersHeading', 'Who are programmers?', 75); setTimeout(function() { document.getElementById('programmersHeading').style.marginTop = "-125px"; document.getElementById('stuff1').style.display = "block"; setTimeout(function() { document.getElementById('menu').style.display = "block"; }, 500); }, 75 'Who are programmers?'.length + 600); } /* Arrays for CSS particle animation / var colors = [{ scheme: ["green", "teal", "blue", "purple", "magenta"] }, { scheme: ["magenta", "orange", "indigo", "pink", "limegreen"] }, ]; var animations = [ "circleAnimation1", "circleAnimation2", "noAnimation", ]; var schemeIndex = Math.floor(Math.random() colors.length); /* Timing for changing background / createBackground(); setInterval(function() { document.getElementById('background1').style.opacity = "0"; schemeIndex = Math.floor(Math.random() colors.length); setTimeout(function() { document.getElementById('background1').innerHTML = ""; document.getElementById('background1').style.opacity = "1"; createBackground(); }, 500); }, 9000); /* Function to loop particles for bg animation / function createBackground() { for (var i = 0; i < 100; i++) { var newElement = document.createElement('DIV'); var dimensions = Math.floor(Math.random() 25) + 5; newElement.classList.add('circle'); newElement.style.backgroundColor = colors[schemeIndex].scheme[Math.floor(Math.random() * 5)]; newElement.style.animationName = animations[Math.floor(Math.random() * animations.length)]; newElement.style.animationDuration = Math.random() * 10 + 2 + "s"; newElement.style.top = Math.floor(Math.random() * 1000) - 100 + "px"; newElement.style.left = Math.floor(Math.random() * 600) - 100 + "px"; newElement.style.width = dimensions + "px"; newElement.style.height = dimensions + "px"; document.getElementById('background1').appendChild(newElement); } } /* Scene changing function / var scenes = document.getElementsByClassName('scene'); var current; function changeScene(index) { for (var i = 0; i < scenes.length; i++) { scenes[i].style.display = 'none'; } scenes[index].style.display = 'block'; current = scenes[index]; } changeScene(0); / Animated scene changing function / function sceneSpecial(index, color) { if (color !== null) { for (var i = 0; i < document.getElementById('loader').getElementsByClassName('bar').length; i++) { document.getElementById('loader').getElementsByClassName('bar')[i].style.backgroundColor = color; } } document.getElementById('loader').style.display = "block"; current.style.transform = "scale(0)"; setTimeout(function() { changeScene(index); document.getElementById('loader').style.display = "none"; current.style.transform = "scale(1)"; }, 2500); } / Variable to store cell for Winston to win / var currentWinning = 0; var currentMission = 0; var latestMission = 0; / Display level function / function displayLevelA(num) { if (num === 5) { changeScene(15); } else { currentMission = num; if (currentMission > latestMission) { latestMission = currentMission; } document.getElementById('modalWinston').style.display = "none"; document.getElementById('editorA').innerHTML = ""; document.getElementById('titleA').innerHTML = winstonLevels[num].title; document.getElementById('detailsA').innerHTML = winstonLevels[num].details; document.getElementById('blocksA').innerHTML = winstonLevels[num].blocks; for (var i = 0; i < document.getElementById('blocksA').getElementsByClassName('block').length; i++) { document.getElementById('blocksA').getElementsByClassName('block')[i].setAttribute("onclick", "addToEditor(this)"); } document.getElementById('previewA').innerHTML = ""; for (var i = 0; i < winstonLevels[num].cells.length; i++) { document.getElementById('previewA').innerHTML += winstonCells[winstonLevels[num].cells[i]]; } currentWinning = winstonLevels[num].winner; } } / VANILLA JS Drag and drop function / function modDrag() { var id_ = 'editorA'; var cols_ = document.querySelectorAll('#' + id_ + ' .block'); var dragSrcEl_ = null; this.handleDragStart = function(e) { e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/html', this.innerHTML); dragSrcEl_ = this; this.classList.add('moving'); }; this.handleDragOver = function(e) { if (e.preventDefault) { e.preventDefault(); } e.dataTransfer.dropEffect = 'move'; return false; }; this.handleDragEnter = function(e) { this.classList.add('over'); }; this.handleDragLeave = function(e) { this.classList.remove('over'); }; this.handleDrop = function(e) { if (e.stopPropagation) { e.stopPropagation(); } if (dragSrcEl_ != this) { dragSrcEl_.innerHTML = this.innerHTML; this.innerHTML = e.dataTransfer.getData('text/html'); var count = this.querySelector('.count'); var newCount = parseInt(count.getAttribute('data-col-moves')) + 1; count.setAttribute('data-col-moves', newCount); count.textContent = 'moves: ' + newCount; } return false; }; this.handleDragEnd = function(e) { [].forEach.call(cols_, function(col) { col.classList.remove('over'); col.classList.remove('moving'); }); }; [].forEach.call(cols_, function(col) { col.setAttribute('draggable', 'true'); col.addEventListener('dragstart', this.handleDragStart, false); col.addEventListener('dragenter', this.handleDragEnter, false); col.addEventListener('dragover', this.handleDragOver, false); col.addEventListener('dragleave', this.handleDragLeave, false); col.addEventListener('drop', this.handleDrop, false); col.addEventListener('dragend', this.handleDragEnd, false); }); } var requestedLoop = null; / Add blocks to editor screen / function addToEditor(elem) { if (requestedLoop !== null) { requestedLoop.getElementsByClassName('loopInside')[0].innerHTML += elem.innerText; requestedLoop.classList.remove('focused'); requestedLoop = null; } else { if (elem.classList.contains("loop") === true) { document.getElementById('editorA').innerHTML += elem.outerHTML.replace("[x]", "<span class='loopCount'><input type='text' onkeyup=\"this.setAttribute('value', this.value);\" style='width:40px;'/></span>").replace("[y]", "<br><span class='loopInside'></span><br>"); } else if (elem.classList.contains("var") === true) { document.getElementById('editorA').innerHTML += elem.outerHTML.replace("[x]", "<span class='varName'><input type='text' onkeyup=\"this.setAttribute('value', this.value);\" style='width:100px;'/></span>").replace("[y]", "<span class='varContent'><input type='text' onkeyup=\"this.setAttribute('value', this.value);\" style='width:100px;'/></span>"); } else { document.getElementById('editorA').innerHTML += elem.outerHTML; } for (var i = 0; i < document.getElementById('editorA').getElementsByClassName('block').length; i++) { document.getElementById('editorA').getElementsByClassName('block')[i].setAttribute("onclick", ""); } for (var i = 0; i < document.getElementById('editorA').getElementsByClassName('block').length; i++) { document.getElementById('editorA').getElementsByClassName('block')[i].onmousedown = function() { if (event.button === 2) { this.remove(); } }; } for (var i = 0; i < document.getElementById('editorA').getElementsByClassName('loop').length; i++) { document.getElementById('editorA').getElementsByClassName('loop')[i].onclick = function() { e = window.event \|\| e; if (this === e.target) { requestForLoop(this); } } } modDrag(); } } function requestForLoop(elem) { for (var i = 0; i < document.getElementById('editorA').getElementsByClassName('loop').length; i++) { document.getElementById('editorA').getElementsByClassName('loop')[i].classList.remove('focused'); } elem.classList.add('focused'); requestedLoop = elem; } document.getElementById('editorA').onclick = function() { e = window.event \|\| e; if (this === e.target) { blurLoopRequest(); } } function blurLoopRequest() { for (var i = 0; i < document.getElementById('editorA').getElementsByClassName('loop').length; i++) { document.getElementById('editorA').getElementsByClassName('loop')[i].classList.remove('focused'); } requestedLoop = null; } / Disallow right click when deleting blocks / document.getElementById('game1').oncontextmenu = function() { return false; }; / Get javascript to show programmer / function getJavascript() { var javascript = ""; for (var i = 0; i < document.getElementById('editorA').getElementsByClassName('block').length; i++) { var initial = ""; var initialB = ""; var initialB2 = ""; if (document.getElementById('editorA').getElementsByClassName('block')[i].classList.contains("loopCount") === true) { initial = document.getElementById('editorA').getElementsByClassName('block')[i].getElementsByClassName('loopCount')[0].innerHTML; var value = document.getElementById('editorA').getElementsByClassName('block')[i].getElementsByTagName('input')[0].value; document.getElementById('editorA').getElementsByClassName('block')[i].getElementsByClassName('loopCount')[0].innerHTML = value; } if (document.getElementById('editorA').getElementsByClassName('block')[i].classList.contains("var") === true) { initialB = document.getElementById('editorA').getElementsByClassName('block')[i].getElementsByClassName('varName')[0].innerHTML; initialB2 = document.getElementById('editorA').getElementsByClassName('block')[i].getElementsByClassName('varContent')[0].innerHTML; document.getElementById('editorA').getElementsByClassName('block')[i].getElementsByClassName('varName')[0].innerHTML = document.getElementById('editorA').getElementsByClassName('block')[i].getElementsByTagName('input')[0].value; document.getElementById('editorA').getElementsByClassName('block')[i].getElementsByClassName('varContent')[0].innerHTML = document.getElementById('editorA').getElementsByClassName('block')[i].getElementsByTagName('input')[0].value; } javascript += document.getElementById('editorA').getElementsByClassName('block')[i].innerText + "<br>"; if (document.getElementById('editorA').getElementsByClassName('block')[i].classList.contains("loopCount") === true) { document.getElementById('editorA').getElementsByClassName('block')[i].getElementsByClassName('loopCount')[0].innerHTML = initial; } if (document.getElementById('editorA').getElementsByClassName('block')[i].classList.contains("var") === true) { document.getElementById('editorA').getElementsByClassName('block')[i].getElementsByClassName('varName')[0].innerHTML = initialB; document.getElementById('editorA').getElementsByClassName('block')[i].getElementsByClassName('varContent')[0].innerHTML = initialB2; } } return javascript; } / Get and run special JS for computer / var blockCount = 0; function runJavascript() { blockCount = document.getElementById('editorA').getElementsByClassName('block').length; var valid = "true"; msg = 'Hmm... try again.' var iExVar = 0; for (var i = 0; i < document.getElementById('editorA').querySelectorAll('.block.loopCount').length; i++) { if (document.getElementById('editorA').getElementsByClassName('loop')[i].getElementsByTagName('input')[0].value === null \|\| document.getElementById('editorA').getElementsByClassName('loop')[i].getElementsByTagName('input')[0].value === "" \|\| document.getElementById('editorA').getElementsByClassName('loop')[i].getElementsByTagName('input')[0].value === undefined) { valid = "false"; } } if (valid === "true") { var javascript = "var currentWinner = '" + currentWinning + "';"; var scriptLength = 1000 (document.getElementById('editorA').getElementsByClassName('block').length - document.getElementById('editorA').getElementsByClassName('var').length + 1); for (var i = 0; i < document.getElementById('editorA').getElementsByClassName('block').length; i++) { var initial; var initialB = ""; var initialB2 = ""; if (document.getElementById('editorA').getElementsByClassName('block')[i].classList.contains("loopCount") === true) { initial = document.getElementById('editorA').getElementsByClassName('block')[i].getElementsByClassName('loopCount')[0].innerHTML; var value = document.getElementById('editorA').getElementsByClassName('block')[i].getElementsByTagName('input')[0].value; document.getElementById('editorA').getElementsByClassName('block')[i].getElementsByClassName('loopCount')[0].innerHTML = value; } if (document.getElementById('editorA').getElementsByClassName('block')[i].classList.contains("var") === true) { initialB = document.getElementById('editorA').getElementsByClassName('block')[i].getElementsByClassName('varName')[0].innerHTML; initialB2 = document.getElementById('editorA').getElementsByClassName('block')[i].getElementsByClassName('varContent')[0].innerHTML; document.getElementById('editorA').getElementsByClassName('block')[i].getElementsByClassName('varName')[0].innerHTML = document.getElementById('editorA').getElementsByClassName('block')[i].getElementsByTagName('input')[0].value; document.getElementById('editorA').getElementsByClassName('block')[i].getElementsByClassName('varContent')[0].innerHTML = document.getElementById('editorA').getElementsByClassName('block')[i].getElementsByTagName('input')[0].value; } else { iExVar++; } if (document.getElementById('editorA').getElementsByClassName('block')[i].classList.contains("var") === false) { javascript += "setTimeout(function(){" + document.getElementById('editorA').getElementsByClassName('block')[i].innerText + "}, " + 1000 * iExVar + ");"; } else { javascript += document.getElementById('editorA').getElementsByClassName('block')[i].innerText; } if (document.getElementById('editorA').getElementsByClassName('block')[i].classList.contains("loopCount") === true) { document.getElementById('editorA').getElementsByClassName('block')[i].getElementsByClassName('loopCount')[0].innerHTML = initial; } if (document.getElementById('editorA').getElementsByClassName('block')[i].classList.contains("var") === true) { document.getElementById('editorA').getElementsByClassName('block')[i].getElementsByClassName('varName')[0].innerHTML = initialB; document.getElementById('editorA').getElementsByClassName('block')[i].getElementsByClassName('varContent')[0].innerHTML = initialB2; } } javascript += "var endTimer = setTimeout(function(){endProgram()}, " + scriptLength + ");" document.getElementById('runBtn').style.pointerEvents = "none"; var newScript = document.createElement('SCRIPT'); newScript.innerHTML = javascript; document.body.appendChild(newScript); newScript.remove(); } else { msg = "No loop count given."; endProgram(); } } /* Function to display getJavascript() results / function viewJavascript() { document.getElementById('modalMsgWinston').innerHTML = "<i class='material-icons' onclick=\"this.parentElement.parentElement.parentElement.style.display='none';\">close</i><code>function run() {<br>" + getJavascript() + "}</code>"; document.getElementById('modalWinston').style.display = 'block'; } / Current cell variables / var activeCellX = 0; var activeCellY = 0; / Function to place winston / function setWinston(x, y) { if (document.body.contains(document.getElementById('winston'))) { document.getElementById('winston').remove(); } activeCellX = x; activeCellY = y; if (document.getElementsByClassName('cell')[x + y 8].classList.contains("death") === false) { document.getElementsByClassName('cell')[x + y * 8].innerHTML += "<img id='winston' src='https://www.kasandbox.org/programming-images/creatures/Winston.png'/>"; } else { msg = "You hit an obstacle!"; activeCellX = currentWinner - 1; endProgram(); } } /* Variable containing modal mission message / var msg = "Hmm... try again."; / Runs winston function with changed activeCells / function moveLeft() { if (document.body.contains(document.getElementById('winston'))) { if (activeCellX > 0) { setWinston(activeCellX - 1, activeCellY); } else { document.getElementById('winston').remove(); msg = "You crashed into a wall!"; activeCellX = currentWinner - 1; endProgram(); } } else { msg = "There is no winston!" endProgram(); } } function moveRight() { if (document.body.contains(document.getElementById('winston'))) { if (activeCellX < 7) { setWinston(activeCellX + 1, activeCellY); } else { document.getElementById('winston').remove(); msg = "You crashed into a wall!"; activeCellX = currentWinner - 1; endProgram(); } } else { msg = "There is no winston!" endProgram(); } } function moveDown() { if (document.body.contains(document.getElementById('winston'))) { if (activeCellY < 3) { setWinston(activeCellX, activeCellY + 1); } else { document.getElementById('winston').remove(); msg = "You crashed into a wall!"; activeCellX = currentWinner - 1; endProgram(); } } else { msg = "There is no winston!" endProgram(); } } function moveUp() { if (document.body.contains(document.getElementById('winston'))) { if (activeCellY > 0) { setWinston(activeCellX, activeCellY - 1); } else { document.getElementById('winston').remove(); msg = "You crashed into a wall!"; activeCellX = currentWinner - 1; endProgram(); } } else { msg = "There is no winston!" endProgram(); } } / End program function after timer or event / function endProgram() { clearTimeout(endTimer); if (document.body.contains(document.getElementById('winston'))) { document.getElementById('winston').remove(); } if (parseInt(activeCellX + activeCellY 8) == parseInt(currentWinner)) { if (blockCount <= winstonLevels[currentMission].varLength) { document.getElementById('modalMsgWinston').innerHTML = "<h2>Great Job!</h2><p>You have brought Winston back home.</p><br><button class='normal' onclick=\"displayLevelA(" + (currentMission + 1) + ");this.parentElement.parentElement.parentElement.style.display='none';\">Next Level</div><button class='normal' onclick='exitMission(this)'>Exit Mission</div>" document.getElementById('modalWinston').style.display = 'block'; } else { document.getElementById('modalMsgWinston').innerHTML = "<h2>Great Job!</h2><p>But you didn't do it in the most efficient way. You used <b>" + blockCount + "</b> blocks instead of <b>" + winstonLevels[currentMission].varLength + "</b> blocks.</p><br><button class='normal' onclick=\"this.parentElement.parentElement.parentElement.style.display='none';displayLevelA(" + currentMission + ");\">Try Again</div><button class='normal' onclick='exitMission(this)'>Exit Mission</div>" document.getElementById('modalWinston').style.display = 'block'; } } else { document.getElementById('modalMsgWinston').innerHTML = "<h2>" + msg + "</h2><p>Apparently, Winston didn't make it home.</p><br><button class='normal' onclick=\"this.parentElement.parentElement.parentElement.style.display='none';displayLevelA(" + currentMission + ");\">Try Again</div><button class='normal' onclick='exitMission(this)'>Exit Mission</div>"; document.getElementById('modalWinston').style.display = 'block'; } document.getElementById('runBtn').style.pointerEvents = "auto"; msg = "Hmm... try again."; } /* Exit mission function / function exitMission(elem) { changeScene(4); displayLevelA(0); } /Loading functions / changeScene(0); document.body.onload = function() { setTimeout(function() { changeScene(1); runLoading(); }, 4000); }; displayLevelA(0); </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script> <script> / CREDIT TO BLUEBIRD FOR THE AMAZING SAVE FUNCTION */ var save = function(){ document.body.innerHTML = document.getElementById('saveScrn').innerHTML; setTimeout(function(){ html2canvas(document.body,{ onrendered: function(canvas) { b64Img = canvas.toDataURL(); window.top.postMessage(b64Img, "https://www.khanacademy.org/"); }, allowTaint : false, useCORS: true, width:window.innerWidth, height:window.innerWidth }); }, 500); }; document.body.onkeydown = function(e) { if (e.keyCode === 27) { save(); } }; </script> </body> </html>
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgJqttdi7CQw
Votes	174
Spin-Offs	3
Type	WEBPAGE
Width	400
Height	400
User Flagged	false
Origin Scratchpad	{"id":"5554625064894464","title":"Contest: Be Creative - Webpages","deleted":"false","official":"false"}
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Tony Punnacherry
Author Name	epophoney13
Author ID	kaid_576902677336720533585076
Author Profile Access	COACH

Archive Data

Added	10 months ago, 1739380304499
Updated	10 months ago, 1739380309720
Source Deleted	unknown