Одностраниченые приложения является основным форматом работы сервиса, но не исчерпывает этим его возможности. Открытый API порождает различные сценарии использования в т.ч. реализацию альтернативных представлений. Встраиваемый компонент может служить наглядной иллюстрацией этого тезиса.

Активные состояния меняются ссылками в теле виджета, точки на графиках — переключатели контекста

Выносной элемент управления
ЕГЭ ЕГЭ-2012 ЕГЭ-матем. 2012 ЕГЭ-матем. ГИА СОУ
Поле виджета
https://github.com/antongolub/enw
jsdoc
docco
coverage (istanbul)
unit test report (jasmine)
error1
Задан некорректный тип виджета. Допустимые значения type: ege, gia, sou, population.
error2
Ошибка DOM. Не найден указанный в конфигурации контейнер.
error3
Не указан хост источника данных — домен маски *.elasticnode.ru или любого другого API-совместимого сервиса.
errorEmptyData
Не найдено никаких данных по запросу.
errorConnectionFailure
Ошибка соединения. Чаще всего обусловлена превышением лимита частоты запросов.
Инициализация. Поддерживаемые типы: sou, ege, gia, population

    var widget = new window.Enw({
        type: "ege",
        host: "school.elasticnode.ru",
        container: "#widgetContainer"
    });
Реконфигурация. Обновляемый виджет наследует предшествующее установки в части, которая не противоречит новым

    widget.setConfig({
        type: "gia",
        host: "school.elasticnode.ru"
        // container: "#widgetContainer" — наследуется
    });
Переключение представления

    widget.setMode({
        subject: "math",
        year: "2012"
    });
    // or
    widget.setMode("math", "2012");
Деструктор

    widget.destroy();
Ссылка на контейнер

    widget.getNode();
Одним файлом в произвольном месте документа (каноничный вариант)

    <script>
        (function (d, w, c) {
            (w[c] = w[c] || []).push(function() {
                w.myWidget = new window.Enw({
                    type: "ege",
                    host: "school.elasticnode.ru",
                    container: "#widgetContainer"
                });
            });

            var n = d.getElementsByTagName("script")[0],
                    s = d.createElement("script"),
                    f = function () { n.parentNode.insertBefore(s, n); };
            s.setAttribute("data-main", "http://st.elasticnode.ru/widget/js/app/main-cdn.js");
            s.type = "text/javascript";
            s.async = true;
            s.src = d.location.protocol + "//cdn.jsdelivr.net/requirejs/2.1.11/require.min.js";


            if (w.opera == "[object Opera]") {
                d.addEventListener("DOMContentLoaded", f, false);
            } else { f(); }
        })(document, window, "enwCallback");
    </script>
Краткая форма с двумя последовательными скриптовыми включениями

    <script>
        window.enwCallback = [function(){
            var widget = new window.Enw({
                type: "ege",
                host: "school.elasticnode.ru",
                container: "#widgetContainer"
            });
        }];
    </script>
    <script src="//cdn.jsdelivr.net/requirejs/2.1.11/require.min.js"
    data-main="http://st.elasticnode.ru/widget/js/app/main-cdn.js">
    </script>