{"id":61,"date":"2025-08-25T06:59:26","date_gmt":"2025-08-25T06:59:26","guid":{"rendered":"http:\/\/103.250.186.101\/~learnbyanimation\/?page_id=61"},"modified":"2025-08-25T09:13:33","modified_gmt":"2025-08-25T09:13:33","slug":"physical-properties-of-liquid","status":"publish","type":"page","link":"https:\/\/learn-by-animation.com\/?page_id=61","title":{"rendered":"Physical properties of liquid"},"content":{"rendered":"\n

Physical properties of liquid<\/strong><\/h2>\n\n\n\n

Q: The volume of an air bubble is doubled as it rises from the bottom of a lake to its surface. The atmospheric pressure is 75 cm of mercury and the ratio of the density of mercury to that of lake water is 40\/3. What is the depth of the lake?<\/p>\n\n\n\n

A: 10 m<\/p>\n\n\n\n

B: 15 m<\/p>\n\n\n\n

C: 20 m<\/p>\n\n\n\n

D: 25 m<\/p>\n\n\n\n\n\n\n \n \n The Bubble’s Great Escape<\/title>\n <style>\n \/* --- Basic Setup & Fonts --- *\/\n .bubble-escape-body {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n background-color: #f0f8ff;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n min-height: 100vh;\n margin: 0;\n padding: 20px;\n box-sizing: border-box;\n }\n\n .bubble-escape-h1 {\n color: #003049;\n text-align: center;\n margin-bottom: 20px;\n }\n\n \/* --- The Main Stage (The Lake) --- *\/\n #animation-container {\n width: 850px;\n height: 600px;\n border: 2px solid #005a9c;\n border-radius: 15px;\n box-shadow: 0 10px 20px rgba(0,0,0,0.1);\n position: relative;\n overflow: hidden;\n background: linear-gradient(to bottom, #87CEEB, #2193b0);\n }\n\n #lake-bottom {\n position: absolute;\n bottom: 0;\n width: 100%;\n height: 500px;\n background: linear-gradient(to top, #003049, transparent);\n }\n\n \/* --- Animated Elements --- *\/\n #bubble {\n position: absolute;\n left: 50%;\n width: 50px;\n height: 50px;\n background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(173,216,230,0.7) 100%);\n border-radius: 50%;\n border: 2px solid white;\n transition: all 1s ease-in-out;\n transform-origin: center;\n }\n\n #atmosphere {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100px;\n background: rgba(200, 220, 240, 0.4);\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 1.5em;\n font-weight: bold;\n color: #003049;\n opacity: 0;\n transition: opacity 0.7s;\n }\n\n .info-box {\n position: absolute;\n font-family: 'Courier New', Courier, monospace;\n background: #fff;\n padding: 15px;\n border-radius: 10px;\n border: 2px solid #333;\n opacity: 0;\n transition: all 0.7s;\n text-align: left;\n z-index: 50;\n }\n #translator-box { top: 150px; left: 20px; font-size: 1em; }\n #stress-box { top: 150px; right: 20px; font-size: 1.1em; border-color: #d9534f; }\n #depth-box { bottom: 30px; left: 50%; transform: translateX(-50%); font-size: 1.2em; border-color: #5cb85c; width: 500px; text-align: center; }\n\n \/* --- Controls & Explanation --- *\/\n #explanation-box {\n margin-top: 20px;\n width: 95%;\n max-width: 850px;\n min-height: 60px;\n padding: 15px;\n border: 2px dashed #005a9c;\n background-color: rgba(255, 255, 255, 0.85);\n border-radius: 10px;\n text-align: center;\n font-size: 1.2em;\n color: #333;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: opacity 0.5s ease-in-out;\n }\n\n #controls {\n display: flex;\n align-items: center;\n margin-top: 20px;\n background-color: #fff;\n padding: 10px 20px;\n border-radius: 10px;\n box-shadow: 0 5px 15px rgba(0,0,0,0.1);\n }\n #step-slider { width: 400px; margin: 0 15px; cursor: pointer; }\n <\/style>\n<\/head>\n<div class=\"bubble-escape-body\">\n\n <h1 class=\"bubble-escape-h1\">The Bubble’s Great Escape<\/h1>\n\n <div id=\"animation-container\">\n <div id=\"atmosphere\">Atmosphere<\/div>\n <div id=\"lake-bottom\"><\/div>\n <div id=\"bubble\"><\/div>\n <div id=\"translator-box\" class=\"info-box\"><\/div>\n <div id=\"stress-box\" class=\"info-box\"><\/div>\n <div id=\"depth-box\" class=\"info-box\"><\/div>\n <\/div>\n\n <div id=\"explanation-box\">\n <p id=\"narrative-text\"><\/p>\n <\/div>\n\n <div id=\"controls\">\n <label for=\"step-slider\"><b>Story Step:<\/b><\/label>\n <input type=\"range\" id=\"step-slider\" min=\"0\" max=\"7\" value=\"0\">\n <\/div>\n\n <script>\n (function() {\n \/\/ --- Element Selection ---\n const narrative = document.getElementById('narrative-text');\n const slider = document.getElementById('step-slider');\n const bubble = document.getElementById('bubble');\n const atmosphere = document.getElementById('atmosphere');\n const translatorBox = document.getElementById('translator-box');\n const stressBox = document.getElementById('stress-box');\n const depthBox = document.getElementById('depth-box');\n\n \/\/ --- Scene Definitions ---\n const sceneStates = [\n \/\/ Step 0: Intro\n {\n narrativeHTML: \"Our hero, a tiny bubble, is trapped at the bottom of a deep lake.\",\n bubble_bottom: '30px', bubble_scale: '1', atmosphere_opacity: 0,\n translator_opacity: 0, stress_opacity: 0, depth_opacity: 0\n },\n \/\/ Step 1: The Clue\n {\n narrativeHTML: \"The bubble knows: if it reaches the surface, its size will DOUBLE. This is the key!\",\n bubble_scale: '1.2', \/\/ slightly pulse the bubble for emphasis\n },\n \/\/ Step 2: Analyze the \"Atmosphere Bully\"\n {\n narrativeHTML: \"First, analyze the enemy at the surface: the Atmosphere. Its pressure is 75cm of Mercury.\",\n bubble_scale: '1', atmosphere_opacity: 1,\n },\n \/\/ Step 3: The \"Magic Translator\"\n {\n narrativeHTML: \"Let's translate that pressure into 'cm of water' using our density ratio.\",\n translator_opacity: 1,\n translator_html: \"<b>Magic Translator<\/b><br>Pressure = 75cm Hg * (40\/3)<br><b>Pressure = 1000cm of Water<\/b>\"\n },\n \/\/ Step 4: The Escape!\n {\n narrativeHTML: \"The bubble escapes! As it rises, the pressure drops, and it grows...\",\n bubble_bottom: '470px', bubble_scale: '2',\n },\n \/\/ Step 5: The \"Stress Level\"\n {\n narrativeHTML: \"At the surface, we can calculate the bubble's constant 'Stress Level' (Pressure \u00d7 Size).\",\n stress_opacity: 1,\n stress_html: \"<b><u>Stress Level at Surface<\/u><\/b><br>Pressure = 1000cm Water<br>Size = 2 units<br><b>Stress = 1000 \u00d7 2 = 2000<\/b>\"\n },\n \/\/ Step 6: Finding Bottom Pressure\n {\n narrativeHTML: \"This Stress Level (2000) must have been the same at the bottom! So the total pressure there was...\",\n bubble_bottom: '30px', bubble_scale: '1',\n stress_html: \"<b><u>Pressure at Bottom<\/u><\/b><br>Stress Level \/ Size = Total Pressure<br>2000 \/ 1 = <b>2000cm of Water<\/b>\"\n },\n \/\/ Step 7: The Final Revelation\n {\n narrativeHTML: \"The total pressure at the bottom (2000) is just the Atmosphere (1000) + the Lake's Depth!\",\n depth_opacity: 1,\n depth_html: \"Total Pressure = Atmosphere + Lake Depth<br>2000cm = 1000cm + ???<br><b>Lake Depth = 1000cm (10 meters)<\/b>\"\n }\n ];\n\n \/\/ --- Core Animation Logic ---\n function applyState(stepIndex) {\n let currentState = {};\n \/\/ Combine all states up to the current step to ensure properties persist\n for (let i = 0; i <= stepIndex; i++) {\n Object.assign(currentState, sceneStates[i]);\n }\n \n narrative.innerHTML = currentState.narrativeHTML;\n bubble.style.bottom = currentState.bubble_bottom;\n bubble.style.transform = `translateX(-50%) scale(${currentState.bubble_scale})`;\n atmosphere.style.opacity = currentState.atmosphere_opacity;\n translatorBox.style.opacity = currentState.translator_opacity;\n translatorBox.innerHTML = currentState.translator_html || '';\n stressBox.style.opacity = currentState.stress_opacity;\n stressBox.innerHTML = currentState.stress_html || '';\n depthBox.style.opacity = currentState.depth_opacity;\n depthBox.innerHTML = currentState.depth_html || '';\n }\n\n \/\/ --- Event Listeners ---\n slider.addEventListener('input', (e) => {\n applyState(parseInt(e.target.value));\n });\n\n \/\/ --- Initial Setup ---\n applyState(0);\n })();\n <\/script>\n<\/div>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Physical properties of liquid Q: The volume of an air bubble is doubled as it rises from the bottom of a lake to its surface. The atmospheric pressure is 75 cm of mercury and the ratio of the density of mercury to that of lake water is 40\/3. What is the depth of the lake? […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":45,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-61","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=\/wp\/v2\/pages\/61","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=61"}],"version-history":[{"count":8,"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=\/wp\/v2\/pages\/61\/revisions"}],"predecessor-version":[{"id":75,"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=\/wp\/v2\/pages\/61\/revisions\/75"}],"up":[{"embeddable":true,"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=\/wp\/v2\/pages\/45"}],"wp:attachment":[{"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=61"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}