asynchronous-interactive
v0.0.15
Published
Asynchronously load interactive elements in the AMD-interactive format
Downloads
17
Readme
Asynchronous Interactive
A common desire for online math textbooks is to provide "interactive figures," i.e., graphics that are, in some fashion, interactive so that learners can explore a mathematical context, make discoveries, form conjectures, etc. A challenge is the format in which to store such interactive graphics: there are platforms like Desmos and GeoGebra but such platforms don't provide the full power of JavaScript.
An "asynchronous interactive" is an interactive widget described via JavaScript code stored in an AMD module. This is similar to the Sqwidget project. Just like Premasagar Rose's sandie, we load JavaScript from inside an iframe. Then we provide access to a div or canvas element.
Working demo
Go to https://rawgit.com/kisonecat/asynchronous-interactive/master/examples/ to see a live demo.
Getting Started
In the <head> include
<script type="text/javascript" src="//unpkg.com/asynchronous-interactive"></script>to load the code from this project from an
npm
cdn. Once loaded, a div with class
asynchronous-interactive will have its data-src attribute
inspected, and the JavaScript pointed there will be loaded.
For instance, place interactive code in sample.js. As a concrete
example, sample.js might consist of
define(['canvas'],function(canvas) {
var ctx = canvas.getContext('2d');
ctx.fillRect(0, 0, 200, 200);
ctx.clearRect(30, 30, 140, 140);
ctx.strokeRect(45, 45, 110, 110);
});Then in your html file, load sample.js with
<div class="asynchronous-interactive" id="sample" data-src="sample.js" style="width: 200pt; height: 200pt;"></div>Instructions
The interactive graphics are stored as an AMD module, i.e., the JavaScript file looks like
define(['module','names','go','here'], function(module,names,go,here) {
// 'module' and such are loaded...
// and this function is called with the expected parameters.
});For example,
define(['jquery'], function($) {
// and now $ is what you expect it to be.
});Multiple versions
The names of modules are resolved via the node package manager, and can include versions such as
define(['div', '[email protected]'], function(container, THREE) {
renderer = new THREE.CanvasRenderer();
container.appendChild( renderer.domElement );
// do more with three.js here
});Special module names
There are a few special module names:
divrefers to the container DOM element.canvasrefers to a canvas element (created as a child of the parent div).dbrefers to a local "database" which, depending on the surrounding application, may be persisted for the current user.