|
Следующая версия
|
Предыдущая версия
|
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/''), чтобы он прописал нужные разрешения. |