Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Interactive Chemistry Lessons</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> | |
| .atom-model { | |
| position: relative; | |
| width: 200px; | |
| height: 200px; | |
| margin: 0 auto; | |
| } | |
| .nucleus { | |
| position: absolute; | |
| width: 40px; | |
| height: 40px; | |
| background-color: #f87171; | |
| border-radius: 50%; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| box-shadow: 0 0 10px rgba(248, 113, 113, 0.7); | |
| } | |
| .electron { | |
| position: absolute; | |
| width: 10px; | |
| height: 10px; | |
| background-color: #60a5fa; | |
| border-radius: 50%; | |
| box-shadow: 0 0 5px rgba(96, 165, 250, 0.7); | |
| } | |
| .electron-path { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| border: 1px dashed rgba(255, 255, 255, 0.3); | |
| border-radius: 50%; | |
| } | |
| .bond-line { | |
| height: 4px; | |
| background-color: #f59e0b; | |
| margin: 20px 0; | |
| position: relative; | |
| } | |
| .bond-line::before, .bond-line::after { | |
| content: ''; | |
| position: absolute; | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| top: -8px; | |
| } | |
| .bond-line::before { | |
| left: -10px; | |
| background-color: #3b82f6; | |
| } | |
| .bond-line::after { | |
| right: -10px; | |
| background-color: #ef4444; | |
| } | |
| .matter-state { | |
| transition: all 0.3s ease; | |
| } | |
| .matter-state:hover { | |
| transform: scale(1.05); | |
| } | |
| .quiz-option { | |
| transition: all 0.2s ease; | |
| } | |
| .quiz-option:hover { | |
| background-color: #e5e7eb; | |
| } | |
| .quiz-option.selected { | |
| background-color: #93c5fd; | |
| } | |
| .quiz-option.correct { | |
| background-color: #86efac; | |
| } | |
| .quiz-option.incorrect { | |
| background-color: #fca5a5; | |
| } | |
| .progress-bar { | |
| transition: width 0.5s ease; | |
| } | |
| #lessonContainer { | |
| scroll-behavior: smooth; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 text-gray-800 font-sans"> | |
| <div class="container mx-auto px-4 py-8 max-w-4xl"> | |
| <header class="text-center mb-12"> | |
| <h1 class="text-4xl font-bold text-indigo-700 mb-2">Interactive Chemistry Lessons</h1> | |
| <p class="text-lg text-gray-600">Learn chemistry through engaging visualizations and test your knowledge with quizzes</p> | |
| </header> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-8"> | |
| <div class="flex border-b"> | |
| <div class="w-1/4 bg-indigo-50 p-4"> | |
| <h2 class="font-semibold text-indigo-800 mb-4">Lessons</h2> | |
| <nav> | |
| <ul class="space-y-2"> | |
| <li> | |
| <button onclick="showLesson(1)" class="w-full text-left px-3 py-2 rounded-md hover:bg-indigo-100 transition lesson-nav" data-lesson="1"> | |
| <i class="fas fa-atom mr-2 text-indigo-600"></i> Atoms Basics | |
| </button> | |
| </li> | |
| <li> | |
| <button onclick="showLesson(2)" class="w-full text-left px-3 py-2 rounded-md hover:bg-indigo-100 transition lesson-nav" data-lesson="2"> | |
| <i class="fas fa-link mr-2 text-indigo-600"></i> Chemical Bonds | |
| </button> | |
| </li> | |
| <li> | |
| <button onclick="showLesson(3)" class="w-full text-left px-3 py-2 rounded-md hover:bg-indigo-100 transition lesson-nav" data-lesson="3"> | |
| <i class="fas fa-temperature-high mr-2 text-indigo-600"></i> States of Matter | |
| </button> | |
| </li> | |
| </ul> | |
| </nav> | |
| </div> | |
| <div id="lessonContainer" class="w-3/4 p-6 overflow-y-auto" style="max-height: 80vh;"> | |
| <!-- Lesson 1: Atoms --> | |
| <div id="lesson1" class="lesson-content"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold text-indigo-700">Lesson 1: Understanding Atoms</h2> | |
| <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">Beginner</span> | |
| </div> | |
| <div class="mb-8"> | |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">What is an Atom?</h3> | |
| <p class="mb-4 text-gray-700">Atoms are the basic building blocks of matter. Everything around you is made of atoms - from the air you breathe to the device you're using right now.</p> | |
| <div class="bg-gray-100 p-4 rounded-lg mb-4"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="atom-model mb-4 md:mb-0 md:mr-6"> | |
| <div class="electron-path" style="width: 180px; height: 180px;"></div> | |
| <div class="electron-path" style="width: 120px; height: 120px;"></div> | |
| <div class="nucleus"></div> | |
| <div class="electron" style="top: 10px; left: 100px;"></div> | |
| <div class="electron" style="top: 100px; left: 190px;"></div> | |
| <div class="electron" style="top: 190px; left: 100px;"></div> | |
| <div class="electron" style="top: 100px; left: 10px;"></div> | |
| <div class="electron" style="top: 50px; left: 150px;"></div> | |
| <div class="electron" style="top: 150px; left: 150px;"></div> | |
| <div class="electron" style="top: 150px; left: 50px;"></div> | |
| <div class="electron" style="top: 50px; left: 50px;"></div> | |
| </div> | |
| <div> | |
| <p class="text-gray-700 mb-2"><span class="font-semibold">Nucleus:</span> The dense center of the atom containing protons and neutrons.</p> | |
| <p class="text-gray-700 mb-2"><span class="font-semibold">Protons:</span> Positively charged particles in the nucleus.</p> | |
| <p class="text-gray-700 mb-2"><span class="font-semibold">Neutrons:</span> Neutral particles in the nucleus.</p> | |
| <p class="text-gray-700"><span class="font-semibold">Electrons:</span> Negatively charged particles orbiting the nucleus.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6"> | |
| <div class="bg-blue-50 p-4 rounded-lg border border-blue-100"> | |
| <h4 class="font-semibold text-blue-800 mb-2">Proton</h4> | |
| <p class="text-sm text-blue-700">Charge: +1</p> | |
| <p class="text-sm text-blue-700">Mass: ~1 amu</p> | |
| </div> | |
| <div class="bg-green-50 p-4 rounded-lg border border-green-100"> | |
| <h4 class="font-semibold text-green-800 mb-2">Neutron</h4> | |
| <p class="text-sm text-green-700">Charge: 0</p> | |
| <p class="text-sm text-green-700">Mass: ~1 amu</p> | |
| </div> | |
| <div class="bg-purple-50 p-4 rounded-lg border border-purple-100"> | |
| <h4 class="font-semibold text-purple-800 mb-2">Electron</h4> | |
| <p class="text-sm text-purple-700">Charge: -1</p> | |
| <p class="text-sm text-purple-700">Mass: ~0 amu</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-8"> | |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">Atomic Structure</h3> | |
| <p class="mb-4 text-gray-700">Atoms are mostly empty space. If an atom were the size of a football stadium, the nucleus would be about the size of a marble at the center, and the electrons would be like tiny specks in the stands.</p> | |
| <div class="bg-gray-100 p-4 rounded-lg mb-4"> | |
| <div class="flex items-center justify-center mb-4"> | |
| <div class="relative" style="width: 300px; height: 300px;"> | |
| <div class="absolute inset-0 rounded-full border-2 border-gray-300 flex items-center justify-center" style="width: 300px; height: 300px;"> | |
| <div class="rounded-full bg-red-500" style="width: 10px; height: 10px;"></div> | |
| </div> | |
| <div class="absolute rounded-full bg-blue-500" style="width: 4px; height: 4px; top: 50px; left: 50px;"></div> | |
| <div class="absolute rounded-full bg-blue-500" style="width: 4px; height: 4px; top: 70px; left: 200px;"></div> | |
| <div class="absolute rounded-full bg-blue-500" style="width: 4px; height: 4px; top: 200px; left: 80px;"></div> | |
| <div class="absolute rounded-full bg-blue-500" style="width: 4px; height: 4px; top: 220px; left: 220px;"></div> | |
| </div> | |
| </div> | |
| <p class="text-center text-gray-700">This visualization shows the relative size of the nucleus (red dot) compared to the electron cloud (blue dots).</p> | |
| </div> | |
| </div> | |
| <!-- Quiz Section --> | |
| <div class="mt-12 pt-6 border-t"> | |
| <h3 class="text-xl font-semibold mb-6 text-center text-indigo-700">Lesson 1 Quiz</h3> | |
| <div class="quiz-question mb-8"> | |
| <p class="font-medium mb-4">1. What are the three main subatomic particles that make up an atom?</p> | |
| <div class="space-y-3"> | |
| <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'a')"> | |
| A) Protons, neutrons, and electrons | |
| </div> | |
| <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'b')"> | |
| B) Protons, electrons, and ions | |
| </div> | |
| <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'c')"> | |
| C) Neutrons, electrons, and molecules | |
| </div> | |
| <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'd')"> | |
| D) Protons, neutrons, and photons | |
| </div> | |
| </div> | |
| <div class="mt-3 text-sm text-green-600 hidden correct-answer">Correct! Protons, neutrons, and electrons are the three main subatomic particles.</div> | |
| </div> | |
| <div class="quiz-question mb-8"> | |
| <p class="font-medium mb-4">2. Where is most of the mass of an atom located?</p> | |
| <div class="space-y-3"> | |
| <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'a')"> | |
| A) In the electron cloud | |
| </div> | |
| <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'b')"> | |
| B) In the nucleus | |
| </div> | |
| <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'c')"> | |
| C) Evenly distributed throughout the atom | |
| </div> | |
| <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'd')"> | |
| D) In the space between the nucleus and electrons | |
| </div> | |
| </div> | |
| <div class="mt-3 text-sm text-green-600 hidden correct-answer">Correct! The nucleus contains nearly all of an atom's mass.</div> | |
| </div> | |
| <div class="quiz-question mb-8"> | |
| <p class="font-medium mb-4">3. What is the charge of a neutron?</p> | |
| <div class="space-y-3"> | |
| <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'a')"> | |
| A) Positive (+1) | |
| </div> | |
| <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'b')"> | |
| B) Negative (-1) | |
| </div> | |
| <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'c')"> | |
| C) Neutral (0) | |
| </div> | |
| <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'd')"> | |
| D) It varies | |
| </div> | |
| </div> | |
| <div class="mt-3 text-sm text-green-600 hidden correct-answer">Correct! Neutrons are neutral particles with no charge.</div> | |
| </div> | |
| <div class="text-center mt-8"> | |
| <button onclick="checkQuizAnswers(1)" class="bg-indigo-600 text-white px-6 py-2 rounded-lg hover:bg-indigo-700 transition"> | |
| Check Answers | |
| </button> | |
| <div class="mt-4 text-gray-600 hidden" id="quiz1Result"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Lesson 2: Chemical Bonds --> | |
| <div id="lesson2" class="lesson-content hidden"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold text-indigo-700">Lesson 2: Chemical Bonds</h2> | |
| <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">Intermediate</span> | |
| </div> | |
| <div class="mb-8"> | |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">Types of Chemical Bonds</h3> | |
| <p class="mb-4 text-gray-700">Chemical bonds are the attractive forces that hold atoms together in compounds. There are three primary types of chemical bonds:</p> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6"> | |
| <div class="bg-red-50 p-4 rounded-lg border border-red-100"> | |
| <h4 class="font-semibold text-red-800 mb-2">Ionic Bonds</h4> | |
| <p class="text-sm text-red-700">Formed by transfer of electrons</p> | |
| <p class="text-sm text-red-700">Between metals and non-metals</p> | |
| <div class="mt-3"> | |
| <div class="bond-line"></div> | |
| <p class="text-xs text-center">Na<sup>+</sup> — Cl<sup>-</sup></p> | |
| </div> | |
| </div> | |
| <div class="bg-blue-50 p-4 rounded-lg border border-blue-100"> | |
| <h4 class="font-semibold text-blue-800 mb-2">Covalent Bonds</h4> | |
| <p class="text-sm text-blue-700">Formed by sharing electrons</p> | |
| <p class="text-sm text-blue-700">Between non-metals</p> | |
| <div class="mt-3 flex justify-center"> | |
| <div class="relative" style="width: 80px; height: 60px;"> | |
| <div class="absolute rounded-full bg-gray-300" style="width: 30px; height: 30px; left: 0; top: 15px;"></div> | |
| <div class="absolute rounded-full bg-gray-300" style="width: 30px; height: 30px; right: 0; top: 15px;"></div> | |
| <div class="absolute bg-yellow-400" style="width: 20px; height: 4px; left: 30px; top: 28px;"></div> | |
| </div> | |
| </div> | |
| <p class="text-xs text-center mt-1">H — H</p> | |
| </div> | |
| <div class="bg-purple-50 p-4 rounded-lg border border-purple-100"> | |
| <h4 class="font-semibold text-purple-800 mb-2">Metallic Bonds</h4> | |
| <p class="text-sm text-purple-700">Electron "sea" model</p> | |
| <p class="text-sm text-purple-700">Between metal atoms</p> | |
| <div class="mt-3 flex justify-center"> | |
| <div class="relative" style="width: 100px; height: 60px;"> | |
| <div class="absolute rounded-full bg-gray-400" style="width: 20px; height: 20px; left: 10px; top: 20px;"></div> | |
| <div class="absolute rounded-full bg-gray-400" style="width: 20px; height: 20px; left: 40px; top: 10px;"></div> | |
| <div class="absolute rounded-full bg-gray-400" style="width: 20px; height: 20px; left: 70px; top: 30px;"></div> | |
| <div class="absolute bg-yellow-200 opacity-50 rounded-full" style="width: 100px; height: 60px;"></div> | |
| </div> | |
| </div> | |
| <p class="text-xs text-center mt-1">Cu — Cu — Cu</p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-100 p-4 rounded-lg mb-4"> | |
| <h4 class="font-semibold mb-2 text-gray-800">Ionic Bond Example: Sodium Chloride (NaCl)</h4> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="mb-4 md:mb-0 md:mr-6"> | |
| <div class="flex items-center justify-center space-x-8"> | |
| <div class="text-center"> | |
| <div class="rounded-full bg-blue-500 text-white w-12 h-12 flex items-center justify-center mx-auto mb-1">Na</div> | |
| <p class="text-xs">Sodium atom</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="rounded-full bg-green-500 text-white w-12 h-12 flex items-center justify-center mx-auto mb-1">Cl</div> | |
| <p class="text-xs">Chlorine atom</p> | |
| </div> | |
| </div> | |
| <div class="text-center my-2"> | |
| <i class="fas fa-arrow-down text-gray-500"></i> | |
| </div> | |
| <div class="flex items-center justify-center space-x-8"> | |
| <div class="text-center"> | |
| <div class="rounded-full bg-blue-500 text-white w-12 h-12 flex items-center justify-center mx-auto mb-1">Na<sup>+</sup></div> | |
| <p class="text-xs">Sodium ion</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="rounded-full bg-green-500 text-white w-12 h-12 flex items-center justify-center mx-auto mb-1">Cl<sup>-</sup></div> | |
| <p class="text-xs">Chloride ion</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <p class="text-gray-700 mb-2">1. Sodium (Na) donates its valence electron to chlorine (Cl)</p> | |
| <p class="text-gray-700 mb-2">2. Sodium becomes positively charged (Na<sup>+</sup>)</p> | |
| <p class="text-gray-700 mb-2">3. Chlorine becomes negatively charged (Cl<sup>-</sup>)</p> | |
| <p class="text-gray-700">4. The opposite charges attract, forming an ionic bond</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-8"> | |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">Covalent Bonding</h3> | |
| <p class="mb-4 text-gray-700">Covalent bonds form when atoms share electrons to achieve a full outer shell. This type of bond is common between non-metal atoms.</p> | |
| <div class="bg-gray-100 p-4 rounded-lg mb-4"> | |
| <h4 class="font-semibold mb-2 text-gray-800">Water Molecule (H₂O)</h4> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="mb-4 md:mb-0 md:mr-6"> | |
| <div class="relative" style="width: 200px; height: 150px;"> | |
| <!-- Oxygen --> | |
| <div class="absolute rounded-full bg-red-400 text-white w-14 h-14 flex items-center justify-center" style="left: 50%; top: 50%; transform: translate(-50%, -50%);">O</div> | |
| <!-- Hydrogen 1 --> | |
| <div class="absolute rounded-full bg-blue-400 text-white w-10 h-10 flex items-center justify-center" style="left: 20%; top: 30%;">H</div> | |
| <!-- Hydrogen 2 --> | |
| <div class="absolute rounded-full bg-blue-400 text-white w-10 h-10 flex items-center justify-center" style="left: 20%; top: 70%;">H</div> | |
| <!-- Bonds --> | |
| <div class="absolute bg-gray-400" style="width: 60px; height: 3px; left: 35%; top: 40%; transform: rotate(-20deg);"></div> | |
| <div class="absolute bg-gray-400" style="width: 60px; height: 3px; left: 35%; top: 60%; transform: rotate(20deg);"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <p class="text-gray-700 mb-2">1. Oxygen has 6 valence electrons and needs 2 more to complete its outer shell</p> | |
| <p class="text-gray-700 mb-2">2. Each hydrogen has 1 valence electron and needs 1 more</p> | |
| <p class="text-gray-700">3. Oxygen shares one electron with each hydrogen, forming two covalent bonds</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="bg-yellow-50 p-4 rounded-lg border border-yellow-100"> | |
| <h4 class="font-semibold text-yellow-800 mb-2">Single Bond</h4> | |
| <p class="text-sm text-yellow-700">One shared pair of electrons</p> | |
| <div class="mt-2 flex justify-center"> | |
| <div class="relative" style="width: 100px; height: 50px;"> | |
| <div class="absolute rounded-full bg-gray-300" style="width: 30px; height: 30px; left: 0; top: 10px;"></div> | |
| <div class="absolute rounded-full bg-gray-300" style="width: 30px; height: 30px; right: 0; top: 10px;"></div> | |
| <div class="absolute bg-gray-500" style="width: 40px; height: 2px; left: 30px; top: 25px;"></div> | |
| </div> | |
| </div> | |
| <p class="text-xs text-center mt-1">H—H (Hydrogen molecule)</p> | |
| </div> | |
| <div class="bg-green-50 p-4 rounded-lg border border-green-100"> | |
| <h4 class="font-semibold text-green-800 mb-2">Double Bond</h4> | |
| <p class="text-sm text-green-700">Two shared pairs of electrons</p> | |
| <div class="mt-2 flex justify-center"> | |
| <div class="relative" style="width: 100px; height: 50px;"> | |
| <div class="absolute rounded-full bg-gray-300" style="width: 30px; height: 30px; left: 0; top: 10px;"></div> | |
| <div class="absolute rounded-full bg-gray-300" style="width: 30px; height: 30px; right: 0; top: 10px;"></div> | |
| <div class="absolute bg-gray-500" style="width: 40px; height: 2px; left: 30px; top: 20px;"></div> | |
| <div class="absolute bg-gray-500" style="width: 40px; height: 2px; left: 30px; top: 30px;"></div> | |
| </div> | |
| </div> | |
| <p class="text-xs text-center mt-1">O=O (Oxygen molecule)</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quiz Section --> | |
| <div class="mt-12 pt-6 border-t"> | |
| <h3 class="text-xl font-semibold mb-6 text-center text-indigo-700">Lesson 2 Quiz</h3> | |
| <div class="quiz-question mb-8"> | |
| <p class="font-medium mb-4">1. Which type of bond involves the transfer of electrons from one atom to another?</p> | |
| <div class="space-y-3"> | |
| <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'a')"> | |
| A) Covalent bond | |
| </div> | |
| <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'b')"> | |
| B) Ionic bond | |
| </div> | |
| <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'c')"> | |
| C) Metallic bond | |
| </div> | |
| <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'd')"> | |
| D) Hydrogen bond | |
| </div> | |
| </div> | |
| <div class="mt-3 text-sm text-green-600 hidden correct-answer">Correct! Ionic bonds form through electron transfer.</div> | |
| </div> | |
| <div class="quiz-question mb-8"> | |
| <p class="font-medium mb-4">2. In a water molecule (H₂O), how many covalent bonds does the oxygen atom form?</p> | |
| <div class="space-y-3"> | |
| <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'a')"> | |
| A) 1 | |
| </div> | |
| <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'b')"> | |
| B) 2 | |
| </div> | |
| <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'c')"> | |
| C) 3 | |
| </div> | |
| <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'd')"> | |
| D) 4 | |
| </div> | |
| </div> | |
| <div class="mt-3 text-sm text-green-600 hidden correct-answer">Correct! Oxygen forms two covalent bonds in water - one with each hydrogen atom.</div> | |
| </div> | |
| <div class="quiz-question mb-8"> | |
| <p class="font-medium mb-4">3. Which of the following best describes metallic bonding?</p> | |
| <div class="space-y-3"> | |
| <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'a')"> | |
| A) Sharing of electron pairs between atoms | |
| </div> | |
| <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'b')"> | |
| B) Transfer of electrons from one atom to another | |
| </div> | |
| <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'c')"> | |
| C) A "sea" of delocalized electrons surrounding positive metal ions | |
| </div> | |
| <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'd')"> | |
| D) Weak attraction between polar molecules | |
| </div> | |
| </div> | |
| <div class="mt-3 text-sm text-green-600 hidden correct-answer">Correct! Metallic bonds involve a "sea" of delocalized electrons.</div> | |
| </div> | |
| <div class="text-center mt-8"> | |
| <button onclick="checkQuizAnswers(2)" class="bg-indigo-600 text-white px-6 py-2 rounded-lg hover:bg-indigo-700 transition"> | |
| Check Answers | |
| </button> | |
| <div class="mt-4 text-gray-600 hidden" id="quiz2Result"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Lesson 3: States of Matter --> | |
| <div id="lesson3" class="lesson-content hidden"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold text-indigo-700">Lesson 3: States of Matter</h2> | |
| <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">Beginner</span> | |
| </div> | |
| <div class="mb-8"> | |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">The Three Common States of Matter</h3> | |
| <p class="mb-4 text-gray-700">Matter exists in different states depending on temperature and pressure. The three most common states are solid, liquid, and gas.</p> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6"> | |
| <div class="matter-state bg-blue-50 p-4 rounded-lg border border-blue-100"> | |
| <h4 class="font-semibold text-blue-800 mb-2">Solid</h4> | |
| <div class="flex justify-center mb-3"> | |
| <div class="grid grid-cols-4 gap-1" style="width: 100px;"> | |
| <div class="bg-blue-400 rounded-sm" style="height: 20px;"></div> | |
| <div class="bg-blue-400 rounded-sm" style="height: 20px;"></div> | |
| <div class="bg-blue-400 rounded-sm" style="height: 20px;"></div> | |
| <div class="bg-blue-400 rounded-sm" style="height: 20px;"></div> | |
| <div class="bg-blue-400 rounded-sm" style="height: 20px;"></div> | |
| <div class="bg-blue-400 rounded-sm" style="height: 20px;"></div> | |
| <div class="bg-blue-400 rounded-sm" style="height: 20px;"></div> | |
| <div class="bg-blue-400 rounded-sm" style="height: 20px;"></div> | |
| <div class="bg-blue-400 rounded-sm" style="height: 20px;"></div> | |
| <div class="bg-blue-400 rounded-sm" style="height: 20px;"></div> | |
| <div class="bg-blue-400 rounded-sm" style="height: 20px;"></div> | |
| <div class="bg-blue-400 rounded-sm" style="height: 20px;"></div> | |
| </div> | |
| </div> | |
| <ul class="text-sm text-blue-700 list-disc pl-5"> | |
| <li>Definite shape and volume</li> | |
| <li>Particles vibrate in place</li> | |
| <li>Strong intermolecular forces</li> | |
| </ul> | |
| </div> | |
| <div class="matter-state bg-green-50 p-4 rounded-lg border border-green-100"> | |
| <h4 class="font-semibold text-green-800 mb-2">Liquid</h4> | |
| <div class="flex justify-center mb-3"> | |
| <div class="relative" style="width: 100px; height: 60px;"> | |
| <div class="absolute bg-green-400 rounded-full" style="width: 15px; height: 15px; top: 10px; left: 10px;"></div> | |
| <div class="absolute bg-green-400 rounded-full" style="width: 15px; height: 15px; top: 15px; left: 30px;"></div> | |
| <div class="absolute bg-green-400 rounded-full" style="width: 15px; height: 15px; top: 5px; left: 50px;"></div> | |
| <div class="absolute bg-green-400 rounded-full" style="width: 15px; height: 15px; top: 20px; left: 70px;"></div> | |
| <div class="absolute bg-green-400 rounded-full" style="width: 15px; height: 15px; top: 30px; left: 20px;"></div> | |
| <div class="absolute bg-green-400 rounded-full" style="width: 15px; height: 15px; top: 35px; left: 40px;"></div> | |
| <div class="absolute bg-green-400 rounded-full" style="width: 15px; height: 15px; top: 25px; left: 60px;"></div> | |
| </div> | |
| </div> | |
| <ul class="text-sm text-green-700 list-disc pl-5"> | |
| <li>Definite volume, no definite shape</li> | |
| <li>Particles can slide past each other</li> | |
| <li>Moderate intermolecular forces</li> | |
| </ul> | |
| </div> | |
| <div class="matter-state bg-purple-50 p-4 rounded-lg border border-purple-100"> | |
| <h4 class="font-semibold text-purple-800 mb-2">Gas</h4> | |
| <div class="flex justify-center mb-3"> | |
| <div class="relative" style="width: 100px; height: 60px;"> | |
| <div class="absolute bg-purple-400 rounded-full" style="width: 10px; height: 10px; top: 5px; left: 5px;"></div> | |
| <div class="absolute bg-purple-400 rounded-full" style="width: 10px; height: 10px; top: 15px; left: 25px;"></div> | |
| <div class="absolute bg-purple-400 rounded-full" style="width: 10px; height: 10px; top: 25px; left: 45px;"></div> | |
| <div class="absolute bg-purple-400 rounded-full" style="width: 10px; height: 10px; top: 35px; left: 65px;"></div> | |
| <div class="absolute bg-purple-400 rounded-full" style="width: 10px; height: 10px; top: 45px; left: 85px;"></div> | |
| <div class="absolute bg-purple-400 rounded-full" style="width: 10px; height: 10px; top: 10px; left: 60px;"></div> | |
| <div class="absolute bg-purple-400 rounded-full" style="width: 10px; height: 10px; top: 20px; left: 80px;"></div> | |
| </div> | |
| </div> | |
| <ul class="text-sm text-purple-700 list-disc pl-5"> | |
| <li>No definite shape or volume</li> | |
| <li>Particles move freely</li> | |
| <li>Weak intermolecular forces</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="bg-gray-100 p-4 rounded-lg mb-4"> | |
| <h4 class="font-semibold mb-2 text-gray-800">Phase Changes</h4> | |
| <div class="flex flex-col items-center"> | |
| <div class="relative" style="width: 100%; max-width: 400px;"> | |
| <div class="flex justify-between mb-2"> | |
| <div class="text-center"> | |
| <div class="rounded-full bg-blue-100 p-2 mx-auto"> | |
| <i class="fas fa-snowflake text-blue-500"></i> | |
| </div> | |
| <p class="text-xs mt-1">Solid</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="rounded-full bg-green-100 p-2 mx-auto"> | |
| <i class="fas fa-tint text-green-500"></i> | |
| </div> | |
| <p class="text-xs mt-1">Liquid</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="rounded-full bg-purple-100 p-2 mx-auto"> | |
| <i class="fas fa-wind text-purple-500"></i> | |
| </div> | |
| <p class="text-xs mt-1">Gas</p> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <div class="text-right"> | |
| <p class="text-xs">Melting</p> | |
| <i class="fas fa-arrow-right text-blue-500"></i> | |
| </div> | |
| <div class="text-left"> | |
| <p class="text-xs">Freezing</p> | |
| <i class="fas fa-arrow-left text-blue-500"></i> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-xs">Vaporization</p> | |
| <i class="fas fa-arrow-right text-green-500"></i> | |
| </div> | |
| <div class="text-left"> | |
| <p class="text-xs">Condensation</p> | |
| <i class="fas fa-arrow-left text-green-500"></i> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-xs">Sublimation</p> | |
| <i class="fas fa-arrow-right text-purple-500"></i> | |
| </div> | |
| <div class="text-left"> | |
| <p class="text-xs">Deposition</p> | |
| <i class="fas fa-arrow-left text-purple-500"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-8"> | |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">Particle Behavior</h3> | |
| <p class="mb-4 text-gray-700">The state of matter depends on how particles interact with each other and how much energy they have.</p> | |
| <div class="bg-gray-100 p-4 rounded-lg mb-4"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="mb-4 md:mb-0 md:mr-6"> | |
| <div class="relative" style="width: 300px; height: 200px;"> | |
| <!-- Solid --> | |
| <div class="absolute left-0 top-0 w-1/3 h-full"> | |
| <div class="grid grid-cols-3 gap-1"> | |
| <div class="bg-blue-400 rounded-sm" style="height: 15px;"></div> | |
| <div class="bg-blue-400 rounded-sm" style="height: 15px;"></div> | |
| <div class="bg-blue-400 rounded-sm" style="height: 15px;"></div> | |
| <div class="bg-blue-400 rounded-sm" style="height: 15px;"></div> | |
| <div class="bg-blue-400 rounded-sm" style="height: 15px;"></div> | |
| <div class="bg-blue-400 rounded-sm" style="height: 15px;"></div> | |
| <div class="bg-blue-400 rounded-sm" style="height: 15px;"></div> | |
| <div class="bg-blue-400 rounded-sm" style="height: 15px;"></div> | |
| <div class="bg-blue-400 rounded-sm" style="height: 15px;"></div> | |
| </div> | |
| <p class="text-xs text-center mt-1">Solid</p> | |
| </div> | |
| <!-- Liquid --> | |
| <div class="absolute left-1/3 top-0 w-1/3 h-full"> | |
| <div class="relative h-full"> | |
| <div class="absolute bg-green-400 rounded-full" style="width: 15px; height: 15px; top: 20px; left: 20px;"></div> | |
| <div class="absolute bg-green-400 rounded-full" style="width: 15px; height: 15px; top: 40px; left: 40px;"></div> | |
| <div class="absolute bg-green-400 rounded-full" style="width: 15px; height: 15px; top: 60px; left: 10px;"></div> | |
| <div class="absolute bg-green-400 rounded-full" style="width: 15px; height: 15px; top: 80px; left: 50px;"></div> | |
| <div class="absolute bg-green-400 rounded-full" style="width: 15px; height: 15px; top: 30px; left: 70px;"></div> | |
| <div class="absolute bg-green-400 rounded-full" style="width: 15px; height: 15px; top: 50px; left: 30px;"></div> | |
| </div> | |
| <p class="text-xs text-center mt-1">Liquid</p> | |
| </div> | |
| <!-- Gas --> | |
| <div class="absolute left-2/3 top-0 w-1/3 h-full"> | |
| <div class="relative h-full"> | |
| <div class="absolute bg-purple-400 rounded-full" style="width: 12px; height: 12px; top: 10px; left: 10px;"></div> | |
| <div class="absolute bg-purple-400 rounded-full" style="width: 12px; height: 12px; top: 30px; left: 40px;"></div> | |
| <div class="absolute bg-purple-400 rounded-full" style="width: 12px; height: 12px; top: 60px; left: 20px;"></div> | |
| <div class="absolute bg-purple-400 rounded-full" style="width: 12px; height: 12px; top: 80px; left: 60px;"></div> | |
| <div class="absolute bg-purple-400 rounded-full" style="width: 12px; height: 12px; top: 20px; left: 70px;"></div> | |
| <div class="absolute bg-purple-400 rounded-full" style="width: 12px; height: 12px; top: 50px; left: 30px;"></div> | |
| </div> | |
| <p class="text-xs text-center mt-1">Gas</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <p class="text-gray-700 mb-2"><span class="font-semibold">Energy:</span> As you add energy (heat), particles move faster and overcome intermolecular forces.</p> | |
| <p class="text-gray-700 mb-2"><span class="font-semibold">Pressure:</span> Increasing pressure can force particles closer together, favoring solid or liquid states.</p> | |
| <p class="text-gray-700"><span class="font-semibold">Temperature:</span> Higher temperatures give particles more kinetic energy, favoring gas states.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="bg-red-50 p-4 rounded-lg border border-red-100"> | |
| <h4 class="font-semibold text-red-800 mb-2">Plasma</h4> | |
| <p class="text-sm text-red-700">The fourth state of matter at very high temperatures</p> | |
| <div class="mt-2 flex justify-center"> | |
| <i class="fas fa-bolt text-yellow-500 text-3xl"></i> | |
| </div> | |
| <p class="text-xs text-center mt-1">Found in stars and lightning</p> | |
| </div> | |
| <div class="bg-indigo-50 p-4 rounded-lg border border-indigo-100"> | |
| <h4 class="font-semibold text-indigo-800 mb-2">Bose-Einstein Condensate</h4> | |
| <p class="text-sm text-indigo-700">The fifth state of matter at extremely low temperatures</p> | |
| <div class="mt-2 flex justify-center"> | |
| <i class="fas fa-temperature-low text-blue-500 text-3xl"></i> | |
| </div> | |
| <p class="text-xs text-center mt-1">Near absolute zero (-273°C)</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quiz Section --> | |
| <div class="mt-12 pt-6 border-t"> | |
| <h3 class="text-xl font-semibold mb-6 text-center text-indigo-700">Lesson 3 Quiz</h3> | |
| <div class="quiz-question mb-8"> | |
| <p class="font-medium mb-4">1. Which state of matter has a definite volume but no definite shape?</p> | |
| <div class="space-y-3"> | |
| <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'a')"> | |
| A) Solid | |
| </div> | |
| <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'b')"> | |
| B) Liquid | |
| </div> | |
| <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'c')"> | |
| C) Gas | |
| </div> | |
| <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'd')"> | |
| D) Plasma | |
| </div> | |
| </div> | |
| <div class="mt-3 text-sm text-green-600 hidden correct-answer">Correct! Liquids have a definite volume but take the shape of their container.</div> | |
| </div> | |
| <div class="quiz-question mb-8"> | |
| <p class="font-medium mb-4">2. What is the process called when a solid changes directly to a gas without becoming a liquid first?</p> | |
| <div class="space-y-3"> | |
| <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'a')"> | |
| A) Melting | |
| </div> | |
| <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'b')"> | |
| B) Freezing | |
| </div> | |
| <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'c')"> | |
| C) Sublimation | |
| </div> | |
| <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'd')"> | |
| D) Condensation | |
| </div> | |
| </div> | |
| <div class="mt-3 text-sm text-green-600 hidden correct-answer">Correct! Sublimation is when a solid changes directly to a gas (like dry ice).</div> | |
| </div> | |
| <div class="quiz-question mb-8"> | |
| <p class="font-medium mb-4">3. Which of the following is NOT true about gases?</p> | |
| <div class="space-y-3"> | |
| <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'a')"> | |
| A) They have no definite shape | |
| </div> | |
| <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'b')"> | |
| B) They have no definite volume | |
| </div> | |
| <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'c')"> | |
| C) Their particles are tightly packed together | |
| </div> | |
| <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'd')"> | |
| D) They expand to fill their container | |
| </div> | |
| </div> | |
| <div class="mt-3 text-sm text-green-600 hidden correct-answer">Correct! Gas particles are not tightly packed - they have lots of space between them.</div> | |
| </div> | |
| <div class="text-center mt-8"> | |
| <button onclick="checkQuizAnswers(3)" class="bg-indigo-600 text-white px-6 py-2 rounded-lg hover:bg-indigo-700 transition"> | |
| Check Answers | |
| </button> | |
| <div class="mt-4 text-gray-600 hidden" id="quiz3Result"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer class="text-center text-gray-600 text-sm mt-8"> | |
| <p>© 2023 Interactive Chemistry Lessons. All rights reserved.</p> | |
| </footer> | |
| </div> | |
| <script> | |
| // Show the first lesson by default | |
| document.addEventListener('DOMContentLoaded', function() { | |
| showLesson(1); | |
| // Animate electrons in the atom model | |
| animateElectrons(); | |
| }); | |
| function showLesson(lessonNumber) { | |
| // Hide all lesson contents | |
| document.querySelectorAll('.lesson-content').forEach(el => { | |
| el.classList.add('hidden'); | |
| }); | |
| // Show the selected lesson | |
| document.getElementById('lesson' + lessonNumber).classList.remove('hidden'); | |
| // Update active nav button | |
| document.querySelectorAll('.lesson-nav').forEach(el => { | |
| el.classList.remove('bg-indigo-200'); | |
| if (el.getAttribute('data-lesson') == lessonNumber) { | |
| el.classList.add('bg-indigo-200'); | |
| } | |
| }); | |
| // Scroll to top of lesson container | |
| document.getElementById('lessonContainer').scrollTop = 0; | |
| } | |
| function animateElectrons() { | |
| const electrons = document.querySelectorAll('.electron'); | |
| let angle = 0; | |
| setInterval(() => { | |
| angle += 0.01; | |
| electrons.forEach((electron, index) => { | |
| const radius = index < 4 ? 90 : 60; // Two different orbits | |
| const offset = index * (Math.PI / (electrons.length / 2)); | |
| const x = 100 + radius * Math.cos(angle + offset); | |
| const y = 100 + radius * Math.sin(angle + offset); | |
| electron.style.left = x + 'px'; | |
| electron.style.top = y + 'px'; | |
| }); | |
| }, 20); | |
| } | |
| function selectOption(optionElement, optionValue) { | |
| // Remove selection from all options in this question | |
| const questionDiv = optionElement.closest('.quiz-question'); | |
| questionDiv.querySelectorAll('.quiz-option').forEach(opt => { | |
| opt.classList.remove('selected'); | |
| }); | |
| // Select this option | |
| optionElement.classList.add('selected'); | |
| optionElement.setAttribute('data-selected', optionValue); | |
| } | |
| function checkQuizAnswers(quizNumber) { | |
| let correctAnswers = 0; | |
| const totalQuestions = 3; | |
| const quizDiv = document.getElementById('lesson' + quizNumber); | |
| // Define correct answers for each quiz | |
| const correctResponses = { | |
| 1: ['a', 'b', 'c'], | |
| 2: ['b', 'b', 'c'], | |
| 3: ['b', 'c', 'c'] | |
| }; | |
| // Check each question | |
| quizDiv.querySelectorAll('.quiz-question').forEach((question, index) => { | |
| const selectedOption = question.querySelector('.selected'); | |
| if (selectedOption) { | |
| const selectedValue = selectedOption.getAttribute('data-selected'); | |
| const correctValue = correctResponses[quizNumber][index]; | |
| // Mark correct/incorrect | |
| if (selectedValue === correctValue) { | |
| selectedOption.classList.add('correct'); | |
| correctAnswers++; | |
| } else { | |
| selectedOption.classList.add('incorrect'); | |
| // Also highlight the correct answer | |
| question.querySelectorAll('.quiz-option').forEach(opt => { | |
| if (opt.getAttribute('data-selected') === correctValue) { | |
| opt.classList.add('correct'); | |
| } | |
| }); | |
| } | |
| // Show explanation | |
| question.querySelector('.correct-answer').classList.remove('hidden'); | |
| } | |
| }); | |
| // Show result | |
| const resultDiv = document.getElementById('quiz' + quizNumber + 'Result'); | |
| resultDiv.textContent = `You got ${correctAnswers} out of ${totalQuestions} correct!`; | |
| resultDiv.classList.remove('hidden'); | |
| if (correctAnswers === totalQuestions) { | |
| resultDiv.classList.add('text-green-600'); | |
| resultDiv.classList.remove('text-red-600'); | |
| } else { | |
| resultDiv.classList.add('text-red-600'); | |
| resultDiv.classList.remove('text-green-600'); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |