testing system from WebSchool
JS iframe виджет
DEMO
Описание
Данная система тестироваиния предназначена для создания своего теста, который можно поместить на сайт. Система тестирования имеет следующие особенности:
- Ручное заполнение вопросов, через .json файл
- Настраивается большинство параметров тестирования(количество вопросов, минимальное количество правильных ответов для похождения теста, количество минут на прохождение теста и описание)
- Есть три типа вопросов: с открытым вопросом, с выбором одного вопроса из списка(<=5) и с выбором одного или нескольких вопросов из списка(<=5)
- После прохождения теста результаты отправляются в родительское окно и дальше мы можем с ними работать, как захотим
- Тестирование защищенно от просмотра ответов
- Дизайн основан на открытом фреймворке materialize, внешний вид можно настроить под свои нужды
- Есть возможность выбрать определенное количество вопросов из банка вопросов
- Выборка вопросов происходит со случайной прогрессирующей последовательностью.
Инструкция
- Скачиваем репозиторий и загружаем к себе на хостинг
- Создаем в каталоге папку с названием вашего теста
- Копируем в созданную папку файл "test.php"
- Создаём в этой же папке файл "questions.json"
- Заполняем файл "questions.json" вопросами (см. инструкцию ниже)
- Вставляем тест на сайт и задаём параметры.
Инструкция по заполнению файла "questions.json"
Файл "questions.json" имеет следующую структуру:
{ "1": { "question": "Содержание вопроса с выбором одного варианта из нескольких предолженных", "1": "Вариант один", "2": "Вариант два", "3": "Вариант три", "4": "Вариант четыре", "5": "Вариант пять", "answer": "Вариант три", "type":"oneRight" }, "2": { "question": "Содержание вопроса с выбором нескольких вариантов из нескольких предложенных", "1": "Вариант один", "2": "Вариант два", "3": "Вариант три", "4": "Вариант четыре", "5": "Вариант пять", "answer" : "Вариант дваВариант четыреВариант пять", "type":"multiRight" }, "3": { "question": "Содержание вопроса с открытым ответом", "answer":"Ответ на вопрос", "type":"open" } }
Согласно структуре:
- В данном примере представленно три вопроса, таких вопросов может быть неограниченное количество.
- В текущей версии есть три типа вопросов: вопрос с выбором одного варианта ответа из нескольких, вопрос с выбором нескольких вариантов ответа и открытый вопрос, где надо вписать строку/слово в текстовое поле.
- Вариантов ответа может быть от одного до пяти
- в поле "answer" копируется текст ответа
- Если "type" Задан "multiRight", то в поле "answer" вставляются все ответы по порядку без пробела.
- В соответствии типа вопроса изменяется поле "type", оно может быть трех видов: "oneRight" - вопрос с выбором одного варианта ответа из нескольких, "multiRight" - вопрос с выбором нескольких вариантов ответа и "open" - открытый вопрос.
- При заполнении следует избегать ситсксических ошибок, для удобства можно воспользоваться следующим сервисом jshint, Или аналогичным.
Вставка теста на сайт
Для добавления теста на сайт, необходимо вставить iframe и отправить в него настройки. Пример ниже:
<script> document.write('<iframe id="test-window" src="PATH TO TEST/tests/test_demo_ru/test.php#?hash="' + Math.random() + '"></iframe>'); // Отправляем данные в дочернее окно window.onload = function(){ $(function(){ var message = { countQuestionsInTest : 20, countQuestionsAll: 44, countPointsToOK : 15, min : 10, testName : 'Название теста' }; var iframe = $('#test-window'); iframe[0].contentWindow.postMessage(message, document.location); }); }; </script>
В объекте message мы передаем настройки нашего теста.
- countQuestionsInTest - Количество вопросов, которые будут в тесте (не больше, чем значение countQuestionsAll)
- countQuestionsAll - Количество вопросов всего в файле questions.json (не меньше, чем значение countQuestionsInTest)
- countPointsToOK - Минимальное количество вопросов, на которые необходимо ответить (не больше, чем значение countQuestionsInTest)
- min - Количество времени отведенное на выполнение теста
- testName - Название теста