Встраивание формы написания диктанта

Ниже представлен полный код HTML-страницы для встраивания формы написания диктанта. Выбран тестовый диктант («Выдумщик») и тестовый пользователь, поэтому можно писать диктант без предварительной регистрации.

Предварительная регистрация включает в себя ввод имени и адреса электронной почты. Подтверждение почты не требуется, чтобы исключить проблемы с процедурой и в целом её упростить.

Чтобы окно предварительной регистрации исчезло, необходимо в скрипте раскомментировать строчку с определением параметра customerUserId и передавать туда идентификатор пользователя из внешней системы Заказчика. Это может быть любое строковое значение, в том числе email.

<!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>

Пример встроенного тестового диктанта на чистую страницу https://diktado.com/embedded

Текст тестового диктанта для проверки:

С нами был девятилетний мальчик, и он гораздо лучше нас, взрослых, всё замечал и рассказывал.

Он был выдумщик, но мы очень любили его выдумки. Мы никак не могли, да и не хотели доказывать ему, что он говорит неправду. Каждый день он придумывал что-нибудь новое: то он слышал, как шептались рыбы, то видел, как муравьи устроили себе паром через ручей из сосновой коры и паутины.

Мы делали вид, что верили ему.

Всё, что окружало нас, казалось необыкновенным: и поздняя луна, блиставшая над чёрными озёрами, и высокие облака, похожие на горы розового снега, и даже привычный морской шум высоких сосен.

Мальчик первый услышал фырканье зверя и зашипел на нас, чтобы мы замолчали. Мы притихли и старались даже не дышать, хотя рука невольно тянулась к двустволке, – кто знает, что это мог быть за зверь!

Для полноценного тестирования встроенного тестового диктанта нужно авторизоваться в кабинете организатора:

авторизуйтесь на веб-сайте https://diktado.com/login/ под аккаунтом test@diktado.com (пароль testdiktado);
в правом верхнем меню профиля выберите пункт «Корпоративные диктанты», далее диктант «Выдумщик».

Внутри кабинета можно увидеть список написавших, отчёты о проверке и статистику по оценкам. Именно так выглядит кабинет организатора для любого встроенного диктанта.

Для запуска боевого (не тестового) диктанта следует изменить в коде встраивания, который приведён выше, два параметра:

key (Ключ заказчика)
dictId (Идентификатор диктанта).

Эти параметры для конкретного диктанта можно найти в кабинете организатора диктанта.

Также следует сообщить Администратору домен, в который будет встроен диктант (полный URL, например: https://mycompany.ru/dictant/), чтобы он прописал нужные разрешения.

Встраивание формы написания диктанта

Код встраивания

Пример встроенной формы

Тестовый диктант

Кабинет организатора корпоративного диктанта

Параметры встраивания