Здравствуйте.
Необходимо сверстать онлайн тренажер. Он представляет собой эмуляцию измерения реологических характеристик на ротационном
вискозиметре Rheotest RN4.1 и все действия в связаны с проводимыми измерениями.
По мере работы с тренажером пользователь делает определенный выбор, например выбирает исследуемый образец на макете 2.jpg, после чего ему отображается какое-либо информационное сообщение, например, плашка "правильно" и осуществляется переход к следующему "экрану" (макету).
В некоторых макетах бывает несколько вариантов выбора и из них следует несколько вариантов отображения следующих макетов, это будет немного позже описано в подробном опубликованном тз. Пока вы можете оценить сложность вёрстки макетов.
По поводу сроков - нужно максимально оперативно. Готов выслушать ваши предложения.
Необходимо чтобы сверстанный тренажер работал и на технике apple в стандартном браузере и на других мобильных устройствах. Так же необходима кроссбраузерность на компьютере. Если в каком-то браузере что-то не работает и надо будет сделать чуть по другому - это оговаривается, такие вопросы решить можно.
Краткое описание макетов (чуть позже будет более подробное описание особеностей работы каждого макета):
1
Внешний вид прибора. Кроме
кнопки начала, действия пользователя отсутствуют
2
Выбор материала
2-1
Когда выбран правильный
вариант
2-2
Когда неверный выбор
3
Выбранный в предыдущем шаге
материал стоит на столе. Мы выбираем
измерительную систему. Т.е. набор предметов.
3-1
Если выбрано неправильно
3-2
Когда выбор правильный
4
Выбираем насадку
4-1
Если выбор неправильный
4-2
Если выбор правильный
5
Выбранная в предыдущем шаге
насадка становится на место. Мы выбираем измерительный стакан
5-1
Если правильный выбор
5-2
Если не верный выбор
6
Выбранный
в предыдущем шаге измерительный стакан становится на место. Мы выбираем сосуд
для термостатирования
6-1
Если не правильно выбрано
6-2
Если выбор правильный
7
Готовим образец материала.
Пользователь должен отметить галочками все верные ингредиенты в любой
последовательности и нажать кнопку «Перемешать»
7-1
Если выбраны правильные
ингредиенты
7-2
Если допустили ошибку
8
Пользователь должен выбрать
все кнопки которые необходимо нажать для запуска оборудования
8-1
Зеленым отмечены верные
включатели (мы можем оставить только их, но так будет менее интересно, потому
что шаг и так очень легкий, тут не может быть неверного ответа)
На макете табличка если
отмечены верные элементы
8-2
Если отмечена неверная
комбинация включателей
9
Пользователь должен выбрать
необходимые части измерительного стакана и отметить способ его сборки.
Потом нажать кнопку
«Собрать»
9-1
Если вариант правильный
9-2
Если неверно
9s
Перед нами 4 стакана с
различным уровнем материала. Необходимо выбрать правильный и нажать кнопку
«Готово»
9s-1
Правильный вариант
9s-2
Неправильный вариант
10
В шаге у нас три предмета и
два действия. Мы разбили их промежуточными точками контроля.
Т.е. у нас подсвечивается
первый кружок – кружок, в который нужно поставить предмет. Пользователь должен
выбрать необходимый предмет.
10-1
Правильный выбор первого предмета.
Второй предмет выбирается аналогично
10-2
Тут отображено, что два
предмета выбрано, стоят на своих местах. Мы должны выбрать действие (т.к.
третий кружок еще не подсвечен, кликабельны кнопки действий). При наведении на
любое из них оно подсвечивается зеленым, как проиллюстрировано на верном
ответе.
10-3
После, мы должны поставить
третий оставшийся предмет на нужное место. В данном случае подсвечивается место
для предмета и кнопки так же кликабельны. Нужно соблюсти порядок. Сначала
предмет а потом опустить
10-3s
Правильный ответ.
10-4
Остается действие выбрать.
Далее нажать кнопку «Включить»
11
Чтобы перейти к следующему
шагу, пользователь должен нажать на кнопку «Выполнить», которая расположена на
экране монитора
12
Далее перед нами будет
рабочая область программы. И написано, какое действие нам требуется выполнить.
12-1
Неправильный выбор. Все
пункты программы кликабельны. Но пользователь должен выбрать пункт «Установка»
12-2
Правильный выбор
12s
Здесь пользователь с
помощью выпадающих списков со значениями заполняет данную форму и нажимает
галочку, чтобы перейти к следующему шагу
13s
Снова необходимо вызвать
форму с помощью пунктов выпадающего меню. Проиллюстрировано неверное действие
13s-1
Верное действие
13
Пользователь должен
перетянуть пять из всех предложенных параметров измерения на пустые места выше
разделительной полосы. Порядок расположения элементов здесь не важен.
13-1
На макете перетянут один из
параметров. После выбора всех, пользователь нажимает галочку и во всплывающем
окне появляется стандартное сообщение о верности/неверности выбора и переход к
следующему шагу
14
Проиллюстрировано
всплывающее сообщение с подсказкой – описанием режима измерения. Пользователь
должен выбрать правильный из всех.
14s
Если выбор правильный прямо
сверху предыдущего окна появляется специальная форма для заполнения параметров
15
Если параметры будут
указаны правильно, то мы перейдем к следующему шагу, на котором будет
изображена иконка выбранного режима измерения с какими-то параметрами.
Пользователь должен нажать галочку. Других действий здесь нет.
15-1
На экране появится форма
для заполнения.
15s
Второй вариант формы
16
При переходе пользователя
на данный шаг, перед ним будут постепенно слева-направо появляться три графика
на одной оси координат.
Когда анимация закончится,
пользователь должен нажать на галочку.
17
При наведении на кривой
графики они будут становиться жирнее. Пользователь должен выбрать верный
график. Он зафиксируется в жирном состоянии. После чего можно написать выводы
по работе в письменной форме в специальном поле.
Нажать кнопку «Отправить»
На все вопросы готов ответить. Вот гугл-папка с макетами и файлом описания -
https://drive.google.com/drive/#folders/0B16ju6jZs...
Так же прикрепил макеты к самому сообщению здесь, они отображаются в колонке справа.
