Это старая версия документа!
Встраивание формы написания диктанта
Пример встроенной формы
Пример встроенного тестового диктанта можно увидеть на странице https://diktado.com/embedded
Код встраивания
Ниже представлен полный код HTML-страницы для встраивания формы написания диктанта. Выбран тестовый диктант («Выдумщик») и тестовый пользователь, поэтому можно писать диктант без предварительной регистрации, а также вставлять готовый текст в форму ввода (временно не работает).
Предварительная регистрация включает в себя ввод имени и адреса электронной почты. Подтверждение почты не требуется, чтобы исключить проблемы с регистрацией и в целом её упростить.
Чтобы появилось окно предварительной регистрации, необходимо из скрипта убрать строчку с заданием userId
. В этом режиме вставка в поле ввода запрещается.
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <!-- Загрузка библиотеки jQuery --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script> <!-- Загрузка библиотеки Popper, которая требуется bootstrap, чтобы работать с всплывающими элементами интерфейса --> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> <!-- Загрузка библиотеки twitter bootstrap --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <!-- Загрузка css-стилей twitter bootstrap --> <script src="https://diktado.com/assets/app.script.js" crossorigin="anonymous"></script> <!-- Загрузка скрипта для встраивания формы написания диктанта и отчета с результатом --> <script> $(function () { diktado.dict.app.init({ // вызов функции для отрисовки формы написания диктанта (или отчёта, если диктант уже писали) key: "63fdc5cc7f0ae915a5fc30df", // ключ заказчика диктанта userId: "63ff08b25d838a2905793493", //ключ тестового пользователя (test@diktado.com), если убрать это поле, то появится предварительное окно регистрации container: '#dict-container', // селектор html-элемента, куда нужно отрисовать форму написания или отчёт, в формате jQuery dictId: "62c2b81356a90881f1155a6d", // идентификатор диктанта (тестовый, "Выдумщик") onShowWriting: function () { // функция, которая вызывается при показе формы написания диктанта (например, чтобы спрятать некоторые элементы страницы, куда встраивается диктант) console.log("Загружена форма написания диктанта"); }, onShowResult: function () { // функция, которая вызывается при показе отчёта с результатом проверки (например, чтобы спрятать некоторые элементы страницы, куда встраивается диктант) console.log("Загружен отчёт с результатом проверки диктанта") }, }); }); </script> </head> <body> <div id="dict-container"></div> <!-- Элемент в котором будет отрисовываться форма написания и отчёт о проверке --> </body> </html>
Тестовый диктант
Текст тестового диктанта для проверки:
С нами был девятилетний мальчик, и он гораздо лучше нас, взрослых, всё замечал и рассказывал. Он был выдумщик, но мы очень любили его выдумки. Мы никак не могли, да и не хотели доказывать ему, что он говорит неправду. Каждый день он придумывал что-нибудь новое: то он слышал, как шептались рыбы, то видел, как муравьи устроили себе паром через ручей из сосновой коры и паутины. Мы делали вид, что верили ему. Всё, что окружало нас, казалось необыкновенным: и поздняя луна, блиставшая над чёрными озёрами, и высокие облака, похожие на горы розового снега, и даже привычный морской шум высоких сосен. Мальчик первый услышал фырканье зверя и зашипел на нас, чтобы мы замолчали. Мы притихли и старались даже не дышать, хотя рука невольно тянулась к двустволке, – кто знает, что это мог быть за зверь!
Кабинет организатора корпоративного диктанта
Для доступа в кабинет организатора необходимо авторизоваться на веб-сайте https://diktado.com/ под аккаунтом test@diktado.com
(пароль сообщается отдельно).
В правом верхнем меню профиля выбирается пункт «Корпоративные диктанты», далее диктант «Выдумщик».
Внутри кабинета можно увидеть список написавших и отследить статистику по оценкам.
Именно так выглядит кабинет организатора для любого встроенного диктанта.
Параметры встраивания
Для запуска боевого (не тестового) диктанта следует прописать в коде встраивания (JavaScript'е, что приведён выше) два параметра:
key
(ключ заказчика)dictId
(идентификатор диктанта).
Их можно найти в кабинете организатора диктанта.
- Авторизуйтесь на сайте https://diktado.com/ под учётной записью организатора.
- Выберите в меню «Мой профиль» подменю «Корпоративные диктанты», далее откройте свой диктант.
- Откройте параметры диктанта — справа от ссылки на страницу диктанта (см. скриншот).
- Скопируйте ключ заказчика и идентификатор диктанта.
- Вставьте ключ и идентификатор в код встраивания на своём сайте.