Интерактивный помощник (тест/quiz)
Описание проекта:
Работа только через безопасную сделку. Если все понравится, то далее можно будет работать и по другим задачам.
Обязательные требования:
**Интерактивный помощник (тест/quiz)**
===========================================
*1 Общее описание*
--------------------------------
На сайте safe дефис intex точка ру необходимо сделать интерактивный тест, выполненный в форме вопросов и ответов, который в итоге подскажет пользователю какие варианты товара ему подходят. Сайт написан на Joomla и Virtuemart. Работа будет вестись на моем сервере, специально для этого я сделаю зеркало сайта, чтобы разработка не мешала текущей работе потому, что на сайт идет реклама в данный момент времени. В работе можно использовать как готовый модуль теста, так и разработать свой модуль, разницы нет. Макет расположения элементов модуля находится в приложении так же как и вариант с мобильной версией, т. е. модуль должен быть адаптивным и при уменьшении ширины до определённых размеров должен переключаться в мобильную версию.
*2 Описание визуальных элементов*
----------------------------------------------------------------------
*2.1 Кнопка "Показать тест"*
-----------------
Начинается все с того, что с правой стороны по середине экрана пользователь видит картинку (изображение, на данный момент уточняется), он видит эту картинку все время. При скроллинге эта картинка остается на одном и том же месте и торчит из-за экрана. При нажатии на эту картинку появляется основное окно. Так же должен быть механизм, который через 15 сек(должна быть возможность изменить в конфиге). после того как пользователь находился на сайте, должен открывать это окно. Если пользователь нажимает на кнопку "закрыть окно", то окно больше не появляется автоматически.
*2.2 Основное окно (окно ответа на вопросы)*
--------------------------------------------------------------
- Сверху будет по середине заголовок, а справа будет находиться крестик с подписью "закрыть".
- Под заголовком по всю ширину будет находиться текст вопроса.
- Ниже текста вопроса будет комментарий к вопросу, шрифт меньше чем у текста вопроса.
- Далее будет несколько вариантов ответа на вопрос, которые будут представлены изображениями и текстом под этими изображениями.
- Количество ответов может быть от 1 до 6.
- После вариантов ответа на вопрос внизу с правой стороны будет написано шаг "n из m", где "n" – номер текущего шага,
"m" – количество всего шагов, которых необходимо пройти человеку. Полное количество шагов "m" может быть в диапазоне от 1 до 10, задается в конфиге.
- Шаги появляются последовательно один за одним, когда пользователь отвечает на вопрос нажатием на картинку или подпись картинки.
- Когда пользователь ответил на все вопросы он видит окно с результатом.
*2.3 Окно с результатом*
----------------------------------
- Заголовок окна – "Вам подходят следующие модели:", кнопка "закрыть" так же справа.
- Под заголовком комментарий к результату.
- Далее несколько вариантов ответа, вариантов может быть разное количество от 1 до 5. Варианты ответа представляют из себя товары из Virtuemart, которые отображаться стандартным образом как на сайте, в виде картинка товара и короткое описание товара, цена со скидкой и без скидки, а так же кнопка "купить". Кнопка "купить" работает, как на сайте.
- После вариантов ответа идет форма захвата, в которой небольшой подзаголовок с текстом: "Нет подходящих вариантов? Оставьте заявку и мы Вам перезвоним через 60 сек."
Далее 2 поля с подписью:
а. "Телефон" (данное поле обязательное, соответственно в поле ввода в конце перед двоеточием будет стоять "Звездочка". Данная звездочка говорить, что поле обязательно для заполнения)
б. поле ввода "Имя", оно не обязательное.
- В форме захвата будет кнопка "Связаться". При нажатии, на которую если заполнено поле с телефоном происходит отправка письма на
e-mail админа, в котором будут содержаться введенные пользователем данные, а так же вопросы и его ответы(текстовые) на них. Если поле с телефоном не заполнено, то оно становиться красным и под кнопкой "Связаться" появляется красный текст: "Заполните необходимые поля".
- После формы захвата будет 2 кнопки расположенные горизонтально
- Слева кнопка "Пройти тест еще раз". При нажатии на нее данные отчищаются и пользователь начинает тест с начала.
- Справа кнопка "Показать больше вариантов". При нажатии кнопки пользователь будет переходить по соответствующей ссылке.
*3 Описание работы прочих элементов*
-----------------------------------------------
- В конфиге сделать настройку showOnlyForNewUsers, если там false, то модуль работает для всех, а если true, то работаем по алгоритму описанному в следующем пункте.
- Кнопка "Показать тест" и автозапуск теста. В куках сайта есть код клиента (user_code), если он меньше 1662682, то кнопка "Показать тест" не отображается, автозапуск теста не работает, модуль себя вообще никак не проявляет.
- Автозапуск теста. Срабатывает через 15 секунд после открытия сайта. Срабатывание происходит только один раз, соотвественно метку о срабатывании хранить в куках.
- Кнопка "закрыть". При нажатии на кнопку "закрыть" окно закрывается и все ответы на вопросы сбрасываются. При следующем открытии теста пользователь видит первый вопрос.
- Если в конфиге нет такой комбинации ответов, которую выбрал пользователь, то админу отправляется соотвествующий текст и выбранная комбинация. А пользователю показывается "Окно с результатом", в котором результатов нет, а в комментарии написан заготовленный текст из конфига.
- Все тексты в модуле должны браться из конфига, чтобы их потом можно было легко поменять.
*4 Входные данные*
-------------------------------
- Вопросы. У вопросов есть текст, комментарий к вопросу и варианты ответа.
- У вариантов ответа есть картинка и подпись картинки. Каждая комбинация ответов на вопросы будет соответствовать своему итоговому результату. Соответственно их будет довольно много.
- У каждого результата от 1 до 5 видов товара, которые будут представлены в виде их id из virtuemart. Также у каждого варианта будет комментарий и ссылка, по которой человек будет переходить при нажатии на кнопку "показать больше вариантов", соответственно эти данные будут предоставлены в виде массива, который нужно будет хранить в конфиг файле.
*5 Дизайн*
----------------
- Дизайн должен быть простым и лаконичным, отражать дизайн сайта.
- Все тексты кроме заголовков должны быть отцентрованы по ширине.
- Все должно выглядеть ровно.
- Вопросы и варианты ответов должны быть посередине и либо с одним промежутком, либо распределены по ширине, смотря как будет лучше выглядеть.
*6 Приложения*
--------------------------
- Макет десктоп версии.
- Макет мобильной версии.
- Список вопросов (текст вопроса, комментарий к вопросу).
- Списки вариантов ответов на все вопросы(текст+картинка).
- Список результатов для каждой комбинацию ответов(комбинация, id товаров от 1 до 6 шт, комментарий к результату, ссылка для кнопки больше вариантов).
Если дочитали до конца, то напишите об этом в приветственном письме, для меня это будет знак к началу общения. Так жду сразу вопросы по ТЗ, что не ясно. Либо какие-то ваши умозаключения о способах решения данной задачи и т.п., по которым я пойму, что задание понятно и вы способны это выполнить.