Вы можете разместить на своем сайте скрипт, выводящий на экран случайный тест с нашего сайта.
Для этого необходимо в заголовке страницы в разделе <head>…</head> указать ссылку на скрипт с нашего сайта:
<script type=»text/javascript» src=»https://azbyka.ru/test/azbyka_test.js» charset=»utf-8″></script>
А в нужном месте в теле странице поместить исполняемую функцию:
<script>azbyka_test();</script>
Для работы скрипта требуется наличие подключенной библиотеки jQuery (например, из Google Hosted Libraries).
Для оформления теста используйте таблицы стилей. Образец файла CSS вы можете скачать здесь. Измените и добавьте эти настройки в таблицу стилей темы вашего сайта или разместите их в отдельном файле на вашем сайте, указав ссылку на него в заголовке страницы в разделе <head>…</head>:
<link rel=»stylesheet» type=»text/css» href=»http://yoursite.ru/azbyka_test.css» />
Чтобы вам было легче разобраться в использовании CSS для теста приводим структуры html-кода, формируемого скриптом:
<!-- Список вопросов теста -->
<!-- Существуют 5 типов вопросов -->
<ul class="question">
<li>
<!-- Текст вопроса -->
<div class="text">
<p>1. Текст вопроса</p>
<a class="fancybox" href="<a class="linkification-ext" title="Linkification: https://azbyka.ru/test/wp-content/uploads/questfoto.jpg" href="https://cdn.azbyka.ru/test/wp-content/uploads/questfoto.jpg" data-mce-href="https://cdn.azbyka.ru/test/wp-content/uploads/questfoto.jpg">https://azbyka.ru/test/wp-content/uploads/questfoto.jpg</a>">
<img class="thumbnail img-responsive" src="<a class="linkification-ext" title="Linkification: https://azbyka.ru/test/wp-content/uploads/questfoto.jpg" href="https://cdn.azbyka.ru/test/wp-content/uploads/questfoto.jpg" data-mce-href="https://cdn.azbyka.ru/test/wp-content/uploads/questfoto.jpg">https://azbyka.ru/test/wp-content/uploads/questfoto.jpg</a>" />
</a>
</div>
<!-- Тип вопроса 1: Один ответ -->
<!-- Варианты ответов -->
<div class="answers">
<label>1<input type="radio" name="q_0" value="1" /> Вариант ответа №1</label><br />
<label>2<input type="radio" name="q_0" value="2" /> Вариант ответа №2</label><br />
<label>3<input type="radio" name="q_0" value="3" /> Вариант ответа №3</label><br />
<label>4<input type="radio" name="q_0" value="4" /> Вариант ответа №4</label><br />
<!-- Всего возможно до 10 вариантов ответа -->
</div>
<!-- Правильный ответ -->
<div class="correct">Правильный ответ: <span>№3</span></div>
<!-- Утверждение "Верно!" в случае правильного ответа -->
<div class="accepted">Верно!</div>
<!-- Ссылка на материалы для самостоятельного изучения -->
<div class="link">
<b>Материалы для изучения:</b> <a href="<a class="linkification-ext" title="Linkification: https://azbyka.ru/article" href="https://azbyka.ru/article" data-mce-href="https://azbyka.ru/article">https://azbyka.ru/article</a>">Название статьи по теме вопроса</a>
</div>
<!-- Краткое пояснение в правильному ответу -->
<div class="comment">
<b>Комментарий:</b>
<p>Текст комментария</p>
<a class="fancybox" href="<a class="linkification-ext" title="Linkification: https://azbyka.ru/test/wp-content/uploads/ansfoto.jpg" href="https://cdn.azbyka.ru/test/wp-content/uploads/ansfoto.jpg" data-mce-href="https://cdn.azbyka.ru/test/wp-content/uploads/ansfoto.jpg">https://azbyka.ru/test/wp-content/uploads/ansfoto.jpg</a>">
<img class="thumbnail" src="<a class="linkification-ext" title="Linkification: https://azbyka.ru/test/wp-content/uploads/ansfoto.jpg" href="https://cdn.azbyka.ru/test/wp-content/uploads/ansfoto.jpg" data-mce-href="https://cdn.azbyka.ru/test/wp-content/uploads/ansfoto.jpg">https://azbyka.ru/test/wp-content/uploads/ansfoto.jpg</a>">
</a>
</div>
<!-- Кнопка "Ответить" -->
<div class="answer-btn">
<button class="cupid-green answer-submit" data-question-type="radio" data-correct="3">Ответить</button>
</div>
<!-- Разделитель вопросов -->
<div class="devide">
<a href="<a class="linkification-ext" title="Linkification: https://azbyka.ru/test/test_name?question=1" href="https://azbyka.ru/test/test_name?question=1" data-mce-href="https://azbyka.ru/test/test_name?question=1">https://azbyka.ru/test/test_name?question=1</a>" class="popup">открыть вопрос в отдельном окне</a>
<div class="clear"></div>
<hr>
</div>
</li>
<li>
<!-- Текст вопроса -->
<div class="text">
<p>2. Текст вопроса</p>
<a class="fancybox" href="<a class="linkification-ext" title="Linkification: https://azbyka.ru/test/wp-content/uploads/questfoto.jpg" href="https://cdn.azbyka.ru/test/wp-content/uploads/questfoto.jpg" data-mce-href="https://cdn.azbyka.ru/test/wp-content/uploads/questfoto.jpg">https://azbyka.ru/test/wp-content/uploads/questfoto.jpg</a>">
<img class="thumbnail img-responsive" src="<a class="linkification-ext" title="Linkification: https://azbyka.ru/test/wp-content/uploads/questfoto.jpg" href="https://cdn.azbyka.ru/test/wp-content/uploads/questfoto.jpg" data-mce-href="https://cdn.azbyka.ru/test/wp-content/uploads/questfoto.jpg">https://azbyka.ru/test/wp-content/uploads/questfoto.jpg</a>" />
</a>
</div>
<!-- Тип вопроса 2: Множество ответов -->
<!-- Варианты ответов -->
<div class="answers">
<label>1<input type="checkbox" name="q_1" value="1" /> Вариант ответа №1</label><br />
<label>2<input type="checkbox" name="q_1" value="2" /> Вариант ответа №2</label><br />
<label>3<input type="checkbox" name="q_1" value="3" /> Вариант ответа №3</label><br />
<label>4<input type="checkbox" name="q_1" value="4" /> Вариант ответа №4</label><br />
<!-- Всего возможно до 10 вариантов ответа -->
<div class="hint">
Возможен одновременный выбор нескольких правильных ответов.
</div>
</div>
<!-- Правильные ответы -->
<div class="correct">Правильные ответы: <span>№1,2,3</span></div>
<!-- Утверждение "Верно!" в случае правильного ответа -->
<div class="accepted">Верно!</div>
<!-- Ссылка на материалы для самостоятельного изучения -->
<div class="link">
<b>Материалы для изучения:</b> <a href="<a class="linkification-ext" title="Linkification: https://azbyka.ru/article" href="https://azbyka.ru/article" data-mce-href="https://azbyka.ru/article">https://azbyka.ru/article</a>">Название статьи по теме вопроса</a>
</div>
<!-- Краткое пояснение к правильным ответам -->
<div class="comment">
<b>Комментарий:</b>
<p>Текст комментария</p>
<a class="fancybox" href="<a class="linkification-ext" title="Linkification: https://azbyka.ru/test/wp-content/uploads/ansfoto.jpg" href="https://cdn.azbyka.ru/test/wp-content/uploads/ansfoto.jpg" data-mce-href="https://cdn.azbyka.ru/test/wp-content/uploads/ansfoto.jpg">https://azbyka.ru/test/wp-content/uploads/ansfoto.jpg</a>">
<img class="thumbnail" src="<a class="linkification-ext" title="Linkification: https://azbyka.ru/test/wp-content/uploads/ansfoto.jpg" href="https://cdn.azbyka.ru/test/wp-content/uploads/ansfoto.jpg" data-mce-href="https://cdn.azbyka.ru/test/wp-content/uploads/ansfoto.jpg">https://azbyka.ru/test/wp-content/uploads/ansfoto.jpg</a>">
</a>
</div>
<!-- Кнопка "Ответить" -->
<div class="answer-btn">
<button class="cupid-green answer-submit" data-question-type="checkbox" data-correct="1,2,3">Ответить</button>
</div>
<!-- Разделитель вопросов -->
<div class="devide">
<a href="<a class="linkification-ext" title="Linkification: https://azbyka.ru/test/test_name?question=1" href="https://azbyka.ru/test/test_name?question=1" data-mce-href="https://azbyka.ru/test/test_name?question=1">https://azbyka.ru/test/test_name?question=1</a>" class="popup">открыть вопрос в отдельном окне</a>
<div class="clear"></div>
<hr>
</div>
</li>
<li>
<!-- Текст вопроса -->
<div class="text">
<p>3. Текст вопроса</p>
<a class="fancybox" href="<a class="linkification-ext" title="Linkification: https://azbyka.ru/test/wp-content/uploads/questfoto.jpg" href="https://cdn.azbyka.ru/test/wp-content/uploads/questfoto.jpg" data-mce-href="https://cdn.azbyka.ru/test/wp-content/uploads/questfoto.jpg">https://azbyka.ru/test/wp-content/uploads/questfoto.jpg</a>">
<img class="thumbnail img-responsive" src="<a class="linkification-ext" title="Linkification: https://azbyka.ru/test/wp-content/uploads/questfoto.jpg" href="https://cdn.azbyka.ru/test/wp-content/uploads/questfoto.jpg" data-mce-href="https://cdn.azbyka.ru/test/wp-content/uploads/questfoto.jpg">https://azbyka.ru/test/wp-content/uploads/questfoto.jpg</a>" />
</a>
</div>
<!-- Тип вопроса 3: Самозаполнение -->
<!-- Вариант ответа -->
<div class="answers">
<input type="text" value="" />
<div class="hint">
Впишите ответ самостоятельно.
</div>
</div>
<!-- Правильный ответ -->
<div class="correct">Правильный ответ: <span>Текст ответа</span></div>
<!-- Утверждение "Верно!" в случае правильного ответа -->
<div class="accepted">Верно!</div>
<!-- Ссылка на материалы для самостоятельного изучения -->
<div class="link">
<b>Материалы для изучения:</b> <a href="<a class="linkification-ext" title="Linkification: https://azbyka.ru/article" href="https://azbyka.ru/article" data-mce-href="https://azbyka.ru/article">https://azbyka.ru/article</a>">Название статьи по теме вопроса</a>
</div>
<!-- Краткое пояснение к правильному ответу -->
<div class="comment">
<b>Комментарий:</b>
<p>Текст комментария</p>
<a class="fancybox" href="<a class="linkification-ext" title="Linkification: https://azbyka.ru/test/wp-content/uploads/ansfoto.jpg" href="https://cdn.azbyka.ru/test/wp-content/uploads/ansfoto.jpg" data-mce-href="https://cdn.azbyka.ru/test/wp-content/uploads/ansfoto.jpg">https://azbyka.ru/test/wp-content/uploads/ansfoto.jpg</a>">
<img class="thumbnail" src="<a class="linkification-ext" title="Linkification: https://azbyka.ru/test/wp-content/uploads/ansfoto.jpg" href="https://cdn.azbyka.ru/test/wp-content/uploads/ansfoto.jpg" data-mce-href="https://cdn.azbyka.ru/test/wp-content/uploads/ansfoto.jpg">https://azbyka.ru/test/wp-content/uploads/ansfoto.jpg</a>">
</a>
</div>
<!-- Кнопка "Ответить" -->
<div class="answer-btn">
<button class="cupid-green answer-submit" data-question-type="text" data-correct="Текст ответа">Ответить</button>
</div>
<!-- Разделитель вопросов -->
<div class="devide">
<a href="<a class="linkification-ext" title="Linkification: https://azbyka.ru/test/test_name?question=1" href="https://azbyka.ru/test/test_name?question=1" data-mce-href="https://azbyka.ru/test/test_name?question=1">https://azbyka.ru/test/test_name?question=1</a>" class="popup">открыть вопрос в отдельном окне</a>
<div class="clear"></div>
<hr>
</div>
</li>
<li>
<!-- Текст вопроса -->
<div class="text">
<p>4. Текст вопроса</p>
<a class="fancybox" href="<a class="linkification-ext" title="Linkification: https://azbyka.ru/test/wp-content/uploads/questfoto.jpg" href="https://cdn.azbyka.ru/test/wp-content/uploads/questfoto.jpg" data-mce-href="https://cdn.azbyka.ru/test/wp-content/uploads/questfoto.jpg">https://azbyka.ru/test/wp-content/uploads/questfoto.jpg</a>">
<img class="thumbnail img-responsive" src="<a class="linkification-ext" title="Linkification: https://azbyka.ru/test/wp-content/uploads/questfoto.jpg" href="https://cdn.azbyka.ru/test/wp-content/uploads/questfoto.jpg" data-mce-href="https://cdn.azbyka.ru/test/wp-content/uploads/questfoto.jpg">https://azbyka.ru/test/wp-content/uploads/questfoto.jpg</a>" />
</a>
</div>
<!-- Тип вопроса 4: Самопроверка -->
<div class="hint">
Вопрос без списка ответов, с самопроверкой. После устного ответа на вопрос, нажмите кнопку "Правильный ответ" и оцените самостоятельно, правильно ли вы ответили, нажав кнопку "Ответил правильно" или "Ответил неправильно".
</div>
<!-- Правильный ответ -->
<div class="correct">Правильный ответ: <span>Текст ответа</span> </div>
<!-- Кнопки для самостоятельного указания правильности ответа -->
<div class="selfcheck-buttons">
<button class="answer-correct">Ответил правильно</button>
<button class="answer-wrong">Ответил не правильно</button>
</div>
<!-- Ссылка на материалы для самостоятельного изучения -->
<div class="link">
<b>Материалы для изучения:</b> <a href="<a class="linkification-ext" title="Linkification: https://azbyka.ru/article" href="https://azbyka.ru/article" data-mce-href="https://azbyka.ru/article">https://azbyka.ru/article</a>">Название статьи по теме вопроса</a>
</div>
<!-- Краткое пояснение к правильному ответу -->
<div class="comment">
<b>Комментарий:</b>
<p>Текст комментария</p>
<a class="fancybox" href="<a class="linkification-ext" title="Linkification: https://azbyka.ru/test/wp-content/uploads/ansfoto.jpg" href="https://cdn.azbyka.ru/test/wp-content/uploads/ansfoto.jpg" data-mce-href="https://cdn.azbyka.ru/test/wp-content/uploads/ansfoto.jpg">https://azbyka.ru/test/wp-content/uploads/ansfoto.jpg</a>">
<img class="thumbnail" src="<a class="linkification-ext" title="Linkification: https://azbyka.ru/test/wp-content/uploads/ansfoto.jpg" href="https://cdn.azbyka.ru/test/wp-content/uploads/ansfoto.jpg" data-mce-href="https://cdn.azbyka.ru/test/wp-content/uploads/ansfoto.jpg">https://azbyka.ru/test/wp-content/uploads/ansfoto.jpg</a>">
</a>
</div>
<!-- Кнопка "Ответить" -->
<div class="answer-btn">
<button class="cupid-green answer-submit" data-question-type="selfcheck">Ответить</button>
</div>
<!-- Разделитель вопросов -->
<div class="devide">
<a href="<a class="linkification-ext" title="Linkification: https://azbyka.ru/test/test_name?question=1" href="https://azbyka.ru/test/test_name?question=1" data-mce-href="https://azbyka.ru/test/test_name?question=1">https://azbyka.ru/test/test_name?question=1</a>" class="popup">открыть вопрос в отдельном окне</a>
<div class="clear"></div>
<hr>
</div>
</li>
<li>
<!-- Текст вопроса -->
<div class="text">
<p>5. Текст вопроса</p>
<a class="fancybox" href="<a class="linkification-ext" title="Linkification: https://azbyka.ru/test/wp-content/uploads/questfoto.jpg" href="https://cdn.azbyka.ru/test/wp-content/uploads/questfoto.jpg" data-mce-href="https://cdn.azbyka.ru/test/wp-content/uploads/questfoto.jpg">https://azbyka.ru/test/wp-content/uploads/questfoto.jpg</a>">
<img class="thumbnail img-responsive" src="<a class="linkification-ext" title="Linkification: https://azbyka.ru/test/wp-content/uploads/questfoto.jpg" href="https://cdn.azbyka.ru/test/wp-content/uploads/questfoto.jpg" data-mce-href="https://cdn.azbyka.ru/test/wp-content/uploads/questfoto.jpg">https://azbyka.ru/test/wp-content/uploads/questfoto.jpg</a>" />
</a>
</div>
<!-- Тип вопроса 5: Сопоставление -->
<!-- Вариант ответа -->
<div class="answers">
<!-- Блок с ответами сопоставления -->
<div class="row sortable">
<!-- Левая колонка (стационарная) -->
<ul class="list-left">
<li class="ui-state-default">Фраза 1</li>
<li class="ui-state-default">Фраза 2</li>
<li class="ui-state-default">Фраза 3</li>
<li class="ui-state-default">Фраза 4</li>
<li class="ui-state-default">Фраза 5</li>
<li class="ui-state-default">Фраза 6</li>
<li class="ui-state-default">Фраза 7</li>
</ul>
<!-- Колонка с разделителями -->
<ul class="list-middle hide-on-mobile">
<li class="ui-state-disabled"><i class="fa fa-arrows-h"></i></li>
<li class="ui-state-disabled"><i class="fa fa-arrows-h"></i></li>
<li class="ui-state-disabled"><i class="fa fa-arrows-h"></i></li>
<li class="ui-state-disabled"><i class="fa fa-arrows-h"></i></li>
<li class="ui-state-disabled"><i class="fa fa-arrows-h"></i></li>
<li class="ui-state-disabled"><i class="fa fa-arrows-h"></i></li>
<li class="ui-state-disabled"><i class="fa fa-arrows-h"></i></li>
</ul>
<!-- Правая колонка (подвижная) -->
<ul class="list-right">
<li class="ui-state-highlight" data-order-id="1" data-correct="Фраза 2"> Продолжение 1</li>
<li class="ui-state-highlight" data-order-id="0" data-correct="Фраза 1"> Продолжение 2</li>
<li class="ui-state-highlight" data-order-id="6" data-correct="Фраза 7"> Продолжение 3</li>
<li class="ui-state-highlight" data-order-id="4" data-correct="Фраза 5"> Продолжение 4</li>
<li class="ui-state-highlight" data-order-id="2" data-correct="Фраза 3"> Продолжение 5</li>
<li class="ui-state-highlight" data-order-id="5" data-correct="Фраза 6"> Продолжение 6</li>
<li class="ui-state-highlight" data-order-id="3" data-correct="Фраза 4"> Продолжение 7</li>
</ul>
<span class="ui-icon ui-icon-arrowthick-1-n"></span>
</div>
<div class="hint">
Вопрос на сопоставление: упорядочьте правый столбец так, чтобы понятия в нём соответствовали левому. Это делается мышкой или, на смартфонах, - пальцем.
</div>
</div>
<!-- Правильный ответ -->
<div class="correct">Правильный ответ: <span> Продолжение 2, Продолжение 1, Продолжение 5, Продолжение 7, Продолжение 4, Продолжение 6, Продолжение 3</span></div>
<!-- Утверждение "Верно!" в случае правильного ответа -->
<div class="accepted">Верно!</div>
<!-- Ссылка на материалы для самостоятельного изучения -->
<div class="link">
<b>Материалы для изучения:</b> <a href="<a class="linkification-ext" title="Linkification: https://azbyka.ru/article" href="https://azbyka.ru/article" data-mce-href="https://azbyka.ru/article">https://azbyka.ru/article</a>">Название статьи по теме вопроса</a>
</div>
<!-- Краткое пояснение к правильному ответу -->
<div class="comment">
<b>Комментарий:</b>
<p>Текст комментария</p>
<a class="fancybox" href="<a class="linkification-ext" title="Linkification: https://azbyka.ru/test/wp-content/uploads/ansfoto.jpg" href="https://cdn.azbyka.ru/test/wp-content/uploads/ansfoto.jpg" data-mce-href="https://cdn.azbyka.ru/test/wp-content/uploads/ansfoto.jpg">https://azbyka.ru/test/wp-content/uploads/ansfoto.jpg</a>">
<img class="thumbnail" src="<a class="linkification-ext" title="Linkification: https://azbyka.ru/test/wp-content/uploads/ansfoto.jpg" href="https://cdn.azbyka.ru/test/wp-content/uploads/ansfoto.jpg" data-mce-href="https://cdn.azbyka.ru/test/wp-content/uploads/ansfoto.jpg">https://azbyka.ru/test/wp-content/uploads/ansfoto.jpg</a>">
</a>
</div>
<!-- Кнопка "Ответить" -->
<div class="answer-btn">
<button class="cupid-green answer-submit" data-question-type="sorting" data-correct=" Продолжение 2, Продолжение 1, Продолжение 5, Продолжение 7, Продолжение 4, Продолжение 6, Продолжение 3">Ответить</button>
</div>
<!-- Разделитель вопросов -->
<div class="devide">
<a href="<a class="linkification-ext" title="Linkification: https://azbyka.ru/test/test_name?question=1" href="https://azbyka.ru/test/test_name?question=1" data-mce-href="https://azbyka.ru/test/test_name?question=1">https://azbyka.ru/test/test_name?question=1</a>" class="popup">открыть вопрос в отдельном окне</a>
<div class="clear"></div>
<hr>
</div>
</li>
<!-- Возможно любое количество вопросов -->
</ul>
<!-- Итоги результатов тестирования -->
<!-- Правильные ответы -->
<div class="col-1-1">
<div class="col-1-5 correct-label">
Правильных ответов:
</div>
<!-- Количество правильных ответов -->
<div class="col-1-12">
<span id="correct_count">0</span>
</div>
<!-- Доля правильных ответов -->
<div class="col-1-12">
<span id="correct_percent">0%</span>
</div>
<!-- Графическое отображение доли правильных ответов -->
<div class="col-1-6">
<progress id="total_correct" value="0" max="100"></progress>
</div>
</div>
<!-- Ошибочные ответы -->
<div class="col-1-1">
<div class="col-1-5 wrong-label">
Ошибочных ответов:
</div>
<!-- Количество неправильных ответов -->
<div class="col-1-12">
<span id="wrong_count">0</span>
</div>
<!-- Доля неправильных ответов -->
<div class="col-1-12">
<span id="wrong_percent">0%</span>
</div>
<!-- Графическое отображение доли неправильных ответов -->
<div class="col-1-6">
<progress id="total_wrong" value="0" max="100"></progress>
</div>
</div>
<!-- Перечень неправильных ответов -->
<div class="col-1-1">
<div id="wrong_answers">
Вы неправильно ответили на следующие вопросы:
<ul id="wrong_answers_list">
</ul>
</div>
</div>
<p class="link-to-azbyka-test"><a href="<a class="linkification-ext" title="Linkification: https://azbyka.ru/test/" href="https://azbyka.ru/test/" data-mce-href="https://azbyka.ru/test/">https://azbyka.ru/test/</a>">Все тесты →</a></p>
Пример выдачи результата работы скрипта
Плагин для WordPress
Для CMS WordPress вы можете скачать плагин.
Установите плагин, распаковав содержимое архива в папку /wp-content/plugins/azbyka_tests/, и активируйте его. Для вывода случайного теста на экран просто используйте шорт-код [azbyka_test] в тексте статьи.
Комментировать