Viewing Program

Program Data

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

Title	Flight: A History of Aviation
ID	6538691436265472
Created	8 months ago, 1714000088611
Updated	8 months ago, 1714004047774
Code	<!DOCTYPE html> <!-- Contest: Taking Flight I have completed 100% of Khan Academy's 'Intro to Webpages' and have been programming for 40 months. I would prefer to be placed in the [Intermediate] bracket TODO: - Fill out statements above - Save your entry as a spin-off of this program - Have fun! --> <html lang='en'> <head> <meta charset="utf-8"> <title>Flight: A History of Aviation</title> <!-- Importing fonts --> <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=Lato&display=swap" rel="stylesheet"> <link href='https://fonts.googleapis.com/css?family=Material+Icons' rel='stylesheet'> <!-- Main styling --> <style> html { scroll-behavior: smooth; } body { font-family: "Lato", sans-serif; overflow-x: hidden; } ::selection { background: #222; color: white; } h1, h2, h3 { color: #222; } #hero { margin: -55px -10px 0px -8px; padding-top: 170px; padding-bottom: 180px; background-image: linear-gradient(#222A, #222B), url("https://upload.wikimedia.org/wikipedia/commons/5/56/20180519_Spitfire_Mk_XVI_TE184_Pozna%C5%84_Air_Show_1727_1078_DxO.jpg"); background-attachment: fixed; background-size: cover; background-position: center; text-align: center; } #hero-title { color: white; text-shadow: 0px 0px 10px white; font-size: 80px; } #hero-divider { margin-top: -35px; margin-bottom: 20px; width: 400px; } #hero-subtitle { color: white; text-shadow: 0px 0px 10px white; font-size: 20px; font-weight: bold; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } .page { width: 95%; padding: 0px 0px 20px 20px; animation: fade-in 1s; } .page a { color: #444; text-decoration: none; transition: all 0.25s; border-bottom: 1px solid #444; } .page a:hover { background: #DDD; } /* scrollbar styling / ::-webkit-scrollbar { width: 15px; } ::-webkit-scrollbar-track { background: #DDD; } ::-webkit-scrollbar-thumb { background: #222; } ::-webkit-scrollbar-thumb:hover { background: #333; } </style> <!-- Navbar styling --> <style> nav { position: sticky; z-index: 1; top: 0px; text-align: center; width: 600px; margin-left: -8px; background: #222; padding-top: 20px; padding-bottom: 20px; color: white; text-shadow: 0px 0px 4px white; font-size: 20px; font-weight: bold; } nav a { margin-right: 20px; text-decoration: none; color: white; transition: 0.5s all; } nav a:hover { opacity: 0.7; } </style> <!-- Content styling --> <style> / Home page styling / #home-page { margin-bottom: -20px; } .home-heading-container { margin-top: -22px; margin-left: -30px; margin-right: 0px; margin-bottom: 0px; width: 600px; height: 650px; background-size: cover; background-attachment: fixed; filter: grayscale(0.7); } .home-heading { padding-top: 300px; text-align: center; color: white; text-shadow: 0px 0px 6px #444; } #years-121 { background-image: radial-gradient(#0002, #000E), url('https://upload.wikimedia.org/wikipedia/commons/thumb/a/a3/Cirrus_SR22_front_view.jpg/1024px-Cirrus_SR22_front_view.jpg'); background-position: center; } #wright-brothers { background-image: radial-gradient(#0002, #000D), url('https://upload.wikimedia.org/wikipedia/commons/8/86/First_flight2.jpg'); background-position: right; } #b-21-raider { background-image: radial-gradient(#0003, #000F), url('https://upload.wikimedia.org/wikipedia/commons/3/3c/B-21_Raider_front_high.jpg'); background-position: center; } #push-limits { background-image: radial-gradient(#0001, #0007), url('https://upload.wikimedia.org/wikipedia/commons/9/92/Thunder_Tiger_Aerobatics_Team_%2836585075102%29.jpg'); background-position: center; } #view-timeline { background-image: radial-gradient(#0002, #000C), url('https://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/Tiger_Moth_at_St._Stephan_2019_03.jpg/1024px-Tiger_Moth_at_St._Stephan_2019_03.jpg'); background-position: center; } #view-timeline:hover { cursor: pointer; } / Timeline styling / #timeline { } .timeline-item { margin-bottom: 20%; } .timeline-item p { margin-top: -125px; margin-left: 40.5%; padding-left: 20px; border-left: 2px solid #444; transition: all 0.5s ease; } .timeline-item p:hover { -ms-transform: translate(10px, 0px); -webkit-transform: translate(10px, 0px); transform: translate(10px, 0px); } .timeline-image { background-position: center; background-size: cover; width: 200px; height: 200px; border-radius: 100px; transition: all 0.5s ease; } .timeline-image:hover { -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); filter: opacity(70%); } #timeline-tags { display: flex; flex-wrap: wrap; margin-bottom: 20px; } .timeline-tag { background: #444; color: white; border-radius: 20px; border: 2px solid #444; padding: 6px; margin-right: 2px; margin-bottom: 2px; font-size: 14px; transition: all 0.2s ease-in; } .timeline-tag:hover { background: white; border: 2px solid #444; color: #444; cursor: pointer; } #timeline-tag-hidden { background: white; color: #444; } / Gallery styling / .gallery-img { margin-bottom: 10px; width: 98%; transition: 1s all; } .gallery-img:hover { transform: scale(1.05); } </style> <!-- Quiz styling --> <style> / quiz start button / .quiz-button { background-color: #222; border: 4px solid #222; border-radius: 20px; box-shadow: 0px 0px 10px #222; color: white; font-weight: bold; font-size: 30px; padding: 10px 50px; transition: all 0.5s; } .quiz-button:hover { background-color: white; color: #222; cursor: pointer; } / quiz question styling / #quiz { display: none; position: absolute; top: 0; left: 0; background-color: white; padding: 20px; } #quiz input[type='radio'] { margin-left: 20px; margin-right: 5px; } #quiz-results { margin-top: 20px; margin-bottom: 20px; text-align: center; } #quiz-score { font-size: 50px; color: #222; } #quiz-back-button { margin-left: 35%; margin-top: 20px; display: none; } </style> <!-- Footer styling --> <style> footer { width: 600px; margin-left: -8px; margin-bottom: -8px; padding: 20px 20px 20px 40px; background: #222; color: #222; font-size: 20px; font-weight: bold; } .footer-link { text-decoration: none; color: white; font-size: 18px; transition: 0.5s all; } .footer-link:hover { opacity: 0.7; } #footer-page-links { width: 50%; } #back-to-top { margin-top: -20%; margin-left: 30%; color: white; text-align: center; font-size: 150px; text-shadow: 0px 0px 5px white; transition: all 1s; } #back-to-top:hover { cursor: pointer; scale: 0.8; transform: translateY(-20px); } #author-copyright { margin-left: -15%; color: white; font-size: 18px; text-align: center; } #author-copyright a { font-size: 18px; text-decoration: none; text-shadow: 0px 0px 3px white; } </style> <!-- Error message --> <style> #canvas-size-error { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding-top: 25%; background: white; color: #444; display: inline; } #canvas-error-message { margin-left: 25%; margin-top: -23%; padding: 10px; } #canvas-error-message h1 { font-size: 70px; margin: 0px; } #canvas-error-message a { background-color: #4442; color: #444; } </style> </head> <body> <!-- Hero --> <div id="hero"> <h1 id="hero-title">The History of Aviation</h1> <hr id="hero-divider"> <span id="hero-subtitle">121 YEARS OF FLIGHT</span> </div> <!-- Navigation bar --> <nav id="navbar"> <a href="javascript: changePage(0)">Home</a> <a href="javascript: changePage(1)">Timeline</a> <a href="javascript: changePage(2)">Quiz</a> <a href="javascript: changePage(3)">Gallery</a> <a href="javascript: changePage(4)">About</a> </nav> <!-- Pages --> <div class="page" id="home-page"> <div id="years-121" class="home-heading-container"> <h1 class="home-heading">Celebrating 121 years of aviation...</h1> </div> <div id="wright-brothers" class="home-heading-container"> <h1 class="home-heading">From the Wright Brothers...</h1> </div> <div id="b-21-raider" class="home-heading-container"> <h1 class="home-heading">...To the B-21 Raider...</h1> </div> <div id="push-limits" class="home-heading-container"> <h1 class="home-heading">Man has pushed the limits in the sky.</h1> </div> <div id="view-timeline" class="home-heading-container" onclick="javascript: changePage(1)"> <h1 class="home-heading">View the timeline of aviation.</h1> </div> </div> <div class="page"> <h1>A Timeline of Aviation</h1> <!-- Timeline tags --> <div id="timeline-tags"> <div class="timeline-tag">1900s</div> <div class="timeline-tag">1910s</div> <div class="timeline-tag">1920s</div> <div class="timeline-tag">1930s</div> <div class="timeline-tag">1940s</div> <div class="timeline-tag">1950s</div> <div class="timeline-tag">1960s</div> <div class="timeline-tag">1970s</div> <div class="timeline-tag">1980s</div> <div class="timeline-tag">1990s</div> <div class="timeline-tag">2000s</div> <div class="timeline-tag">2010s</div> <div class="timeline-tag">2020s</div> </div> <!-- Timeline events --> <div id="timeline"></div> </div> <div class="page"> <h1>Quiz</h1> <p><span id="number-questions"></span> questions to test your knowledge!</p><br> <button class="quiz-button" onclick="javascript: beginQuiz()">Begin</button><br><br> </div> <div class="page"> <h1>Gallery</h1> <div id="gallery"></div> <!-- Script to add images to gallery --> <script> var gallery = document.getElementById("gallery"); var images = [ "https://upload.wikimedia.org/wikipedia/commons/8/86/First_flight2.jpg", "https://upload.wikimedia.org/wikipedia/commons/9/9a/Bleriot_and_aeroplane.jpg", "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a3/Sikorsky_Russky_Vityaz_%28Le_Grand%29.jpg/640px-Sikorsky_Russky_Vityaz_%28Le_Grand%29.jpg", "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3e/100_years_of_the_RAF_MOD_45163717.jpg/640px-100_years_of_the_RAF_MOD_45163717.jpg", "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/148th_American_Aero_Squadron_field._Making_preparations_for_a_daylight_raid_on_German_trenches_and_cities._The..._-_NARA_-_530739.tif/lossy-page1-783px-148th_American_Aero_Squadron_field._Making_preparations_for_a_daylight_raid_on_German_trenches_and_cities._The..._-_NARA_-_530739.tif.jpg", "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/Junkers-Larsen_JL-6_on_floats_at_NAS_Anacostia_in_1920.jpeg/800px-Junkers-Larsen_JL-6_on_floats_at_NAS_Anacostia_in_1920.jpeg", "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/Een_Fokker_F.IX%2C_nog_zonder_registratie%2C_op_Schiphol_%282161_026698%29.jpg/800px-Een_Fokker_F.IX%2C_nog_zonder_registratie%2C_op_Schiphol_%282161_026698%29.jpg", "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a4/Curtiss_YC-30_Condor_front.jpg/800px-Curtiss_YC-30_Condor_front.jpg", "https://upload.wikimedia.org/wikipedia/commons/8/84/Amelia_Earhart_at_Derry.jpg", "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d8/Heinkel_He_111_over_Wapping%2C_East_London.jpg/607px-Heinkel_He_111_over_Wapping%2C_East_London.jpg", "https://upload.wikimedia.org/wikipedia/commons/thumb/1/13/A_Handley-Page_Halifax_B.II_s.I_%2835Sqn%29_prepares_for_start%2C_Linton.jpg/582px-A_Handley-Page_Halifax_B.II_s.I_%2835Sqn%29_prepares_for_start%2C_Linton.jpg", "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Handley_Page_Halifax_Mk_III_ExCC.jpg/800px-Handley_Page_Halifax_Mk_III_ExCC.jpg", "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Two_USAAF_C-47A_Skytrains.jpg/771px-Two_USAAF_C-47A_Skytrains.jpg", "https://upload.wikimedia.org/wikipedia/commons/1/1c/Republic_P-47_Thunderbolt_USAF.JPG", "https://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/Royal_New_Zealand_Air_Force_in_Pacific_Islands%2C_World_War_II%2C1939_-_1945_%2813971857092%29.jpg/800px-Royal_New_Zealand_Air_Force_in_Pacific_Islands%2C_World_War_II%2C1939_-_1945_%2813971857092%29.jpg", "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Gloster_Trent-Meteor_turboprop.jpg/800px-Gloster_Trent-Meteor_turboprop.jpg?20210223075234", "https://upload.wikimedia.org/wikipedia/commons/4/44/DeHavilland_Comet.jpg", "", "", "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/F-4J_Phantom_II_of_VF-96_in_flight_over_USS_Constellation_%28CVA-64%29%2C_in_the_early_1970s.jpg/800px-F-4J_Phantom_II_of_VF-96_in_flight_over_USS_Constellation_%28CVA-64%29%2C_in_the_early_1970s.jpg", "https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Pan_Am_Boeing_747-121_N736PA_at_London_Heathrow_Airport_%28cropped%29.jpg/800px-Pan_Am_Boeing_747-121_N736PA_at_London_Heathrow_Airport_%28cropped%29.jpg", "https://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Aeroflot_Tu_134_CCCP_65784_at_DUB_%2816124802421%29.jpg/800px-Aeroflot_Tu_134_CCCP_65784_at_DUB_%2816124802421%29.jpg", "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Aberdeen_Airways_HS.748_McKnight-1.jpg/800px-Aberdeen_Airways_HS.748_McKnight-1.jpg", "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d0/FA-18_Hornet_breaking_sound_barrier_%287_July_1999%29.jpg/640px-FA-18_Hornet_breaking_sound_barrier_%287_July_1999%29.jpg", "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0f/US_Airways_Flight_1549_%28N106US%29_after_crashing_into_the_Hudson_River_%28crop_4%29.jpg/800px-US_Airways_Flight_1549_%28N106US%29_after_crashing_into_the_Hudson_River_%28crop_4%29.jpg", "https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/RAAF_F-111_fuel_dump_and_burn_Williamtown_Gilbert.jpg/800px-RAAF_F-111_fuel_dump_and_burn_Williamtown_Gilbert.jpg", "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/Bomber_Task_Force_Europe_operations_01.jpg/800px-Bomber_Task_Force_Europe_operations_01.jpg", "https://upload.wikimedia.org/wikipedia/commons/thumb/8/8f/Red_Arrows_Royal_International_Air_Tattoo_2023_12.jpg/800px-Red_Arrows_Royal_International_Air_Tattoo_2023_12.jpg", ]; for (var i = 0; i < images.length; i++) { document.getElementById("gallery").innerHTML += "<img src='" + images[i] + "' class='gallery-img'>"; } </script> </div> <div class="page"> <h1>About this webpage</h1> <p>This webpage was created by <a href="https://www.khanacademy.org/profile/kaid_682972421482671044758972/projects" target="_blank">TDJ</a> as an entry for the official contest, <a href="https://www.khanacademy.org/computer-programming/contest-taking-flight/6235317189918720" target="_blank">Contest: Taking Flight</a>.</p> <h3>Sources</h3> <p>Information was sourced from <a href="https://en.wikipedia.org/" target="_blank">Wikipedia</a>.</p> <p>All images were sourced from <a href="https://commons.wikimedia.org/" target="_blank">Wikimedia Commons</a>.</p> <p>Credit to <a href="https://www.khanacademy.org/profile/kaid_157624541333313939750668/" target="_blank">Bluebird</a> for the thumbnail script.</p> </div> <!-- Quiz --> <div id="quiz"> <h2>Test Your Knowledge</h2> <form id="quiz-questions"></form> <button class="quiz-button" id="submit-quiz-button" onclick="javascript: submitQuiz()">Submit</button> <div id="quiz-answers"></div> <div id="quiz-results"></div> <button class="quiz-button" id="quiz-back-button" onclick="javascript: backToWebpage(); changePage(2)">Back</button> </div> <!-- Footer --> <footer id="footer"> <div id="footer-page-links"> <a href="javascript: changePage(0)" class="footer-link">Home</a><br> <a href="javascript: changePage(1)" class="footer-link">Timeline</a><br> <a href="javascript: changePage(2)" class="footer-link">Quiz</a><br> <a href="javascript: changePage(3)" class="footer-link">Gallery</a><br> <a href="javascript: changePage(4)" class="footer-link">About</a> </div> <div id="back-to-top" class="material-icons" onclick="javascript: window.scrollTo(0, 0)">keyboard_arrow_up</div> <div id="author-copyright"> <strong>Made by <a href="https://www.khanacademy.org/profile/kaid_682972421482671044758972/projects" target="_blank" class="footer-link">TDJ</a> &copy 2024</strong> </div> </footer> <!-- Error message --> <div id="canvas-size-error"> <img src="https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/creatures/OhNoes.png"> <div id="canvas-error-message"> <h1>Error!</h1> <p>This is the wrong canvas size. Click <a href="https://www.khanacademy.org/computer-programming/flight-a-history-of-aviation/6538691436265472?width=600&height=600" target="_blank">here</a> to fix.</p> </div> </div> <!-- Timeline events script --> <script> var timeline = document.getElementById("timeline"); // array of timeline events var events = [ { year: 1903, decade: "1900s", imageLink: "https://upload.wikimedia.org/wikipedia/commons/8/86/First_flight2.jpg", description: "The Wright brothers, Orville and Wilbur, make the first powered, heavier-than-air flight.", }, { year: 1909, decade: "1900s", imageLink: "https://upload.wikimedia.org/wikipedia/commons/9/9a/Bleriot_and_aeroplane.jpg", description: "Louis Blériot became the first person to fly across the English Channel, flying his Blériot XI monoplane.", }, { year: 1919, decade: "1910s", imageLink: "https://upload.wikimedia.org/wikipedia/commons/b/be/Vickers_Vimy_ExCC.jpg", description: "The first nonstop trans-Atlantic flight is made by John Alcock & Arthur Brown, from Newfoundland to Ireland.", }, { year: 1924, decade: "1920s", imageLink: "https://upload.wikimedia.org/wikipedia/commons/1/14/Aircraft_Chicago%3BAero27G6.jpg", description: "Four airmen from the US Army Air Service circled the globe in 175 days, covering over 26,345 miles (42,398 km).", }, { year: 1926, decade: "1920s", imageLink: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/Norge_airship_in_flight_1926.jpg/640px-Norge_airship_in_flight_1926.jpg", description: "The first aircraft to reach the North Pole - Roald Amundsen and co. in the Italian airship, <em>Norge</em>.", }, { year: 1927, decade: "1920s", imageLink: "https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/Charles_Lindbergh_and_the_Spirit_of_Saint_Louis_%28Crisco_restoration%2C_with_wings%29.jpg/800px-Charles_Lindbergh_and_the_Spirit_of_Saint_Louis_%28Crisco_restoration%2C_with_wings%29.jpg", description: "Charles Lindbergh made the first solo flight across the Atlantic in his <em>Spirit of St Louis</em>, flying 33.5 hours nonstop.", }, { year: 1937, decade: "1930s", imageLink: "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/Hindenburg_disaster.jpg/601px-Hindenburg_disaster.jpg", description: "On May 6, the airship <em>Hindenburg</em> burst into flames, killing 35 of 97 people onboard. The age of the airship was over.", }, { year: 1939, decade: "1930s", imageLink: "https://upload.wikimedia.org/wikipedia/commons/9/9c/Bundesarchiv_Bild_141-2505%2C_Strahlflugzeug_Heinkel_He_178.jpg", description: "On August 27, the Heinkel He-178 became the first aircraft powered by a turbojet to fly.", }, { year: 1940, decade: "1940s", imageLink: "https://upload.wikimedia.org/wikipedia/commons/2/21/Pilots_of_No._32_Squadron_at_Hawkinge_during_the_Battle_of_Britain.jpg", description: "The Battle of Britain lasted from July 7 until October 31. It was the first major military campaign fought entirely in the air.", }, { year: 1947, decade: "1940s", imageLink: "https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Bell_X-1_46-062_%28in_flight%29.jpg/1280px-Bell_X-1_46-062_%28in_flight%29.jpg", description: "On October 14, Chuck Yeager broke the sound barrier in the Bell X-1. It was the first manned supersonic flight.", }, { year: 1949, decade: "1940s", imageLink: "https://upload.wikimedia.org/wikipedia/commons/4/44/DeHavilland_Comet.jpg", description: "The first jet-powered airliner, the prototype De Havilland DH106 Comet 1 takes flight.", }, { year: 1950, decade: "1950s", imageLink: "https://upload.wikimedia.org/wikipedia/commons/4/44/DeHavilland_Comet.jpg", description: "During the Korean War, the first jet vs jet combats took place, with both sides claiming the first jet 'kill'.", }, { year: 1955, decade: "1950s", imageLink: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/1963-Cessna-172D.jpg/320px-1963-Cessna-172D.jpg", description: "The Cessna 172 first flew on June 12, 1955. Over 44,000 have been built, the most for any type of aircraft.", }, { year: 1961, decade: "1960s", imageLink: "https://upload.wikimedia.org/wikipedia/commons/a/a2/The_Soviet_Union_1964_CPA_3014_stamp_%28Space_Exploration._Gagarin_and_Vostok_1%29.jpg", description: "Yuri Gargarin orbits Earth in just under 2 hours, becoming the first man to reach space.", }, { year: 1967, decade: "1960s", imageLink: "https://upload.wikimedia.org/wikipedia/commons/c/c7/British_Aerospace_Harrier_GR5%2C_UK_-_Air_Force_AN0964385.jpg", description: "The Harrier jump jet made its first flight. It pioneered Vertical/Short Takeoff and Landing (V/STOL) operations.", }, { year: 1969, decade: "1960s", imageLink: "https://upload.wikimedia.org/wikipedia/commons/e/ec/Air_France_Concorde_Jonsson.jpg", description: "The Concorde first flew in 1969. Scheduled services began in 1976 and ended in 2003.", }, { year: 1969, decade: "1960s", imageLink: "https://upload.wikimedia.org/wikipedia/commons/9/98/Aldrin_Apollo_11_original.jpg", description: "On July 20, Neil Armstrong stepped onto the surface of the Moon. It was '...one giant leap for mankind.'", }, { year: 1977, decade: "1970s", imageLink: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/da/Het_verongelukte_KLM-toestel_De_Rijn%2C_Bestanddeelnr_929-1005_-_cropped.jpg/319px-Het_verongelukte_KLM-toestel_De_Rijn%2C_Bestanddeelnr_929-1005_-_cropped.jpg", description: "Aviation suffered its deadliest aviation disaster to date when two Boeing 747s colliding on a runway, killing 583.", }, { year: 1979, decade: "1970s", imageLink: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Mauro_Solar_Riser.jpg/320px-Mauro_Solar_Riser.jpg", description: "In April, Larry Mauro made the first crewed solar-powered flight in his Mauro Solar Riser biplane.", }, { year: 1986, decade: "1980s", imageLink: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Voyager_aircraft.jpg/1280px-Voyager_aircraft.jpg", description: "Dick Rutan and Jeana Yeager flew around the world nonstop, flying 11,857mi (19,082km) unrefuelled in almost 112hrs.", }, { year: 1989, decade: "1980s", imageLink: "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/B-2_Spirits_on_Deployment_to_Indo-Asia-Pacific.jpg/320px-B-2_Spirits_on_Deployment_to_Indo-Asia-Pacific.jpg", description: "The Northrop Grumman B-2 Spirit stealth bomber made its first flight. It entered service in 1997 and is still active.", }, { year: 1999, decade: "1990s", imageLink: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d0/Breitling_Orbiter_3_aloft.jpg/320px-Breitling_Orbiter_3_aloft.jpg", description: "Bertrand Piccard and Brian Jones complete the first non-stop balloon flight around the world.", }, { year: 2001, decade: "2000s", imageLink: "https://upload.wikimedia.org/wikipedia/commons/thumb/7/7a/Explosion_following_the_plane_impact_into_the_South_Tower_%28WTC_2%29_-_B6019~11.jpg/320px-Explosion_following_the_plane_impact_into_the_South_Tower_%28WTC_2%29_-_B6019~11.jpg", description: "On September 11, four airliners were hijacked. Two were crashed into the Twin Towers. 2,996 people were killed.", }, { year: 2004, decade: "2000s", imageLink: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/93/SpaceShipOne_Flight_15P_photo_Don_Ramey_Logan.jpg/1280px-SpaceShipOne_Flight_15P_photo_Don_Ramey_Logan.jpg", description: "SpaceShipOne completes the first crewed private spaceflight, and also won the Ansari X Prize.", }, { year: 2005, decade: "2000s", imageLink: "https://upload.wikimedia.org/wikipedia/commons/0/09/A6-EDY_A380_Emirates_31_jan_2013_jfk_%288442269364%29_%28cropped%29.jpg", description: "The Airbus A380 made its first flight on April 27. It is the world's largest passenger airliner.", }, { year: 2016, decade: "2010s", imageLink: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Solar_Impulse_SI2_pilote_Bertrand_Piccard_Payerne_November_2014.jpg/640px-Solar_Impulse_SI2_pilote_Bertrand_Piccard_Payerne_November_2014.jpg", description: "The Solar Impulse 2 became the first solar powered aircraft to circumnavigate the world. Flight time: 23 1/4 days!", }, { year: 2021, decade: "2020s", imageLink: "https://upload.wikimedia.org/wikipedia/commons/2/20/Mars_helicopter_on_sol_46_enhanced.png", description: "<em>Ingenuity</em>, an unmanned helicopter, makes its first flight on Mars, proving the atmosphere sufficient to support flight.", }, { year: "2024 & beyond...", decade: "2020s", imageLink: "https://upload.wikimedia.org/wikipedia/commons/thumb/3/38/Volocopter%2CIAA_2017%2C_Frankfurt_%281Y7A1911%29.jpg/640px-Volocopter%2CIAA_2017%2C_Frankfurt_%281Y7A1911%29.jpg", description: "With eVTOLs and vertiports on the horizon, it will be exciting to see where this new technology takes us!", }, ]; for (var i = 0; i < events.length; i++) { timeline.innerHTML += '<div class="timeline-item + ' + events[i].decade + '"><div class="timeline-image" style="background-image: url(' + events[i].imageLink + ')"></div><p><strong>' + events[i].year + '</strong> ' + events[i].description + '</p></div>'; } </script> <!-- Timeline tags script --> <script> function showEvents(decade) { var elements = document.getElementsByClassName(decade); for (var i = 0; i < elements.length; i++) { elements[i].style.display = "block"; } } function hideEvents(decade) { var elements = document.getElementsByClassName(decade); for (var i = 0; i < elements.length; i++) { elements[i].style.display = "none"; } } var tags = document.getElementsByClassName("timeline-tag"); for (var i = 0; i < tags.length; i++) { tags[i].onclick = function() { var decade = this.textContent; var items = document.getElementsByClassName(decade); if (items[0].style.display === "none") { showEvents(decade); this.setAttribute('id', ''); } else { hideEvents(decade); this.setAttribute('id', 'timeline-tag-hidden'); } }; } </script> <!-- Quiz script --> <script> var current = 0; var score = 0; var questions = [ { question: "What was the year of the first flight?", answers: [1899, 1902, 1903, 1909], right: 2, }, { question: "What speed did Chuck Yeager reach on October 14, 1947?", answers: ["subsonic", "hypersonic", "supersonic", "transonic"], right: 2, }, { question: "What year did the Battle of Britain occur?", answers: ["1940", "1942", "1938", "1941"], right: 0, }, { question: "Over what distance was the first aerial circumnavigation achieved (miles)?", answers: ["14,385", "26,345", "19,140", "25,560"], right: 1, }, { question: "How many hours did Charles Lindbergh take to cross the Atlantic?", answers: ["32", "32.5", "33", "33.5"], right: 3, }, { question: "When did the Concorde cease scheduled flights?", answers: [2001, 2003, 1976, 1992], right: 1, }, { question: "What is the most produced aircraft?", answers: ["Piper Cherokee", "Cessna 150", "Ilyushin Il-2", "Cessna 172"], right: 3, }, { question: "What is the world's largest passenger airliner?", answers: ["Airbus A340", "Boeing 747", "Airbus A380", "Boeing 777"], right: 2, }, ]; var numberQuestions = document.getElementById('number-questions').textContent = questions.length; var quiz = document.getElementById('quiz-questions'); var showAnswers = document.getElementById('quiz-answers'); var showResults = document.getElementById('quiz-results'); var pages = document.getElementsByClassName('page'); function createQuestions() { for (var i = 0; i < questions.length; i++) { var q = "<strong class='quiz-question'>" + (i + 1) + ". " + questions[i].question + "</strong><br>"; var a = ""; for (var j = 0; j < questions[i].answers.length; j++) { a += '<input type="radio" id="q-' + (i + 1) + '-a-' + questions[i].answers[j] + '" name="question_' + (i + 1) + '" value="' + (j === questions[i].right ? "true" : "false") + '"><label for="' + questions[i].answers[j] + '">' + questions[i].answers[j] + '</label><br>' + (j === questions[i].answers.length - 1 ? "<br>" : ""); } quiz.innerHTML += q + a; } } function beginQuiz() { // hiding rest of the webpage for (var i = 0; i < pages.length; i++) { pages[i].style.display = "none"; } document.getElementById('hero').style.display = "none"; document.getElementById('navbar').style.display = "none"; document.getElementById('footer').style.display = "none"; // displaying quiz document.getElementById('quiz').style.display = "block"; // resetting quiz current = 0; score = 0; quiz.innerHTML = ""; document.getElementById('submit-quiz-button').style.display = "block"; document.getElementById('quiz-results').style.display = "none"; document.getElementById('quiz-back-button').style.display = "none"; // add questions createQuestions(); // scroll to top of quiz window.scrollTo(0, 0); } function submitQuiz() { // adding the total score for (var i = 0; i < document.forms[0].length; i++) { if (document.forms[0][i].checked) { score += (document.forms[0][i].value === "true" ? 1 : 0); } } document.getElementById('submit-quiz-button').style.display = "none"; document.getElementById('quiz-results').style.display = "block"; document.getElementById('quiz-back-button').style.display = "block"; showResults.innerHTML = "<strong id='quiz-score'>Your score was: " + score + "/" + questions.length + "</strong>"; } function backToWebpage() { document.getElementById('hero').style.display = "block"; document.getElementById('navbar').style.display = "block"; document.getElementById('footer').style.display = "block"; document.getElementById('quiz').style.display = "none"; } </script> <!-- Page-changing script --> <script> var pages = document.getElementsByClassName("page"); function changePage(page) { for (var i = 0; i < pages.length; i++) { pages[i].style.display = "none"; } pages[page].style.display = "block"; window.scrollTo(0, 0); } changePage(0); </script> <!-- Checking the webpage dimensions --> <script> if (window.innerWidth !== 600 \|\| window.innerHeight !== 600) { document.getElementById('canvas-size-error').style.display = 'block'; document.body.style.overflow = 'hidden'; } else { document.getElementById('canvas-size-error').style.display = 'none'; } </script> <!-- The Thumbnail Script 2.1.0 12/18/2023 by Bluebird@kaid_157624541333313939750668 --> <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script> <script type> var r = 600; var s = document.documentElement.clientWidth; window.parent.html2canvas = e => { try { html2canvas(document.body, { width: s, height: s, useCORS: true, onclone: e => e.getAnimations().forEach(a=>{ try{ a.finish() }catch{} }) }).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> <!-- Make the reload button appear --> <script></script> </body> </html>
Folds	19,943
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgOvi-9zOCww
Votes	57
Spin-Offs	0
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	{"id":"6014326090153984","title":"Contest: Taking Flight - HTML Submissions","deleted":"false","official":"false"}
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	TDJ
Author Name	tdj.ka
Author ID	kaid_682972421482671044758972
Author Profile Access	PUBLIC

Archive Data

Added	5 months ago, 1722841871436
Updated	25 days ago, 1734464276318
Source Deleted	unknown