Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>The Wright Brothers' First Airplane</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .airplane-part { | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| } | |
| .airplane-part:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| .timeline-item { | |
| position: relative; | |
| padding-left: 3rem; | |
| } | |
| .timeline-item:before { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| width: 2px; | |
| height: 100%; | |
| background-color: #3b82f6; | |
| } | |
| .timeline-dot { | |
| position: absolute; | |
| left: -0.5rem; | |
| top: 0; | |
| width: 1.5rem; | |
| height: 1.5rem; | |
| border-radius: 50%; | |
| background-color: #3b82f6; | |
| } | |
| .quiz-option { | |
| transition: all 0.2s ease; | |
| } | |
| .quiz-option:hover { | |
| background-color: #e0f2fe; | |
| } | |
| .quiz-option.correct { | |
| background-color: #bbf7d0; | |
| } | |
| .quiz-option.incorrect { | |
| background-color: #fecaca; | |
| } | |
| #airplane-diagram { | |
| background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100"><path d="M20,50 L180,50 M100,20 L100,80 M80,30 L120,30 M80,70 L120,70" stroke="%233b82f6" stroke-width="1" stroke-dasharray="5,5"/></svg>'); | |
| background-repeat: no-repeat; | |
| background-position: center; | |
| background-size: contain; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <header class="bg-blue-600 text-white py-6 shadow-lg"> | |
| <div class="container mx-auto px-4"> | |
| <h1 class="text-4xl font-bold text-center">The Wright Flyer: Birth of Aviation</h1> | |
| <p class="text-center mt-2 text-blue-100">How the Wright Brothers Built the World's First Successful Airplane</p> | |
| </div> | |
| </header> | |
| <main class="container mx-auto px-4 py-8"> | |
| <section class="mb-16"> | |
| <div class="flex flex-col md:flex-row gap-8 items-center"> | |
| <div class="md:w-1/2"> | |
| <h2 class="text-3xl font-bold text-blue-800 mb-4">The Dream of Flight</h2> | |
| <p class="text-gray-700 mb-4">On December 17, 1903, at Kitty Hawk, North Carolina, Orville and Wilbur Wright achieved the first powered, sustained, and controlled airplane flight. Their aircraft, the Wright Flyer, marked the beginning of the aviation age.</p> | |
| <p class="text-gray-700 mb-6">The brothers' success came after years of research, experimentation, and innovation. They approached the problem of flight with scientific rigor, solving challenges that had stumped others for centuries.</p> | |
| <button onclick="playVideo()" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg flex items-center gap-2 transition-colors"> | |
| <i class="fas fa-play"></i> Watch First Flight | |
| </button> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/0/0c/Wrightfirstflight_highres.jpg" alt="Wright Brothers First Flight" class="w-full rounded-lg shadow-xl border-4 border-white"> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="mb-16 bg-white p-6 rounded-xl shadow-md"> | |
| <h2 class="text-3xl font-bold text-blue-800 mb-6 text-center">Scientific Breakthroughs</h2> | |
| <div class="grid md:grid-cols-3 gap-6"> | |
| <div class="bg-blue-50 p-6 rounded-lg"> | |
| <div class="text-blue-600 text-4xl mb-3"><i class="fas fa-wind"></i></div> | |
| <h3 class="font-bold text-xl mb-2">Wind Tunnel Testing</h3> | |
| <p class="text-gray-700">The Wrights built their own wind tunnel to test over 200 wing designs, collecting precise data on lift and drag that contradicted existing tables.</p> | |
| </div> | |
| <div class="bg-blue-50 p-6 rounded-lg"> | |
| <div class="text-blue-600 text-4xl mb-3"><i class="fas fa-cogs"></i></div> | |
| <h3 class="font-bold text-xl mb-2">Three-Axis Control</h3> | |
| <p class="text-gray-700">They invented wing warping for roll control combined with a movable rudder and elevator, creating the first practical three-axis control system.</p> | |
| </div> | |
| <div class="bg-blue-50 p-6 rounded-lg"> | |
| <div class="text-blue-600 text-4xl mb-3"><i class="fas fa-bolt"></i></div> | |
| <h3 class="font-bold text-xl mb-2">Lightweight Engine</h3> | |
| <p class="text-gray-700">With Charlie Taylor, they built a 12-horsepower, 180-pound aluminum engine when no existing engine met their power-to-weight requirements.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="mb-16"> | |
| <h2 class="text-3xl font-bold text-blue-800 mb-8 text-center">The Wright Flyer's Key Components</h2> | |
| <div class="bg-white p-6 rounded-xl shadow-md mb-8"> | |
| <div id="airplane-diagram" class="relative h-64 md:h-96 mb-6"> | |
| <!-- Interactive parts will be placed here --> | |
| <div onclick="showPartInfo('wings')" class="airplane-part absolute top-1/4 left-1/4 w-1/2 h-1/4 bg-blue-100 bg-opacity-50 border-2 border-blue-300 rounded-lg flex items-center justify-center"> | |
| <span class="font-bold text-blue-800">Wings</span> | |
| </div> | |
| <div onclick="showPartInfo('engine')" class="airplane-part absolute top-1/2 left-1/4 w-1/4 h-1/6 bg-red-100 bg-opacity-50 border-2 border-red-300 rounded-lg flex items-center justify-center"> | |
| <span class="font-bold text-red-800">Engine</span> | |
| </div> | |
| <div onclick="showPartInfo('propellers')" class="airplane-part absolute top-1/2 left-3/4 w-1/4 h-1/6 bg-green-100 bg-opacity-50 border-2 border-green-300 rounded-lg flex items-center justify-center"> | |
| <span class="font-bold text-green-800">Propellers</span> | |
| </div> | |
| <div onclick="showPartInfo('controls')" class="airplane-part absolute top-3/4 left-1/3 w-1/3 h-1/6 bg-yellow-100 bg-opacity-50 border-2 border-yellow-300 rounded-lg flex items-center justify-center"> | |
| <span class="font-bold text-yellow-800">Controls</span> | |
| </div> | |
| </div> | |
| <div id="part-info" class="bg-gray-50 p-4 rounded-lg hidden"> | |
| <h3 id="part-title" class="text-xl font-bold mb-2"></h3> | |
| <p id="part-description" class="text-gray-700"></p> | |
| <button onclick="hidePartInfo()" class="mt-3 text-blue-600 hover:text-blue-800 transition-colors"> | |
| <i class="fas fa-times"></i> Close | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <h3 class="text-xl font-bold text-blue-700 mb-4">Materials Used</h3> | |
| <ul class="space-y-2"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span><strong>Wings:</strong> Spruce wood framework covered with muslin fabric</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span><strong>Engine:</strong> Aluminum crankcase (revolutionary for the time)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span><strong>Propellers:</strong> Hand-carved spruce, designed using their wind tunnel data</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span><strong>Controls:</strong> Cables and pulleys for wing warping and rudder</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <h3 class="text-xl font-bold text-blue-700 mb-4">Technical Specifications</h3> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div> | |
| <p class="text-gray-500">Wingspan</p> | |
| <p class="font-bold">40 ft 4 in (12.3 m)</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-500">Length</p> | |
| <p class="font-bold">21 ft 1 in (6.4 m)</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-500">Height</p> | |
| <p class="font-bold">9 ft 0 in (2.7 m)</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-500">Weight</p> | |
| <p class="font-bold">605 lb (274 kg)</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-500">Engine Power</p> | |
| <p class="font-bold">12 hp (8.9 kW)</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-500">Max Speed</p> | |
| <p class="font-bold">30 mph (48 km/h)</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="mb-16"> | |
| <h2 class="text-3xl font-bold text-blue-800 mb-8 text-center">Development Timeline</h2> | |
| <div class="space-y-8"> | |
| <div class="timeline-item"> | |
| <div class="timeline-dot"></div> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <h3 class="text-xl font-bold text-blue-700 mb-2">1899</h3> | |
| <p class="text-gray-700">The Wright brothers begin serious aeronautical research after being inspired by Otto Lilienthal's glider experiments. They build their first kite with wing-warping controls.</p> | |
| </div> | |
| </div> | |
| <div class="timeline-item"> | |
| <div class="timeline-dot"></div> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <h3 class="text-xl font-bold text-blue-700 mb-2">1900-1902</h3> | |
| <p class="text-gray-700">Series of glider tests at Kitty Hawk. They discover flaws in existing lift data and build their own wind tunnel to conduct systematic tests on wing shapes.</p> | |
| </div> | |
| </div> | |
| <div class="timeline-item"> | |
| <div class="timeline-dot"></div> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <h3 class="text-xl font-bold text-blue-700 mb-2">1903</h3> | |
| <p class="text-gray-700">Construction of the Wright Flyer with a purpose-built engine and propellers. After several failed attempts, they achieve four controlled flights on December 17, with the longest lasting 59 seconds and covering 852 feet.</p> | |
| </div> | |
| </div> | |
| <div class="timeline-item"> | |
| <div class="timeline-dot"></div> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <h3 class="text-xl font-bold text-blue-700 mb-2">1904-1905</h3> | |
| <p class="text-gray-700">Development of the Wright Flyer II and III, making significant improvements in control and reliability, including the first circular flight in 1904.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="mb-16 bg-blue-50 p-8 rounded-xl"> | |
| <h2 class="text-3xl font-bold text-blue-800 mb-8 text-center">Test Your Knowledge</h2> | |
| <div id="quiz-container" class="space-y-6"> | |
| <div class="quiz-question bg-white p-6 rounded-xl shadow-md"> | |
| <h3 class="text-xl font-bold mb-4">1. What was the primary material used for the Wright Flyer's wings?</h3> | |
| <div class="grid md:grid-cols-2 gap-3"> | |
| <div onclick="checkAnswer(this, true)" class="quiz-option p-3 border border-gray-200 rounded-lg cursor-pointer"> | |
| A) Spruce wood framework with muslin fabric covering | |
| </div> | |
| <div onclick="checkAnswer(this, false)" class="quiz-option p-3 border border-gray-200 rounded-lg cursor-pointer"> | |
| B) Aluminum framework with canvas covering | |
| </div> | |
| <div onclick="checkAnswer(this, false)" class="quiz-option p-3 border border-gray-200 rounded-lg cursor-pointer"> | |
| C) Steel framework with silk covering | |
| </div> | |
| <div onclick="checkAnswer(this, false)" class="quiz-option p-3 border border-gray-200 rounded-lg cursor-pointer"> | |
| D) Bamboo framework with paper covering | |
| </div> | |
| </div> | |
| </div> | |
| <div class="quiz-question bg-white p-6 rounded-xl shadow-md"> | |
| <h3 class="text-xl font-bold mb-4">2. What was the Wright brothers' key innovation that made controlled flight possible?</h3> | |
| <div class="grid md:grid-cols-2 gap-3"> | |
| <div onclick="checkAnswer(this, false)" class="quiz-option p-3 border border-gray-200 rounded-lg cursor-pointer"> | |
| A) A more powerful engine than competitors | |
| </div> | |
| <div onclick="checkAnswer(this, false)" class="quiz-option p-3 border border-gray-200 rounded-lg cursor-pointer"> | |
| B) Lighter-than-air gas balloons | |
| </div> | |
| <div onclick="checkAnswer(this, true)" class="quiz-option p-3 border border-gray-200 rounded-lg cursor-pointer"> | |
| C) Three-axis control system (roll, pitch, yaw) | |
| </div> | |
| <div onclick="checkAnswer(this, false)" class="quiz-option p-3 border border-gray-200 rounded-lg cursor-pointer"> | |
| D) Jet propulsion technology | |
| </div> | |
| </div> | |
| </div> | |
| <div class="quiz-question bg-white p-6 rounded-xl shadow-md"> | |
| <h3 class="text-xl font-bold mb-4">3. How did the Wright brothers test their wing designs?</h3> | |
| <div class="grid md:grid-cols-2 gap-3"> | |
| <div onclick="checkAnswer(this, false)" class="quiz-option p-3 border border-gray-200 rounded-lg cursor-pointer"> | |
| A) Computer simulations | |
| </div> | |
| <div onclick="checkAnswer(this, true)" class="quiz-option p-3 border border-gray-200 rounded-lg cursor-pointer"> | |
| B) Wind tunnel experiments | |
| </div> | |
| <div onclick="checkAnswer(this, false)" class="quiz-option p-3 border border-gray-200 rounded-lg cursor-pointer"> | |
| C) Trial and error with full-scale gliders | |
| </div> | |
| <div onclick="checkAnswer(this, false)" class="quiz-option p-3 border border-gray-200 rounded-lg cursor-pointer"> | |
| D) Studying bird flight patterns exclusively | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="quiz-results" class="mt-8 hidden"> | |
| <div class="bg-white p-6 rounded-xl shadow-md text-center"> | |
| <h3 class="text-2xl font-bold mb-4">Quiz Results</h3> | |
| <p id="score-display" class="text-xl mb-4"></p> | |
| <button onclick="resetQuiz()" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg transition-colors"> | |
| Try Again | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="bg-white p-8 rounded-xl shadow-md"> | |
| <h2 class="text-3xl font-bold text-blue-800 mb-6 text-center">Explore More</h2> | |
| <div class="grid md:grid-cols-3 gap-6"> | |
| <div class="bg-gray-50 p-6 rounded-lg border border-gray-200"> | |
| <h3 class="text-xl font-bold mb-3">Interactive Simulation</h3> | |
| <p class="text-gray-700 mb-4">Try your hand at flying a virtual Wright Flyer with our flight simulator.</p> | |
| <button onclick="showSimulator()" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded-lg transition-colors"> | |
| Launch Simulator | |
| </button> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-lg border border-gray-200"> | |
| <h3 class="text-xl font-bold mb-3">Further Reading</h3> | |
| <ul class="space-y-2 text-blue-600"> | |
| <li><a href="#" class="hover:underline">The Wright Brothers' Notebooks</a></li> | |
| <li><a href="#" class="hover:underline">Engineering Analysis of the Wright Flyer</a></li> | |
| <li><a href="#" class="hover:underline">Aviation Pioneers Before the Wrights</a></li> | |
| </ul> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-lg border border-gray-200"> | |
| <h3 class="text-xl font-bold mb-3">Visit the Wright Flyer</h3> | |
| <p class="text-gray-700 mb-4">The original 1903 Wright Flyer is on display at the Smithsonian National Air and Space Museum in Washington, D.C.</p> | |
| <button onclick="showMap()" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded-lg transition-colors"> | |
| View Museum Info | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer class="bg-blue-800 text-white py-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <h3 class="text-xl font-bold">The Wright Flyer</h3> | |
| <p class="text-blue-200">Celebrating the birth of aviation</p> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-white hover:text-blue-300 text-2xl"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-white hover:text-blue-300 text-2xl"><i class="fab fa-facebook"></i></a> | |
| <a href="#" class="text-white hover:text-blue-300 text-2xl"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-white hover:text-blue-300 text-2xl"><i class="fab fa-youtube"></i></a> | |
| </div> | |
| </div> | |
| <div class="border-t border-blue-700 mt-6 pt-6 text-center text-blue-200"> | |
| <p>© 2023 Wright Flyer Educational Project. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Modal for video --> | |
| <div id="video-modal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-lg overflow-hidden w-full max-w-4xl relative"> | |
| <button onclick="closeModal()" class="absolute top-4 right-4 text-white bg-black bg-opacity-50 rounded-full p-2 z-10"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| <div class="aspect-w-16 aspect-h-9"> | |
| <iframe id="video-frame" class="w-full h-96" src="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | |
| </div> | |
| <div class="p-4 bg-gray-100"> | |
| <h3 class="text-xl font-bold">First Flight Reenactment</h3> | |
| <p class="text-gray-700">Watch a recreation of the Wright brothers' historic first powered flight on December 17, 1903.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Modal for simulator --> | |
| <div id="simulator-modal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-lg overflow-hidden w-full max-w-4xl relative"> | |
| <button onclick="closeModal()" class="absolute top-4 right-4 text-white bg-black bg-opacity-50 rounded-full p-2 z-10"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| <div class="p-6"> | |
| <h3 class="text-2xl font-bold mb-4">Wright Flyer Simulator</h3> | |
| <div class="bg-gray-100 h-64 rounded-lg flex items-center justify-center mb-4"> | |
| <p class="text-gray-500">Flight simulator would appear here</p> | |
| </div> | |
| <div class="grid grid-cols-3 gap-4 mb-4"> | |
| <button class="bg-blue-600 text-white py-2 rounded-lg">Take Off</button> | |
| <button class="bg-blue-600 text-white py-2 rounded-lg">Turn Left</button> | |
| <button class="bg-blue-600 text-white py-2 rounded-lg">Turn Right</button> | |
| </div> | |
| <p class="text-gray-700">Try to maintain control of the Wright Flyer using the same controls the brothers used in 1903.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Part information display | |
| const partInfo = { | |
| 'wings': { | |
| title: 'Wings', | |
| description: 'The Wright Flyer had a wingspan of 40 feet 4 inches (12.3 m). The wings were built with spruce wood framework covered with muslin fabric. The airfoil shape was based on the Wrights\' wind tunnel tests, with a camber (curvature) of 1-in-20. The wings incorporated wing-warping for lateral control - the first practical system for controlling an aircraft in roll.' | |
| }, | |
| 'engine': { | |
| title: 'Engine', | |
| description: 'The Wright brothers designed and built their own 4-cylinder, water-cooled, gasoline engine with the help of their mechanic Charlie Taylor. It produced 12 horsepower (8.9 kW) and weighed 180 pounds (82 kg). The aluminum crankcase was revolutionary for its time. The engine had no throttle, running at essentially constant speed during flights.' | |
| }, | |
| 'propellers': { | |
| title: 'Propellers', | |
| description: 'The Wrights designed their own propellers after discovering that marine propeller theory didn\'t apply to air. Their twin, counter-rotating propellers were 8 feet 6 inches (2.6 m) in diameter, made of laminated spruce wood. They achieved an efficiency of about 70%, remarkable for the time. The propellers were connected to the engine by bicycle chains.' | |
| }, | |
| 'controls': { | |
| title: 'Flight Controls', | |
| description: 'The Wright Flyer had three-axis control: wing-warping for roll (lateral control), a movable rudder for yaw (directional control), and a forward elevator for pitch (longitudinal control). The pilot lay prone on the lower wing, operating the controls with his hips (for wing-warping) and hands (for elevator and rudder). This system became the basis for all aircraft control systems that followed.' | |
| } | |
| }; | |
| function showPartInfo(part) { | |
| document.getElementById('part-info').classList.remove('hidden'); | |
| document.getElementById('part-title').textContent = partInfo[part].title; | |
| document.getElementById('part-description').textContent = partInfo[part].description; | |
| } | |
| function hidePartInfo() { | |
| document.getElementById('part-info').classList.add('hidden'); | |
| } | |
| // Quiz functionality | |
| let correctAnswers = 0; | |
| let totalQuestions = 3; | |
| function checkAnswer(element, isCorrect) { | |
| // Remove any existing classes | |
| element.parentElement.querySelectorAll('.quiz-option').forEach(opt => { | |
| opt.classList.remove('correct', 'incorrect'); | |
| }); | |
| // Add appropriate class | |
| if (isCorrect) { | |
| element.classList.add('correct'); | |
| correctAnswers++; | |
| } else { | |
| element.classList.add('incorrect'); | |
| } | |
| // Disable all options in this question | |
| element.parentElement.querySelectorAll('.quiz-option').forEach(opt => { | |
| opt.style.pointerEvents = 'none'; | |
| }); | |
| // Check if all questions are answered | |
| checkQuizCompletion(); | |
| } | |
| function checkQuizCompletion() { | |
| const answeredQuestions = document.querySelectorAll('.quiz-option.correct, .quiz-option.incorrect').length / 4; | |
| if (answeredQuestions === totalQuestions) { | |
| showResults(); | |
| } | |
| } | |
| function showResults() { | |
| document.getElementById('quiz-results').classList.remove('hidden'); | |
| document.getElementById('score-display').textContent = `You got ${correctAnswers} out of ${totalQuestions} correct!`; | |
| // Scroll to results | |
| document.getElementById('quiz-results').scrollIntoView({ behavior: 'smooth' }); | |
| } | |
| function resetQuiz() { | |
| // Reset counters | |
| correctAnswers = 0; | |
| // Reset all options | |
| document.querySelectorAll('.quiz-option').forEach(opt => { | |
| opt.classList.remove('correct', 'incorrect'); | |
| opt.style.pointerEvents = 'auto'; | |
| }); | |
| // Hide results | |
| document.getElementById('quiz-results').classList.add('hidden'); | |
| } | |
| // Modal functions | |
| function playVideo() { | |
| document.getElementById('video-modal').classList.remove('hidden'); | |
| document.getElementById('video-frame').src = 'https://www.youtube.com/embed/iMhdksPF8CM?autoplay=1'; | |
| document.body.style.overflow = 'hidden'; | |
| } | |
| function showSimulator() { | |
| document.getElementById('simulator-modal').classList.remove('hidden'); | |
| document.body.style.overflow = 'hidden'; | |
| } | |
| function showMap() { | |
| alert('This would show museum location and information in a real implementation.'); | |
| } | |
| function closeModal() { | |
| document.getElementById('video-modal').classList.add('hidden'); | |
| document.getElementById('simulator-modal').classList.add('hidden'); | |
| document.getElementById('video-frame').src = ''; | |
| document.body.style.overflow = 'auto'; | |
| } | |
| // Close modal when clicking outside content | |
| window.onclick = function(event) { | |
| if (event.target == document.getElementById('video-modal')) { | |
| closeModal(); | |
| } | |
| if (event.target == document.getElementById('simulator-modal')) { | |
| closeModal(); | |
| } | |
| } | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Boody123/my-awesom-spac" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |