{"id":3216,"date":"2026-05-08T07:59:56","date_gmt":"2026-05-08T06:59:56","guid":{"rendered":"https:\/\/www.onlinelearningsystem.net\/xyz\/?page_id=3216"},"modified":"2026-10-23T08:21:19","modified_gmt":"2026-10-23T07:21:19","slug":"a-level-chemistry-online-course","status":"publish","type":"page","link":"https:\/\/www.onlinelearningsystem.net\/xyz\/","title":{"rendered":"Free A Level Chemistry Revision Notes"},"content":{"rendered":"\n\n<div class=\"fh-page\">\n\n<style>\n  .fh-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s cubic-bezier(.2,.7,.2,1), transform 0.8s cubic-bezier(.2,.7,.2,1); }\n  .fh-reveal.is-in { opacity: 1; transform: translateY(0); }\n  .fh-reveal[data-delay=\"1\"] { transition-delay: 0.08s; }\n  .fh-reveal[data-delay=\"2\"] { transition-delay: 0.16s; }\n  .fh-reveal[data-delay=\"3\"] { transition-delay: 0.24s; }\n  @media (prefers-reduced-motion: reduce), (max-width: 767px) {\n    .fh-reveal, .fh-reveal.is-in { opacity: 1 !important; transform: none !important; transition: none !important; }\n  }\n  html { scroll-behavior: smooth; }\n  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }\n<\/style>\n\n<!-- ============================================================\n     HERO: free notes, five boards\n     ============================================================ -->\n<section class=\"fh-hero-001\">\n  <style>\n    .fh-page, .fh-page * { box-sizing: border-box; }\n    .fh-page { font-family: Poppins, Arial, sans-serif; color: #1C244B; }\n    .fh-page a { text-decoration: none; }\n    .fh-wrap { max-width: 1180px; margin: 0 auto; }\n    \/* The theme boxes page content; let each band run edge to edge (body has overflow-x: clip). *\/\n    .fh-page > section { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }\n    .fh-eyebrow { display: inline-flex; align-items: center; gap: 9px; background: #1C244B; color: #ffffff; font-size: 12.5px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; padding: 8px 16px; border-radius: 999px; margin-bottom: 18px; box-shadow: 0 10px 22px rgba(28,36,75,0.18); }\n    .fh-eyebrow.is-soft { background: rgba(70,127,247,0.12); color: #467FF7; box-shadow: none; font-weight: 700; }\n    .fh-h2 { margin: 0 0 14px; color: #1C244B; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.12; font-weight: 800; letter-spacing: -1px; text-wrap: balance; text-shadow: -7px 8px 10px rgba(28,36,75,0.12); }\n    .fh-h2 .accent { color: #467FF7; }\n    .fh-lede { margin: 0; color: rgba(28,36,75,0.72); font-size: clamp(16px, 1.5vw, 18.5px); font-weight: 300; line-height: 1.7; }\n    .fh-head { text-align: center; max-width: 760px; margin: 0 auto 40px; }\n    .fh-btn { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; padding: 14px 26px; border-radius: 999px; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, border-color 0.2s ease; }\n    .fh-btn svg { width: 16px; height: 16px; }\n    .fh-btn--primary { background: #1C244B; color: #ffffff; box-shadow: 0 14px 28px rgba(28,36,75,0.24); }\n    .fh-btn--primary:hover { background: #467FF7; color: #ffffff; transform: translateY(-2px); }\n    .fh-btn--ghost { background: #ffffff; color: #1C244B; border: 1.5px solid rgba(28,36,75,0.18); }\n    .fh-btn--ghost:hover { border-color: #1C244B; color: #1C244B; transform: translateY(-2px); }\n    .fh-page a:focus-visible, .fh-page button:focus-visible { outline: 3px solid rgba(70,127,247,0.55); outline-offset: 3px; }\n\n    .fh-hero-001 { background: #ffffff; padding: 66px 20px 72px; position: relative; overflow: hidden; }\n    .fh-hero-001::before { content: \"\"; position: absolute; inset: -30% auto auto -12%; width: 600px; height: 600px; background: radial-gradient(closest-side, rgba(70,127,247,0.16), rgba(70,127,247,0)); pointer-events: none; }\n    .fh-hero-001::after { content: \"\"; position: absolute; inset: auto -8% -40% auto; width: 520px; height: 520px; background: radial-gradient(closest-side, rgba(245,185,64,0.14), rgba(245,185,64,0)); pointer-events: none; }\n    .fh-hero-copy { position: relative; z-index: 1; text-align: center; max-width: 880px; margin: 0 auto; }\n    .fh-hero-title { margin: 0 0 20px; color: #1C244B; font-size: clamp(38px, 5.4vw, 68px); line-height: 1.05; font-weight: 800; letter-spacing: -1.6px; text-shadow: -7px 8px 10px rgba(28,36,75,0.14); text-wrap: balance; }\n    .fh-hero-title .accent { color: #467FF7; }\n    .fh-hero-sub { margin: 0 auto 30px; max-width: 690px; color: rgba(28,36,75,0.76); font-size: clamp(17px, 1.7vw, 20px); font-weight: 300; line-height: 1.7; }\n    .fh-board-label { display: block; margin: 0 0 12px; font-size: 13px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: rgba(28,36,75,0.6); }\n    .fh-boards { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }\n    .fh-board { display: inline-flex; align-items: center; gap: 10px; background: #ffffff; border: 1.5px solid rgba(28,36,75,0.14); border-radius: 999px; padding: 11px 18px 11px 20px; color: #1C244B; font-size: 15px; font-weight: 600; box-shadow: 0 8px 18px rgba(28,36,75,0.06); transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease; }\n    .fh-board small { font-size: 11.5px; font-weight: 700; color: #467FF7; background: rgba(70,127,247,0.1); padding: 3px 8px; border-radius: 999px; }\n    .fh-board:hover { background: #1C244B; border-color: #1C244B; color: #ffffff; transform: translateY(-2px); box-shadow: 0 14px 26px rgba(28,36,75,0.2); }\n    .fh-board:hover small { background: rgba(255,255,255,0.16); color: #ffffff; }\n    .fh-stats { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 940px; margin: 48px auto 0; border-top: 1px solid rgba(28,36,75,0.1); }\n    .fh-stat { padding: 20px 12px 0; text-align: center; }\n    .fh-stat + .fh-stat { border-left: 1px solid rgba(28,36,75,0.1); }\n    .fh-stat b { display: block; font-size: clamp(26px, 3vw, 36px); font-weight: 800; letter-spacing: -1px; color: #1C244B; font-variant-numeric: tabular-nums; }\n    .fh-stat span { display: block; font-size: 13.5px; color: rgba(28,36,75,0.62); margin-top: 2px; }\n    @media (max-width: 700px) {\n      .fh-hero-001 { padding: 44px 16px 52px; }\n      .fh-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n      .fh-stat:nth-child(3) { border-left: 0; }\n      .fh-stat { padding-bottom: 14px; }\n      .fh-board { width: 100%; justify-content: space-between; }\n      .fh-btn { width: 100%; justify-content: center; }\n    }\n  <\/style>\n  <div class=\"fh-wrap\">\n    <div class=\"fh-hero-copy fh-reveal\">\n      <span class=\"fh-eyebrow\">Written by a chemistry specialist<\/span>\n      <h1 class=\"fh-hero-title\">A Level Chemistry revision notes, <span class=\"accent\">free for every student<\/span><\/h1>\n      <p class=\"fh-hero-sub\">Clear notes for your exam board, with 3D models you can rotate, practicals you can watch step by step, and questions that check your understanding as you read.<\/p>\n      <span class=\"fh-board-label\">Choose your exam board<\/span>\n      <nav class=\"fh-boards\" id=\"fh-top-boards\" aria-label=\"Revision notes by exam board\">\n        <a class=\"fh-board\" href=\"https:\/\/www.onlinelearningsystem.net\/xyz\/revision-notes\/a-level-chemistry\/aqa\/\">AQA <small>7405<\/small><\/a>\n        <a class=\"fh-board\" href=\"https:\/\/www.onlinelearningsystem.net\/xyz\/revision-notes\/a-level-chemistry\/ocr-a\/\">OCR A <small>H432<\/small><\/a>\n        <a class=\"fh-board\" href=\"https:\/\/www.onlinelearningsystem.net\/xyz\/revision-notes\/a-level-chemistry\/edexcel\/\">Edexcel <small>9CH0<\/small><\/a>\n        <a class=\"fh-board\" href=\"https:\/\/www.onlinelearningsystem.net\/xyz\/revision-notes\/a-level-chemistry\/edexcel-international\/\">Edexcel International <small>IAL<\/small><\/a>\n        <a class=\"fh-board\" href=\"https:\/\/www.onlinelearningsystem.net\/xyz\/revision-notes\/a-level-chemistry\/cie\/\">Cambridge International <small>9701<\/small><\/a>\n      <\/nav>\n    <\/div>\n    <div class=\"fh-stats fh-reveal\" data-delay=\"2\">\n      <div class=\"fh-stat\"><b>950+<\/b><span>revision notes<\/span><\/div>\n      <div class=\"fh-stat\"><b>100+<\/b><span>interactive 3D models<\/span><\/div>\n      <div class=\"fh-stat\"><b>47<\/b><span>practicals in 3D<\/span><\/div>\n      <div class=\"fh-stat\"><b>1,200+<\/b><span>check questions<\/span><\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ============================================================\n     FREE QUIZZES (OLS Quiz) - a free multiple-choice quiz for every\n     topic, with one real marked question as the preview (Mo, 12 Oct)\n     ============================================================ -->\n<section class=\"fh-quiz-001\" id=\"fh-free-quiz\">\n  <style>\n    .fh-quiz-001 { background: linear-gradient(180deg, #f5f8ff 0%, #ffffff 100%); padding: 80px 20px 84px; }\n    .fh-quiz-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 52px; align-items: center; }\n    .fh-quiz-001 .fh-head { text-align: left; margin: 0 0 22px; }\n    .fh-quiz-lede { font-size: 16.5px; font-weight: 300; line-height: 1.7; color: #4b5563; margin: 0 0 22px; max-width: 34em; }\n    .fh-quiz-boards { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }\n    .fh-quiz-note { margin: 14px 0 0; font-size: 13.5px; color: rgba(28,36,75,0.6); }\n    .fh-qp { background: #ffffff; border: 1px solid rgba(28,36,75,0.1); border-radius: 22px; box-shadow: 0 26px 56px rgba(28,36,75,0.14); overflow: hidden; }\n    .fh-qp-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 22px; border-bottom: 1px solid rgba(28,36,75,0.08); }\n    .fh-qp-top b { font-size: 13px; font-weight: 700; color: #1C244B; }\n    .fh-qp-chip { font-size: 12px; font-weight: 800; padding: 4px 11px; border-radius: 999px; background: #fdecea; color: #b42318; white-space: nowrap; }\n    .fh-qp-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 12px; }\n    .fh-qp-q { margin: 0; font-size: 16px; line-height: 1.55; color: #1C244B; }\n    .fh-qp-opts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }\n    .fh-qp-opts li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 12px 9px 9px; border: 2px solid #e3e7f0; border-radius: 14px; font-size: 14.5px; color: #1C244B; }\n    .fh-qp-opts li span:first-child { width: 30px; height: 30px; border-radius: 9px; background: #f6f8fd; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; }\n    .fh-qp-opts li em { font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }\n    .fh-qp-opts li.is-right { border-color: #1f8a4c; background: #e8f5ee; }\n    .fh-qp-opts li.is-right span:first-child { background: #1f8a4c; color: #ffffff; }\n    .fh-qp-opts li.is-right em { color: #1f8a4c; }\n    .fh-qp-opts li.is-wrong { border-color: #b42318; background: #fdecea; }\n    .fh-qp-opts li.is-wrong span:first-child { background: #b42318; color: #ffffff; }\n    .fh-qp-opts li.is-wrong em { color: #b42318; }\n    .fh-qp-box { border-radius: 12px; padding: 12px 14px; font-size: 13.5px; line-height: 1.6; color: #374151; }\n    .fh-qp-box b { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 2px; }\n    .fh-qp-box.is-fb { background: #f6f8fd; }\n    .fh-qp-box.is-fb b { color: #b42318; }\n    .fh-qp-box.is-ex { border: 1px solid #e3e7f0; }\n    .fh-qp-box.is-ex b { color: #2563eb; }\n    .fh-qp-box.is-rev { background: #eaf3de; }\n    .fh-qp-box.is-rev b { color: #3B6D11; }\n    .fh-qp-box.is-rev a { color: #2d5a0b; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }\n    .fh-qp-cap { margin: 12px 4px 0; font-size: 13px; color: rgba(28,36,75,0.6); text-align: center; }\n    @media (max-width: 900px) { .fh-quiz-grid { grid-template-columns: 1fr; gap: 36px; } }\n    @media (max-width: 600px) { .fh-quiz-001 { padding: 56px 16px 62px; } .fh-qp-opts li { grid-template-columns: 30px minmax(0, 1fr); } .fh-qp-opts li em { grid-column: 2; } }\n  <\/style>\n  <div class=\"fh-wrap fh-quiz-grid\">\n    <div class=\"fh-reveal\">\n      <div class=\"fh-head\">\n        <span class=\"fh-eyebrow\">Free quizzes<\/span>\n        <h2 class=\"fh-h2\">A free quiz for every topic, <span class=\"accent\">marked in seconds<\/span><\/h2>\n      <\/div>\n      <p class=\"fh-quiz-lede\">Exam-style multiple-choice questions on each topic. Submit and every answer comes back marked and explained, with the note to revise for anything you missed.<\/p>\n      <ul class=\"fh-list\">\n        <li><span class=\"fh-ico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6L9 17l-5-5\"\/><\/svg><\/span><div><b>Marked the moment you submit<\/b><span>Your score, which answers were right, and the correct answer for every question.<\/span><\/div><\/li>\n        <li><span class=\"fh-ico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 19.5A2.5 2.5 0 0 1 6.5 17H20\"\/><path d=\"M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z\"\/><\/svg><\/span><div><b>Every answer explained<\/b><span>Why your choice was wrong, why the right one is right, and a link to the revision note that teaches it.<\/span><\/div><\/li>\n        <li><span class=\"fh-ico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 2l2.6 6.6L21.5 9l-5.2 4.6 1.5 6.9L12 16.9 6.2 20.5l1.5-6.9L2.5 9l6.9-.4z\"\/><\/svg><\/span><div><b>Counts towards your progress<\/b><span>Scores add to your XP, badges and topic map in the free progress hub.<\/span><\/div><\/li>\n      <\/ul>\n      <div class=\"fh-quiz-boards\">\n        <a class=\"fh-btn fh-btn--primary\" href=\"https:\/\/www.onlinelearningsystem.net\/xyz\/edexcel-international\/free-quiz\/\">Edexcel International <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line><polyline points=\"13 5 20 12 13 19\"><\/polyline><\/svg><\/a>\n        <a class=\"fh-btn fh-btn--ghost\" href=\"https:\/\/www.onlinelearningsystem.net\/xyz\/edexcel\/free-quiz\/\">Edexcel <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line><polyline points=\"13 5 20 12 13 19\"><\/polyline><\/svg><\/a>\n      <\/div>\n      <p class=\"fh-quiz-note\">Free with an account. More exam boards are being added.<\/p>\n    <\/div>\n    <div class=\"fh-reveal\" data-delay=\"2\">\n      <div class=\"fh-qp\" role=\"img\" aria-label=\"A marked question from the free quiz: the answer chosen, the correct answer, the explanation and a link to the revision note\">\n        <div class=\"fh-qp-top\"><b>Question 1 of 18 &middot; Topic 3B Covalent Bonding<\/b><span class=\"fh-qp-chip\">Wrong &middot; 0\/1<\/span><\/div>\n        <div class=\"fh-qp-body\">\n          <p class=\"fh-qp-q\">A chemical compound has a high melting temperature and is hard and brittle. From this it can be deduced that its bonding could be<\/p>\n          <ul class=\"fh-qp-opts\">\n            <li class=\"is-wrong\"><span>A<\/span><span>ionic but not covalent<\/span><em>Your answer<\/em><\/li>\n            <li><span>B<\/span><span>covalent but not ionic<\/span><em><\/em><\/li>\n            <li class=\"is-right\"><span>C<\/span><span>either ionic or covalent<\/span><em>Correct answer<\/em><\/li>\n            <li><span>D<\/span><span>metallic<\/span><em><\/em><\/li>\n          <\/ul>\n          <div class=\"fh-qp-box is-fb\"><b>About your answer<\/b>Giant covalent compounds such as silicon(IV) oxide are also hard and brittle with very high melting temperatures. The data does not rule out covalent bonding.<\/div>\n          <div class=\"fh-qp-box is-ex\"><b>Explanation<\/b>A high melting temperature with hardness and brittleness points to a giant lattice with strong forces throughout. Both giant ionic and giant covalent lattices fit, so the bonding could be either.<\/div>\n          <div class=\"fh-qp-box is-rev\"><b>Revise this<\/b><a href=\"https:\/\/www.onlinelearningsystem.net\/xyz\/revision-notes\/a-level-chemistry\/edexcel-international\/topic-3-bonding-structure\/nature-of-covalent-bonding\/giant-covalent-structures\/\">Giant Covalent Structures<\/a><\/div>\n        <\/div>\n      <\/div>\n      <p class=\"fh-qp-cap\">A real question from the free Edexcel International Topic 3B quiz, as it looks once marked<\/p>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ============================================================\n     THE 3D CARD: real models from the notes, loaded on demand\n     ============================================================ -->\n<section class=\"fh-3d-001\" id=\"fh-3d\">\n  <style>\n    .fh-3d-001 { background: #f5f7fb; padding: 76px 20px 84px; }\n    .fh-3d-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 auto 22px; }\n    .fh-3d-tab { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 210px; text-align: left; background: #ffffff; border: 1.5px solid rgba(28,36,75,0.12); border-radius: 18px; padding: 12px 18px; font-family: Poppins, Arial, sans-serif; color: #1C244B; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }\n    .fh-3d-tab b { font-size: 15px; font-weight: 700; }\n    .fh-3d-tab { white-space: normal; } \/* the theme sets nowrap on every button *\/\n    .fh-3d-tab span { font-size: 12.5px; color: rgba(28,36,75,0.6); }\n    .fh-3d-tab:hover { border-color: rgba(70,127,247,0.6); transform: translateY(-1px); }\n    .fh-3d-tab[aria-selected=\"true\"] { background: #1C244B; border-color: #1C244B; color: #ffffff; box-shadow: 0 14px 28px rgba(28,36,75,0.22); }\n    .fh-3d-tab[aria-selected=\"true\"] span { color: rgba(255,255,255,0.72); }\n    .fh-3d-card { max-width: 1040px; margin: 0 auto; }\n    .fh-3d-panel { position: relative; min-height: 420px; }\n    .fh-3d-panel > section { margin: 0 !important; max-width: none !important; }\n    .fh-3d-wait { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; color: rgba(28,36,75,0.6); font-size: 14px; pointer-events: none; }\n    .fh-3d-panel.is-ready .fh-3d-wait { display: none; }\n    .fh-3d-from { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 18px; padding: 14px 18px 8px; font-size: 13.5px; color: rgba(28,36,75,0.65); }\n    .fh-3d-from a { color: #467FF7; font-weight: 600; }\n    .fh-3d-from a:hover { text-decoration: underline; }\n    @media (max-width: 700px) {\n      .fh-3d-001 { padding: 56px 12px 62px; }\n      .fh-3d-tabs { flex-wrap: nowrap; gap: 6px; }\n      .fh-3d-tab { min-width: 0; flex: 1 1 0; align-items: center; text-align: center; padding: 10px 8px; border-radius: 14px; }\n      .fh-3d-tab b { font-size: 13px; line-height: 1.25; }\n      .fh-3d-tab span { display: none; }\n    }\n  <\/style>\n  <div class=\"fh-wrap\">\n    <div class=\"fh-head fh-reveal\">\n      <span class=\"fh-eyebrow is-soft\">Try one now<\/span>\n      <h2 class=\"fh-h2\">A real 3D model, <span class=\"accent\">straight from the notes<\/span><\/h2>\n      <p class=\"fh-lede\">These are the same interactive models students use inside the revision notes. Drag to rotate, then step through what happens.<\/p>\n    <\/div>\n    <div class=\"fh-3d-tabs\" role=\"tablist\" aria-label=\"3D models from the notes\">\n      <button type=\"button\" class=\"fh-3d-tab\" role=\"tab\" id=\"fh-3d-tab-slds\" aria-controls=\"fh-3d-panel-slds\" aria-selected=\"true\" tabindex=\"0\"><b>Giant structures<\/b><span>Bonding and structure<\/span><\/button>\n      <button type=\"button\" class=\"fh-3d-tab\" role=\"tab\" id=\"fh-3d-tab-ctet\" aria-controls=\"fh-3d-panel-ctet\" aria-selected=\"false\" tabindex=\"-1\"><b>Methane in 3D<\/b><span>Shapes of molecules<\/span><\/button>\n      <button type=\"button\" class=\"fh-3d-tab\" role=\"tab\" id=\"fh-3d-tab-tit\" aria-controls=\"fh-3d-panel-tit\" aria-selected=\"false\" tabindex=\"-1\"><b>Titration bench<\/b><span>Practicals<\/span><\/button>\n    <\/div>\n    <div class=\"fh-3d-card\">\n      <div class=\"fh-3d-panel\" role=\"tabpanel\" id=\"fh-3d-panel-slds\" aria-labelledby=\"fh-3d-tab-slds\" data-src=\"https:\/\/www.onlinelearningsystem.net\/xyz\/wp-content\/uploads\/JS\/solid-lattices.js?v=20261018z\">\n        <div class=\"fh-3d-wait\">Loading the 3D model<\/div>\n<!-- 3D card: solid-lattices (rebuilt Oct 2026) -->\n<!-- Copyright (c) 2026 Dr. Mohammed Al-Fatah, onlinelearningsystem.net. All rights reserved. -->\n<section class=\"ols-slds-001\" id=\"olsSlds001\">\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600&display=swap');\n\n.ols-slds-001{\n  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;\n  color:#1C244B; background:#ffffff;\n  border:1px solid rgba(28,36,75,0.14);\n  border-radius:28px;\n  box-shadow:0 18px 45px rgba(28,36,75,0.10);\n  padding:44px; margin:26px auto; max-width:980px;\n  box-sizing:border-box; -webkit-font-smoothing:antialiased;\n}\n.ols-slds-001 *{box-sizing:border-box;}\n\n.ols-slds-001 .slds-head{margin:0 0 22px;}\n.ols-slds-001 h2.slds-title{\n  font-size:26px; line-height:1.25; font-weight:600; letter-spacing:-0.012em;\n  margin:0 0 9px; color:#1C244B;\n}\n.ols-slds-001 p.slds-sub{\n  font-size:14.5px; line-height:1.62; font-weight:300; color:#4a5270;\n  margin:0; max-width:66ch;\n}\n\n.ols-slds-001 .slds-stage{\n  position:relative; width:100%; height:540px;\n  background:#ffffff; border:1px solid rgba(28,36,75,0.12);\n  border-radius:18px; overflow:hidden;\n}\n.ols-slds-001 .slds-canvas{\n  display:block; width:100%; height:100%;\n  touch-action:none; cursor:grab; background:#ffffff;\n}\n.ols-slds-001 .slds-canvas.is-drag{cursor:grabbing;}\n.ols-slds-001 .slds-overlay{position:absolute; inset:0; pointer-events:none; overflow:hidden;}\n\n.ols-slds-001 .slds-lab{\n  position:absolute; left:0; top:0; transform:translate(-50%,-50%);\n  white-space:nowrap; font-size:12.5px; font-weight:500; line-height:1;\n  padding:5px 10px; background:rgba(255,255,255,0.93);\n  border:1px solid rgba(28,36,75,0.16); border-radius:999px;\n  color:#1C244B; will-change:transform;\n}\n.ols-slds-001 .slds-lab.l-part{font-size:11.5px; color:#3c4463;}\n.ols-slds-001 .slds-lab.l-msg{font-weight:600; border-color:rgba(28,36,75,0.32);}\n.ols-slds-001 .slds-lab.l-ok{font-weight:600; border-color:rgba(47,158,87,0.8); color:#1f7a3a;}\n.ols-slds-001 .slds-lab.l-bad{font-weight:600; border-color:rgba(212,58,50,0.7); color:#b02a24;}\n.ols-slds-001 .slds-lab.l-hi{font-weight:600; border-color:rgba(201,150,28,0.75); color:#8a6410;}\n.ols-slds-001 .slds-lab.l-blue{font-weight:600; border-color:rgba(70,125,190,0.55); color:#2f5f9a;}\n.ols-slds-001 .slds-lab.l-read{font-size:14px; font-weight:600; border-color:rgba(28,36,75,0.45); padding:6px 12px;}\n\n.ols-slds-001 .slds-caption .c-ok{color:#1f7a3a;}\n.ols-slds-001 .slds-caption .c-bad{color:#b02a24;}\n.ols-slds-001 .slds-caption .c-hi{color:#8a6410;}\n.ols-slds-001 .slds-caption{\n  position:absolute; left:14px; top:14px; max-width:60%;\n  font-size:12px; font-weight:500; color:#4a5270; line-height:1.35;\n  background:rgba(255,255,255,0.92); padding:6px 12px;\n  border-radius:14px; border:1px solid rgba(28,36,75,0.12);\n}\n.ols-slds-001 .slds-hint{\n  position:absolute; right:14px; top:14px;\n  font-size:11.5px; font-weight:400; color:#8b92a8;\n  background:rgba(255,255,255,0.9); padding:5px 11px;\n  border-radius:999px; border:1px solid rgba(28,36,75,0.10);\n}\n.ols-slds-001 .slds-badges{\n  position:absolute; right:14px; bottom:14px; max-width:58%;\n  display:flex; flex-direction:column; align-items:flex-end; gap:6px;\n}\n.ols-slds-001 .slds-badge{\n  font-size:12px; font-weight:500; color:#1C244B; line-height:1.35; text-align:right;\n  background:rgba(255,255,255,0.95); padding:5px 12px;\n  border-radius:14px; border:1px solid rgba(28,36,75,0.22);\n}\n.ols-slds-001 .slds-badge.b-eq{font-size:13.5px; font-weight:600; border-color:rgba(201,150,28,0.75);}\n\n.ols-slds-001 .slds-controls{margin-top:20px; display:flex; flex-direction:column; gap:12px;}\n.ols-slds-001 .slds-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}\n.ols-slds-001 .slds-rowlab{font-size:12px; font-weight:500; color:#6b7290; min-width:100px; flex:0 0 auto;}\n\n.ols-slds-001 .slds-seg{\n  display:inline-flex; border:1px solid rgba(28,36,75,0.16);\n  border-radius:12px; overflow:hidden; background:#fbfbfd; flex-wrap:wrap;\n}\n.ols-slds-001 .slds-seg button{\n  font-family:inherit; font-size:14px; font-weight:500; color:#3c4463;\n  background:transparent; border:0; border-right:1px solid rgba(28,36,75,0.12);\n  padding:9px 18px; cursor:pointer; transition:background .15s, color .15s;\n}\n.ols-slds-001 .slds-seg button:last-child{border-right:0;}\n.ols-slds-001 .slds-seg button:hover{background:rgba(37,99,235,0.06);}\n.ols-slds-001 .slds-seg button[aria-pressed=\"true\"]{background:#2563eb; color:#fff;}\n.ols-slds-001 .slds-seg button:focus-visible{outline:2px solid #2563eb; outline-offset:-2px;}\n\n.ols-slds-001 .slds-pill{\n  font-family:inherit; font-size:13px; font-weight:500; color:#3c4463;\n  background:#fbfbfd; border:1px solid rgba(28,36,75,0.16);\n  border-radius:999px; padding:8px 16px; cursor:pointer;\n  display:inline-flex; align-items:center; gap:8px;\n  transition:background .15s, border-color .15s, color .15s;\n}\n.ols-slds-001 .slds-pill:hover{border-color:rgba(37,99,235,0.4);}\n.ols-slds-001 .slds-pill:focus-visible{outline:2px solid #2563eb; outline-offset:2px;}\n\n.ols-slds-001 .slds-info{\n  margin-top:22px; padding:22px 24px;\n  border:1px solid rgba(28,36,75,0.12); border-radius:16px; background:#fbfbfd;\n}\n.ols-slds-001 .slds-info h3{margin:0 0 8px; font-size:15.5px; font-weight:600; color:#1C244B;}\n.ols-slds-001 .slds-info p{margin:0; font-size:14px; line-height:1.68; font-weight:300; color:#41496a; max-width:74ch;}\n.ols-slds-001 .slds-facts{\n  margin-top:16px; display:flex; gap:26px; flex-wrap:wrap;\n  padding-top:16px; border-top:1px solid rgba(28,36,75,0.10);\n}\n.ols-slds-001 .slds-fact{min-width:110px;}\n.ols-slds-001 .slds-fact span{display:block; font-size:11.5px; color:#7d8399; font-weight:400; margin-bottom:3px;}\n.ols-slds-001 .slds-fact strong{display:block; font-size:15px; font-weight:600; color:#1C244B;}\n\n.ols-slds-001 .slds-key{\n  margin-top:16px; display:flex; gap:20px; flex-wrap:wrap;\n  font-size:12.5px; font-weight:400; color:#5a6180;\n}\n.ols-slds-001 .slds-key i{\n  display:inline-block; width:13px; height:13px; border-radius:3px;\n  margin-right:7px; vertical-align:-2px; border:1px solid rgba(28,36,75,0.18);\n}\n.ols-slds-001 .slds-key i.k-ball{border-radius:50%;}\n\n@media (max-width:760px){\n  .ols-slds-001{padding:26px; border-radius:22px;}\n  .ols-slds-001 h2.slds-title{font-size:20.5px;}\n  .ols-slds-001 p.slds-sub{font-size:13.5px;}\n  .ols-slds-001 .slds-stage{height:400px;}\n  .ols-slds-001 .slds-rowlab{min-width:100%;}\n  .ols-slds-001 .slds-seg button{padding:9px 13px; font-size:13px;}\n  .ols-slds-001 .slds-lab{font-size:10.5px; padding:4px 8px;}\n  .ols-slds-001 .slds-lab.l-part{font-size:9.5px; padding:3px 7px;}\n  .ols-slds-001 .slds-lab.l-read{font-size:12px; padding:5px 9px;}\n  .ols-slds-001 .slds-caption{font-size:10.5px; padding:5px 9px; max-width:64%;}\n  .ols-slds-001 .slds-badge{font-size:10.5px; padding:4px 9px;}\n  .ols-slds-001 .slds-badge.b-eq{font-size:11px;}\n  .ols-slds-001 .slds-badges{max-width:calc(100% - 28px);}\n  .ols-slds-001 .slds-info{padding:18px;}\n}\n\/* on a phone the caption needs the full top row, so the drag hint goes *\/\n@media (max-width:480px){\n  .ols-slds-001 .slds-hint{display:none;}\n  .ols-slds-001 .slds-caption{max-width:calc(100% - 28px);}\n}\n@media (prefers-reduced-motion:reduce){\n  .ols-slds-001 .slds-seg button,.ols-slds-001 .slds-pill{transition:none;}\n}\n\n.ols-cc-slds-001{\n  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;\n  margin:10px auto 0; text-align:center; font-size:11px; font-style:italic; color:#aab0c0;\n}\n.ols-cc-slds-001 a{color:#aab0c0; text-decoration:none;}\n.ols-cc-slds-001 a:hover{text-decoration:underline;}\n.ols-slds-001 .slds-seg button{display:inline-flex; align-items:center;}\n.ols-slds-001 .slds-seg button .slds-n{display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; margin-right:9px; border-radius:50%; font-size:11px; font-weight:600; background:rgba(37,99,235,0.10); color:#2563eb; flex:0 0 auto;}\n.ols-slds-001 .slds-seg button[aria-pressed=\"true\"] .slds-n{background:#ffffff; color:#2563eb;}\n<\/style>\n\n<div class=\"slds-head\">\n  <h2 class=\"slds-title\">The Four Types of Solid Lattice<\/h2>\n  <p class=\"slds-sub\">Choose a step to watch each type of solid lattice form and see what holds its particles together, then heat it to see what melting has to overcome.<\/p>\n<\/div>\n\n<div class=\"slds-stage\" id=\"sldsStage\">\n  <canvas class=\"slds-canvas\" id=\"sldsCanvas\"><\/canvas>\n  <div class=\"slds-overlay\" id=\"sldsOverlay\"><\/div>\n  <div class=\"slds-caption\" id=\"sldsCaption\"><\/div>\n  <div class=\"slds-hint\" id=\"sldsHint\">Drag to rotate<\/div>\n  <div class=\"slds-badges\" id=\"sldsBadges\"><\/div>\n<\/div>\n\n<div class=\"slds-controls\">\n  <div class=\"slds-row\">\n    <span class=\"slds-rowlab\">Step<\/span>\n    <div class=\"slds-seg\" role=\"group\" aria-label=\"Step\">\n      <button type=\"button\" data-step=\"1\" aria-pressed=\"true\"><span class=\"slds-n\">1<\/span>Giant ionic<\/button>\n      <button type=\"button\" data-step=\"2\" aria-pressed=\"false\"><span class=\"slds-n\">2<\/span>Giant metallic<\/button>\n      <button type=\"button\" data-step=\"3\" aria-pressed=\"false\"><span class=\"slds-n\">3<\/span>Giant covalent<\/button>\n      <button type=\"button\" data-step=\"4\" aria-pressed=\"false\"><span class=\"slds-n\">4<\/span>Simple molecular<\/button>\n    <\/div>\n  <\/div>\n\n  <div class=\"slds-row\">\n    <span class=\"slds-rowlab\">Heat<\/span>\n    <button type=\"button\" class=\"slds-pill slds-heat\" id=\"sldsHeat\" aria-pressed=\"false\" disabled>Heat it<\/button>\n  <\/div>\n\n  <div class=\"slds-row\">\n    <span class=\"slds-rowlab\">View<\/span>\n    <button type=\"button\" class=\"slds-pill\" id=\"sldsResetV\">Reset view<\/button>\n  <\/div>\n<\/div>\n\n<div class=\"slds-info\">\n  <h3 id=\"sldsInfoTitle\"><\/h3>\n  <p id=\"sldsInfoText\"><\/p>\n  <div class=\"slds-facts\" id=\"sldsFacts\"><\/div>\n  <div class=\"slds-key\">\n    <span><i class=\"k-ball\" style=\"background:#8c52c4\"><\/i>Sodium ion, Na\u207a<\/span>\n    <span><i class=\"k-ball\" style=\"background:#34aa48\"><\/i>Chloride ion, Cl\u207b<\/span>\n    <span><i class=\"k-ball\" style=\"background:#b2b8c4\"><\/i>Magnesium ion, Mg\u00b2\u207a<\/span>\n    <span><i class=\"k-ball\" style=\"background:#f2bc1a\"><\/i>Delocalised electron<\/span>\n    <span><i class=\"k-ball\" style=\"background:#464a54\"><\/i>Carbon atom<\/span>\n    <span><i class=\"k-ball\" style=\"background:#682c8c\"><\/i>Iodine atom<\/span>\n    <span><i class=\"\" style=\"background:#ffffff;border-color:rgba(201,150,28,0.95)\"><\/i>Electrostatic attraction<\/span>\n    <span><i class=\"\" style=\"background:#ffffff;border-color:rgba(70,125,190,0.85)\"><\/i>London forces<\/span>\n  <\/div>\n<\/div>\n\n\n<\/section>\n        <p class=\"fh-3d-from\"><span>From the note <a href=\"https:\/\/www.onlinelearningsystem.net\/xyz\/revision-notes\/a-level-chemistry\/edexcel\/topic-2-bonding-and-structure\/structure-types\/\">Structure Types<\/a><\/span><span>Edexcel, Topic 2<\/span><\/p>\n      <\/div>\n      <div class=\"fh-3d-panel\" role=\"tabpanel\" id=\"fh-3d-panel-ctet\" aria-labelledby=\"fh-3d-tab-ctet\" data-src=\"https:\/\/www.onlinelearningsystem.net\/xyz\/wp-content\/uploads\/JS\/ch4-tetrahedral.js?v=20261018z\" hidden>\n        <div class=\"fh-3d-wait\">Loading the 3D model<\/div>\n<!-- 3D card: ch4-tetrahedral (rebuilt Oct 2026) -->\n<!-- Copyright (c) 2026 Dr. Mohammed Al-Fatah, onlinelearningsystem.net. All rights reserved. -->\n<section class=\"ols-ctet-001\" id=\"olsCtet001\">\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600&display=swap');\n\n.ols-ctet-001{\n  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;\n  color:#1C244B; background:#ffffff;\n  border:1px solid rgba(28,36,75,0.14);\n  border-radius:28px;\n  box-shadow:0 18px 45px rgba(28,36,75,0.10);\n  padding:44px; margin:26px auto; max-width:980px;\n  box-sizing:border-box; -webkit-font-smoothing:antialiased;\n}\n.ols-ctet-001 *{box-sizing:border-box;}\n\n.ols-ctet-001 .ctet-head{margin:0 0 22px;}\n.ols-ctet-001 h2.ctet-title{\n  font-size:26px; line-height:1.25; font-weight:600; letter-spacing:-0.012em;\n  margin:0 0 9px; color:#1C244B;\n}\n.ols-ctet-001 p.ctet-sub{\n  font-size:14.5px; line-height:1.62; font-weight:300; color:#4a5270;\n  margin:0; max-width:66ch;\n}\n\n.ols-ctet-001 .ctet-stage{\n  position:relative; width:100%; height:540px;\n  background:#ffffff; border:1px solid rgba(28,36,75,0.12);\n  border-radius:18px; overflow:hidden;\n}\n.ols-ctet-001 .ctet-canvas{\n  display:block; width:100%; height:100%;\n  touch-action:none; cursor:grab; background:#ffffff;\n}\n.ols-ctet-001 .ctet-canvas.is-drag{cursor:grabbing;}\n.ols-ctet-001 .ctet-overlay{position:absolute; inset:0; pointer-events:none; overflow:hidden;}\n\n.ols-ctet-001 .ctet-lab{\n  position:absolute; left:0; top:0; transform:translate(-50%,-50%);\n  white-space:nowrap; font-size:12.5px; font-weight:500; line-height:1;\n  padding:5px 10px; background:rgba(255,255,255,0.93);\n  border:1px solid rgba(28,36,75,0.16); border-radius:999px;\n  color:#1C244B; will-change:transform;\n}\n.ols-ctet-001 .ctet-lab.l-part{font-size:11.5px; color:#3c4463;}\n.ols-ctet-001 .ctet-lab.l-msg{font-weight:600; border-color:rgba(28,36,75,0.32);}\n.ols-ctet-001 .ctet-lab.l-ok{font-weight:600; border-color:rgba(47,158,87,0.8); color:#1f7a3a;}\n.ols-ctet-001 .ctet-lab.l-bad{font-weight:600; border-color:rgba(212,58,50,0.7); color:#b02a24;}\n.ols-ctet-001 .ctet-lab.l-hi{font-weight:600; border-color:rgba(201,150,28,0.75); color:#8a6410;}\n.ols-ctet-001 .ctet-lab.l-blue{font-weight:600; border-color:rgba(70,125,190,0.55); color:#2f5f9a;}\n.ols-ctet-001 .ctet-lab.l-read{font-size:14px; font-weight:600; border-color:rgba(28,36,75,0.45); padding:6px 12px;}\n\n.ols-ctet-001 .ctet-caption .c-ok{color:#1f7a3a;}\n.ols-ctet-001 .ctet-caption .c-bad{color:#b02a24;}\n.ols-ctet-001 .ctet-caption .c-hi{color:#8a6410;}\n.ols-ctet-001 .ctet-caption{\n  position:absolute; left:14px; top:14px; max-width:60%;\n  font-size:12px; font-weight:500; color:#4a5270; line-height:1.35;\n  background:rgba(255,255,255,0.92); padding:6px 12px;\n  border-radius:14px; border:1px solid rgba(28,36,75,0.12);\n}\n.ols-ctet-001 .ctet-hint{\n  position:absolute; right:14px; top:14px;\n  font-size:11.5px; font-weight:400; color:#8b92a8;\n  background:rgba(255,255,255,0.9); padding:5px 11px;\n  border-radius:999px; border:1px solid rgba(28,36,75,0.10);\n}\n.ols-ctet-001 .ctet-badges{\n  position:absolute; right:14px; bottom:14px; max-width:58%;\n  display:flex; flex-direction:column; align-items:flex-end; gap:6px;\n}\n.ols-ctet-001 .ctet-badge{\n  font-size:12px; font-weight:500; color:#1C244B; line-height:1.35; text-align:right;\n  background:rgba(255,255,255,0.95); padding:5px 12px;\n  border-radius:14px; border:1px solid rgba(28,36,75,0.22);\n}\n.ols-ctet-001 .ctet-badge.b-eq{font-size:13.5px; font-weight:600; border-color:rgba(201,150,28,0.75);}\n\n.ols-ctet-001 .ctet-controls{margin-top:20px; display:flex; flex-direction:column; gap:12px;}\n.ols-ctet-001 .ctet-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}\n.ols-ctet-001 .ctet-rowlab{font-size:12px; font-weight:500; color:#6b7290; min-width:100px; flex:0 0 auto;}\n\n.ols-ctet-001 .ctet-seg{\n  display:inline-flex; border:1px solid rgba(28,36,75,0.16);\n  border-radius:12px; overflow:hidden; background:#fbfbfd; flex-wrap:wrap;\n}\n.ols-ctet-001 .ctet-seg button{\n  font-family:inherit; font-size:14px; font-weight:500; color:#3c4463;\n  background:transparent; border:0; border-right:1px solid rgba(28,36,75,0.12);\n  padding:9px 18px; cursor:pointer; transition:background .15s, color .15s;\n}\n.ols-ctet-001 .ctet-seg button:last-child{border-right:0;}\n.ols-ctet-001 .ctet-seg button:hover{background:rgba(37,99,235,0.06);}\n.ols-ctet-001 .ctet-seg button[aria-pressed=\"true\"]{background:#2563eb; color:#fff;}\n.ols-ctet-001 .ctet-seg button:focus-visible{outline:2px solid #2563eb; outline-offset:-2px;}\n\n.ols-ctet-001 .ctet-pill{\n  font-family:inherit; font-size:13px; font-weight:500; color:#3c4463;\n  background:#fbfbfd; border:1px solid rgba(28,36,75,0.16);\n  border-radius:999px; padding:8px 16px; cursor:pointer;\n  display:inline-flex; align-items:center; gap:8px;\n  transition:background .15s, border-color .15s, color .15s;\n}\n.ols-ctet-001 .ctet-pill:hover{border-color:rgba(37,99,235,0.4);}\n.ols-ctet-001 .ctet-pill:focus-visible{outline:2px solid #2563eb; outline-offset:2px;}\n\n.ols-ctet-001 .ctet-info{\n  margin-top:22px; padding:22px 24px;\n  border:1px solid rgba(28,36,75,0.12); border-radius:16px; background:#fbfbfd;\n}\n.ols-ctet-001 .ctet-info h3{margin:0 0 8px; font-size:15.5px; font-weight:600; color:#1C244B;}\n.ols-ctet-001 .ctet-info p{margin:0; font-size:14px; line-height:1.68; font-weight:300; color:#41496a; max-width:74ch;}\n.ols-ctet-001 .ctet-facts{\n  margin-top:16px; display:flex; gap:26px; flex-wrap:wrap;\n  padding-top:16px; border-top:1px solid rgba(28,36,75,0.10);\n}\n.ols-ctet-001 .ctet-fact{min-width:110px;}\n.ols-ctet-001 .ctet-fact span{display:block; font-size:11.5px; color:#7d8399; font-weight:400; margin-bottom:3px;}\n.ols-ctet-001 .ctet-fact strong{display:block; font-size:15px; font-weight:600; color:#1C244B;}\n\n.ols-ctet-001 .ctet-key{\n  margin-top:16px; display:flex; gap:20px; flex-wrap:wrap;\n  font-size:12.5px; font-weight:400; color:#5a6180;\n}\n.ols-ctet-001 .ctet-key i{\n  display:inline-block; width:13px; height:13px; border-radius:3px;\n  margin-right:7px; vertical-align:-2px; border:1px solid rgba(28,36,75,0.18);\n}\n.ols-ctet-001 .ctet-key i.k-ball{border-radius:50%;}\n\n@media (max-width:760px){\n  .ols-ctet-001{padding:26px; border-radius:22px;}\n  .ols-ctet-001 h2.ctet-title{font-size:20.5px;}\n  .ols-ctet-001 p.ctet-sub{font-size:13.5px;}\n  .ols-ctet-001 .ctet-stage{height:400px;}\n  .ols-ctet-001 .ctet-rowlab{min-width:100%;}\n  .ols-ctet-001 .ctet-seg button{padding:9px 13px; font-size:13px;}\n  .ols-ctet-001 .ctet-lab{font-size:10.5px; padding:4px 8px;}\n  .ols-ctet-001 .ctet-lab.l-part{font-size:9.5px; padding:3px 7px;}\n  .ols-ctet-001 .ctet-lab.l-read{font-size:12px; padding:5px 9px;}\n  .ols-ctet-001 .ctet-caption{font-size:10.5px; padding:5px 9px; max-width:64%;}\n  .ols-ctet-001 .ctet-badge{font-size:10.5px; padding:4px 9px;}\n  .ols-ctet-001 .ctet-badge.b-eq{font-size:11px;}\n  .ols-ctet-001 .ctet-badges{max-width:calc(100% - 28px);}\n  .ols-ctet-001 .ctet-info{padding:18px;}\n}\n\/* on a phone the caption needs the full top row, so the drag hint goes *\/\n@media (max-width:480px){\n  .ols-ctet-001 .ctet-hint{display:none;}\n  .ols-ctet-001 .ctet-caption{max-width:calc(100% - 28px);}\n}\n@media (prefers-reduced-motion:reduce){\n  .ols-ctet-001 .ctet-seg button,.ols-ctet-001 .ctet-pill{transition:none;}\n}\n\n.ols-cc-ctet-001{\n  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;\n  margin:10px auto 0; text-align:center; font-size:11px; font-style:italic; color:#aab0c0;\n}\n.ols-cc-ctet-001 a{color:#aab0c0; text-decoration:none;}\n.ols-cc-ctet-001 a:hover{text-decoration:underline;}\n.ols-ctet-001 .ctet-seg button{display:inline-flex; align-items:center;}\n.ols-ctet-001 .ctet-seg button .ctet-n{display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; margin-right:9px; border-radius:50%; font-size:11px; font-weight:600; background:rgba(37,99,235,0.10); color:#2563eb; flex:0 0 auto;}\n.ols-ctet-001 .ctet-seg button[aria-pressed=\"true\"] .ctet-n{background:#ffffff; color:#2563eb;}\n<\/style>\n\n<div class=\"ctet-head\">\n  <h2 class=\"ctet-title\">Tetrahedral Shape of CH\u2084<\/h2>\n  <p class=\"ctet-sub\">Choose a step to watch four electron pairs push apart into a tetrahedron, become C\u2013H bonds at 109.5\u00b0 and turn into a wedge-and-dash drawing.<\/p>\n<\/div>\n\n<div class=\"ctet-stage\" id=\"ctetStage\">\n  <canvas class=\"ctet-canvas\" id=\"ctetCanvas\"><\/canvas>\n  <div class=\"ctet-overlay\" id=\"ctetOverlay\"><\/div>\n  <div class=\"ctet-caption\" id=\"ctetCaption\"><\/div>\n  <div class=\"ctet-hint\" id=\"ctetHint\">Drag to rotate<\/div>\n  <div class=\"ctet-badges\" id=\"ctetBadges\"><\/div>\n<\/div>\n\n<div class=\"ctet-controls\">\n  <div class=\"ctet-row\">\n    <span class=\"ctet-rowlab\">Step<\/span>\n    <div class=\"ctet-seg\" role=\"group\" aria-label=\"Step\">\n      <button type=\"button\" data-step=\"1\" aria-pressed=\"true\"><span class=\"ctet-n\">1<\/span>Flat square to tetrahedron<\/button>\n      <button type=\"button\" data-step=\"2\" aria-pressed=\"false\"><span class=\"ctet-n\">2<\/span>Four C\u2013H bonds<\/button>\n      <button type=\"button\" data-step=\"3\" aria-pressed=\"false\"><span class=\"ctet-n\">3<\/span>109.5\u00b0 bond angles<\/button>\n      <button type=\"button\" data-step=\"4\" aria-pressed=\"false\"><span class=\"ctet-n\">4<\/span>Wedge and dash<\/button>\n    <\/div>\n  <\/div>\n\n  <div class=\"ctet-row\">\n    <span class=\"ctet-rowlab\">View<\/span>\n    <button type=\"button\" class=\"ctet-pill\" id=\"ctetResetV\">Reset view<\/button>\n  <\/div>\n<\/div>\n\n<div class=\"ctet-info\">\n  <h3 id=\"ctetInfoTitle\"><\/h3>\n  <p id=\"ctetInfoText\"><\/p>\n  <div class=\"ctet-facts\" id=\"ctetFacts\"><\/div>\n  <div class=\"ctet-key\">\n    <span><i class=\"k-ball\" style=\"background:#464a54\"><\/i>Carbon<\/span>\n    <span><i class=\"k-ball\" style=\"background:#ececf0\"><\/i>Hydrogen<\/span>\n    <span><i class=\"\" style=\"background:rgba(70,128,220,0.45)\"><\/i>Electron pair (bonding)<\/span>\n    <span><i class=\"k-ball\" style=\"background:#fac828\"><\/i>Electron<\/span>\n    <span><i class=\"\" style=\"background:#c9961c\"><\/i>Bond angle<\/span>\n  <\/div>\n<\/div>\n\n\n<\/section>\n        <p class=\"fh-3d-from\"><span>From the note <a href=\"https:\/\/www.onlinelearningsystem.net\/xyz\/revision-notes\/a-level-chemistry\/edexcel-international\/topic-3-bonding-structure\/shapes-of-molecules\/tetrahedral\/\">Tetrahedral<\/a><\/span><span>Edexcel International, Topic 3<\/span><\/p>\n      <\/div>\n      <div class=\"fh-3d-panel\" role=\"tabpanel\" id=\"fh-3d-panel-tit\" aria-labelledby=\"fh-3d-tab-tit\" data-src=\"https:\/\/www.onlinelearningsystem.net\/xyz\/wp-content\/uploads\/JS\/titration-hcl-naoh.js?v=20260928b\" hidden>\n        <div class=\"fh-3d-wait\">Loading the 3D model<\/div>\n<!-- 3D card: titration-hcl-naoh (27 Sep 2026) -->\n<!-- Copyright (c) 2026 Dr. Mohammed Al-Fatah, onlinelearningsystem.net. All rights reserved. -->\n<section class=\"ols-tit-001\" id=\"olsTit001\">\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600&display=swap');\n\n.ols-tit-001{\n  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;\n  color:#1C244B; background:#ffffff;\n  border:1px solid rgba(28,36,75,0.14);\n  border-radius:28px;\n  box-shadow:0 18px 45px rgba(28,36,75,0.10);\n  padding:44px; margin:26px auto; max-width:980px;\n  box-sizing:border-box; -webkit-font-smoothing:antialiased;\n}\n.ols-tit-001 *{box-sizing:border-box;}\n\n.ols-tit-001 .tit-head{margin:0 0 22px;}\n.ols-tit-001 h2.tit-title{\n  font-size:26px; line-height:1.25; font-weight:600; letter-spacing:-0.012em;\n  margin:0 0 9px; color:#1C244B;\n}\n.ols-tit-001 p.tit-sub{\n  font-size:14.5px; line-height:1.62; font-weight:300; color:#4a5270;\n  margin:0; max-width:68ch;\n}\n\n.ols-tit-001 .tit-stage{\n  position:relative; width:100%; height:600px;\n  background:#ffffff; border:1px solid rgba(28,36,75,0.12);\n  border-radius:18px; overflow:hidden; outline:none;\n}\n.ols-tit-001 .tit-stage:focus-visible{box-shadow:0 0 0 2px #2563eb;}\n.ols-tit-001 .tit-canvas{\n  display:block; width:100%; height:100%;\n  touch-action:none; cursor:pointer; background:#ffffff;\n}\n.ols-tit-001 .tit-canvas.is-paused{cursor:grab;}\n.ols-tit-001 .tit-canvas.is-drag{cursor:grabbing;}\n.ols-tit-001 .tit-overlay{position:absolute; inset:0; pointer-events:none; overflow:hidden;}\n\n\/* object labels *\/\n.ols-tit-001 .tit-lab{\n  position:absolute; left:0; top:0; display:none;\n  white-space:normal; max-width:230px; font-size:12px; font-weight:500; line-height:1.3;\n  padding:4px 10px; background:rgba(255,255,255,0.95);\n  border:1px solid rgba(28,36,75,0.22); border-radius:12px;\n  color:#1C244B; will-change:transform,opacity; font-variant-numeric:tabular-nums;\n}\n\/* call-out cards *\/\n.ols-tit-001 .tit-co{\n  position:absolute; left:0; top:0; display:none;\n  max-width:260px; padding:7px 12px 8px 11px;\n  background:#ffffff; border:1px solid rgba(28,36,75,0.14); border-left:4px solid #c9961c;\n  border-radius:10px; box-shadow:0 8px 22px rgba(28,36,75,0.13);\n  font-size:12.5px; font-weight:400; line-height:1.45; color:#1C244B;\n  will-change:transform,opacity;\n}\n.ols-tit-001 .tit-co .co-t{\n  display:block; font-size:10.5px; font-weight:600; letter-spacing:0.05em;\n  text-transform:uppercase; color:#8a6410; margin-bottom:2px;\n}\n.ols-tit-001 .tit-co.co-warn{border-left-color:#cc3a2f;}\n.ols-tit-001 .tit-co.co-warn .co-t{color:#b0271d;}\n.ols-tit-001 .tit-co b{font-weight:600;}\n.ols-tit-001 .tit-co.co-wide{max-width:none;}\n.ols-tit-001 .tit-co ul{margin:3px 0 0; padding-left:17px;}\n.ols-tit-001 .tit-co li{margin:0 0 4px;}\n.ols-tit-001 .tit-co .cl{padding:5px 0; border-top:1px solid rgba(28,36,75,0.08);}\n.ols-tit-001 .tit-co .cl:first-of-type{border-top:0;}\n.ols-tit-001 .tit-co .ck{display:block; font-size:11px; color:#6b7290; font-weight:500;}\n.ols-tit-001 .tit-co .big{display:block; font-size:17px; font-weight:600; color:#0e6f6b;}\n.ols-tit-001 .tit-co .nt{display:block; margin-top:3px; font-size:11px; color:#6b7290;}\n\n.ols-tit-001 .tit-subt{\n  position:absolute; left:0; bottom:12px; max-width:640px;\n  font-size:14px; font-weight:500; line-height:1.42; text-align:center;\n  color:#ffffff; background:rgba(28,36,75,0.88);\n  padding:7px 14px; border-radius:12px; pointer-events:none;\n}\n.ols-tit-001 .tit-hint{\n  position:absolute; right:14px; top:14px;\n  font-size:11.5px; font-weight:400; color:#6b7290;\n  background:rgba(255,255,255,0.94); padding:5px 11px;\n  border-radius:999px; border:1px solid rgba(28,36,75,0.12); pointer-events:none;\n}\n.ols-tit-001 .tit-hint[hidden]{display:none;}\n.ols-tit-001 .tit-poster{\n  position:absolute; left:50%; top:50%; width:92px; height:92px; margin:-46px 0 0 -46px;\n  border:0; border-radius:50%; padding:0; cursor:pointer;\n  background:rgba(28,36,75,0.9); color:#ffffff;\n  display:flex; flex-direction:column; align-items:center; justify-content:center;\n  box-shadow:0 12px 30px rgba(28,36,75,0.35); font-family:inherit; font-size:11.5px; font-weight:600;\n  transition:background .15s, transform .15s;\n}\n.ols-tit-001 .tit-poster:hover{background:#c9961c; transform:scale(1.04);}\n.ols-tit-001 .tit-poster:focus-visible{outline:3px solid #c9961c; outline-offset:3px;}\n.ols-tit-001 .tit-poster svg{width:40px; height:40px; fill:#ffffff; margin-left:5px;}\n.ols-tit-001 .tit-poster.is-replay svg{margin-left:0; width:34px; height:34px;}\n.ols-tit-001 .tit-poster span{display:none; margin-top:1px;}\n.ols-tit-001 .tit-poster.is-replay span{display:block;}\n.ols-tit-001 .tit-poster[hidden]{display:none;}\n\n\/* the player bar *\/\n.ols-tit-001 .tit-player{\n  margin-top:10px; background:#1C244B; color:#ffffff; border-radius:14px;\n  padding:8px 12px; display:flex; align-items:center; flex-wrap:wrap; gap:4px 6px;\n}\n.ols-tit-001 .tit-pb{\n  font-family:inherit; flex:0 0 auto; width:38px; height:38px; padding:0;\n  display:inline-flex; align-items:center; justify-content:center;\n  background:transparent; border:0; border-radius:9px; color:#ffffff; cursor:pointer;\n  transition:background .15s;\n}\n.ols-tit-001 .tit-pb:hover{background:rgba(255,255,255,0.12);}\n.ols-tit-001 .tit-pb:focus-visible{outline:2px solid #c9961c; outline-offset:1px;}\n.ols-tit-001 .tit-pb svg{width:22px; height:22px; fill:currentColor;}\n.ols-tit-001 .tit-pb svg text{font-family:inherit; font-size:7.5px; font-weight:600; fill:currentColor;}\n.ols-tit-001 .tit-speed{width:auto; min-width:54px; padding:0 10px; font-size:13px; font-weight:600;}\n.ols-tit-001 .tit-prog{\n  position:relative; flex:1 1 160px; min-width:120px; height:30px; margin:0 6px;\n  cursor:pointer; touch-action:none; outline:none;\n}\n.ols-tit-001 .tit-track{position:absolute; left:0; right:0; top:13px; height:5px; border-radius:3px; background:rgba(255,255,255,0.25); overflow:hidden;}\n.ols-tit-001 .tit-fill{height:100%; width:0; background:#c9961c;}\n.ols-tit-001 .tit-thumb{\n  position:absolute; left:0; top:9px; width:13px; height:13px; margin-left:-6.5px;\n  border-radius:50%; background:#c9961c; box-shadow:0 0 0 2px #1C244B; pointer-events:none;\n}\n.ols-tit-001 .tit-prog:focus-visible .tit-thumb{box-shadow:0 0 0 2px #ffffff;}\n.ols-tit-001 .tit-tick{\n  position:absolute; top:7px; width:12px; height:17px; margin-left:-6px; padding:0;\n  background:transparent; border:0; cursor:pointer; outline:none;\n}\n.ols-tit-001 .tit-tick::before{\n  content:''; position:absolute; left:5px; top:4px; width:2px; height:9px;\n  border-radius:1px; background:rgba(255,255,255,0.8);\n}\n.ols-tit-001 .tit-tick:focus-visible::before{background:#c9961c; width:3px; left:4.5px;}\n.ols-tit-001 .tit-tick .tt{\n  display:none; position:absolute; bottom:22px; left:50%; transform:translateX(-50%);\n  background:#ffffff; color:#1C244B; font-size:11.5px; font-weight:600; white-space:nowrap;\n  padding:3px 9px; border-radius:7px; box-shadow:0 4px 14px rgba(28,36,75,0.25); pointer-events:none;\n}\n.ols-tit-001 .tit-tick.tt-l .tt{left:0; transform:none;}\n.ols-tit-001 .tit-tick.tt-r .tt{left:auto; right:0; transform:none;}\n.ols-tit-001 .tit-tick:hover .tt,.ols-tit-001 .tit-tick:focus-visible .tt{display:block;}\n.ols-tit-001 .tit-time{flex:0 0 auto; padding:0 4px; font-size:12.5px; font-weight:500; white-space:nowrap; font-variant-numeric:tabular-nums;}\n\n.ols-tit-001 .tit-chips{margin-top:10px; display:flex; flex-wrap:wrap; gap:6px;}\n.ols-tit-001 .tit-chip{\n  font-family:inherit; font-size:12.5px; font-weight:500; color:#3c4463;\n  background:#fbfbfd; border:1px solid rgba(28,36,75,0.16); border-radius:999px;\n  padding:6px 12px; cursor:pointer; transition:background .15s, border-color .15s, color .15s;\n}\n.ols-tit-001 .tit-chip i{font-style:normal; font-weight:600; opacity:0.55; margin-right:5px;}\n.ols-tit-001 .tit-chip:hover{border-color:rgba(201,150,28,0.7);}\n.ols-tit-001 .tit-chip:focus-visible{outline:2px solid #2563eb; outline-offset:2px;}\n.ols-tit-001 .tit-chip[aria-current=\"true\"]{background:#1C244B; border-color:#1C244B; color:#ffffff;}\n.ols-tit-001 .tit-chip[aria-current=\"true\"] i{opacity:1; color:#c9961c;}\n\n\/* narrow stage (set from the script by the stage width) *\/\n.ols-tit-001 .tit-narrow .tit-co{max-width:170px; font-size:10.5px; line-height:1.38; padding:5px 8px 6px 8px; border-left-width:3px; border-radius:8px;}\n.ols-tit-001 .tit-narrow .tit-co .co-t{font-size:9px; margin-bottom:1px;}\n.ols-tit-001 .tit-narrow .tit-co .cl{padding:3px 0;}\n.ols-tit-001 .tit-narrow .tit-co .ck{display:inline; font-size:9.5px; margin-right:4px;}\n.ols-tit-001 .tit-narrow .tit-co .big{font-size:13.5px;}\n.ols-tit-001 .tit-narrow .tit-co .nt{font-size:9.5px;}\n.ols-tit-001 .tit-narrow .tit-co ul{padding-left:14px;}\n.ols-tit-001 .tit-narrow .tit-co li{margin-bottom:2px;}\n.ols-tit-001 .tit-narrow .tit-co.co-wide{max-width:none;}\n.ols-tit-001 .tit-narrow .tit-lab{font-size:10.5px; padding:3px 7px; max-width:140px; border-radius:9px;}\n.ols-tit-001 .tit-narrow .tit-subt{font-size:11.5px; padding:5px 10px; border-radius:10px; bottom:10px;}\n.ols-tit-001 .tit-narrow .tit-poster{width:74px; height:74px; margin:-37px 0 0 -37px;}\n.ols-tit-001 .tit-narrow .tit-poster svg{width:32px; height:32px;}\n\n@media (max-width:760px){\n  .ols-tit-001{padding:26px; border-radius:22px;}\n  .ols-tit-001 h2.tit-title{font-size:20.5px;}\n  .ols-tit-001 p.tit-sub{font-size:13.5px;}\n  .ols-tit-001 .tit-stage{height:560px;}\n}\n@media (max-width:560px){\n  .ols-tit-001 .tit-player{padding:6px 8px;}\n  .ols-tit-001 .tit-prog{order:-1; flex:1 1 100%; margin:0 4px;}\n  .ols-tit-001 .tit-pb{width:36px; height:36px;}\n  .ols-tit-001 .tit-time{margin-right:auto;}\n  .ols-tit-001 .tit-chip{font-size:11.5px; padding:5px 10px;}\n}\n@media (max-width:480px){\n  .ols-tit-001{padding:14px; border-radius:18px;}\n  .ols-tit-001 .tit-head{margin-bottom:14px;}\n}\n@media (prefers-reduced-motion:reduce){\n  .ols-tit-001 .tit-poster,.ols-tit-001 .tit-chip,.ols-tit-001 .tit-pb{transition:none;}\n}\n\n\/* full screen: the card fills the screen and the stage takes the spare height *\/\n.ols-tit-001:fullscreen{max-width:none; width:100%; height:100%; margin:0; border-radius:0; border:0; padding:16px 20px; display:flex; flex-direction:column; overflow:auto;}\n.ols-tit-001:fullscreen .tit-head{display:none;}\n.ols-tit-001:fullscreen .tit-stage{flex:1 1 auto; height:auto; min-height:320px;}\n.ols-tit-001:-webkit-full-screen{max-width:none; width:100%; height:100%; margin:0; border-radius:0; border:0; padding:16px 20px; display:flex; flex-direction:column; overflow:auto;}\n.ols-tit-001:-webkit-full-screen .tit-head{display:none;}\n.ols-tit-001:-webkit-full-screen .tit-stage{flex:1 1 auto; height:auto; min-height:320px;}\n\n.ols-cc-tit-001{\n  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;\n  margin:10px auto 0; text-align:center; font-size:11px; font-style:italic; color:#aab0c0;\n}\n.ols-cc-tit-001 a{color:#aab0c0; text-decoration:none;}\n.ols-cc-tit-001 a:hover{text-decoration:underline;}\n<\/style>\n\n<div class=\"tit-head\">\n  <h2 class=\"tit-title\">Titration: HCl against Standardised NaOH<\/h2>\n  <p class=\"tit-sub\">Dilute a sample of hydrochloric acid, titrate 25.0 cm\u00b3 portions against 0.0800 mol dm\u207b\u00b3 sodium hydroxide with phenolphthalein, and work back to the concentration of the original acid.<\/p>\n<\/div>\n\n<div class=\"tit-stage\" id=\"titStage\" tabindex=\"0\" aria-label=\"Film of the practical. Space plays or pauses, the left and right arrow keys skip 10 seconds.\">\n  <canvas class=\"tit-canvas\" id=\"titCanvas\" aria-hidden=\"true\"><\/canvas>\n  <div class=\"tit-overlay\" id=\"titOverlay\"><\/div>\n  <div class=\"tit-subt\" id=\"titSubt\"><\/div>\n  <div class=\"tit-hint\" id=\"titHint\" hidden>Paused: drag to look around<\/div>\n  <button type=\"button\" class=\"tit-poster\" id=\"titPoster\" aria-label=\"Play the film\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M7 4.5v15l12.5-7.5z\"\/><\/svg><span>Replay<\/span><\/button>\n<\/div>\n\n<div class=\"tit-player\" id=\"titPlayer\" role=\"group\" aria-label=\"Film controls\">\n  <button type=\"button\" class=\"tit-pb\" id=\"titPlay\" aria-label=\"Play\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M7 4.5v15l12.5-7.5z\"\/><\/svg><\/button>\n  <button type=\"button\" class=\"tit-pb\" id=\"titBack\" aria-label=\"Back 10 seconds\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 4V1.5L7.5 5 12 8.5V6a7 7 0 1 1-7 7H3a9 9 0 1 0 9-9z\"\/><text x=\"12.2\" y=\"16.2\" text-anchor=\"middle\">10<\/text><\/svg><\/button>\n  <button type=\"button\" class=\"tit-pb\" id=\"titFwd\" aria-label=\"Forward 10 seconds\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 4V1.5L16.5 5 12 8.5V6a7 7 0 1 0 7 7h2a9 9 0 1 1-9-9z\"\/><text x=\"11.8\" y=\"16.2\" text-anchor=\"middle\">10<\/text><\/svg><\/button>\n  <button type=\"button\" class=\"tit-pb\" id=\"titRestart\" aria-label=\"Restart\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M5.5 5h2.2v14H5.5zM9.2 12l9.3 6.8V5.2z\"\/><\/svg><\/button>\n  <div class=\"tit-prog\" id=\"titProg\" role=\"slider\" tabindex=\"0\" aria-label=\"Seek\" aria-valuemin=\"0\" aria-valuemax=\"210\" aria-valuenow=\"0\" aria-valuetext=\"0:00\">\n    <div class=\"tit-track\"><div class=\"tit-fill\" id=\"titFill\"><\/div><\/div>\n    <div class=\"tit-thumb\" id=\"titThumb\"><\/div>\n  <\/div>\n  <span class=\"tit-time\" id=\"titTime\">0:00 \/ 3:30<\/span>\n  <button type=\"button\" class=\"tit-pb tit-speed\" id=\"titSpeed\" aria-label=\"Playback speed 1\u00d7\">1\u00d7<\/button>\n  <button type=\"button\" class=\"tit-pb\" id=\"titFs\" aria-label=\"Full screen\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M4 9V4h5v2H6v3zm11-5h5v5h-2V6h-3zM4 15h2v3h3v2H4zm14 3v-3h2v5h-5v-2z\"\/><\/svg><\/button>\n<\/div>\n<div class=\"tit-chips\" id=\"titChips\" role=\"group\" aria-label=\"Chapters\"><\/div>\n<\/section>\n        <p class=\"fh-3d-from\"><span>From the note <a href=\"https:\/\/www.onlinelearningsystem.net\/xyz\/revision-notes\/a-level-chemistry\/edexcel\/core-practicals\/cp-3-concentration-of-hcl-by-titration\/\">CP 3: Concentration of HCl by Titration<\/a><\/span><span>Edexcel; also AQA RP 1 and OCR A PAG 2<\/span><\/p>\n      <\/div>\n    <\/div>\n  <\/div>\n  <script>\n  (function () {\n    var root = document.getElementById(\"fh-3d\");\n    if (!root) return;\n    var tabs = Array.prototype.slice.call(root.querySelectorAll(\".fh-3d-tab\"));\n    var panels = Array.prototype.slice.call(root.querySelectorAll(\".fh-3d-panel\"));\n    var THREE_SRC = \"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\";\n    var threeState = 0, threeWaiters = [], started = false;\n\n    function addScript(src, done) {\n      var s = document.createElement(\"script\");\n      s.src = src; s.async = false;\n      s.onload = function () { done(true); };\n      s.onerror = function () { done(false); };\n      document.body.appendChild(s);\n    }\n    function withThree(cb) {\n      if (window.THREE || threeState === 2) { cb(); return; }\n      threeWaiters.push(cb);\n      if (threeState === 1) return;\n      threeState = 1;\n      addScript(THREE_SRC, function () {\n        threeState = 2;\n        var w = threeWaiters; threeWaiters = [];\n        w.forEach(function (f) { f(); });\n      });\n    }\n    function load(panel) {\n      if (panel.getAttribute(\"data-loaded\")) return;\n      panel.setAttribute(\"data-loaded\", \"1\");\n      withThree(function () {\n        addScript(panel.getAttribute(\"data-src\"), function () { panel.classList.add(\"is-ready\"); });\n      });\n    }\n    function show(i) {\n      tabs.forEach(function (t, n) { t.setAttribute(\"aria-selected\", n === i ? \"true\" : \"false\"); t.tabIndex = n === i ? 0 : -1; });\n      panels.forEach(function (p, n) { p.hidden = n !== i; });\n      load(panels[i]);\n    }\n    tabs.forEach(function (t, i) {\n      t.addEventListener(\"click\", function () { started = true; show(i); });\n      t.addEventListener(\"keydown\", function (e) {\n        var d = e.key === \"ArrowRight\" ? 1 : (e.key === \"ArrowLeft\" ? -1 : 0);\n        if (!d) return;\n        e.preventDefault();\n        var n = (i + d + tabs.length) % tabs.length;\n        started = true; show(n); tabs[n].focus();\n      });\n    });\n    \/* Nothing heavy loads until the card is close to the screen. *\/\n    function start() { if (started) return; started = true; show(0); }\n    if (\"IntersectionObserver\" in window) {\n      var io = new IntersectionObserver(function (es) {\n        es.forEach(function (e) { if (e.isIntersecting) { io.disconnect(); start(); } });\n      }, { rootMargin: \"300px 0px\" });\n      io.observe(root);\n    } else { start(); }\n  })();\n  <\/script>\n<\/section>\n\n<!-- ============================================================\n     WHAT IS INSIDE EVERY NOTE\n     ============================================================ -->\n<section class=\"fh-inside-001\">\n  <style>\n    .fh-inside-001 { background: #ffffff; padding: 80px 20px 84px; }\n    .fh-inside-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 52px; align-items: center; }\n    .fh-inside-001 .fh-head { text-align: left; margin: 0 0 26px; }\n    .fh-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }\n    .fh-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; }\n    .fh-ico { width: 40px; height: 40px; border-radius: 12px; background: rgba(70,127,247,0.12); color: #467FF7; display: flex; align-items: center; justify-content: center; }\n    .fh-ico svg { width: 20px; height: 20px; }\n    .fh-list li > div > b { display: block; font-size: 16px; font-weight: 700; color: #1C244B; }\n    .fh-list li > div > span { display: block; font-size: 14.5px; font-weight: 300; line-height: 1.65; color: #4b5563; }\n    .fh-shot { margin: 0; border-radius: 22px; overflow: hidden; border: 1px solid rgba(28,36,75,0.1); box-shadow: 0 26px 56px rgba(28,36,75,0.14); background: #ffffff; }\n    .fh-shot img { display: block; width: 100%; height: auto; }\n    .fh-shot figcaption { padding: 12px 16px; font-size: 13px; color: rgba(28,36,75,0.6); border-top: 1px solid rgba(28,36,75,0.08); }\n    .fh-shot figcaption a { color: #467FF7; font-weight: 600; }\n    @media (max-width: 900px) { .fh-inside-grid { grid-template-columns: 1fr; gap: 32px; } }\n    @media (max-width: 600px) { .fh-inside-001 { padding: 56px 16px 62px; } }\n  <\/style>\n  <div class=\"fh-wrap fh-inside-grid\">\n    <div class=\"fh-reveal\">\n      <div class=\"fh-head\">\n        <span class=\"fh-eyebrow\">Inside every note<\/span>\n        <h2 class=\"fh-h2\">Written for your board, <span class=\"accent\">checked as you read<\/span><\/h2>\n      <\/div>\n      <ul class=\"fh-list\">\n        <li><span class=\"fh-ico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 19.5A2.5 2.5 0 0 1 6.5 17H20\"\/><path d=\"M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z\"\/><\/svg><\/span><div><b>Your specification, point by point<\/b><span>Each board&#8217;s notes are written separately against its own specification, so nothing you need is missing and nothing extra gets in the way.<\/span><\/div><\/li>\n        <li><span class=\"fh-ico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6L9 17l-5-5\"\/><\/svg><\/span><div><b>Check questions as you go<\/b><span>Short questions sit inside the notes and mark you straight away, so you know an idea has landed before you move on.<\/span><\/div><\/li>\n        <li><span class=\"fh-ico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 2l2.6 6.6L21.5 9l-5.2 4.6 1.5 6.9L12 16.9 6.2 20.5l1.5-6.9L2.5 9l6.9-.4z\"\/><\/svg><\/span><div><b>Exam technique<\/b><span>The wording examiners reward, worked examples, and the common mistakes that cost marks.<\/span><\/div><\/li>\n        <li><span class=\"fh-ico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 2l9 5v10l-9 5-9-5V7z\"\/><path d=\"M12 22V12M21 7l-9 5-9-5\"\/><\/svg><\/span><div><b>Diagrams and 3D models<\/b><span>Orbitals, shapes, lattices and mechanisms you can rotate, alongside clear diagrams and infographics.<\/span><\/div><\/li>\n      <\/ul>\n    <\/div>\n    <figure class=\"fh-shot fh-reveal\" data-delay=\"2\">\n      <img src=\"https:\/\/www.onlinelearningsystem.net\/xyz\/wp-content\/uploads\/2026\/10\/ols-free-note-check-question.webp\" alt=\"A check question inside a free A Level Chemistry revision note\" width=\"1200\" height=\"699\" loading=\"lazy\" decoding=\"async\">\n      <figcaption>From the note <a href=\"https:\/\/www.onlinelearningsystem.net\/xyz\/revision-notes\/a-level-chemistry\/edexcel-international\/topic-5-alkenes\/alkene-bonding\/\">Alkene Bonding<\/a>, Edexcel International<\/figcaption>\n    <\/figure>\n  <\/div>\n<\/section>\n\n<!-- ============================================================\n     PRACTICALS IN 3D, ALL FIVE BOARDS\n     ============================================================ -->\n<section class=\"fh-prac-001\" id=\"fh-practicals\">\n  <style>\n    .fh-prac-001 { background: #1C244B; padding: 80px 20px 84px; color: #ffffff; position: relative; overflow: hidden; }\n    .fh-prac-001::before { content: \"\"; position: absolute; inset: -30% -10% auto auto; width: 560px; height: 560px; background: radial-gradient(closest-side, rgba(70,127,247,0.28), rgba(70,127,247,0)); pointer-events: none; }\n    .fh-prac-001 .fh-eyebrow { background: rgba(255,255,255,0.12); box-shadow: none; }\n    .fh-prac-001 .fh-h2 { color: #ffffff; text-shadow: none; }\n    .fh-prac-001 .fh-h2 .accent { color: #8FB3FF; }\n    .fh-prac-001 .fh-lede { color: rgba(255,255,255,0.8); }\n    .fh-prac-shots { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0 0 30px; }\n    .fh-prac-shot { margin: 0; background: #ffffff; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 50px rgba(0,0,0,0.3); color: #1C244B; transition: transform 0.3s ease; }\n    .fh-prac-shot:hover { transform: translateY(-4px); }\n    .fh-prac-shot img { display: block; width: 100%; height: auto; aspect-ratio: 1100 \/ 1075; object-fit: cover; object-position: top; }\n    .fh-prac-shot figcaption { padding: 12px 14px 14px; font-size: 13.5px; line-height: 1.45; }\n    .fh-prac-shot figcaption b { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: #467FF7; }\n    .fh-prac-boards { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }\n    .fh-prac-board { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); color: #ffffff; font-size: 14px; font-weight: 600; transition: background 0.2s ease, transform 0.2s ease; }\n    .fh-prac-board em { font-style: normal; font-size: 12px; font-weight: 700; color: #1C244B; background: #ffffff; padding: 2px 9px; border-radius: 999px; font-variant-numeric: tabular-nums; }\n    .fh-prac-board:hover { background: rgba(255,255,255,0.18); color: #ffffff; transform: translateY(-2px); }\n    .fh-prac-teach { position: relative; max-width: 760px; margin: 28px auto 0; text-align: center; font-size: 15px; color: rgba(255,255,255,0.82); line-height: 1.7; }\n    .fh-prac-teach b { color: #ffffff; }\n    @media (max-width: 900px) { .fh-prac-shots { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; } }\n    @media (max-width: 600px) { .fh-prac-001 { padding: 56px 16px 62px; } .fh-prac-board { width: 100%; justify-content: space-between; } }\n  <\/style>\n  <div class=\"fh-wrap\">\n    <div class=\"fh-head fh-reveal\">\n      <span class=\"fh-eyebrow\">Practicals in 3D<\/span>\n      <h2 class=\"fh-h2\">Run the practical <span class=\"accent\">before you do it<\/span><\/h2>\n      <p class=\"fh-lede\">Practical pages for every exam board, each with a 3D walkthrough: set up the apparatus, follow the method step by step, then the results, errors and exam points. More are being added.<\/p>\n    <\/div>\n    <div class=\"fh-prac-shots\">\n      <figure class=\"fh-prac-shot fh-reveal\" data-delay=\"1\"><img src=\"https:\/\/www.onlinelearningsystem.net\/xyz\/wp-content\/uploads\/2026\/10\/ols-free-practical-edexcel-molar-volume-3d.webp\" alt=\"3D walkthrough of the molar volume of a gas practical\" width=\"1100\" height=\"1089\" loading=\"lazy\" decoding=\"async\"><figcaption><b>Edexcel core practical<\/b>Molar volume of a gas<\/figcaption><\/figure>\n      <figure class=\"fh-prac-shot fh-reveal\" data-delay=\"2\"><img src=\"https:\/\/www.onlinelearningsystem.net\/xyz\/wp-content\/uploads\/2026\/10\/ols-free-practical-aqa-chlorination-3d.webp\" alt=\"3D walkthrough of the chlorination of 2-methylpropan-2-ol\" width=\"1100\" height=\"1063\" loading=\"lazy\" decoding=\"async\"><figcaption><b>AQA required practical<\/b>Preparing an organic liquid<\/figcaption><\/figure>\n      <figure class=\"fh-prac-shot fh-reveal\" data-delay=\"3\"><img src=\"https:\/\/www.onlinelearningsystem.net\/xyz\/wp-content\/uploads\/2026\/10\/ols-free-practical-ocr-hydrolysis-3d.webp\" alt=\"3D walkthrough of the rates of hydrolysis of haloalkanes\" width=\"1100\" height=\"1063\" loading=\"lazy\" decoding=\"async\"><figcaption><b>OCR A PAG<\/b>Rates of hydrolysis of haloalkanes<\/figcaption><\/figure>\n    <\/div>\n    <nav class=\"fh-prac-boards fh-reveal\" aria-label=\"Practicals by exam board\">\n      <a class=\"fh-prac-board\" href=\"https:\/\/www.onlinelearningsystem.net\/xyz\/revision-notes\/a-level-chemistry\/aqa\/required-practicals\/\">AQA <em>10<\/em><\/a>\n      <a class=\"fh-prac-board\" href=\"https:\/\/www.onlinelearningsystem.net\/xyz\/revision-notes\/a-level-chemistry\/ocr-a\/practical-activity-groups\/\">OCR A <em>10<\/em><\/a>\n      <a class=\"fh-prac-board\" href=\"https:\/\/www.onlinelearningsystem.net\/xyz\/revision-notes\/a-level-chemistry\/edexcel\/core-practicals\/\">Edexcel <em>8<\/em><\/a>\n      <a class=\"fh-prac-board\" href=\"https:\/\/www.onlinelearningsystem.net\/xyz\/revision-notes\/a-level-chemistry\/edexcel-international\/core-practicals\/\">Edexcel International <em>8<\/em><\/a>\n      <a class=\"fh-prac-board\" href=\"https:\/\/www.onlinelearningsystem.net\/xyz\/revision-notes\/a-level-chemistry\/cie\/practical-skills\/\">Cambridge International <em>11<\/em><\/a>\n    <\/nav>\n    <p class=\"fh-prac-teach fh-reveal\"><b>Teachers:<\/b> set any practical as homework by sending pupils its link. They can run it, pause it and step back as often as they need before the real thing.<\/p>\n  <\/div>\n<\/section>\n\n<!-- ============================================================\n     THE FREE HUB\n     ============================================================ -->\n<section class=\"fh-hub-001\" id=\"fh-hub\">\n  <style>\n    .fh-hub-001 { background: #f5f7fb; padding: 80px 20px 84px; }\n    .fh-hub-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 22px; align-items: start; }\n    .fh-hub-col { display: flex; flex-direction: column; gap: 22px; }\n    .fh-hub-img { margin: 0; border-radius: 22px; overflow: hidden; box-shadow: 0 22px 48px rgba(28,36,75,0.14); background: #ffffff; }\n    .fh-hub-img img { display: block; width: 100%; height: auto; }\n    .fh-feats { list-style: none; margin: 0; padding: 26px 26px 22px; background: #ffffff; border: 1px solid rgba(28,36,75,0.08); border-radius: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }\n    .fh-feats li b { display: block; font-size: 15px; font-weight: 700; color: #1C244B; }\n    .fh-feats li span { display: block; font-size: 13.5px; font-weight: 300; line-height: 1.6; color: #4b5563; }\n    .fh-hub-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }\n    .fh-hub-note { text-align: center; margin: 12px 0 0; font-size: 13px; color: rgba(28,36,75,0.55); }\n    @media (max-width: 900px) { .fh-hub-grid { grid-template-columns: 1fr; } }\n    @media (max-width: 600px) { .fh-hub-001 { padding: 56px 16px 62px; } .fh-feats { grid-template-columns: 1fr; padding: 22px 20px; } }\n  <\/style>\n  <div class=\"fh-wrap\">\n    <div class=\"fh-head fh-reveal\">\n      <span class=\"fh-eyebrow is-soft\">Free with an account<\/span>\n      <h2 class=\"fh-h2\">Your revision, <span class=\"accent\">tracked like a game<\/span><\/h2>\n      <p class=\"fh-lede\">A free account adds a hub that keeps score as you revise: every lesson finished and question answered earns XP, levels, trophies and a map of where you stand.<\/p>\n    <\/div>\n    <div class=\"fh-hub-grid\">\n      <div class=\"fh-hub-col\">\n        <figure class=\"fh-hub-img fh-reveal\"><img src=\"https:\/\/www.onlinelearningsystem.net\/xyz\/wp-content\/uploads\/2026\/10\/ols-free-hub-player-card.webp\" alt=\"Player card with level, XP bar, day streak and a tip from KASP the ghost (demo profile)\" width=\"1200\" height=\"559\" loading=\"lazy\" decoding=\"async\"><\/figure>\n        <figure class=\"fh-hub-img fh-reveal\"><img src=\"https:\/\/www.onlinelearningsystem.net\/xyz\/wp-content\/uploads\/2026\/10\/ols-free-hub-topic-map.webp\" alt=\"Topic map with every topic coloured by progress (demo profile)\" width=\"1200\" height=\"578\" loading=\"lazy\" decoding=\"async\"><\/figure>\n      <\/div>\n      <div class=\"fh-hub-col\">\n        <ul class=\"fh-feats fh-reveal\" data-delay=\"1\">\n          <li><b>Levels and XP<\/b><span>Earned for every lesson you finish and every question you answer.<\/span><\/li>\n          <li><b>Day streaks<\/b><span>A flame that grows each day you revise.<\/span><\/li>\n          <li><b>Trophies<\/b><span>Chemistry badges, from Spark to Noble, for time, lessons and questions.<\/span><\/li>\n          <li><b>Daily and weekly quests<\/b><span>Small goals that point you at what to revise next.<\/span><\/li>\n          <li><b>Topic map<\/b><span>Every topic on your board, coloured by how you are doing.<\/span><\/li>\n          <li><b>KASP the ghost<\/b><span>A study buddy that keeps you company in the notes and cheers you on.<\/span><\/li>\n        <\/ul>\n        <figure class=\"fh-hub-img fh-reveal\" data-delay=\"2\"><img src=\"https:\/\/www.onlinelearningsystem.net\/xyz\/wp-content\/uploads\/2026\/10\/ols-free-hub-trophies.webp\" alt=\"Trophy cabinet of chemistry badges\" width=\"1200\" height=\"647\" loading=\"lazy\" decoding=\"async\"><\/figure>\n      <\/div>\n    <\/div>\n    <div class=\"fh-hub-cta fh-reveal\">\n      <a class=\"fh-btn fh-btn--primary\" href=\"https:\/\/www.onlinelearningsystem.net\/xyz\/user-account\/?action=ols_register\">Create a free account<\/a>\n      <a class=\"fh-btn fh-btn--ghost\" href=\"#fh-top-boards\">Start with the notes<\/a>\n    <\/div>\n    <p class=\"fh-hub-note\">Images show a demo profile, not a real student.<\/p>\n  <\/div>\n<\/section>\n\n<!-- ============================================================\n     FOR TEACHERS\n     ============================================================ -->\n<section class=\"fh-teach-001\">\r\n  <style>\r\n    .fh-teach-001 { background: #ffffff; padding: 72px 20px; }\r\n    .fh-teach-card { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 40px; align-items: center; background: #1C244B; color: #ffffff; border-radius: 28px; padding: 46px 46px; box-shadow: 0 26px 56px rgba(28,36,75,0.24); }\r\n    .fh-teach-card::after { content: \"\"; position: absolute; inset: auto -70px -110px auto; width: 340px; height: 340px; background: radial-gradient(closest-side, rgba(245,185,64,0.25), rgba(245,185,64,0)); pointer-events: none; }\r\n    .fh-teach-card .fh-eyebrow { background: #F5B940; color: #1C244B; box-shadow: none; font-weight: 700; }\r\n    .fh-teach-card h2 { margin: 0 0 12px; color: #ffffff; font-size: clamp(26px, 3vw, 38px); line-height: 1.15; font-weight: 800; letter-spacing: -0.8px; text-wrap: balance; }\r\n    .fh-teach-card p { margin: 0 0 18px; color: rgba(255,255,255,0.82); font-size: 16px; font-weight: 300; line-height: 1.75; }\r\n    .fh-teach-list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 9px; }\r\n    .fh-teach-list li { position: relative; padding-left: 28px; font-size: 15px; line-height: 1.5; color: #ffffff; }\r\n    .fh-teach-list li::before { content: \"\"; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #2BB3A3 url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' stroke='white' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'\/%3E%3C\/svg%3E\") center\/12px no-repeat; }\r\n    .fh-teach-card .fh-btn--primary { background: #ffffff; color: #1C244B; }\r\n    .fh-teach-card .fh-btn--primary:hover { background: #467FF7; color: #ffffff; }\r\n    .fh-teach-shots { position: relative; z-index: 1; margin-bottom: 26px; }\r\n    .fh-teach-shots img { display: block; border-radius: 12px; height: auto; }\r\n    .fh-teach-desk { width: 100%; border: 5px solid #ffffff; box-shadow: 0 22px 46px rgba(0,0,0,0.4); }\r\n    .fh-teach-phone { position: absolute; right: -6px; bottom: -26px; width: 30%; border: 7px solid #0f1430 !important; border-radius: 26px !important; box-shadow: 0 22px 46px rgba(0,0,0,0.5); }\r\n    @media (max-width: 900px) { .fh-teach-card { grid-template-columns: 1fr; padding: 34px 26px; } .fh-teach-phone { right: 4px; } }\r\n    @media (max-width: 600px) { .fh-teach-001 { padding: 52px 16px; } .fh-teach-phone { width: 34%; bottom: -18px; border-width: 5px !important; border-radius: 18px !important; } }\r\n  <\/style>\r\n  <div class=\"fh-wrap\">\r\n    <div class=\"fh-teach-card fh-reveal\">\r\n      <div>\r\n        <span class=\"fh-eyebrow\">For teachers<\/span>\r\n        <h2>Free lesson packs, with homework marked for you<\/h2>\r\n        <p>Ready-to-teach A Level Chemistry lessons for Edexcel IAL, Edexcel, AQA, OCR A and Cambridge, matched to these notes.<\/p>\r\n        <ul class=\"fh-teach-list\">\r\n          <li>Lesson Slides with answers on click, a printed Class Handout and a lesson plan<\/li>\r\n          <li>Interactive 3D models for the board in class<\/li>\r\n          <li>Students scan the handout&#8217;s QR code and do their homework on a phone<\/li>\r\n          <li>Marked straight away, with a class analysis of misconceptions<\/li>\r\n        <\/ul>\r\n        <a class=\"fh-btn fh-btn--primary\" href=\"https:\/\/www.onlinelearningsystem.net\/xyz\/teachers\/\">See the teacher resources\r\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line><polyline points=\"13 5 20 12 13 19\"><\/polyline><\/svg><\/a>\r\n      <\/div>\r\n      <div class=\"fh-teach-shots\">\r\n        <img class=\"fh-teach-desk\" src=\"https:\/\/www.onlinelearningsystem.net\/xyz\/wp-content\/uploads\/2026\/10\/ols-teacher-dashboard-lesson-packs.jpg\" width=\"1400\" height=\"941\" loading=\"lazy\" decoding=\"async\" alt=\"OLS teacher dashboard: Topic 5 Alkenes lessons with Lesson Slides, Class Handout, Lesson Plan, online homework, results and 3D models\">\r\n        <img class=\"fh-teach-phone\" src=\"https:\/\/www.onlinelearningsystem.net\/xyz\/wp-content\/uploads\/2026\/10\/ols-student-homework-phone.jpg\" width=\"520\" height=\"1022\" loading=\"lazy\" decoding=\"async\" alt=\"A student answering an online chemistry homework question on a phone\">\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\n\n<!-- ============================================================\n     WHO WRITES IT\n     ============================================================ -->\n<section class=\"fh-author-001\">\n  <style>\n    .fh-author-001 { background: #ffffff; padding: 8px 20px 80px; }\n    .fh-author-card { display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; gap: 28px; align-items: center; max-width: 980px; margin: 0 auto; padding: 26px 30px; border: 1px solid rgba(28,36,75,0.1); border-radius: 24px; background: #f5f7fb; }\n    .fh-author-card img { width: 132px; height: 132px; border-radius: 20px; object-fit: cover; display: block; box-shadow: 0 14px 30px rgba(28,36,75,0.18); }\n    .fh-author-card .fh-role { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.9px; text-transform: uppercase; color: #467FF7; margin-bottom: 4px; }\n    .fh-author-card h2 { margin: 0 0 6px; font-size: 22px; font-weight: 700; letter-spacing: -0.4px; color: #1C244B; }\n    .fh-author-card p { margin: 0; font-size: 14.5px; font-weight: 300; line-height: 1.7; color: #4b5563; }\n    @media (max-width: 760px) { .fh-author-card { grid-template-columns: 1fr; text-align: center; justify-items: center; } .fh-author-001 { padding: 0 16px 60px; } }\n  <\/style>\n  <div class=\"fh-author-card fh-reveal\">\n    <img src=\"https:\/\/www.onlinelearningsystem.net\/xyz\/wp-content\/uploads\/2026\/05\/Author-Profile.jpeg\" alt=\"Dr. Mohammed Al-Fatah\" width=\"132\" height=\"132\" loading=\"lazy\" decoding=\"async\">\n    <div>\n      <span class=\"fh-role\">Who writes the notes<\/span>\n      <h2>Dr. Mohammed Al-Fatah<\/h2>\n      <p>Chemistry teacher with a PGCE and QTS, First Class chemistry degree and Distinction MSc from UCL, and a decade of A Level teaching. Every note on this site is written by him.<\/p>\n    <\/div>\n    <a class=\"fh-btn fh-btn--ghost\" href=\"https:\/\/www.onlinelearningsystem.net\/xyz\/chemistry-specialist\/\">About him<\/a>\n  <\/div>\n<\/section>\n\n<!-- ============================================================\n     FAQ\n     ============================================================ -->\n<section class=\"fh-faq-001\">\n  <style>\n    .fh-faq-001 { background: #f5f7fb; padding: 76px 20px 90px; }\n    .fh-faq-list { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }\n    .fh-faq-001 details { border: 1px solid rgba(28,36,75,0.12); border-radius: 18px; background: #ffffff; box-shadow: 0 8px 22px rgba(28,36,75,0.05); overflow: hidden; }\n    .fh-faq-001 details[open] { border-color: rgba(70,127,247,0.35); }\n    .fh-faq-001 summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; font-size: 16.5px; font-weight: 600; color: #1C244B; }\n    .fh-faq-001 summary::-webkit-details-marker { display: none; }\n    .fh-faq-001 summary:focus-visible { outline: 3px solid rgba(70,127,247,0.5); outline-offset: -3px; }\n    .fh-chev { flex: 0 0 auto; width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: #1C244B; color: #ffffff; transition: transform 0.25s ease, background 0.25s ease; }\n    .fh-faq-001 details[open] .fh-chev { transform: rotate(180deg); background: #467FF7; }\n    .fh-faq-a { padding: 0 22px 20px; }\n    .fh-faq-a p { margin: 0; font-size: 15.5px; font-weight: 300; line-height: 1.75; color: #4b5563; }\n    @media (max-width: 600px) { .fh-faq-001 { padding: 56px 16px 62px; } .fh-faq-001 summary { font-size: 15.5px; padding: 18px; } }\n  <\/style>\n  <div class=\"fh-wrap\">\n    <div class=\"fh-head fh-reveal\"><h2 class=\"fh-h2\">Questions<\/h2><\/div>\n    <div class=\"fh-faq-list fh-reveal\">\n      <details>\n        <summary>Are the revision notes really free?<svg class=\"fh-chev\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"6 9 12 15 18 9\"><\/polyline><\/svg><\/summary>\n        <div class=\"fh-faq-a\"><p>Yes. The revision notes, 3D models, practical walkthroughs and check questions are free to use, with no time limit.<\/p><\/div>\n      <\/details>\n      <details>\n        <summary>Do I need an account?<svg class=\"fh-chev\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"6 9 12 15 18 9\"><\/polyline><\/svg><\/summary>\n        <div class=\"fh-faq-a\"><p>No. You can start reading straight away. After a number of notes you are asked to create a free account, which also gives you the progress hub with levels, trophies and your topic map.<\/p><\/div>\n      <\/details>\n      <details>\n        <summary>Which exam boards are covered?<svg class=\"fh-chev\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"6 9 12 15 18 9\"><\/polyline><\/svg><\/summary>\n        <div class=\"fh-faq-a\"><p>AQA (7405), OCR A (H432), Edexcel (9CH0), Edexcel International A Level and Cambridge International (9701). Each board&#x27;s notes are written separately against its own specification.<\/p><\/div>\n      <\/details>\n      <details>\n        <summary>Who writes the notes?<svg class=\"fh-chev\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"6 9 12 15 18 9\"><\/polyline><\/svg><\/summary>\n        <div class=\"fh-faq-a\"><p>Dr. Mohammed Al-Fatah, a chemistry teacher with a PGCE and QTS, a First Class chemistry degree and a Distinction MSc from UCL, and a decade of A Level teaching.<\/p><\/div>\n      <\/details>\n      <details>\n        <summary>Can teachers use them in lessons?<svg class=\"fh-chev\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"6 9 12 15 18 9\"><\/polyline><\/svg><\/summary>\n        <div class=\"fh-faq-a\"><p>Yes. Show a 3D model on the board, let pupils work through a note&#x27;s check questions, or set a practical as homework by sending its link. Free PowerPoints and worksheets are being built next.<\/p><\/div>\n      <\/details>\n      <details>\n        <summary>Do the 3D models work on a phone?<svg class=\"fh-chev\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"6 9 12 15 18 9\"><\/polyline><\/svg><\/summary>\n        <div class=\"fh-faq-a\"><p>Yes. The notes, models and practicals run in the browser on phones, tablets, laptops and classroom computers, with nothing to install.<\/p><\/div>\n      <\/details>\n      <details>\n        <summary>Is anything for sale?<svg class=\"fh-chev\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"6 9 12 15 18 9\"><\/polyline><\/svg><\/summary>\n        <div class=\"fh-faq-a\"><p>There are separate, paid topic courses with video lessons and marked exam practice. Nothing in the free notes depends on them, and no note is locked behind them.<\/p><\/div>\n      <\/details>\n    <\/div>\n  <\/div>\n<\/section>\n\n<script>\n(function () {\n  function reveal(el) { if (el) el.classList.add(\"is-in\"); }\n  var items = Array.prototype.slice.call(document.querySelectorAll(\".fh-reveal\"));\n  var noAnim = window.matchMedia && window.matchMedia(\"(max-width: 767px)\").matches;\n  if (noAnim || typeof IntersectionObserver === \"undefined\") { items.forEach(reveal); return; }\n  function inView(el) {\n    var r = el.getBoundingClientRect();\n    var vh = window.innerHeight || document.documentElement.clientHeight || 0;\n    var topIn = vh * 1.05 > r.top;\n    return topIn && r.bottom > -40;\n  }\n  var io = new IntersectionObserver(function (entries) {\n    entries.forEach(function (e) { if (e.isIntersecting) { reveal(e.target); io.unobserve(e.target); } });\n  }, { threshold: 0.05, rootMargin: \"0px 0px 120px 0px\" });\n  items.forEach(function (el) { io.observe(el); });\n  function now() { items.forEach(function (el) { if (!el.classList.contains(\"is-in\") && inView(el)) { reveal(el); io.unobserve(el); } }); }\n  requestAnimationFrame(now);\n  window.addEventListener(\"load\", now, { once: true });\n  setTimeout(now, 350);\n})();\n<\/script>\n\n<script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@graph\": [\n    {\n      \"@type\": \"WebPage\",\n      \"@id\": \"https:\/\/www.onlinelearningsystem.net\/xyz\/#webpage\",\n      \"url\": \"https:\/\/www.onlinelearningsystem.net\/xyz\/\",\n      \"name\": \"Free A Level Chemistry Revision Notes\",\n      \"description\": \"Free A Level Chemistry revision notes for AQA, OCR A, Edexcel, Edexcel International and Cambridge International, with interactive 3D models, practicals in 3D and check questions.\",\n      \"isPartOf\": {\n        \"@id\": \"https:\/\/www.onlinelearningsystem.net\/#website\"\n      },\n      \"publisher\": {\n        \"@id\": \"https:\/\/www.onlinelearningsystem.net\/#organization\"\n      },\n      \"primaryImageOfPage\": {\n        \"@type\": \"ImageObject\",\n        \"url\": \"https:\/\/www.onlinelearningsystem.net\/xyz\/wp-content\/uploads\/2026\/10\/ols-free-practical-aqa-chlorination-3d.webp\"\n      }\n    },\n    {\n      \"@type\": \"FAQPage\",\n      \"@id\": \"https:\/\/www.onlinelearningsystem.net\/xyz\/#faq\",\n      \"mainEntity\": [\n        {\n          \"@type\": \"Question\",\n          \"name\": \"Are the revision notes really free?\",\n          \"acceptedAnswer\": {\n            \"@type\": \"Answer\",\n            \"text\": \"Yes. The revision notes, 3D models, practical walkthroughs and check questions are free to use, with no time limit.\"\n          }\n        },\n        {\n          \"@type\": \"Question\",\n          \"name\": \"Do I need an account?\",\n          \"acceptedAnswer\": {\n            \"@type\": \"Answer\",\n            \"text\": \"No. You can start reading straight away. After a number of notes you are asked to create a free account, which also gives you the progress hub with levels, trophies and your topic map.\"\n          }\n        },\n        {\n          \"@type\": \"Question\",\n          \"name\": \"Which exam boards are covered?\",\n          \"acceptedAnswer\": {\n            \"@type\": \"Answer\",\n            \"text\": \"AQA (7405), OCR A (H432), Edexcel (9CH0), Edexcel International A Level and Cambridge International (9701). Each board's notes are written separately against its own specification.\"\n          }\n        },\n        {\n          \"@type\": \"Question\",\n          \"name\": \"Who writes the notes?\",\n          \"acceptedAnswer\": {\n            \"@type\": \"Answer\",\n            \"text\": \"Dr. Mohammed Al-Fatah, a chemistry teacher with a PGCE and QTS, a First Class chemistry degree and a Distinction MSc from UCL, and a decade of A Level teaching.\"\n          }\n        },\n        {\n          \"@type\": \"Question\",\n          \"name\": \"Can teachers use them in lessons?\",\n          \"acceptedAnswer\": {\n            \"@type\": \"Answer\",\n            \"text\": \"Yes. Show a 3D model on the board, let pupils work through a note's check questions, or set a practical as homework by sending its link. Free PowerPoints and worksheets are being built next.\"\n          }\n        },\n        {\n          \"@type\": \"Question\",\n          \"name\": \"Do the 3D models work on a phone?\",\n          \"acceptedAnswer\": {\n            \"@type\": \"Answer\",\n            \"text\": \"Yes. The notes, models and practicals run in the browser on phones, tablets, laptops and classroom computers, with nothing to install.\"\n          }\n        },\n        {\n          \"@type\": \"Question\",\n          \"name\": \"Is anything for sale?\",\n          \"acceptedAnswer\": {\n            \"@type\": \"Answer\",\n            \"text\": \"There are separate, paid topic courses with video lessons and marked exam practice. Nothing in the free notes depends on them, and no note is locked behind them.\"\n          }\n        }\n      ]\n    }\n  ]\n}\n<\/script>\n\n<\/div>\n\n\n","protected":false},"excerpt":{"rendered":"<p>Written by a chemistry specialist A Level Chemistry revision notes, free for every student Clear notes for your exam board, with 3D models you can rotate, practicals you can watch step by step, and questions that check your understanding as you read. Choose your exam board AQA 7405 OCR A H432 Edexcel 9CH0 Edexcel International [&hellip;]<\/p>\n","protected":false},"author":12,"featured_media":17358,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3216","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/www.onlinelearningsystem.net\/xyz\/wp-json\/wp\/v2\/pages\/3216","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.onlinelearningsystem.net\/xyz\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.onlinelearningsystem.net\/xyz\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.onlinelearningsystem.net\/xyz\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/www.onlinelearningsystem.net\/xyz\/wp-json\/wp\/v2\/comments?post=3216"}],"version-history":[{"count":0,"href":"https:\/\/www.onlinelearningsystem.net\/xyz\/wp-json\/wp\/v2\/pages\/3216\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.onlinelearningsystem.net\/xyz\/wp-json\/wp\/v2\/media\/17358"}],"wp:attachment":[{"href":"https:\/\/www.onlinelearningsystem.net\/xyz\/wp-json\/wp\/v2\/media?parent=3216"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}