Сделать HTML код и CSS оформление

На базе шаблона Moneymaker (шаблон для платформы OcSore1.5.5.1.2) нужно сделать HTML5 код (источник) для реализации прохождения он-лайн теста на сайте http://chzda.ru/. CSS оформление в отдельном файле с указанием всех классов.

Адаптивность встроенного HTML модуля Moneymaker под настольные компы и под мобильные гаджеты уже сделана разработчиком шаблона, нужно сохранить в разрабатываемом коде совместимость в плане адаптивности и оформления под настольные компы и под мобильные гаджеты.

Тест состоит из 22 вопросов, на каждый предложены два варианта ответов - "а" и "б"(тексты вопросов и вариантов ответов подготовлены), тестируемому предлагается поставить галочку (или точку) напротив одного из двух предлагаемых вариантов ответов - или "а" или "б". Вопросы и варианты ответов для тестируемого показываются сразу все ("простынёй")

И 5-ти различных вариантов результатов теста (в зависимости от набранных баллов).

Алгоритм начисления баллов: за каждый ответ "а" начисляется 1 балл, за ответ "б" - 0 баллов, ответы на 22-ой вопрос не учитываются.

Подсчет результатов:

0-3 балла - показывается текст 1-го результата. (текст имеется - 800 символов)

4-7 баллов - показывается текст 2-го результата. (текст имеется - 800 символов)

... И так далее - всего 5 вариантов результатов теста.

Примерная визуализация (оформить красиво и стильно - можно подложить какую-нибудь картинку полупрозрачную):

Вопрос 1:

После семейной ссоры либо получив «нагоняй» от начальства я обычно…

( v ) ( )

…наливаю себе рюмочку или бокальчик для успокоения …стараюсь трезво проанализировать ситуацию

Вопрос 2:

"Учудив", будучи подшофе, громко скажете: «Я “невиноватый”!»?

( ) (v )

Так какой спрос с пьяного человека? Всегда несу ответственность за свои поступки, независимо от состояния.

.....Ну и так далее..... Это примерная визуализация.

Расположение вариантов ответов:

четные вопросы: вариант "А" слева, вариант "Б" - справа

нечетные вопросы: вариант "Б" слева, вариант "А" - справа

В конце теста кнопка "Посмотреть результаты" с программной проверкой на заполненность всех ответов - если в вопросе (вопросах) не указан вариант ответа, то сообщается об этом с указание номеров "не отвеченных" вопросов и автоматической прокруткой до первого по списку неотвеченного вопроса (нужны, наверное, будут якоря).

Ну и после нажатия кнопки "Посмотреть результаты" вопросы и ответы "убираются" и выводиться один из 5-ти подходящих по количеству набранных баллов вариантов результатов теста в зависимости от количества набранных баллов (тоже красиво оформленный), само количество баллов показывать не надо, только текстовый результат теста. Внизу появляются кнопки: Первая кнопка - "Вернуться в магазин", остальные кнопки поменьше размером - "Предложить пройти тест друзьям" с социальными кнопками (ВК, Одноклассники, Мой мир, Твиттер, Фейсбук) чтобы в формируемой ссылке автоматически прописывались название теста, ссылка на него и вставлялась какая-нибудь картинка.