{"_id":"r-dev-quiz","name":"r-dev-quiz","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"r-dev-quiz","version":"1.0.0","description":"Simple JS Library for quiz","main":"src/quiz.js","repository":{"type":"git","url":"git+https://github.com/arti-set-dev/quiz.git"},"scripts":{"build":"webpack","dev":"webpack --mode development"},"keywords":["quiz"],"author":{"name":"arti-set-dev"},"license":"MIT","bugs":{"url":"https://github.com/arti-set-dev/quiz/issues"},"homepage":"https://github.com/arti-set-dev/quiz#readme","devDependencies":{"@babel/core":"^7.16.7","@babel/plugin-transform-object-assign":"^7.16.7","@babel/preset-env":"^7.16.8","babel-loader":"^8.2.3","css-loader":"^6.5.1","file-loader":"^6.2.0","webpack":"^5.66.0","webpack-cli":"^4.9.1","mini-css-extract-plugin":"^0.11.0","optimize-css-assets-webpack-plugin":"^5.0.3","style-loader":"^1.2.1"},"browserslist":["defaults"],"gitHead":"a4f6104aec9bb0f994a870431f58fd19aff55088","_id":"r-dev-quiz@1.0.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-7RhJGaT/SKnwUtWfHxAd3drpOuqfqSKe8JQoF1lgg2o4D0Cmlde7HhGKw0dPUOd3BGN+XVClI8A6GNQBKsAOzw==","shasum":"ad3f293f2b3f6feb2782b0ef830499906adbcf1e","tarball":"https://registry.npmjs.org/r-dev-quiz/-/r-dev-quiz-1.0.0.tgz","fileCount":10,"unpackedSize":27050,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFH+H7HPZUGMuSq9c5ipzUQDEVosKxn1MKqrInhCIJ8bAiAzMepxTiJV8oduHbJFZ9OkHgNTVIbWkG5wG8sXnkc28w=="}]},"_npmUser":{"name":"arti-set-dev","email":"website.development593@gmail.com"},"directories":{},"maintainers":[{"name":"arti-set-dev","email":"website.development593@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/r-dev-quiz_1.0.0_1711101216308_0.6228694731711129"},"_hasShrinkwrap":false}},"time":{"created":"2024-03-22T09:53:36.307Z","1.0.0":"2024-03-22T09:53:36.435Z","modified":"2024-03-22T09:53:36.976Z"},"maintainers":[{"name":"arti-set-dev","email":"website.development593@gmail.com"}],"description":"Simple JS Library for quiz","homepage":"https://github.com/arti-set-dev/quiz#readme","keywords":["quiz"],"repository":{"type":"git","url":"git+https://github.com/arti-set-dev/quiz.git"},"author":{"name":"arti-set-dev"},"bugs":{"url":"https://github.com/arti-set-dev/quiz/issues"},"license":"MIT","readme":"# Quiz\r\n---\r\n\r\n## Описание\r\n\r\nНебольшой плагин квиза с возможностью гибко менять шаблон разметки и настраивать обязательные поля.\r\n\r\nДемо: https://codepen.io/arti-set-dev/pen/qBwmbJg\r\n\r\n**Преимущества данной библиотеки**:\r\n\r\n-отсутствие зависимостей\r\n\r\n-легковесная\r\n\r\n-гибкая валидация\r\n\r\n-возможность создать свой шаблон разметки\r\n\r\n## Начало работы\r\n\r\nДля начала работы загрузите плагин в свой проект: \r\n\r\n`npm i r-dev-quiz`\r\n\r\nНапишите базовую разметку:\r\n\r\n```html\r\n
\r\n
\r\n
\r\n```\r\n\r\nСоздайте массив с вопросами:\r\n\r\nПример:\r\n\r\n``` js\r\nconst quizData = [{\r\n number: 1,\r\n title: \"На какую сумму вы рассчитываете?\",\r\n answer_alias: \"money\",\r\n answers: [{\r\n answer_title: \"500 рублей\",\r\n type: \"checkbox\"\r\n },\r\n {\r\n answer_title: \"5000 рублей\",\r\n type: \"checkbox\"\r\n },\r\n {\r\n answer_title: \"Введу текстом\",\r\n type: \"text\"\r\n }\r\n ]\r\n},\r\n{\r\n number: 2,\r\n title: \"Какой именно вам нужен сайт?\",\r\n answer_alias: \"great\",\r\n answers: [{\r\n answer_title: \"Лендинг-пейдж\",\r\n type: \"radio\"\r\n },\r\n {\r\n answer_title: \"Корпоративный сайт\",\r\n type: \"radio\"\r\n },\r\n {\r\n answer_title: \"Интернет-магазин\",\r\n type: \"radio\"\r\n }\r\n ]\r\n},\r\n{\r\n number: 3,\r\n title: \"Уточните детали реализации\",\r\n answer_alias: \"details\",\r\n answers: [{\r\n answer_title: \"детали реализации\",\r\n type: \"text\"\r\n },\r\n ]\r\n},\r\n{\r\n number: 4,\r\n title: \"На какую сумму вы рассчитываете?\",\r\n answer_alias: \"money\",\r\n answers: [{\r\n answer_title: \"500 рублей\",\r\n type: \"checkbox\"\r\n },\r\n {\r\n answer_title: \"5000 рублей\",\r\n type: \"checkbox\"\r\n },\r\n {\r\n answer_title: \"Введу текстом\",\r\n type: \"text\"\r\n }\r\n ]\r\n},\r\n{\r\n number: 5,\r\n title: \"Вы успешно ответили на все вопросы\",\r\n desc: 'Выберете удобный способ связи и мы свяжемся с вами в ближайшее время',\r\n},\r\n];\r\n```\r\n\r\nСоздайте шаблон разметки под ваши потребности:\r\n\r\nПример:\r\n\r\n```js\r\nconst quizTemplate = (quizData) => {\r\n const template = quizData?.map(question => {\r\n const { number, title, answer_alias } = question;\r\n const answers = question.answers?.map(answer => {\r\n const { answer_title, type } = answer;\r\n return `\r\n\r\n \r\n\r\n\t\t`;\r\n })\r\n return `\r\n
\r\n
${number} / ${quizData.length}
\r\n
\r\n ${title}\r\n ${number === quizData.length ? 'Выберете удобный способ связи и мы свяжемся с вами в ближайшее время' : ''}\r\n
\r\n
\r\n ${number !== quizData.length ?\r\n `${answers?.join('')}` :\r\n ` \r\n \r\n \r\n `}\r\n
\r\n
\r\n ${number !== 1 && number !== quizData.length ? '' : ''}\r\n ${number !== quizData.length ?\r\n '' :\r\n ''}\r\n
\r\n
\r\n `\r\n })\r\n\r\n return template;\r\n}\r\n```\r\n\r\nИнициализируйте библиотеку:\r\n\r\n```js\r\nimport Quiz from 'r-quiz';\r\nconst quiz = new Quiz('.quiz', quizTemplate(quizData));\r\n```\r\n\r\n## Отправка данных на сервер:\r\n\r\nДля отправки данных после инициализации воспользуйтесь встроенной функцией `isSending`:\r\n\r\n```js\r\nquiz.options.isSending = (quizEl) => {\r\n const formData = new FormData();\r\n\r\n for (let item of quiz.resultArray) {\r\n for (let obj in item) {\r\n formData.append(obj, item[obj].substring(0, item[obj].length - 1))\r\n }\r\n }\r\n\r\n fetch('mail.php', {\r\n method: 'POST',\r\n body: formData\r\n });\r\n}\r\n```\r\n\r\nВнутри этой функции вы можете писать любую логику.\r\n\r\n## Настройки\r\n\r\n### progressBar\r\n\r\nПо умолчанию `true`. Для изменения параметра после инициализации пропишите следующее:\r\n```js\r\nquiz.options.progressBar = false;\r\n```\r\n### Использование класса req\r\n\r\nВы можете задавать обязательные поля без заполнения которых квиз не перейдёт к следующему вопросу и не отправит данные.\r\n\r\nДля этого в массиве объектов всех вопросов вы можете написать следующее:\r\n\r\n```js\r\nconst quizData = [{\r\n number: 1,\r\n title: \"На какую сумму вы рассчитываете?\",\r\n answer_alias: \"money\",\r\n answers: [{\r\n answer_title: \"500 рублей\",\r\n classes: 'req',\r\n type: \"checkbox\"\r\n },\r\n {\r\n answer_title: \"5000 рублей\",\r\n type: \"checkbox\"\r\n },\r\n {\r\n answer_title: \"Введу текстом\",\r\n type: \"text\",\r\n }\r\n ]\r\n},\r\n];\r\n```\r\n\r\nБыл добавлен ключ classes со значением req в первый чекбокс.\r\n\r\nДалее выведите класс в шаблоне:\r\n\r\n```js\r\nconst quizTemplate = (quizData) => {\r\n const template = quizData?.map(question => {\r\n const { number, title, answer_alias } = question;\r\n const answers = question.answers?.map(answer => {\r\n const { answer_title, type, classes } = answer;\r\n return `\r\n\r\n \r\n\r\n\t\t`;\r\n })\r\n return `\r\n
\r\n
${number} / ${quizData.length}
\r\n
\r\n ${title}\r\n ${number === quizData.length ? 'Выберете удобный способ связи и мы свяжемся с вами в ближайшее время' : ''}\r\n
\r\n
\r\n ${number !== quizData.length ?\r\n `${answers?.join('')}` :\r\n ` \r\n \r\n \r\n `}\r\n
\r\n
\r\n ${number !== 1 && number !== quizData.length ? '' : ''}\r\n ${number !== quizData.length ?\r\n '' :\r\n ''}\r\n
\r\n
\r\n `\r\n })\r\n\r\n return template;\r\n}\r\n```\r\n\r\nГотово. Теперь квиз не перейдёт к следующему вопросу пока не будет отмечен обязательный чекбокс. Эту логику можно примерять ко всем инпутам в вашем квие.","readmeFilename":"readme.md"}