Phenol \u2014 Distinguishing Tests (CSS Lab Slider)<\/title>\n <style>\n \/* --- Basic Setup & Fonts --- *\/\n :root{\n --bench:#c9b197;\n --wall:#e9eef5;\n --steel:#9aa3ac;\n --glass:#cfe7ff80;\n --liquid-clear:#bfe9ff;\n --bromine:#e07a17;\n --violet:#7a3fa1;\n --acid-red:#d33131;\n --text:#0f172a;\n --muted:#475569;\n --card:#ffffff;\n --shadow:0 10px 30px rgba(0,0,0,.18);\n }\n .phenol-lab-body {\n margin:0;\n font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;\n color:var(--text);\n background:linear-gradient(180deg,var(--wall) 0 60%, #dfe6ee 60%);\n display:grid;\n place-items:center;\n min-height:100vh;\n padding: 20px 0;\n box-sizing: border-box;\n }\n .content-wrapper {\n width:min(920px,95vw);\n background:var(--card);\n border-radius:18px;\n box-shadow:var(--shadow);\n overflow:hidden;\n border:1px solid #e5e7eb;\n }\n .phenol-lab-h1 {\n font-size:1.05rem;\n margin:0;\n font-weight:700;\n letter-spacing:.2px;\n padding:14px 18px;\n background:#0ea5e9;\n color:#fff;\n text-align: center;\n }\n\n \/* --- The Main Stage (The Lab) --- *\/\n #animation-container {\n position:relative;\n height:min(520px, 70vh);\n background:linear-gradient(180deg, var(--wall) 0 78%, transparent 78%);\n isolation:isolate;\n }\n\n \/* Lab set dressing inside animation-container *\/\n .shelf{\n position:absolute; left:6%; right:6%; top:8%; height:12px;\n background:linear-gradient(#cfd6de,#b9c1c9);\n border-radius:8px; box-shadow:0 6px 10px rgba(0,0,0,.12);\n }\n .shelf::after{\n content:\"\"; position:absolute; inset:-10px 10% auto 10%; height:6px; border-radius:6px;\n background:linear-gradient(90deg, #e7edf5, #cbd5e1 40%, #e7edf5);\n filter:blur(6px); opacity:.4;\n }\n .bench{\n position:absolute; inset:auto 0 0 0; height:22%;\n background:linear-gradient(180deg, #b6916f, var(--bench));\n box-shadow: inset 0 8px 20px rgba(0,0,0,.25);\n }\n .bench::before{\n content:\"\"; position:absolute; inset:-18px 0 auto 0; height:18px;\n background:linear-gradient(180deg,#bfc7d1,#aeb6c0);\n box-shadow:0 10px 20px rgba(0,0,0,.2);\n }\n .slides{\n height:100%; display:grid; grid-template-columns:100%; position:relative;\n }\n .slide{\n position:absolute; inset:0; opacity:0; pointer-events:none; transform:translateX(10px);\n transition:opacity .45s ease, transform .45s ease;\n display:grid; grid-template-columns: 1.1fr .9fr; gap:24px; padding:22px 26px 0;\n }\n .slide.active{opacity:1; transform:none; pointer-events:auto}\n\n \/* Explanation Box (per slide) *\/\n .card{\n align-self:start; margin-top:14px; background:#fff; border-radius:14px; padding:16px 16px;\n box-shadow:0 8px 20px rgba(0,0,0,.08); border:1px solid #eaeaea\n }\n .card h2{margin:.2rem 0 .3rem; font-size:1.1rem}\n .card .k{display:inline-block; font:600 .78rem\/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; padding:.08rem .4rem; background:#f1f5f9; border-radius:6px;}\n .obs{margin:.35rem 0 0; color:var(--muted)}\n\n \/* --- Controls --- *\/\n #controls {\n display:flex; flex-direction:column; align-items:center; justify-content:center;\n gap: 10px;\n padding:12px 12px; border-top:1px solid #e5e7eb; background:#f8fafc;\n }\n input[type=\"range\"] {\n width: 60%;\n cursor: pointer;\n }\n .dots{display:flex; gap:8px}\n .dot{width:10px; height:10px; border-radius:99px; background:#cbd5e1; transition:all .25s ease; cursor:pointer;}\n .dot.active{background:#0ea5e9; width:26px}\n\n \/* ======= LAB DRAWINGS (CSS) ======= *\/\n .lab{position:relative; height:100%;}\n .beaker{\n position:absolute; bottom:20%; left:16%; width:180px; height:200px;\n border:3px solid rgba(120,144,156,.8);\n border-radius:26px 26px 14px 14px;\n background:linear-gradient(180deg, #ffffff60, #ffffff20);\n overflow:hidden; backdrop-filter:blur(2px);\n box-shadow: inset 0 0 0 1px #ffffff70, 0 12px 18px rgba(0,0,0,.15);\n }\n .beaker::before{\n content:\"\"; position:absolute; inset:6px auto auto 8px; width:26px; height:90%;\n background:linear-gradient(180deg,#fff,transparent 60%); opacity:.25; filter:blur(1px);\n }\n .liquid{\n position:absolute; left:0; right:0; bottom:0; height:0%;\n background:linear-gradient(180deg, var(--liquid-clear), #9bd3ff);\n box-shadow: inset 0 10px 18px #ffffff60; border-top:1px solid #ffffff90;\n transition:height .9s ease;\n }\n .swirl{\n position:absolute; inset:auto 0 32% 0; height:60px; opacity:0;\n background:radial-gradient(40px 20px at 30% 50%,#ffffffa0,transparent 60%), radial-gradient(40px 20px at 60% 50%,#ffffffa0,transparent 60%);\n mix-blend-mode:overlay; filter:blur(6px); transition:opacity .6s ease;\n }\n .dropper{position:absolute; top:14%; left:58%; width:160px; height:40px; display:flex; align-items:center; gap:10px;}\n .pipette{width:120px; height:8px; background:linear-gradient(90deg,#cfd8dc,#90a4ae); border-radius:6px; box-shadow:inset 0 0 0 2px #ffffff80}\n .drop{width:16px; height:16px; border-radius:50%; background:#0ea5e9; transform:translateY(-28px); opacity:0}\n .crystal{position:absolute; width:8px; height:8px; background:#fff; border-radius:2px; bottom:28%; left:calc(16% + 20px); opacity:0; box-shadow:0 1px 2px rgba(0,0,0,.2)}\n .litmus-area{position:absolute; bottom:26%; right:12%; width:180px; height:110px}\n .strip{\n position:absolute; left:22px; top:16px; width:136px; height:22px; border-radius:6px;\n background:linear-gradient(180deg,#2f48ff,#1636cc); box-shadow:inset 0 -2px 0 #0b1c88, 0 6px 14px rgba(0,0,0,.18);\n transform:rotate(-6deg); transition:filter 1.4s ease, background 1.4s ease;\n }\n .drop-acid{position:absolute; left:72px; top:-8px; width:14px; height:14px; border-radius:50%; background:#d33131; opacity:0}\n .rack{\n position:absolute; left:56%; top:10%; width:280px; height:120px; border:3px solid var(--steel); border-radius:10px;\n background:linear-gradient(180deg,#f1f5f9, #e2e8f0); box-shadow:inset 0 0 0 1px #fff;\n }\n .bottle{position:absolute; bottom:8px; width:36px; height:64px; border:3px solid #99a3ad; border-radius:8px; background:linear-gradient(180deg,#ffffffb0,#d1ecff80); box-shadow:inset 0 0 0 1px #fff}\n .bottle::after{content:\"\"; position:absolute; top:-10px; left:6px; width:24px; height:14px; border:3px solid #99a3ad; border-bottom:none; border-radius:6px 6px 0 0; background:#e2e8f0}\n .bottle:nth-child(1){left:16px} .bottle:nth-child(2){left:66px} .bottle:nth-child(3){left:116px} .bottle:nth-child(4){left:166px}\n\n \/* --- Animation Classes & Keyframes --- *\/\n @keyframes drip {0%{transform:translateY(-28px);opacity:0} 30%{opacity:1} 100%{transform:translateY(118px);opacity:0}}\n @keyframes swirl{from{filter:blur(8px);opacity:.0} to{filter:blur(2px);opacity:.8}}\n @keyframes bromine-fade{0%{background:linear-gradient(180deg,var(--bromine),#b65d0f)} 60%{background:linear-gradient(180deg,#f4c089,#ffd8a8)} 100%{background:linear-gradient(180deg,var(--liquid-clear),#9bd3ff)}}\n @keyframes crystal-fall{0%{transform:translateY(-60px) scale(.9) rotate(0deg);opacity:0} 40%{opacity:1} 100%{transform:translateY(0) scale(1) rotate(12deg);opacity:1}}\n @keyframes litmus-red{0%{filter:hue-rotate(0deg)} 100%{filter:hue-rotate(-180deg)}}\n .fill-70 .liquid{height:70%}\n .fecl3 .liquid{background:linear-gradient(180deg, #caa9ff80, var(--violet));}\n .fecl3 .swirl{opacity:.8; animation:swirl 1.6s ease both}\n .fecl3 .drop{animation:drip 1.2s ease .25s 2}\n .bromine .liquid{height:70%; animation:bromine-fade 2.2s ease .2s both}\n .bromine .drop{background:var(--bromine); animation:drip 1.2s ease .2s 2}\n .bromine .crystal{animation:crystal-fall 1.2s ease .8s forwards}\n .litmus .strip{background:linear-gradient(180deg,#2f48ff,#1636cc); animation:litmus-red 1.4s ease .3s both}\n .litmus .drop-acid{opacity:1; animation:drip 1s ease .2s 1}\n @media (max-width: 820px){ .slide{grid-template-columns:1fr; padding:18px 18px 0;} .card{order:2} }\n <\/style>\n<\/head>\n<body class=\"phenol-lab-body\">\n <div class=\"content-wrapper\" role=\"application\" aria-label=\"Phenol distinguishing tests slider\">\n <h1 class=\"phenol-lab-h1\">Phenol \u2014 Distinguishing Tests<\/h1>\n\n <div id=\"animation-container\">\n <div class=\"shelf\" aria-hidden=\"true\"><\/div>\n <div class=\"rack\" aria-hidden=\"true\">\n <div class=\"bottle\"><\/div> <div class=\"bottle\"><\/div> <div class=\"bottle\"><\/div> <div class=\"bottle\"><\/div>\n <\/div>\n\n <div class=\"slides\" id=\"slides\">\n <article class=\"slide\" data-name=\"Neutral FeCl\u2083 Test\">\n <div class=\"lab\">\n <div class=\"beaker\"><div class=\"liquid\"><\/div><div class=\"swirl\"><\/div><\/div>\n <div class=\"dropper\"><div class=\"pipette\"><\/div><div class=\"drop\"><\/div><\/div>\n <\/div>\n <aside class=\"card\" aria-live=\"polite\">\n <h2>Neutral Ferric Chloride Test<\/h2>\n <div><span class=\"k\">Reagent<\/span> FeCl\u2083 (neutral)<\/div>\n <div class=\"obs\"><strong>Observation:<\/strong> Violet coloration indicates <em>phenol<\/em>.<\/div>\n <\/aside>\n <\/article>\n <article class=\"slide\" data-name=\"Bromine Water Test\">\n <div class=\"lab\">\n <div class=\"beaker\"><div class=\"liquid\"><\/div><\/div>\n <div class=\"dropper\"><div class=\"pipette\"><\/div><div class=\"drop\"><\/div><\/div>\n <div class=\"crystal\" style=\"left:calc(16% + 28px);\"><\/div><div class=\"crystal\" style=\"left:calc(16% + 56px);\"><\/div>\n <div class=\"crystal\" style=\"left:calc(16% + 96px);\"><\/div><div class=\"crystal\" style=\"left:calc(16% + 126px);\"><\/div>\n <\/div>\n <aside class=\"card\" aria-live=\"polite\">\n <h2>Bromine Water Test<\/h2>\n <div><span class=\"k\">Reagent<\/span> Br\u2082 (aqueous)<\/div>\n <div class=\"obs\"><strong>Observation:<\/strong> Orange color disappears; a <em>white precipitate<\/em> appears.<\/div>\n <\/aside>\n <\/article>\n <article class=\"slide\" data-name=\"Litmus Test\">\n <div class=\"lab\">\n <div class=\"beaker\"><div class=\"liquid\"><\/div><\/div>\n <div class=\"litmus-area\"><div class=\"strip\"><\/div><div class=\"drop-acid\"><\/div><\/div>\n <\/div>\n <aside class=\"card\" aria-live=\"polite\">\n <h2>Litmus Paper Test<\/h2>\n <div><span class=\"k\">Reagent<\/span> Blue litmus<\/div>\n <div class=\"obs\"><strong>Observation:<\/strong> Blue litmus turns <em>red<\/em>, showing phenol’s weak acidity.<\/div>\n <\/aside>\n <\/article>\n <\/div>\n <div class=\"bench\" aria-hidden=\"true\"><\/div>\n <\/div>\n\n <div id=\"controls\" aria-label=\"Slider controls\">\n <input type=\"range\" id=\"test-slider\" min=\"0\" max=\"2\" value=\"0\" step=\"1\" aria-label=\"Select test\">\n <div class=\"dots\" id=\"dots\" aria-hidden=\"true\"><\/div>\n <\/div>\n <\/div>\n\n <script>\n (function() {\n \/\/ --- DOM Element Selection ---\n const slides = Array.from(document.querySelectorAll('.slide'));\n const dotsWrap = document.getElementById('dots');\n const slider = document.getElementById('test-slider');\n\n let currentIndex = 0;\n\n \/\/ --- Initialization ---\n \/\/ Create a navigation dot for each slide.\n slides.forEach((_, idx) => {\n const dot = document.createElement('div');\n dot.className = 'dot';\n dotsWrap.appendChild(dot);\n \/\/ Clicking a dot navigates to that slide.\n dot.addEventListener('click', () => goToSlide(idx));\n });\n\n \/\/ --- Core Functions ---\n \/\/ Function to remove animation classes from a slide before switching.\n function resetSlide(slideElement) {\n slideElement.classList.remove('fecl3', 'bromine', 'litmus', 'fill-70');\n \/\/ Force a browser reflow to ensure animations can restart reliably.\n void slideElement.offsetWidth;\n }\n\n \/\/ Function to display and animate a specific slide.\n function activateSlide(idx) {\n \/\/ Toggle the 'active' class on slides and dots.\n slides.forEach((s, k) => s.classList.toggle('active', k === idx));\n [...dotsWrap.children].forEach((d, k) => d.classList.toggle('active', k === idx));\n\n const activeSlide = slides[idx];\n if (!activeSlide) return;\n\n const testName = activeSlide.dataset.name || '';\n\n \/\/ Trigger the appropriate animation based on the slide's data-name attribute.\n activeSlide.classList.add('fill-70'); \/\/ Common animation for all\n if (testName.includes('FeCl')) { activeSlide.classList.add('fecl3'); }\n else if (testName.includes('Bromine')) { activeSlide.classList.add('bromine'); }\n else if (testName.includes('Litmus')) { activeSlide.classList.add('litmus'); }\n }\n\n \/\/ Main navigation function.\n function goToSlide(idx) {\n \/\/ Don't do anything if the slide is already active.\n if (idx === currentIndex) return;\n\n resetSlide(slides[currentIndex]);\n \n const slideCount = slides.length;\n currentIndex = (idx + slideCount) % slideCount; \/\/ Ensure index is always valid\n\n activateSlide(currentIndex);\n \n \/\/ Sync slider position with the current slide.\n slider.value = currentIndex;\n }\n\n \/\/ --- Event Listeners ---\n \/\/ Listen for the slider being moved by the user.\n slider.addEventListener('input', (event) => {\n const newIndex = parseInt(event.target.value, 10);\n goToSlide(newIndex);\n });\n\n \/\/ Initialize the first slide on page load.\n activateSlide(0);\n })();\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Phenol \u2014 Distinguishing Tests (CSS Lab Slider) Phenol \u2014 Distinguishing Tests Neutral Ferric Chloride Test Reagent FeCl\u2083 (neutral) Observation: Violet coloration indicates phenol. Bromine Water Test Reagent Br\u2082 (aqueous) Observation: Orange color disappears; a white precipitate appears. Litmus Paper Test Reagent Blue litmus Observation: Blue litmus turns red, showing phenol’s weak acidity.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-291","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=\/wp\/v2\/pages\/291","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=291"}],"version-history":[{"count":5,"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=\/wp\/v2\/pages\/291\/revisions"}],"predecessor-version":[{"id":301,"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=\/wp\/v2\/pages\/291\/revisions\/301"}],"wp:attachment":[{"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=291"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":291,"date":"2025-09-10T06:52:27","date_gmt":"2025-09-10T06:52:27","guid":{"rendered":"https:\/\/learn-by-animation.com\/?page_id=291"},"modified":"2025-09-10T07:16:39","modified_gmt":"2025-09-10T07:16:39","slug":"phenol-distinguishing-tests","status":"publish","type":"page","link":"https:\/\/learn-by-animation.com\/?page_id=291","title":{"rendered":"Phenol \u2014 Distinguishing Tests"},"content":{"rendered":"\n\n\n\n\n \n \n Phenol \u2014 Distinguishing Tests (CSS Lab Slider)<\/title>\n <style>\n \/* --- Basic Setup & Fonts --- *\/\n :root{\n --bench:#c9b197;\n --wall:#e9eef5;\n --steel:#9aa3ac;\n --glass:#cfe7ff80;\n --liquid-clear:#bfe9ff;\n --bromine:#e07a17;\n --violet:#7a3fa1;\n --acid-red:#d33131;\n --text:#0f172a;\n --muted:#475569;\n --card:#ffffff;\n --shadow:0 10px 30px rgba(0,0,0,.18);\n }\n .phenol-lab-body {\n margin:0;\n font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;\n color:var(--text);\n background:linear-gradient(180deg,var(--wall) 0 60%, #dfe6ee 60%);\n display:grid;\n place-items:center;\n min-height:100vh;\n padding: 20px 0;\n box-sizing: border-box;\n }\n .content-wrapper {\n width:min(920px,95vw);\n background:var(--card);\n border-radius:18px;\n box-shadow:var(--shadow);\n overflow:hidden;\n border:1px solid #e5e7eb;\n }\n .phenol-lab-h1 {\n font-size:1.05rem;\n margin:0;\n font-weight:700;\n letter-spacing:.2px;\n padding:14px 18px;\n background:#0ea5e9;\n color:#fff;\n text-align: center;\n }\n\n \/* --- The Main Stage (The Lab) --- *\/\n #animation-container {\n position:relative;\n height:min(520px, 70vh);\n background:linear-gradient(180deg, var(--wall) 0 78%, transparent 78%);\n isolation:isolate;\n }\n\n \/* Lab set dressing inside animation-container *\/\n .shelf{\n position:absolute; left:6%; right:6%; top:8%; height:12px;\n background:linear-gradient(#cfd6de,#b9c1c9);\n border-radius:8px; box-shadow:0 6px 10px rgba(0,0,0,.12);\n }\n .shelf::after{\n content:\"\"; position:absolute; inset:-10px 10% auto 10%; height:6px; border-radius:6px;\n background:linear-gradient(90deg, #e7edf5, #cbd5e1 40%, #e7edf5);\n filter:blur(6px); opacity:.4;\n }\n .bench{\n position:absolute; inset:auto 0 0 0; height:22%;\n background:linear-gradient(180deg, #b6916f, var(--bench));\n box-shadow: inset 0 8px 20px rgba(0,0,0,.25);\n }\n .bench::before{\n content:\"\"; position:absolute; inset:-18px 0 auto 0; height:18px;\n background:linear-gradient(180deg,#bfc7d1,#aeb6c0);\n box-shadow:0 10px 20px rgba(0,0,0,.2);\n }\n .slides{\n height:100%; display:grid; grid-template-columns:100%; position:relative;\n }\n .slide{\n position:absolute; inset:0; opacity:0; pointer-events:none; transform:translateX(10px);\n transition:opacity .45s ease, transform .45s ease;\n display:grid; grid-template-columns: 1.1fr .9fr; gap:24px; padding:22px 26px 0;\n }\n .slide.active{opacity:1; transform:none; pointer-events:auto}\n\n \/* Explanation Box (per slide) *\/\n .card{\n align-self:start; margin-top:14px; background:#fff; border-radius:14px; padding:16px 16px;\n box-shadow:0 8px 20px rgba(0,0,0,.08); border:1px solid #eaeaea\n }\n .card h2{margin:.2rem 0 .3rem; font-size:1.1rem}\n .card .k{display:inline-block; font:600 .78rem\/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; padding:.08rem .4rem; background:#f1f5f9; border-radius:6px;}\n .obs{margin:.35rem 0 0; color:var(--muted)}\n\n \/* --- Controls --- *\/\n #controls {\n display:flex; flex-direction:column; align-items:center; justify-content:center;\n gap: 10px;\n padding:12px 12px; border-top:1px solid #e5e7eb; background:#f8fafc;\n }\n input[type=\"range\"] {\n width: 60%;\n cursor: pointer;\n }\n .dots{display:flex; gap:8px}\n .dot{width:10px; height:10px; border-radius:99px; background:#cbd5e1; transition:all .25s ease; cursor:pointer;}\n .dot.active{background:#0ea5e9; width:26px}\n\n \/* ======= LAB DRAWINGS (CSS) ======= *\/\n .lab{position:relative; height:100%;}\n .beaker{\n position:absolute; bottom:20%; left:16%; width:180px; height:200px;\n border:3px solid rgba(120,144,156,.8);\n border-radius:26px 26px 14px 14px;\n background:linear-gradient(180deg, #ffffff60, #ffffff20);\n overflow:hidden; backdrop-filter:blur(2px);\n box-shadow: inset 0 0 0 1px #ffffff70, 0 12px 18px rgba(0,0,0,.15);\n }\n .beaker::before{\n content:\"\"; position:absolute; inset:6px auto auto 8px; width:26px; height:90%;\n background:linear-gradient(180deg,#fff,transparent 60%); opacity:.25; filter:blur(1px);\n }\n .liquid{\n position:absolute; left:0; right:0; bottom:0; height:0%;\n background:linear-gradient(180deg, var(--liquid-clear), #9bd3ff);\n box-shadow: inset 0 10px 18px #ffffff60; border-top:1px solid #ffffff90;\n transition:height .9s ease;\n }\n .swirl{\n position:absolute; inset:auto 0 32% 0; height:60px; opacity:0;\n background:radial-gradient(40px 20px at 30% 50%,#ffffffa0,transparent 60%), radial-gradient(40px 20px at 60% 50%,#ffffffa0,transparent 60%);\n mix-blend-mode:overlay; filter:blur(6px); transition:opacity .6s ease;\n }\n .dropper{position:absolute; top:14%; left:58%; width:160px; height:40px; display:flex; align-items:center; gap:10px;}\n .pipette{width:120px; height:8px; background:linear-gradient(90deg,#cfd8dc,#90a4ae); border-radius:6px; box-shadow:inset 0 0 0 2px #ffffff80}\n .drop{width:16px; height:16px; border-radius:50%; background:#0ea5e9; transform:translateY(-28px); opacity:0}\n .crystal{position:absolute; width:8px; height:8px; background:#fff; border-radius:2px; bottom:28%; left:calc(16% + 20px); opacity:0; box-shadow:0 1px 2px rgba(0,0,0,.2)}\n .litmus-area{position:absolute; bottom:26%; right:12%; width:180px; height:110px}\n .strip{\n position:absolute; left:22px; top:16px; width:136px; height:22px; border-radius:6px;\n background:linear-gradient(180deg,#2f48ff,#1636cc); box-shadow:inset 0 -2px 0 #0b1c88, 0 6px 14px rgba(0,0,0,.18);\n transform:rotate(-6deg); transition:filter 1.4s ease, background 1.4s ease;\n }\n .drop-acid{position:absolute; left:72px; top:-8px; width:14px; height:14px; border-radius:50%; background:#d33131; opacity:0}\n .rack{\n position:absolute; left:56%; top:10%; width:280px; height:120px; border:3px solid var(--steel); border-radius:10px;\n background:linear-gradient(180deg,#f1f5f9, #e2e8f0); box-shadow:inset 0 0 0 1px #fff;\n }\n .bottle{position:absolute; bottom:8px; width:36px; height:64px; border:3px solid #99a3ad; border-radius:8px; background:linear-gradient(180deg,#ffffffb0,#d1ecff80); box-shadow:inset 0 0 0 1px #fff}\n .bottle::after{content:\"\"; position:absolute; top:-10px; left:6px; width:24px; height:14px; border:3px solid #99a3ad; border-bottom:none; border-radius:6px 6px 0 0; background:#e2e8f0}\n .bottle:nth-child(1){left:16px} .bottle:nth-child(2){left:66px} .bottle:nth-child(3){left:116px} .bottle:nth-child(4){left:166px}\n\n \/* --- Animation Classes & Keyframes --- *\/\n @keyframes drip {0%{transform:translateY(-28px);opacity:0} 30%{opacity:1} 100%{transform:translateY(118px);opacity:0}}\n @keyframes swirl{from{filter:blur(8px);opacity:.0} to{filter:blur(2px);opacity:.8}}\n @keyframes bromine-fade{0%{background:linear-gradient(180deg,var(--bromine),#b65d0f)} 60%{background:linear-gradient(180deg,#f4c089,#ffd8a8)} 100%{background:linear-gradient(180deg,var(--liquid-clear),#9bd3ff)}}\n @keyframes crystal-fall{0%{transform:translateY(-60px) scale(.9) rotate(0deg);opacity:0} 40%{opacity:1} 100%{transform:translateY(0) scale(1) rotate(12deg);opacity:1}}\n @keyframes litmus-red{0%{filter:hue-rotate(0deg)} 100%{filter:hue-rotate(-180deg)}}\n .fill-70 .liquid{height:70%}\n .fecl3 .liquid{background:linear-gradient(180deg, #caa9ff80, var(--violet));}\n .fecl3 .swirl{opacity:.8; animation:swirl 1.6s ease both}\n .fecl3 .drop{animation:drip 1.2s ease .25s 2}\n .bromine .liquid{height:70%; animation:bromine-fade 2.2s ease .2s both}\n .bromine .drop{background:var(--bromine); animation:drip 1.2s ease .2s 2}\n .bromine .crystal{animation:crystal-fall 1.2s ease .8s forwards}\n .litmus .strip{background:linear-gradient(180deg,#2f48ff,#1636cc); animation:litmus-red 1.4s ease .3s both}\n .litmus .drop-acid{opacity:1; animation:drip 1s ease .2s 1}\n @media (max-width: 820px){ .slide{grid-template-columns:1fr; padding:18px 18px 0;} .card{order:2} }\n <\/style>\n<\/head>\n<body class=\"phenol-lab-body\">\n <div class=\"content-wrapper\" role=\"application\" aria-label=\"Phenol distinguishing tests slider\">\n <h1 class=\"phenol-lab-h1\">Phenol \u2014 Distinguishing Tests<\/h1>\n\n <div id=\"animation-container\">\n <div class=\"shelf\" aria-hidden=\"true\"><\/div>\n <div class=\"rack\" aria-hidden=\"true\">\n <div class=\"bottle\"><\/div> <div class=\"bottle\"><\/div> <div class=\"bottle\"><\/div> <div class=\"bottle\"><\/div>\n <\/div>\n\n <div class=\"slides\" id=\"slides\">\n <article class=\"slide\" data-name=\"Neutral FeCl\u2083 Test\">\n <div class=\"lab\">\n <div class=\"beaker\"><div class=\"liquid\"><\/div><div class=\"swirl\"><\/div><\/div>\n <div class=\"dropper\"><div class=\"pipette\"><\/div><div class=\"drop\"><\/div><\/div>\n <\/div>\n <aside class=\"card\" aria-live=\"polite\">\n <h2>Neutral Ferric Chloride Test<\/h2>\n <div><span class=\"k\">Reagent<\/span> FeCl\u2083 (neutral)<\/div>\n <div class=\"obs\"><strong>Observation:<\/strong> Violet coloration indicates <em>phenol<\/em>.<\/div>\n <\/aside>\n <\/article>\n <article class=\"slide\" data-name=\"Bromine Water Test\">\n <div class=\"lab\">\n <div class=\"beaker\"><div class=\"liquid\"><\/div><\/div>\n <div class=\"dropper\"><div class=\"pipette\"><\/div><div class=\"drop\"><\/div><\/div>\n <div class=\"crystal\" style=\"left:calc(16% + 28px);\"><\/div><div class=\"crystal\" style=\"left:calc(16% + 56px);\"><\/div>\n <div class=\"crystal\" style=\"left:calc(16% + 96px);\"><\/div><div class=\"crystal\" style=\"left:calc(16% + 126px);\"><\/div>\n <\/div>\n <aside class=\"card\" aria-live=\"polite\">\n <h2>Bromine Water Test<\/h2>\n <div><span class=\"k\">Reagent<\/span> Br\u2082 (aqueous)<\/div>\n <div class=\"obs\"><strong>Observation:<\/strong> Orange color disappears; a <em>white precipitate<\/em> appears.<\/div>\n <\/aside>\n <\/article>\n <article class=\"slide\" data-name=\"Litmus Test\">\n <div class=\"lab\">\n <div class=\"beaker\"><div class=\"liquid\"><\/div><\/div>\n <div class=\"litmus-area\"><div class=\"strip\"><\/div><div class=\"drop-acid\"><\/div><\/div>\n <\/div>\n <aside class=\"card\" aria-live=\"polite\">\n <h2>Litmus Paper Test<\/h2>\n <div><span class=\"k\">Reagent<\/span> Blue litmus<\/div>\n <div class=\"obs\"><strong>Observation:<\/strong> Blue litmus turns <em>red<\/em>, showing phenol’s weak acidity.<\/div>\n <\/aside>\n <\/article>\n <\/div>\n <div class=\"bench\" aria-hidden=\"true\"><\/div>\n <\/div>\n\n <div id=\"controls\" aria-label=\"Slider controls\">\n <input type=\"range\" id=\"test-slider\" min=\"0\" max=\"2\" value=\"0\" step=\"1\" aria-label=\"Select test\">\n <div class=\"dots\" id=\"dots\" aria-hidden=\"true\"><\/div>\n <\/div>\n <\/div>\n\n <script>\n (function() {\n \/\/ --- DOM Element Selection ---\n const slides = Array.from(document.querySelectorAll('.slide'));\n const dotsWrap = document.getElementById('dots');\n const slider = document.getElementById('test-slider');\n\n let currentIndex = 0;\n\n \/\/ --- Initialization ---\n \/\/ Create a navigation dot for each slide.\n slides.forEach((_, idx) => {\n const dot = document.createElement('div');\n dot.className = 'dot';\n dotsWrap.appendChild(dot);\n \/\/ Clicking a dot navigates to that slide.\n dot.addEventListener('click', () => goToSlide(idx));\n });\n\n \/\/ --- Core Functions ---\n \/\/ Function to remove animation classes from a slide before switching.\n function resetSlide(slideElement) {\n slideElement.classList.remove('fecl3', 'bromine', 'litmus', 'fill-70');\n \/\/ Force a browser reflow to ensure animations can restart reliably.\n void slideElement.offsetWidth;\n }\n\n \/\/ Function to display and animate a specific slide.\n function activateSlide(idx) {\n \/\/ Toggle the 'active' class on slides and dots.\n slides.forEach((s, k) => s.classList.toggle('active', k === idx));\n [...dotsWrap.children].forEach((d, k) => d.classList.toggle('active', k === idx));\n\n const activeSlide = slides[idx];\n if (!activeSlide) return;\n\n const testName = activeSlide.dataset.name || '';\n\n \/\/ Trigger the appropriate animation based on the slide's data-name attribute.\n activeSlide.classList.add('fill-70'); \/\/ Common animation for all\n if (testName.includes('FeCl')) { activeSlide.classList.add('fecl3'); }\n else if (testName.includes('Bromine')) { activeSlide.classList.add('bromine'); }\n else if (testName.includes('Litmus')) { activeSlide.classList.add('litmus'); }\n }\n\n \/\/ Main navigation function.\n function goToSlide(idx) {\n \/\/ Don't do anything if the slide is already active.\n if (idx === currentIndex) return;\n\n resetSlide(slides[currentIndex]);\n \n const slideCount = slides.length;\n currentIndex = (idx + slideCount) % slideCount; \/\/ Ensure index is always valid\n\n activateSlide(currentIndex);\n \n \/\/ Sync slider position with the current slide.\n slider.value = currentIndex;\n }\n\n \/\/ --- Event Listeners ---\n \/\/ Listen for the slider being moved by the user.\n slider.addEventListener('input', (event) => {\n const newIndex = parseInt(event.target.value, 10);\n goToSlide(newIndex);\n });\n\n \/\/ Initialize the first slide on page load.\n activateSlide(0);\n })();\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Phenol \u2014 Distinguishing Tests (CSS Lab Slider) Phenol \u2014 Distinguishing Tests Neutral Ferric Chloride Test Reagent FeCl\u2083 (neutral) Observation: Violet coloration indicates phenol. Bromine Water Test Reagent Br\u2082 (aqueous) Observation: Orange color disappears; a white precipitate appears. Litmus Paper Test Reagent Blue litmus Observation: Blue litmus turns red, showing phenol’s weak acidity.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-291","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=\/wp\/v2\/pages\/291","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=291"}],"version-history":[{"count":5,"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=\/wp\/v2\/pages\/291\/revisions"}],"predecessor-version":[{"id":301,"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=\/wp\/v2\/pages\/291\/revisions\/301"}],"wp:attachment":[{"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=291"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}