${item.description}

${this.scoreOptions.map(opt => `${opt.text}`).join('')} `; tabPanel.appendChild(criterionDiv); }); } this.elements.tabPanelsContainer.appendChild(tabPanel); }); // Re-cache tabLinks and tabPanels after dynamic rendering this.elements.tabLinks = document.querySelectorAll('.ico-tab-link'); this.elements.tabPanels = document.querySelectorAll('.ico-tab-panel'); }, attachEventListeners: function() { // Tab links are handled by openTab via onclick attribute if (this.elements.prevTabBtn) this.elements.prevTabBtn.addEventListener('click', () => this.navigateTabs('prev')); if (this.elements.nextTabBtn) this.elements.nextTabBtn.addEventListener('click', () => this.navigateTabs('next')); // Event listeners for score/notes changes (delegated) this.elements.tabPanelsContainer.addEventListener('change', (event) => { if (event.target.tagName === 'SELECT' && event.target.id.startsWith('score_')) { const categoryId = event.target.dataset.category; const itemId = event.target.dataset.itemid; this.updateScore(categoryId, itemId, 'score', parseInt(event.target.value)); } }); this.elements.tabPanelsContainer.addEventListener('input', (event) => { if (event.target.tagName === 'TEXTAREA' && event.target.id.startsWith('notes_')) { const categoryId = event.target.dataset.category; const itemId = event.target.dataset.itemid; this.updateScore(categoryId, itemId, 'notes', event.target.value); } }); // Attach to dynamically created buttons in results tab this.elements.tabPanelsContainer.addEventListener('click', (event) => { if (event.target.id === 'icoCalculateScoreBtn') { this.calculateAndDisplayResults(); } else if (event.target.id === 'icoDownloadPdfBtn') { this.generatePDF(); } }); }, openTab: function(event, tabId) { this.elements.tabPanels.forEach(panel => panel.classList.remove('active')); this.elements.tabLinks.forEach(link => link.classList.remove('active')); const selectedTabPanel = document.getElementById(tabId); if (selectedTabPanel) selectedTabPanel.classList.add('active'); this.elements.tabLinks.forEach((link, index) => { if (link.getAttribute('onclick') && link.getAttribute('onclick').includes(tabId)) { link.classList.add('active'); this.currentTabIndex = index; } }); // If event exists and it's a direct click on a tab link (not programmatic) if (event && event.currentTarget && event.currentTarget.classList.contains('ico-tab-link')) { this.elements.tabLinks.forEach(l => l.classList.remove('active')); event.currentTarget.classList.add('active'); this.elements.tabLinks.forEach((link, index) => { if (link === event.currentTarget) this.currentTabIndex = index; }); } this.updateNavigationButtons(); }, updateNavigationButtons: function() { if (!this.elements.prevTabBtn || !this.elements.nextTabBtn) return; this.elements.prevTabBtn.disabled = this.currentTabIndex === 0; this.elements.nextTabBtn.disabled = this.currentTabIndex >= this.elements.tabLinks.length - 1; }, navigateTabs: function(direction) { let newTabIndex = this.currentTabIndex; if (direction === 'next' && this.currentTabIndex < this.elements.tabLinks.length - 1) newTabIndex++; else if (direction === 'prev' && this.currentTabIndex > 0) newTabIndex--; const targetTabLink = Array.from(this.elements.tabLinks)[newTabIndex]; // Convert NodeList to Array to use index if (targetTabLink) targetTabLink.click(); }, updateScore: function(categoryId, itemId, field, value) { if (!this.userScores[categoryId]) this.userScores[categoryId] = {}; if (!this.userScores[categoryId][itemId]) this.userScores[categoryId][itemId] = { score: 0, notes: '' }; this.userScores[categoryId][itemId][field] = value; this.saveScores(); }, saveScores: function() { localStorage.setItem('icoUserScores', JSON.stringify(this.userScores)); }, loadScores: function() { const saved = localStorage.getItem('icoUserScores'); if (saved) { this.userScores = JSON.parse(saved); // Populate UI with loaded scores Object.keys(this.userScores).forEach(categoryId => { Object.keys(this.userScores[categoryId]).forEach(itemId => { const itemData = this.userScores[categoryId][itemId]; const scoreSelect = document.getElementById(`score_${categoryId}_${itemId}`); const notesTextarea = document.getElementById(`notes_${categoryId}_${itemId}`); if (scoreSelect) scoreSelect.value = itemData.score; if (notesTextarea) notesTextarea.value = itemData.notes; }); }); } else { // Initialize userScores based on criteriaData this.userScores = {}; Object.keys(this.criteriaData).forEach(catId => { if (!this.criteriaData[catId].isResultTab) { this.userScores[catId] = {}; this.criteriaData[catId].items.forEach(item => { this.userScores[catId][item.id] = { score: 0, notes: '' }; // Default score 0 }); } }); } }, calculateAndDisplayResults: function() { let totalPossibleScore = 0; let totalUserScore = 0; const categoryScores = {}; let resultsHtml = ''; resultsHtml += ``; resultsHtml += `

Category Scores & Your Ratings:

`; for (const categoryId in this.criteriaData) { const category = this.criteriaData[categoryId]; if (category.isResultTab) continue; let categoryUserScore = 0; let categoryMaxScore = 0; resultsHtml += ``; category.items.forEach(item => { const maxItemScore = this.scoreOptions[this.scoreOptions.length - 1].value; categoryMaxScore += maxItemScore; totalPossibleScore += maxItemScore; const userItemData = (this.userScores[categoryId] && this.userScores[categoryId][item.id]) ? this.userScores[categoryId][item.id] : { score: 0, notes: '' }; categoryUserScore += userItemData.score; totalUserScore += userItemData.score; resultsHtml += ``; if (userItemData.notes) { resultsHtml += ``; } }); const categoryPercent = categoryMaxScore > 0 ? (categoryUserScore / categoryMaxScore * 100) : 0; categoryScores[categoryId] = { user: categoryUserScore, max: categoryMaxScore, percent: categoryPercent, title: category.title }; resultsHtml += ``; } resultsHtml += `

Category	Your Score / Max Score	Rating %
${category.title}
${item.text}	${userItemData.score} / ${maxItemScore}
Note: ${userItemData.notes.replace(/\n/g, ' ')}
${category.title} Subtotal	${categoryUserScore} / ${categoryMaxScore}	${categoryPercent.toFixed(1)}%

`; // Qualitative Feedback resultsHtml += ``; const resultsOutputEl = document.getElementById('icoResultsOutput'); if(resultsOutputEl) resultsOutputEl.innerHTML = resultsHtml; const overallScoreDisplayEl = document.getElementById('icoOverallScoreDisplay'); if(overallScoreDisplayEl) overallScoreDisplayEl.textContent = `${totalUserScore} / ${totalPossibleScore} (${overallPercent.toFixed(1)}%)`; const pdfBtnSection = document.getElementById('icoPdfDownloadSectionResults'); if(pdfBtnSection) pdfBtnSection.style.display = 'block'; }, generatePDF: async function() { if (!window.jspdf || !window.html2canvas || Object.keys(this.userScores).length === 0) { alert('Please complete your evaluation and calculate the score first.'); return; } await new Promise(resolve => setTimeout(resolve, 50)); const pdfExportContainer = document.createElement('div'); pdfExportContainer.classList.add('ico-pdf-export-content'); pdfExportContainer.style.width = '800px'; let pdfHtml = `

ICO Evaluation Report

`; pdfHtml += ``; // Overall Score const overallScoreText = document.getElementById('icoOverallScoreDisplay') ? document.getElementById('icoOverallScoreDisplay').textContent : 'N/A'; pdfHtml += ``; // Category Scores & Criteria with Notes for (const categoryId in this.criteriaData) { const category = this.criteriaData[categoryId]; if (category.isResultTab) continue; pdfHtml += `

${category.title}

`; let categoryUserScore = 0; let categoryMaxScore = 0; pdfHtml += ``; category.items.forEach(item => { const maxItemScore = this.scoreOptions[this.scoreOptions.length - 1].value; const userItemData = (this.userScores[categoryId] && this.userScores[categoryId][item.id]) ? this.userScores[categoryId][item.id] : { score: 0, notes: '' }; categoryUserScore += userItemData.score; categoryMaxScore += maxItemScore; pdfHtml += ``; if (userItemData.notes) { pdfHtml += ``; } }); const categoryPercent = categoryMaxScore > 0 ? (categoryUserScore / categoryMaxScore * 100) : 0; pdfHtml += ``; pdfHtml += `

Criterion	Your Score / Max
${item.text}	${userItemData.score} / ${maxItemScore}
Note: ${userItemData.notes.replace(/\n/g, ' ')}
Subtotal for ${category.title}	${categoryUserScore} / ${categoryMaxScore} (${categoryPercent.toFixed(1)}%)

`; } // Qualitative Feedback from results display const qualitativeFeedbackEl = document.querySelector('#icoResultsOutput .ico-qualitative-feedback'); if(qualitativeFeedbackEl) { pdfHtml += `

Qualitative Observations (Based on Your Ratings)

${qualitativeFeedbackEl.innerHTML}`; } pdfExportContainer.innerHTML = pdfHtml; document.body.appendChild(pdfExportContainer); try { const canvas = await html2canvas(pdfExportContainer, { scale: 1.5, useCORS: true, logging: false }); document.body.removeChild(pdfExportContainer); const imgData = canvas.toDataURL('image/png'); const { jsPDF } = window.jspdf; const pdf = new jsPDF({ orientation: 'p', unit: 'pt', format: 'a4' }); const pdfWidth = pdf.internal.pageSize.getWidth(); const pdfHeight = pdf.internal.pageSize.getHeight(); const imgProps = pdf.getImageProperties(imgData); const imgWidth = pdfWidth - 40; const imgHeight = (imgProps.height * imgWidth) / imgProps.width; let heightLeft = imgHeight; let position = 20; pdf.addImage(imgData, 'PNG', 20, position, imgWidth, imgHeight); heightLeft -= (pdfHeight - 40); while (heightLeft > 0) { position = heightLeft - imgHeight; pdf.addPage(); pdf.addImage(imgData, 'PNG', 20, position, imgWidth, imgHeight); heightLeft -= (pdfHeight - 40); } pdf.save('ICO_Evaluation_Report.pdf'); } catch (error) { console.error("Error generating PDF:", error); alert("An error occurred while generating PDF."); if (document.body.contains(pdfExportContainer)) document.body.removeChild(pdfExportContainer); } } }; document.addEventListener('DOMContentLoaded', function() { icoApp.init(); });