${index + 1}. ${q.text}

`; questionnaireContainer.appendChild(card); }); }; const calculateAndRenderReport = () => { // Gather answers const formData = new FormData(ethicsForm); answers = Object.fromEntries(formData.entries()); let score = 0; let applicableQuestions = 0; questions.forEach(q => { if (answers[q.id] !== 'na') { applicableQuestions++; if (answers[q.id] === 'yes') { score++; } } }); const compliancePercentage = applicableQuestions > 0 ? Math.round((score / applicableQuestions) * 100) : 100; // Render Summary let summaryColor = 'text-green-600'; let summaryText = 'High Compliance'; if (compliancePercentage < 50) { summaryColor = 'text-red-600'; summaryText = 'Low Compliance - Review Recommended'; } else if (compliancePercentage < 80) { summaryColor = 'text-yellow-600'; summaryText = 'Moderate Compliance - Areas for Improvement'; } document.getElementById('reportSummary').innerHTML = `

${compliancePercentage}%

${summaryText}

`; // Render Details document.getElementById('reportDate').textContent = answers.scenarioDate; document.getElementById('reportDescription').textContent = answers.scenarioDescription; // Render Answer Breakdown const reportAnswersContainer = document.getElementById('reportAnswers'); reportAnswersContainer.innerHTML = ''; questions.forEach(q => { const answer = answers[q.id] || 'N/A'; let answerColor = 'text-gray-500'; if (answer === 'yes') answerColor = 'text-green-600'; if (answer === 'no') answerColor = 'text-red-600'; reportAnswersContainer.innerHTML += ` `; }); }; // === Tab Navigation Logic === const validateTab = (tabIndex) => { const inputs = tabContents[tabIndex].querySelectorAll('input[required], textarea[required]'); for (const input of inputs) { if (!input.value.trim()) { input.classList.add('border-red-500'); return false; } input.classList.remove('border-red-500'); } if (tabIndex === 1) { // Questionnaire tab for(const q of questions){ const radios = document.getElementsByName(q.id); if (![...radios].some(r => r.checked)) { radios[0].closest('.question-card').classList.add('border-red-500'); return false; } radios[0].closest('.question-card').classList.remove('border-red-500'); } } return true; }; const updateTabs = () => { tabContents.forEach((content, index) => { content.classList.toggle('hidden', index !== currentTab); tabButtons[index].classList.toggle('active', index === currentTab); }); prevBtn.disabled = currentTab === 0; nextBtn.disabled = currentTab === tabButtons.length - 1; if (currentTab === tabButtons.length - 1) { calculateAndRenderReport(); } }; tabButtons.forEach((btn, index) => btn.addEventListener('click', () => { if (index > currentTab && !validateTab(currentTab)) return; currentTab = index; updateTabs(); })); prevBtn.addEventListener('click', () => { if (currentTab > 0) { currentTab--; updateTabs(); } }); nextBtn.addEventListener('click', () => { if (currentTab < tabButtons.length - 1) { if (!validateTab(currentTab)) return; currentTab++; updateTabs(); } }); // === PDF Download Logic === downloadPdfBtn.addEventListener('click', () => { const { jsPDF } = window.jspdf; const pdfContent = document.getElementById('pdfContent'); html2canvas(pdfContent, { scale: 2 }).then(canvas => { const imgData = canvas.toDataURL('image/png'); const pdf = new jsPDF({ orientation: 'portrait', unit: 'pt', format: 'a4' }); const pdfWidth = pdf.internal.pageSize.getWidth(); const pdfHeight = pdf.internal.pageSize.getHeight(); const canvasAspectRatio = canvas.width / canvas.height; const margin = 40; let imgFinalWidth = pdfWidth - (margin * 2); let imgFinalHeight = imgFinalWidth / canvasAspectRatio; if (imgFinalHeight > pdfHeight - (margin * 2)) { imgFinalHeight = pdfHeight - (margin * 2); imgFinalWidth = imgFinalHeight * canvasAspectRatio; } const x = (pdfWidth - imgFinalWidth) / 2; const y = margin; pdf.addImage(imgData, 'PNG', x, y, imgFinalWidth, imgFinalHeight); pdf.save('Workplace_Ethics_Report.pdf'); }); }); // Initial setup calls renderQuestions(); updateTabs(); });