Resonance Visualization Tool

An interactive chemistry learning tool for exploring resonance, electron delocalization, contributor weighting, bond order, qualitative electrostatic potential, and resonance-supported reactivity across general chemistry, organic chemistry, mechanisms, acid/base chemistry, and biochemistry.

The app is a standalone HTML file and does not require installation, accounts, build tooling, or a server.

Open the Tool

Open:

resonance-visualizer.html

For GitHub Pages, this repository also includes a root index.html that redirects to the visualizer.

Features

• Inorganic ion resonance examples, including equivalent and non-equivalent contributors.
• Organic resonance patterns such as allylic systems, enolates, amides, benzene, substituted benzenes, and carbonyl polarization.
• Organic mechanism examples for aldol condensations, Claisen condensations, acylium ions, iminium ions, and enamines.
• Acid-strength comparisons using conjugate-base stabilization and inorganic oxyanion series.
• Biochemistry examples including peptide bonds, amino-acid carboxylates, phosphate esters, imidazole, and nucleotide-base resonance.
• Student prediction mode before revealing data.
• Contributor-weight prediction and bond-equivalence prediction.
• Hand-drawing sketchpad for resonance structures.
• Structured self-check feedback for formal charges, lone pairs/radicals, curved arrows, contributor count, and impossible resonance structures.
• Quiz mode with multi-select answers and impossible-structure traps.
• Qualitative electrostatic potential overlay.
• Relative hybrid bond data table: bond order, length, strength, and electron-cloud coverage.
• 3D-style electron-density viewer plus staggered/eclipsed ethane conformer comparison.

Repository Structure

.
├── index.html
├── outputs/
│   └── resonance-visualizer.html
├── resonance-visualizer.html
├── README.md
├── USER_GUIDE.md
├── TEACHING_GUIDE.md
├── CONTRIBUTING.md
├── CHANGELOG.md
├── PRIVACY.md
├── ROADMAP.md
├── LICENSE
└── .gitignore

Quick Start

1. Download or clone the repository.
2. Open resonance-visualizer.html in a browser.
3. Pick a category and example.
4. Draw and predict first.
5. Reveal contributor weights, bond data, and explanations.

GitHub Pages

To publish with GitHub Pages:

1. Push this project to a GitHub repository.
2. Go to repository Settings → Pages.
3. Set the source to the main branch root.
4. Open the published Pages URL. The root index.html redirects to the tool.

Educational Scope

This tool is designed for conceptual learning. The bond lengths, bond strengths, cloud coverage, contributor percentages, and electrostatic potential overlays are qualitative teaching models, not computational chemistry outputs.

Use it to support questions like:

• Which resonance contributors are equivalent?
• Which contributors are major or minor?
• Which resonance structures are impossible?
• Where is electron density delocalized?
• Which bonds become equivalent in the hybrid?
• Why do conjugate-base stabilization and acid strength correlate?
• Why do organic mechanism intermediates behave as nucleophiles or electrophiles?

License

MIT License. See LICENSE.

Privacy

The tool runs locally in the browser and does not collect student data. See PRIVACY.md.