npfsb-corporate-quiz v1.0.0
Квиз модуль для НПФ Сбербанка
Содержит 2 компонента: опросник и карточки. Компоненты зависят друг от друга, т.е. при прохождении опросника среди карточек будет выбрана наиболее подходящая программа. Компонент карточек можно использовать отделньо, но тогда не будет выбора наиболее подходящей.
Команды
npm start
Запуск в девелоп моде http://localhost:3000
npm run build:lib
Сборка библиотки
npm run build
Сборка проекта
Порядок сборки показан ниже. Перед тем, как пушить изменения - необходимо собрать проект
npm run build:lib
npm run build
Квиз
Функция:
mountQuiz(quizId, questionsList, linkId, textValues)
quizId - id блока, в котором будет отрендерен компонент
questionsList - массив объектов, каждый из которых содержит в себе текст вопроса, а также дата-марку.
dataMark - число до точки определяет номер вопроса, число после точки - номер ответа внутри.
Пример questionsList:
[
{
text: 'тест1',
dataMark: '1.1'
},
{
text: 'тест2',
dataMark: '1.2'
},
{
text: 'тест3',
dataMark: '1.3'
},
{
text: '2',
dataMark: '2.1'
}
]
linkId - id элемента, до которого будет происходить скроллинг после ответа на последний вопрос
textValues - объект, содержащий в себе 2 поля, mainTitle и subTitle. Оба поля являются строкой и отвечают за заголовки квиза.
Пример:
{
mainTitle: 'Проверим, какая корпоративная пенсионная программа нужна Вашей компании?',
subTitle: 'Какие из перечисленных запросов ближе всего отражают цели Вашей компании?'
}
Вместо функции можно импортировать React компонент Quiz. Компонент ождиает следующие пропсы: questionsList, linkId, textValues.
Карточки
Функция:
mountCards(cardsId, answersList, programs)
cardsId - id блока, в котором будет отрендерен компонент
answersList - массив объектов, каждый из которых содержит в себе номер ответа, а также строку - комбинацию ответов.
Пример:
[
{
answerNumber: 1,
answersKey: '1.1, 2.1'
},
{
answerNumber: 2,
answersKey: '1.2, 2.1'
},
{
answerNumber: 3,
answersKey: '1.3,2.1'
} ]
answerNumber - номер ответа, соответствует номеру карточки, которая станет активной.
answersKey - ключ ответа. Строка, содержащая в себе все dataMark, необходимые для ответа. Каждая dataMark внутри строки должна быть разделена запятой.
programs - массив, содержащий объекты карточек. Каждая карточка состоит из title, text, advantagesList. advantagesList - массив из строк. Каждая строка - отдельная строка, которая будет отображаться при нажатии кнопки "подробнее" на карточке.
Пример:
[
{
title: 'Уникальный заголовок 1',
text: 'промо текст промо текст промо текст промо текст промо текст промо текст промо текст промо текст промо текст промо текст промо текст ',
advantagesList: [
'1',
'2',
'3'
]
},
{
title: 'Уникальный заголовок 2',
text: 'промо текст',
advantagesList: [
'1',
'2',
'3'
]
},
{
title: 'Уникальный заголовок 3',
text: 'промо текст',
advantagesList: [
'1',
'2',
'3'
]
}
]
Вместо функции можно импортировать React компонент Cards. Компонент ождиает следующие пропсы: answersList, programs.
Стилизация
Для стилизации используются styled-components. Т.к. данный модуль может использоваться в дальнейшем в других проектах, имеющих иной дизайн, каждый компонент проименован по БЭМ для добавления внешних стилей.
Картинки для карточек
Каждой карточке задается уникальный индентификатор program-card--${id}, где id - номер карточки. Для загрузки изображения необходимо указать свойство background-image для program-card__image.
4 years ago