Как сделать прогресс бар для опросника с разными ответами в зависимости от вопроса и его ответа на alpine js
У меня вопросы имеют два ответа да или нет, в зависимости от ответа может быть еще один вопрос или сразу же ответ , ответами считаются те обьекты у которых choices: [], nextQuestions: [], пустые, как можно реализовать прогресс бар чтобы у каждого обекта было по 10% и при ответе он достигал 100
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
<link rel="stylesheet" href="./styles/main.css">
<title>Quiz</title>
</head>
<body>
<div class="wrapper" x-data="{
currentQuestionIndex: 0,
questions: [
{
id: 'Question1',
number: '01',
text: 'Is your company a manufacturer, importer, or supplier of a product?',
choices: ['Yes', 'No'],
nextQuestions: ['Question9', 'Question2']
},
{
id: 'Question2',
number: '02',
text: 'Does your company promote or provide services through a website that fall under the BFSG:',
description: 'Telecommunications services (telephone, telegraph, telex, fax, mobile phones, satellite communication systems, email, online communication forms, data processing, storage, and handling, electronic information exchange) Passenger transport services Consumer banking services E-books E-commerce services (online stores, marketplaces, electronic software sales services, platforms for selling services and applications, financial systems and online banking, courier or postal services, logistics and transport services, internet marketing and related services, electronic insurance services, online booking or payment for any product or service, appointment scheduling, hotel and tour bookings, meeting reservations).',
choices: ['Yes', 'No'],
nextQuestions: ['Question4', 'Question3'],
prevQuestion: 'Question1'
},
{
id: 'Question3',
number: '03',
description: 'Currently, your website is not subject to BFSG regulations. However, it\'s possible that the scope of the Accessibility Enhancement Act will expand in the coming years. Additionally, accessibility is becoming a key quality indicator for websites and applications, influencing their ranking in Google search results. By making your website or application barrier-free, you can attract a broader audience. According to the Federal Statistical Office, 9.4% of Germany\'s population had severe disabilities as of the end of 2021. Furthermore, 71% of people with disabilities immediately leave a website if it is not accessible.',
choices: [],
nextQuestions: [],
},
{
id: 'Question4',
number: '03',
text: 'Услуга оказывается только в сегменте B2B?',
choices: ['Yes', 'No'],
nextQuestions: ['Question5', 'Question6'],
prevQuestion: 'Question2'
},
{
id: 'Question5',
number: '04',
description: 'The BFSG specifies that accessibility requirements generally apply only to consumer goods and services provided to consumers. The BFSG mainly applies to online stores or websites in the B2C sector. However, if your site is B2B, it must clearly state that the offers are valid only for the B2B segment and that you do not provide services to consumers.',
choices: [],
nextQuestions: []
},
{
id: 'Question6',
number: '04',
text: 'Do you provide services in the B2C segment or in a mixed segment, but the company has an officially established status as a micro-enterprise (with fewer than ten employees, maximum annual turnover not exceeding 2 million euros, or annual balance sheet total not exceeding 2 million euros)?',
choices: ['Yes', 'No'],
prevQuestion: 'Question4',
nextQuestions: ['Question7', 'Question8']
},
{
id: 'Question7',
description: 'For micro-enterprises offering services regulated by the BFSG, there is currently an exception. Therefore, no BFSG requirements are imposed on your website, online store, or application at this time. However, it\' s possible that the scope of the Accessibility Enhancement Act will expand in the coming years. Additionally, accessibility is becoming a key quality indicator for websites and applications, influencing their ranking in Google search results. By making your website or application barrier-free, you can attract a broader audience. According to the Federal Statistical Office, 9.4% of Germany\'s population had severe disabilities as of the end of 2021. Furthermore, 71% of people with disabilities immediately leave a website if it is not accessible.',
choices: [],
nextQuestions: []
},
{
id: 'Question8',
description: 'Your website or online store falls under the scope of the BFSG, and it must become barrier-free no later than June 28, 2025.',
choices: [],
nextQuestions: []
},
{
id: 'Question9',
number: '02',
text: 'Does your product fall under the BFSG? (Digital products such as computers, including operating systems, tablets and mobile phones, Internet-enabled TVs, e-readers, payment terminals, including associated goods and software, ATMs, ticket machines, information terminals and terminals for telecommunications services, interactive terminals used for accessing audiovisual media services)',
choices: ['Yes', 'No'],
nextQuestions: ['Question10', 'Question11'],
prevQuestion: 'Question1'
},
{
id: 'Question10',
description: 'If your product or service falls under the BFSG, retailers, manufacturers, importers, and suppliers of the product or service must comply with accessibility requirements. Therefore, the law also applies to the websites and mobile applications of such manufacturers and suppliers. Your website must become barrier-free no later than June 28, 2025. ',
choices: [],
nextQuestions: []
},
{
id: 'Question11',
number: '03',
text: 'Is your product not covered by the BFSG but sold through an online store?',
choices: ['Yes', 'No'],
nextQuestions: ['Question12', 'Question18'],
prevQuestion: 'Question9'
},
{
id: 'Question12',
text: ' Selling a product through an online store falls under the category of e-commerce services, which generally falls under the scope of the BFSG. However, certain details need to be clarified.',
choices: ['Ok'],
nextQuestions: ['Question13'],
prevQuestion: 'Question11'
},
{
id: 'Question13',
number: '04',
text: 'Does the online store operate exclusively in the B2B segment?',
choices: ['Yes', 'No'],
nextQuestions: ['Question14', 'Question15'],
prevQuestion: 'Question12'
},
{
id: 'Question14',
description: 'The BFSG specifies that accessibility requirements typically apply only to consumer goods and services provided to consumers. BFSG primarily applies to online stores or websites in the B2C sector. However, in the case of a B2B online store, it must explicitly state on the website that it is a B2B store and does not sell goods to consumers. 3.5',
choices: [],
nextQuestions: []
},
{
id: 'Question15',
number: '05',
text: 'Does your online store operate in the B2C segment or in a mixed segment, but the company has an officially established micro-enterprise status (less than ten employees, maximum annual turnover does not exceed 2 million euros or an annual balance of 2 million euros)?',
choices: ['Yes', 'No'],
nextQuestions: ['Question16', 'Question17'],
prevQuestion: 'Question13'
},
{
id: 'Question16',
description: 'For micro-enterprises offering services regulated by the BFSG, there is currently an exception. Therefore, no BFSG requirements are imposed on your website, online store, or application at this time. However, it\' s possible that the scope of the Accessibility Enhancement Act will expand in the coming years. Additionally, accessibility is becoming a key quality indicator for websites and applications, influencing their ranking in Google search results. By making your website or application barrier-free, you can attract a broader audience. According to the Federal Statistical Office, 9.4% of Germany\' s population had severe disabilities as of the end of 2021. Furthermore, 71% of people with disabilities immediately leave a website if it is not accessible. ',
choices: [],
nextQuestions: []
},
{
id: 'Question17',
description: 'Your online store falls under the scope of the BFSG, and it must become barrier-free no later than June 28, 2025.',
choices: [],
nextQuestions: []
},
{
id: 'Question18',
number: '04',
text: 'The product is not covered by the BFSG, you have an information website to present the product. Does the website offer offers and is there an option for online booking or payment?',
choices: ['Yes', 'No'],
nextQuestions: ['Question20', 'Question19'],
prevQuestion: 'Question11'
},
{
id: 'Question19',
description: 'Currently, your website is not subject to BFSG regulations. However, it\' s possible that the scope of the Accessibility Enhancement Act will expand in the coming years. Additionally, accessibility is becoming a key quality indicator for websites and applications, influencing their ranking in Google search results. By making your website or application barrier-free, you can attract a broader audience. According to the Federal Statistical Office, 9.4% of Germany\' s population had severe disabilities as of the end of 2021. Furthermore, 71% of people with disabilities immediately leave a website if it is not accessible. ',
choices: [],
nextQuestions: []
},
{
id: 'Question20',
text: 'Your website falls under the category of e-commerce services, which generally falls under the scope of the BFSG. However, we need to clarify some details.',
choices: ['Ok'],
nextQuestions: ['Question21'],
prevQuestion: 'Question18'
},
{
id: 'Question21',
number: '05',
text: 'Does your website operate exclusively in the B2B segment?',
choices: ['Yes','No'],
nextQuestions: ['Question22', 'Question23'],
prevQuestion: 'Question20'
},
{
id: 'Question22',
description: 'The BFSG specifies that accessibility requirements generally apply only to consumer goods and services provided to consumers. The BFSG mainly applies to online stores or websites in the B2C sector. However, if your site is B2B, it must clearly state that the offers are valid only for the B2B segment and that you do not provide services to consumers.',
choices: [],
nextQuestions: []
},
{
id: 'Question23',
number: '06',
text: 'Does your website operate in the B2C segment or in a mixed segment, but the company has an officially established micro-enterprise status (less than ten employees, maximum annual turnover does not exceed 2 million euros or an annual balance of 2 million euros)?',
choices: ['Yes','No'],
nextQuestions: ['Question24', 'Question25'],
prevQuestion: 'Question21'
},
{
id: 'Question24',
description: 'For micro-enterprises offering services regulated by the BFSG, there is currently an exception. Therefore, no BFSG requirements are imposed on your website, online store, or application at this time. However, it\' s possible that the scope of the Accessibility Enhancement Act will expand in the coming years. Additionally, accessibility is becoming a key quality indicator for websites and applications, influencing their ranking in Google search results. By making your website or application barrier-free, you can attract a broader audience. According to the Federal Statistical Office, 9.4% of Germany\' s population had severe disabilities as of the end of 2021. Furthermore, 71% of people with disabilities immediately leave a website if it is not accessible. ',
choices: [],
nextQuestions: []
},
{
id: 'Question25',
description: 'Your website falls under the scope of the BFSG, and it must become barrier-free no later than June 28, 2025.',
choices: [],
nextQuestions: []
}
],
get progress() {
return ((this.currentQuestionIndex + 1) / this.questions.length) * 100;
}
}">
<section class="quiz">
<template x-for="(question, index) in questions" :key="index">
<div x-show="currentQuestionIndex === index" x-bind:id="question.id">
<div class="top">
<div class="left">
<template x-if="question.prevQuestion">
<button class="prevBtn" type="button"
@click="currentQuestionIndex = questions.findIndex(q => q.id === question.prevQuestion)">
</button>
</template>
</div>
<div class="center">
<div class="progress-bar" :style="{ width: progress + '%' }" x-text="progress + '%'"></div>
</div>
<div class="right"></div>
</div>
<div class="content">
<div class="left" x-text="question.number"></div>
<div class="center">
<div class="questions">
<h1 class="question-text" x-text="question.text"></h1>
<p x-text="question.description"></p>
</div>
<div class="button-container">
<template x-for="(choice, choiceIndex) in question.choices" :key="choiceIndex">
<button class="button " type="button" x-bind:class="{
'button-yes': choiceIndex === 0,
'button-no': choiceIndex === 1
}" x-text="choice"
@click="currentQuestionIndex = questions.findIndex(q => q.id === question.nextQuestions[choiceIndex])"></button>
</template>
</div>
</div>
<div class="right"></div>
</div>
<div class="bottom"></div>
</div>
</template>
</section>
</div>
</body>
</html>