Diagnosi Digitale Gratuita https://cdn.tailwindcss.com https://cdn.jsdelivr.net/npm/chart.js body { font-family: ‘Poppins’, sans-serif; background-color: #f8fafc; } .progress-bar { transition: width 0.5s ease-in-out; } .fade-in { animation: fadeIn 0.5s ease-in-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .question-container { display: none; } .question-container.active { display: block; animation: fadeIn 0.5s ease-in-out; } .btn-primary { background-color: #4f46e5; color: white; transition: all 0.3s ease; } .btn-primary:hover { background-color: #4338ca; transform: translateY(-2px); } .btn-secondary { background-color: #e5e7eb; color: #1f2937; transition: all 0.3s ease; } .btn-secondary:hover { background-color: #d1d5db; } /* Stili per gli slider */ input[type=”range”] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; background: #d1d5db; outline: none; opacity: 0.7; transition: opacity 0.2s; border-radius: 4px; } input[type=”range”]:hover { opacity: 1; } input[type=”range”]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; background: #4f46e5; cursor: pointer; border-radius: 50%; border: 2px solid #ffffff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } input[type=”range”]::-moz-range-thumb { width: 20px; height: 20px; background: #4f46e5; cursor: pointer; border-radius: 50%; border: 2px solid #ffffff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .slider-labels { display: flex; justify-content: space-between; margin-top: 5px; font-size: 0.875rem; /* text-sm */ color: #6b7280; /* text-gray-500 */ } .radio-button:checked + label { background-color: #4f46e5; color: white; border-color: #4f46e5; } .card { transition: all 0.3s ease; } .card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } /* Removed PDF specific styles */ /* .pdf-grayscale { filter: grayscale(100%); color: #000 !important; background-color: #fff !important; } .pdf-grayscale .bg-white { background-color: #fff !important; } .pdf-grayscale .bg-indigo-50 { background-color: #f8fafc !important; } .pdf-grayscale h2, .pdf-grayscale h3, .pdf-grayscale h4 { color: #000 !important; } .pdf-grayscale .text-indigo-700 { color: #000 !important; } .pdf-grayscale .text-gray-600, .pdf-grayscale .text-gray-700 { color: #333 !important; } .pdf-grayscale .text-indigo-600 { color: #000 !important; } .pdf-grayscale .progress-bar { background-color: #333 !important; } .pdf-grayscale .border-gray-300 { border-color: #ccc !important; } */ document.addEventListener(‘DOMContentLoaded’, () => { const startBtn = document.getElementById(‘start-btn’); const introSection = document.getElementById(‘intro-section’); const questionnaireSection = document.getElementById(‘questionnaire-section’); const progressContainer = document.getElementById(‘progress-container’); const progressBar = document.getElementById(‘progress-bar’); const progressText = document.getElementById(‘progress-text’); const progressPercentage = document.getElementById(‘progress-percentage’); const resultsSection = document.getElementById(‘results-section’); const totalScoreDisplay = document.getElementById(‘total-score’); const maturityLevelDisplay = document.getElementById(‘maturity-level’); // Removed PDF download button variable // const downloadPdfBtn = document.getElementById(‘download-pdf-btn’); const questionSections = [ ‘profile-section’, ‘online-presence-section’, ‘digital-marketing-section’, ‘ecommerce-section’, ‘internal-tools-section’, ‘innovation-section’, ‘culture-section’ ]; let currentSectionIndex = 0; const totalSections = questionSections.length; let userAnswers = {}; // Map section IDs to progress text const progressTexts = { ‘profile-section’: ‘Fase 1: Identificazione del profilo’, ‘online-presence-section’: ‘Fase 2: Presenza online’, ‘digital-marketing-section’: ‘Fase 2: Marketing digitale’, ‘ecommerce-section’: ‘Fase 2: E-commerce / Vendita online’, ‘internal-tools-section’: ‘Fase 2: Strumenti digitali interni’, ‘innovation-section’: ‘Fase 2: Innovazione e Tecnologie emergenti’, ‘culture-section’: ‘Fase 2: Cultura e Competenze digitali’, ‘results-section’: ‘Fase 3: Risultati’ }; // Function to update the progress bar const updateProgress = () => { const progress = ((currentSectionIndex + 1) / totalSections) * 100; progressBar.style.width = `${progress}%`; progressPercentage.textContent = `${Math.round(progress)}%`; const currentSectionId = questionSections[currentSectionIndex]; if (progressTexts[currentSectionId]) { progressText.textContent = progressTexts[currentSectionId]; } else if (currentSectionIndex === totalSections) { progressText.textContent = progressTexts[‘results-section’]; } }; // Function to show a specific section const showSection = (index) => { // Hide all question sections questionSections.forEach(id => { document.getElementById(id).classList.remove(‘active’); }); // Show the requested section if (index { const currentSectionId = questionSections[currentSectionIndex]; const sectionElement = document.getElementById(currentSectionId); // Select radio buttons, selects, AND range inputs const inputs = sectionElement.querySelectorAll(‘input[type=”radio”]:checked, select, input[type=”range”]’); inputs.forEach(input => { userAnswers[input.name || input.id] = input.value; }); }; // Function to calculate the total score and section scores const calculateResults = () => { let totalScore = 0; const sectionScores = { ‘online-presence’: 0, ‘digital-marketing’: 0, ‘ecommerce’: 0, ‘internal-tools’: 0, ‘innovation’: 0, ‘culture’: 0 }; // Define which questions belong to which section for scoring (adjust based on your form) const sectionQuestions = { ‘online-presence’: [‘website’, ‘mobile’, ‘seo’], ‘digital-marketing’: [‘social’, ‘ads’, ‘email’], ‘ecommerce’: [‘ecommerce’, ‘inventory’, ‘online-sales’], ‘internal-tools’: [‘crm’, ‘erp’, ‘cloud’], ‘innovation’: [‘rd’, ‘ai’, ‘data-analysis’], ‘culture’: [‘training’, ‘change’, ‘leadership’] }; for (const section in sectionQuestions) { sectionQuestions[section].forEach(question => { const answer = userAnswers; if (answer) { const score = parseInt(answer); if (!isNaN(score)) { sectionScores[section] += score; totalScore += score; } } }); } // Display total score and maturity level totalScoreDisplay.textContent = totalScore; maturityLevelDisplay.textContent = getMaturityLevel(totalScore); // Update section progress bars and scores for (const section in sectionScores) { const maxScore = sectionQuestions[section].length * 5; // Assuming max score per question is 5 const percentage = (sectionScores[section] / maxScore) * 100; document.getElementById(`${section}-progress`).style.width = `${percentage}%`; document.getElementById(`${section}-score`).textContent = `${sectionScores[section]}/${maxScore}`; } // Render chart renderChart(sectionScores); }; // Function to determine maturity level based on total score const getMaturityLevel = (score) => { // Define your score ranges and corresponding maturity levels if (score < 30) { return 'Livello Base'; } else if (score { const ctx = document.getElementById(‘resultsChart’).getContext(‘2d’); // Destroy existing chart if it exists if (resultsChart) { resultsChart.destroy(); } resultsChart = new Chart(ctx, { type: ‘radar’, data: { labels: [‘Presenza online’, ‘Marketing digitale’, ‘E-commerce’, ‘Strumenti interni’, ‘Innovazione’, ‘Cultura’], datasets: [{ label: ‘Punteggio per Area’, data: [ sectionScores[‘online-presence’], sectionScores[‘digital-marketing’], sectionScores[‘ecommerce’], sectionScores[‘internal-tools’], sectionScores[‘innovation’], sectionScores[‘culture’] ], backgroundColor: ‘rgba(79, 70, 229, 0.5)’, borderColor: ‘rgba(79, 70, 229, 1)’, borderWidth: 1 }] }, options: { responsive: true, scales: { r: { angleLines: { display: false }, suggestedMin: 0, suggestedMax: 15 // Max possible score per section } }, plugins: { legend: { display: false } } } }); }; // Function to show the results section const showResults = () => { questionnaireSection.classList.add(‘hidden’); resultsSection.classList.remove(‘hidden’); calculateResults(); progressText.textContent = progressTexts[‘results-section’]; progressPercentage.textContent = ‘100%’; progressBar.style.width = ‘100%’; }; // Removed generatePdf function // Event Listeners // Start button startBtn.addEventListener(‘click’, () => { introSection.classList.add(‘hidden’); questionnaireSection.classList.remove(‘hidden’); progressContainer.classList.remove(‘hidden’); showSection(0); // Show the first question section }); // Next buttons document.querySelectorAll(‘.next-btn’).forEach(button => { button.addEventListener(‘click’, () => { collectAnswers(); // Collect answers from the current section showSection(currentSectionIndex + 1); // Move to the next section }); }); // Previous buttons document.querySelectorAll(‘.prev-btn’).forEach(button => { button.addEventListener(‘click’, () => { showSection(currentSectionIndex – 1); // Move to the previous section }); }); // Removed PDF download button event listener // downloadPdfBtn.addEventListener(‘click’, generatePdf); // Contact form submission removed // Initial progress bar update updateProgress(); });