Ionic bonding, Covalent bonding and Metallic bonding simulation
The simulation is a three-tab interactive 3D Bohr model built in Three.js, designed for GCSE Chemistry (AQA/Edexcel/OCR/WJEC). All three bonding types are covered with consistent visual language: dark navy background, orange electron dots on thin shell rings, near-frontal camera so rings appear as circles exactly as in textbook diagrams.
Tab 1 — Ionic Bond (NaCl)
Four phases, stepped with Prev/Next:
Phase 0 — Neutral atoms. Na (2,8,1) and Cl (2,8,7) shown side by side. All inner shell electrons orbit their rings continuously. The single Na valence electron (cyan) orbits shell 3 visibly.
Phase 1 — Electron transfer. The valence electron arcs upward in a Bézier curve from Na’s shell 3 across to the gap in Cl’s shell 3. Na’s outer ring fades as the electron leaves.
Phase 2 — Ions formed. Na⁺ nucleus turns orange, Cl⁻ nucleus turns blue. The received electron now orbits Cl’s complete shell 3 (2,8,8). Ions drift toward each other with an electrostatic attraction arrow. Labels show charge and electron configuration.
Phase 3 — Giant ionic lattice. 4×4×2 NaCl lattice with alternating orange Na⁺ and blue Cl⁻ ions, gently rotating.
Tab 2 — Covalent Bond (5 molecules)
Three phases for each molecule — H₂, Cl₂, O₂, N₂, HCl:
Phase 0 — Before bonding. Atoms separated. All outer electrons orbit their own shell ring. Inner shell electrons also orbit continuously. Labels show electron count per atom.
Phase 1 — Approaching. Atoms glide together with ease-in-out animation. Electrons continue orbiting throughout — students see the electrons “belonging” to each atom as the shells converge.
Phase 2 — Bonded (static GCSE diagram). Outer rings overlap like a Venn diagram. Shared electrons snap to a static vertical column at x=0 in the overlap zone — one pair for H₂/Cl₂/HCl, two pairs stacked for O₂, three pairs for N₂. Lone pair electrons sit statically on the far arc of each atom’s ring. Inner shell electrons keep orbiting so they never freeze near the shared zone. This exactly matches the GCSE dot-and-cross convention.
Fact-checked electron counts:
| Molecule | Config | Shared pairs | Lone pairs each |
|---|---|---|---|
| H₂ | H:1 each | 1 | 0 |
| Cl₂ | 2,8,7 each | 1 | 3 |
| O₂ | 2,6 each | 2 (double bond) | 2 |
| N₂ | 2,5 each | 3 (triple bond) | 1 |
| HCl | H:1 / Cl:2,8,7 | 1 | H:0 / Cl:3 |
Tab 3 — Metallic Bond (Cu)
Cu⁺ ions arranged in a 4×4×2 regular lattice with gold/copper metallic sheen. Delocalised electrons drift randomly through the lattice. Toggle Apply Voltage to make electrons drift directionally — shows electrical conductivity. Labels explain malleability, high melting point, and lustre in terms of structure.
Suggested Class Activity
“Build the Bond” — Guided Investigation using the Simulation Suitable for: GCSE Chemistry Years 10–11 | Duration: 50–60 minutes | All ability groups
Learning Objectives
- Describe ionic bonding as electron transfer between a metal and non-metal
- Describe covalent bonding as electron sharing between non-metals
- Draw dot-and-cross diagrams for simple molecules
- Explain metallic bonding in terms of ions and delocalised electrons
Part 1 — Ionic Bond (12 min)
Open the Ionic Bond tab. Step through all four phases. Answer:
- How many electrons does Na have in its outer shell before bonding?
- What happens to the valence electron in Phase 1? Describe its path.
- Write the electron configuration of Na⁺ and Cl⁻ after bonding.
- Why do the ions attract each other in Phase 2?
- What type of structure is shown in Phase 3? Name two properties this structure gives NaCl.
Extension: Predict what the ionic bond between Mg and O would look like. How many electrons would transfer? What would the charges be?
Part 2 — Covalent Bond (20 min)
Open the Covalent Bond tab. Work through each molecule (H₂, Cl₂, O₂, N₂, HCl) stepping through all three phases.
For each molecule, complete this table:
| Molecule | Electrons per atom (outer shell) | Electrons in shared space | Lone pairs per atom | Bond type |
|---|---|---|---|---|
| H₂ | ||||
| Cl₂ | ||||
| O₂ | ||||
| N₂ | ||||
| HCl |
- What do you notice about the total electrons in the outer shell after bonding compared to a noble gas?
- Pause on N₂ in Phase 2. Count the electrons in the shared space. What type of bond is this?
- Why does HCl have lone pairs on Cl but not on H?
Drawing task: Using the simulation as reference, draw the dot-and-cross diagram for Cl₂ and O₂ in your book. Use dots for one atom and crosses for the other.
Part 3 — Metallic Bond (8 min)
Open the Metallic Bond tab. Observe the structure, then press Apply Voltage.
- Describe the arrangement of particles in a metallic structure.
- What carries the electrical current when voltage is applied?
- Use the simulation to explain why metals are malleable. (Hint: think about what happens when layers of ions slide past each other.)
Plenary — Bond Sort (10 min)
Display these substances: NaCl, Cu, H₂O, Fe, MgO, CO₂, Al, HCl.
Students sort them into: ionic / covalent / metallic and justify using evidence from the simulation — specifically the electron configuration, what electrons do, and the resulting structure.
Adaptation
Support: Provide a word bank (transfer, share, delocalised, outer shell, full shell, octet). Pause Phase 2 of each covalent molecule while students complete the table.
Core: Complete all tasks as written.
Adaptation: Write a paragraph comparing all three bond types, using specific electron counts from the simulation as evidence. Include one prediction: what bonding type would you expect in potassium fluoride (KF) and why?