https://github.com/amphiluke/learn-quantum-mechanics
Simple widgets for learning Quantum Mechanics
https://github.com/amphiluke/learn-quantum-mechanics
education quantum-mechanics widgets
Last synced: 8 months ago
JSON representation
Simple widgets for learning Quantum Mechanics
- Host: GitHub
- URL: https://github.com/amphiluke/learn-quantum-mechanics
- Owner: Amphiluke
- Archived: true
- Created: 2016-10-08T08:30:19.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2022-05-22T15:59:34.000Z (about 4 years ago)
- Last Synced: 2025-01-28T16:39:15.659Z (over 1 year ago)
- Topics: education, quantum-mechanics, widgets
- Language: JavaScript
- Homepage: https://amphiluke.github.io/learn-quantum-mechanics/
- Size: 236 KB
- Stars: 3
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# learn-quantum-mechanics
Simple interactive widgets for learning Quantum Mechanics.
## List of widgets
* [Infinite Potential Well](src/infinite-potential-well#infinite-potential-well)
* [Quantum Harmonic Oscillator](src/harmonic-oscillator#quantum-harmonic-oscillator)
* [Hydrogen Atom](src/hydrogen-atom#hydrogen-atom)
* [Personalities](src/personalities#personalities)
## Common usage notes
Please visit the [online widget constructor](https://amphiluke.github.io/learn-quantum-mechanics/) to get a widget code in a few clicks. If you want to write the code and configure the widget by yourself then please read the docs below.
Use the following HTML to embed a widget into your website:
```html
```
:warning: *Note:* the constants `%WIDGET_NAME%`, `%WIDTH%`, and `%HEIGHT%` are specific to each widget. Find the appropriate values for them in the individual documentation for each widget (see the [links above](#list-of-widgets)).
### Browser compatibility
There are two builds of each widget: the first one is for modern browsers (mb) that *do* [support ECMAScript 2015](https://kangax.github.io/compat-table/es6/), and the other one is for legacy browsers (lb) that *don't*. Both kinds of builds provide the same functionality, but the build for modern browsers (mb) is believed to have better performance. However if you need support for IE then the build for legacy browsers (lb) is your choice. To use either of the two builds, just choose the appropriate widget URL:
* `https://amphiluke.github.io/learn-quantum-mechanics/mb/%WIDGET_NAME%/en.html` for modern browsers;
* `https://amphiluke.github.io/learn-quantum-mechanics/lb/%WIDGET_NAME%/en.html` for legacy browsers.
### Widget localization
Currently, two localizations are supported: English (en) and Russian (ru). To embed a widget in either of the two localizations, just choose an appropriate name of the widget document (either `en.html` or `ru.html`):
* `https://amphiluke.github.io/learn-quantum-mechanics/mb/%WIDGET_NAME%/en.html` a widget in English;
* `https://amphiluke.github.io/learn-quantum-mechanics/mb/%WIDGET_NAME%/ru.html` a widget in Russian.
### Widget customization
Most widgets provide the opportunity to customize their appearance and/or behavior through specific optional GET parameters. Find out the details on the supported GET parameters in the [docs specific to each widget](#list-of-widgets).
### Widget APIs
Most widgets also provide you with a way to interact with them programmatically in runtime via a simple programming interface based on the cross-document messaging API. These widgets expose a few methods you may invoke as well as events you may subscribe to.
#### Methods
All you need to invoke some of a widget's API methods is [posting a message](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) to the widget iframe window.
```javascript
let widgetIframe = document.getElementById("widget-iframe-id"); // widget iframe DOM element
let widgetWindow = widgetIframe.contentWindow;
widgetWindow.postMessage({
method: "method_name", // specify actual method name
args: ["argument1", "argument2"] // pass any arguments required by the method
}, "https://amphiluke.github.io");
```
The detailed info on the methods provided by a widget can be found in the [docs specific to that widget](#list-of-widgets).
#### Events
You may subscribe to a widget events by adding the `message` event listener on the `window` object.
```javascript
window.addEventListener("message", ({data, origin}) => {
if (origin === "https://amphiluke.github.io") {
// work with the `data` object ...
console.log("The event '%s' is triggered by the widget '%s'. Event data: %O",
data.event, data.widget, data.data);
}
}, false);
```
The `data` object sent with any widget induced event has the following properties:
* `widget` — a widget-specific string. Useful for determining which widget has triggered the event (if you have more than one widget on the page);
* `event` — a string containing the event name;
* `data` — event specific data.
The detailed info on the events triggered by a widget can be found in the [docs specific to that widget](#list-of-widgets).