Следующая версия
|
Предыдущая версия
|
tech:api:embed_writing_form [2021/09/16 11:37] dmitry_kalashnikov создано |
tech:api:embed_writing_form [2023/09/11 04:34] (текущий) dmitry_kalashnikov |
====== Встраивание формы написания диктанта ====== | ====== Встраивание формы написания диктанта ====== |
| |
| |
| ===== Код встраивания ===== |
| |
| Ниже представлен полный код HTML-страницы для встраивания формы написания диктанта. |
| Выбран тестовый диктант ("Выдумщик") и тестовый пользователь, поэтому можно писать диктант без предварительной регистрации. |
| |
| Предварительная регистрация включает в себя ввод имени и адреса электронной почты. Подтверждение почты не требуется, чтобы исключить проблемы с процедурой и в целом её упростить. |
| |
| Чтобы окно предварительной регистрации исчезло, необходимо в скрипте раскомментировать строчку с определением параметра ''customerUserId'' и передавать туда идентификатор пользователя из внешней системы Заказчика. Это может быть любое строковое значение, в том числе email. |
| |
| <code javascript > |
| <!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", // ключ заказчика диктанта |
| //customerUserId: "123456", // идентификатор пользователя из внешней системы, если убрать это поле, то появится предварительное окно регистрации |
| 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> |
| </code> |
| |
| |
| ===== Пример встроенной формы ===== |
| |
| Пример встроенного тестового диктанта на чистую страницу https://diktado.com/embedded |
| |
| ===== Тестовый диктант ===== |
| |
| |
| Текст тестового диктанта для проверки: |
| |
| <code> |
| С нами был девятилетний мальчик, и он гораздо лучше нас, взрослых, всё замечал и рассказывал. |
| |
| Он был выдумщик, но мы очень любили его выдумки. Мы никак не могли, да и не хотели доказывать ему, что он говорит неправду. Каждый день он придумывал что-нибудь новое: то он слышал, как шептались рыбы, то видел, как муравьи устроили себе паром через ручей из сосновой коры и паутины. |
| |
| Мы делали вид, что верили ему. |
| |
| Всё, что окружало нас, казалось необыкновенным: и поздняя луна, блиставшая над чёрными озёрами, и высокие облака, похожие на горы розового снега, и даже привычный морской шум высоких сосен. |
| |
| Мальчик первый услышал фырканье зверя и зашипел на нас, чтобы мы замолчали. Мы притихли и старались даже не дышать, хотя рука невольно тянулась к двустволке, – кто знает, что это мог быть за зверь! |
| </code> |
| |
| ===== Кабинет организатора корпоративного диктанта ===== |
| |
| Для полноценного тестирования встроенного тестового диктанта нужно авторизоваться в кабинете организатора: |
| * авторизуйтесь на веб-сайте https://diktado.com/login/ под аккаунтом ''test@diktado.com'' (пароль ''testdiktado''); |
| * в правом верхнем меню профиля выберите пункт "Корпоративные диктанты", далее диктант "Выдумщик". |
| |
| Внутри кабинета можно увидеть список написавших, отчёты о проверке и статистику по оценкам. Именно так выглядит кабинет организатора для любого встроенного диктанта. |
| |
| ===== Параметры встраивания ===== |
| |
| Для запуска боевого (не тестового) диктанта следует изменить в коде встраивания, который приведён выше, два параметра: |
| * ''key'' (Ключ заказчика) |
| * ''dictId'' (Идентификатор диктанта). |
| |
| Эти параметры для конкретного диктанта можно найти в кабинете [[corporate/cabinet#nastrojki_diktanta|организатора диктанта]]. |
| |
| Также следует сообщить Администратору домен, в который будет встроен диктант (полный URL, например: ''https://mycompany.ru/dictant/''), чтобы он прописал нужные разрешения. |