1. Implement a Caching Mechanism for Frequently Accessed DOM Elements:
   - Store references to frequently accessed DOM elements in variables at the start of your script, rather than repeatedly querying the DOM. This reduces unnecessary DOM lookups, improving performance.

2. Use `const` and `let` Appropriately:
   - Use const for variables that are never reassigned, such as references to DOM elements or configuration values. Use let for variables that may change.

3. Replace Direct DOM Manipulation with a Templating System or Virtual DOM Library:
   - Consider using a templating system like Handlebars or a virtual DOM library like React to improve performance, maintainability, and scalability of your code.

4. Implement Proper Error Handling:
   - Ensure that functions like handleFileUpload and importChecklistData have appropriate error handling to manage unexpected inputs or failures gracefully.

5. Use Event Delegation:
   - For dynamically created elements, use event delegation to attach event listeners to a common parent element, reducing the number of listeners and improving performance.

6. Optimize UI Updates:
   - Use DocumentFragment for batch DOM updates in the renderChecklist and other similar functions to minimize reflows and repaints.

7. Implement a Robust State Management System:
   - Use a state management system to handle complex state changes, including undo/redo functionality, to ensure the application remains responsive and data integrity is maintained.

8. Use Data Attributes Consistently:
   - Replace class-based selectors with data attributes (data- attributes) for JavaScript hooks, ensuring a cleaner separation between styling and behavior.

9. Implement Form Validation:
   - Add form validation to prevent empty or invalid inputs when adding new criteria or sections, ensuring that the data is always consistent and valid.

10. Efficient Use of `localStorage`:
    - Optimize localStorage usage by only saving the changes rather than the entire state on every update. This reduces the amount of data being stored and retrieved.

11. Implement Debounce Functions:
    - Use a debounce function for frequently called functions like updateScore and updateSectionProgress to prevent excessive function calls and improve performance.

12. Use CSS Custom Properties:
    - Implement CSS variables for theming and easier customization. This ensures consistency across your styles and simplifies theme adjustments.

13. Accessibility Enhancements:
    - Add ARIA attributes and improve keyboard navigation to make your application accessible to users with disabilities.

14. Optimize Drag-and-Drop Functionality:
    - Refactor the drag-and-drop functions (handleDragStart, handleDragOver, handleDrop) to efficiently handle large datasets, reducing lag or potential issues with performance.

15. Use `Intl.NumberFormat` API:
    - Leverage the Intl.NumberFormat API for consistent and locale-sensitive formatting of numbers, percentages, and currency values across the application.

16. Lazy Loading for Images:
    - Implement lazy loading for images uploaded via handleFileUpload to improve performance, particularly when dealing with multiple or large images.

17. Custom Modal Dialogs:
    - Replace native confirm and prompt dialogs with custom modals to improve user experience and maintain consistent styling across your application.

18. Sophisticated Priority System:
    - Implement a more user-friendly priority system, such as using a range input or slider instead of editable text, to improve usability and accuracy.

19. Async/Await for File Operations:
    - Use async/await for file operations like importing/exporting data, and consider using Web Workers for heavy computations to keep the UI responsive.

20. Organize CSS Efficiently:
    - Group related styles together, use specific selectors, and avoid global styles to reduce conflicts and make your CSS easier to maintain.

21. Template Literals for String Concatenation:
    - Use template literals (`` string${variable} ``) for building strings, making the code cleaner and more readable.

22. Search Functionality:
    - Implement a robust search feature that allows users to quickly find specific criteria or sections within the checklist.

23. Local Autosave Implementation:
    - Add an autosave feature that saves the checklist state to localStorage at regular intervals or after each change, ensuring data is not lost.

24. Merge Duplicated Code:
    - Identify and refactor duplicated code into reusable functions or methods to improve maintainability and reduce potential for errors.

25. Simplify Methods:
    - Break down complex methods into smaller, more manageable functions. Simplify logic by removing unnecessary variables, using built-in functions, and streamlining conditional statements.

26. Debounce Search Functionality:
    - Implement a debounce mechanism in the search function to reduce the frequency of search operations, improving performance during typing.

27. Implement Version Control for Checklist Data:
    - Consider implementing a version control system for the checklist data, allowing users to revert to previous versions if needed.

28. Add Loading Indicators:
    - Include loading indicators for file operations and other potentially time-consuming tasks to improve user feedback.

29. Optimize Performance for Large Checklists:
    - When dealing with large checklists, consider implementing virtualization techniques to render only visible items, reducing the load on the DOM.

30. Consider Responsive Design for Different Screen Sizes:
    - Ensure the checklist application is fully responsive, providing an optimal experience on a variety of devices, from desktops to mobile phones.

31. remove all comments from the code. make it just a pure functional code without any comment in it.

here is the code to do the instructions to it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced Forex Checklist Analyzer Pro</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
:root {
    --bg-color: #1A2634;
    --card-bg: #1E1E1E;
    --accent-color: #B38184;
    --text-color: #F2F2F2;
    --inactive-color: #C1C1C1;
    --active-color: #D8A7A1;
    --danger-color: #ff4757;
    --success-color: #2ed573;
    --warning-color: #ffa502;
    --info-color: #70a1ff;
    --font-primary: 'Roboto', sans-serif;
    --gradient-start: #1A2634;
    --gradient-middle: #323C4F;
    --gradient-end: #424D5C;
    --container-bg: rgba(28, 33, 42, 0.98);
    --item-bg: #1E1E1E;
    --button-gradient-start: #B38184;
    --button-gradient-end: #D8A7A1;
    --text-primary: #F2F2F2;
    --text-secondary: #C1C1C1;
    --border-radius: 10px;
    --shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    --transition-main: all 0.4s ease-in-out;
    --transition-fast: all 0.25s ease-in-out;
    --max-container-width: 800px;
    --slider-height: 40px;
    --slider-bg: #f2f2f2;
    --slider-fill-start: #4a90e2;
    --slider-fill-end: #82c4e8;
    --slider-thumb: #fff;
    --slider-thumb-border: #4a90e2;
    --slider-transition: width 0.6s ease-out;
}
body, html {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
}
.app-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    padding: 20px;
}
.dashboard {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 1200px;
    width: 100%;
}
.card {
    background-color: var(--card-bg);
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.4);
}
.score-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
}
.score-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    flex-grow: 1;
    margin-left: 20px;
}
.title-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
h1 {
    font-size: 2.5em;
    margin: 0;
    background: linear-gradient(45deg, var(--text-primary), var(--button-gradient-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.circular-progress {
    position: relative;
    width: 200px;
    height: 200px;
}
.circular-progress svg {
    transform: rotate(-90deg);
}
.circular-progress circle {
    fill: none;
    stroke-width: 10;
    stroke-linecap: round;
}
.progress-bg {
    stroke: var(--inactive-color);
}
.progress-bar {
    stroke: var(--accent-color);
    transition: stroke-dashoffset 1s ease;
}
.progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36px;
    font-weight: bold;
}
.checklist-section {
    margin-bottom: 30px;
}
.checklist-section h2 {
    color: var(--button-gradient-start);
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.8em;
}
.checklist-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: rgba(255,255,255,0.05);
    border-radius: 12px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
    cursor: move;
}
.checklist-item:hover {
    background-color: rgba(255,255,255,0.1);
    transform: translateX(5px);
}
.toggle {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}
.toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--inactive-color);
    transition: .4s;
    border-radius: 34px;
}
.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}
input:checked + .slider {
    background-color: var(--button-gradient-end);
}
input:checked + .slider:before {
    transform: translateX(26px);
}
.action-buttons {
    display: flex;
    gap: 15px;
}
.action-button {
    background-color: var(--button-gradient-start);
    border: none;
    color: var(--text-color);
    padding: 12px 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
}
.action-button:hover {
    background-color: var(--button-gradient-end);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6);
    backdrop-filter: blur(5px);
}
.modal-content {
    background-color: var(--card-bg);
    margin: 10% auto;
    padding: 30px;
    border-radius: 15px;
    width: 50%;
    max-width: 500px;
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
    animation: modalFadeIn 0.5s;
}
@keyframes modalFadeIn {
    from {opacity: 0; transform: translateY(-50px);}
    to {opacity: 1; transform: translateY(0);}
}
.close {
    color: var(--text-color);
    float: right;
    font-size: 28px;
    font-weight: bold;
    transition: all 0.3s ease;
}
.close:hover,
.close:focus {
    color: var(--danger-color);
    text-decoration: none;
    cursor: pointer;
    transform: scale(1.2);
}
#newCriteriaInput, #newSectionInput, #sectionSelect, .priority-input {
    width: 100%;
    padding: 12px;
    margin: 15px 0;
    border-radius: 8px;
    border: 1px solid var(--inactive-color);
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: 16px;
}
#addNewCriteriaButton, #addNewSectionButton {
    background-color: var(--success-color);
    color: var(--text-color);
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
}
#addNewCriteriaButton:hover, #addNewSectionButton:hover {
    background-color: var(--active-color);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.edit-section-name, .edit-criteria, .delete-section, .delete-criteria {
    background: none;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    font-size: 20px;
    transition: all 0.3s ease;
}
.edit-section-name:hover, .edit-criteria:hover {
    color: var(--warning-color);
    transform: scale(1.2);
}
.delete-section:hover, .delete-criteria:hover {
    color: var(--danger-color);
    transform: scale(1.2);
}
.section-card {
    cursor: move;
}
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.section-buttons, .criteria-buttons {
    display: flex;
    gap: 15px;
}
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding: 20px;
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.dashboard-title {
    font-size: 2.5em;
    margin: 0;
    background: linear-gradient(45deg, var(--text-primary), var(--button-gradient-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.dashboard-stats {
    display: flex;
    gap: 20px;
}
.stat-card {
    background-color: rgba(255,255,255,0.1);
    padding: 15px;
    border-radius: 10px;
    text-align: center;
}
.stat-value {
    font-size: 1.8em;
    font-weight: bold;
    margin-bottom: 5px;
}
.stat-label {
    font-size: 0.9em;
    opacity: 0.8;
}
.checklist-grid {
    display: flex;
    flex-direction: column;
    gap: 30px; 
}
.section-progress {
    height: 5px;
    background-color: var(--inactive-color);
    border-radius: 5px;
    overflow: hidden;
    margin-top: 10px;
}
.section-progress-bar {
    height: 100%;
    background-color: var(--button-gradient-start);
    transition: width 0.5s ease;
}
.checklist-item-content {
    flex-grow: 1;
    margin-right: 15px;
}
.checklist-item-text {
    font-size: 1.1em;
    margin-bottom: 5px;
}
.checklist-item-description {
    font-size: 0.9em;
    opacity: 0.7;
}
.priority-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 10px;
}
.priority-high {
    background-color: var(--danger-color);
}
.priority-medium {
    background-color: var(--warning-color);
}
.priority-low {
    background-color: var(--success-color);
}
.tooltip {
    position: relative;
    display: inline-block;
}
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: var(--bg-color);
    color: var(--text-color);
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
@media (max-width: 768px) {
    .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .dashboard-stats {
        margin-top: 20px;
        flex-wrap: wrap;
    }
    .checklist-grid {
        grid-template-columns: 1fr;
    }
    .modal-content {
        width: 90%;
    }
}
.notes-section {
    margin-top: 10px;
    display: none;
}
.notes-toggle {
    cursor: pointer;
    font-size: 0.9em;
    color: var(--info-color);
}
.notes-textarea {
    width: 100%;
    height: 80px;
    margin-top: 5px;
    border: 1px solid var(--inactive-color);
    border-radius: 5px;
    padding: 5px;
    background-color: var(--bg-color);
    color: var(--text-color);
    resize: vertical;
}
.file-upload {
    margin-top: 5px;
}
.file-upload input[type="file"] {
    display: none;
}
.file-upload label {
    background-color: var(--button-gradient-start);
    color: var(--text-color);
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.file-upload label:hover {
    background-color: var(--button-gradient-end);
}
.file-preview {
    margin-top: 5px;
    max-width: 100%;
    max-height: 100px;
}
.priority-number {
    margin-right: 10px;
    font-weight: bold;
}
.priority-input {
    width: 40px;
}
</style>
</head>
<body>
    <div class="app-container">
        <div class="dashboard">
            <div class="dashboard-header">
                <h1 class="dashboard-title">Advanced Forex Checklist Analyzer Pro</h1>
                <div class="dashboard-stats">
                    <div class="stat-card">
                        <div class="stat-value" id="totalItemsCount">0</div>
                        <div class="stat-label">Total Items</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-value" id="completedItemsCount">0</div>
                        <div class="stat-label">Completed</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-value" id="sectionsCount">0</div>
                        <div class="stat-label">Sections</div>
                    </div>
                </div>
            </div>
            <div class="card score-card">
                <div class="circular-progress">
                    <svg width="200" height="200">
                        <circle class="progress-bg" cx="100" cy="100" r="90"></circle>
                        <circle class="progress-bar" cx="100" cy="100" r="90"></circle>
                    </svg>
                    <div class="progress-text">0%</div>
                </div>
                <div class="score-info">
                    <div class="title-buttons">
                        <h2>Overall Progress</h2>
                        <div class="action-buttons">
                            <button class="action-button" onclick="showAddCriteriaModal()">Add Criteria</button>
                            <button class="action-button" onclick="showAddSectionModal()">Add Section</button>
                            <button class="action-button" onclick="exportChecklistData()">Export Data</button>
                            <button class="action-button" onclick="importChecklistData()">Import Data</button>
                            <button class="action-button" onclick="resetChecklistData()">Reset Data</button>
                        </div>
                    </div>
                    <p>Overall Score: <span id="scoreDisplay">0</span>%</p>
                </div>
            </div>
            <div class="checklist-grid" id="checklistContainer">
            </div>
        </div>
    </div>
    <div id="addCriteriaModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal('addCriteriaModal')">×</span>
            <h2>Add New Criteria</h2>
            <select id="sectionSelect">
            </select>
            <input type="text" id="newCriteriaInput" placeholder="Enter new criteria">
            <input type="number" id="newCriteriaPriority" placeholder="Priority" min="1" value="1">
            <button id="addNewCriteriaButton" onclick="addNewCriteria()">Add Criteria</button>
        </div>
    </div>
    <div id="addSectionModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal('addSectionModal')">×</span>
            <h2>Add New Section</h2>
            <input type="text" id="newSectionInput" placeholder="Enter new section name">
            <button id="addNewSectionButton" onclick="addNewSection()">Add Section</button>
        </div>
    </div>
    <script>
        let checklistData = {
            sections: []
        };
        let undoStack = [];
        let redoStack = [];

        function updateUI() {
            const container = document.getElementById('checklistContainer');
            container.innerHTML = '';
            checklistData.sections.forEach((section, sectionIndex) => {
                const sectionCard = document.createElement('div');
                sectionCard.className = 'card section-card';
                sectionCard.setAttribute('draggable', true);
                sectionCard.addEventListener('dragstart', dragStart);
                sectionCard.addEventListener('dragover', dragOver);
                sectionCard.addEventListener('drop', drop);
                sectionCard.setAttribute('data-section-index', sectionIndex);

                const sectionHeader = document.createElement('div');
                sectionHeader.className = 'section-header';
                const sectionTitle = document.createElement('h2');
                sectionTitle.textContent = section.name;
                const sectionButtons = document.createElement('div');
                sectionButtons.className = 'section-buttons';
                const editSectionButton = document.createElement('button');
                editSectionButton.className = 'edit-section-name';
                editSectionButton.innerHTML = '✎';
                editSectionButton.onclick = () => editSectionName(sectionIndex);
                const deleteSectionButton = document.createElement('button');
                deleteSectionButton.className = 'delete-section';
                deleteSectionButton.innerHTML = '';
                deleteSectionButton.onclick = () => deleteSection(sectionIndex);

                sectionButtons.appendChild(editSectionButton);
                sectionButtons.appendChild(deleteSectionButton);
                sectionHeader.appendChild(sectionTitle);
                sectionHeader.appendChild(sectionButtons);
                sectionCard.appendChild(sectionHeader);

                const sectionProgress = document.createElement('div');
                sectionProgress.className = 'section-progress';
                const sectionProgressBar = document.createElement('div');
                sectionProgressBar.className = 'section-progress-bar';
                sectionProgress.appendChild(sectionProgressBar);
                sectionCard.appendChild(sectionProgress);

                section.criteria.forEach((criteria, criteriaIndex) => {
                    const criteriaItem = document.createElement('div');
                    criteriaItem.className = 'checklist-item';
                    criteriaItem.setAttribute('draggable', true);
                    criteriaItem.addEventListener('dragstart', dragStart);
                    criteriaItem.addEventListener('dragover', dragOver);
                    criteriaItem.addEventListener('drop', drop);
                    criteriaItem.setAttribute('data-section-index', sectionIndex);
                    criteriaItem.setAttribute('data-criteria-index', criteriaIndex);

                    const priorityNumber = document.createElement('span');
                    priorityNumber.className = 'priority-number';
                    priorityNumber.textContent = criteria.priority;
                    priorityNumber.setAttribute('contenteditable', true);
                    priorityNumber.onblur = () => {
                        const newPriority = parseInt(priorityNumber.textContent, 10);
                        if (!isNaN(newPriority) && newPriority > 0) {
                            saveState();
                            criteria.priority = newPriority;
                            updateScore();
                            updateSectionProgress();
                        } else {
                            priorityNumber.textContent = criteria.priority;
                        }
                    };
                    criteriaItem.appendChild(priorityNumber);

                    const criteriaContent = document.createElement('div');
                    criteriaContent.className = 'checklist-item-content';
                    const criteriaText = document.createElement('div');
                    criteriaText.className = 'checklist-item-text';
                    criteriaText.textContent = criteria.text;
                    criteriaContent.appendChild(criteriaText);

                    const toggle = document.createElement('label');
                    toggle.className = 'toggle';
                    const toggleInput = document.createElement('input');
                    toggleInput.type = 'checkbox';
                    toggleInput.checked = criteria.checked;
                    toggleInput.onchange = () => updateCriteriaStatus(sectionIndex, criteriaIndex);
                    const slider = document.createElement('span');
                    slider.className = 'slider';
                    toggle.appendChild(toggleInput);
                    toggle.appendChild(slider);

                    const criteriaButtons = document.createElement('div');
                    criteriaButtons.className = 'criteria-buttons';
                    const editCriteriaButton = document.createElement('button');
                    editCriteriaButton.className = 'edit-criteria';
                    editCriteriaButton.innerHTML = '✎';
                    editCriteriaButton.onclick = () => editCriteria(sectionIndex, criteriaIndex);
                    const deleteCriteriaButton = document.createElement('button');
                    deleteCriteriaButton.className = 'delete-criteria';
                    deleteCriteriaButton.innerHTML = '';
                    deleteCriteriaButton.onclick = () => deleteCriteria(sectionIndex, criteriaIndex);

                    criteriaButtons.appendChild(editCriteriaButton);
                    criteriaButtons.appendChild(deleteCriteriaButton);
                    criteriaItem.appendChild(criteriaContent);
                    criteriaItem.appendChild(toggle);
                    criteriaItem.appendChild(criteriaButtons);

                    const notesToggle = document.createElement('div');
                    notesToggle.className = 'notes-toggle';
                    notesToggle.textContent = 'Notes';
                    notesToggle.onclick = () => toggleNotes(sectionIndex, criteriaIndex);
                    criteriaItem.appendChild(notesToggle);

                    const notesSection = document.createElement('div');
                    notesSection.className = 'notes-section';
                    const notesTextarea = document.createElement('textarea');
                    notesTextarea.className = 'notes-textarea';
                    notesTextarea.placeholder = 'Add notes here...';
                    notesTextarea.value = criteria.notes || '';
                    notesTextarea.onblur = () => saveNotes(sectionIndex, criteriaIndex, notesTextarea.value);
                    notesSection.appendChild(notesTextarea);

                    const fileUpload = document.createElement('div');
                    fileUpload.className = 'file-upload';
                    const fileInput = document.createElement('input');
                    fileInput.type = 'file';
                    fileInput.accept = 'image/png, image/jpeg';
                    fileInput.id = `fileInput-${sectionIndex}-${criteriaIndex}`;
                    fileInput.onchange = (event) => handleFileUpload(event, sectionIndex, criteriaIndex);
                    const fileLabel = document.createElement('label');
                    fileLabel.htmlFor = `fileInput-${sectionIndex}-${criteriaIndex}`;
                    fileLabel.textContent = 'Upload Image';
                    fileUpload.appendChild(fileInput);
                    fileUpload.appendChild(fileLabel);
                    notesSection.appendChild(fileUpload);

                    const filePreview = document.createElement('img');
                    filePreview.className = 'file-preview';
                    if (criteria.imageData) {
                        filePreview.src = criteria.imageData;
                    }
                    notesSection.appendChild(filePreview);

                    criteriaItem.appendChild(notesSection);
                    sectionCard.appendChild(criteriaItem);
                });
                container.appendChild(sectionCard);
            });
            updateScore();
            updateSectionProgress();
        }

        function updateScore() {
    let totalPriority = 0;
    let activePriority = 0;
    checklistData.sections.forEach(section => {
        section.criteria.forEach(criteria => {
            totalPriority += criteria.priority;
            if (criteria.checked) {
                activePriority += criteria.priority;
            }
        });
    });

    // Calculate uncapped percentage for text display
    let uncappedPercentage = 0;
    if (totalPriority > 0) {
        uncappedPercentage = Math.round((activePriority / totalPriority) * 100);
    }

    // Calculate capped percentage for progress bar
    let cappedPercentage = Math.min(uncappedPercentage, 100);

    // Special case: If only one item and it's checked, show its priority as percentage
    if (getTotalItems() === 1 && activePriority > 0) {
        uncappedPercentage = activePriority;
        cappedPercentage = Math.min(activePriority, 100);
    }

    // Update text display with uncapped percentage
    document.getElementById('scoreDisplay').textContent = uncappedPercentage;

    // Update progress bar with capped percentage
    const progressBar = document.querySelector('.progress-bar');
    const circumference = 2 * Math.PI * 90;
    const offset = circumference - (cappedPercentage / 100) * circumference;
    progressBar.style.strokeDasharray = `${circumference} ${circumference}`;
    progressBar.style.strokeDashoffset = offset;
    document.querySelector('.progress-text').textContent = `${cappedPercentage}%`;

    // Update other elements
    document.getElementById('totalItemsCount').textContent = getTotalItems();
    document.getElementById('completedItemsCount').textContent = getCompletedItems();
    document.getElementById('sectionsCount').textContent = checklistData.sections.length;
}

        function updateSectionProgress() {
            checklistData.sections.forEach((section, index) => {
                const totalPriority = section.criteria.reduce((sum, criteria) => sum + criteria.priority, 0);
                const activePriority = section.criteria.reduce((sum, criteria) => criteria.checked ? sum + criteria.priority : sum, 0);
                const progress = totalPriority > 0 ? (activePriority / totalPriority) * 100 : 0;
                const sectionCard = document.querySelector(`.section-card[data-section-index="${index}"]`);
                const progressBar = sectionCard.querySelector('.section-progress-bar');
                progressBar.style.width = `${progress}%`;
            });
        }

        function updateCriteriaStatus(sectionIndex, criteriaIndex) {
            saveState();
            checklistData.sections[sectionIndex].criteria[criteriaIndex].checked = !checklistData.sections[sectionIndex].criteria[criteriaIndex].checked;
            updateScore();
            updateSectionProgress();
            localStorage.setItem('checklistData', JSON.stringify(checklistData));
        }

        function showAddCriteriaModal() {
            const modal = document.getElementById('addCriteriaModal');
            const select = document.getElementById('sectionSelect');
            select.innerHTML = '';
            checklistData.sections.forEach((section, index) => {
                const option = document.createElement('option');
                option.value = index;
                option.textContent = section.name;
                select.appendChild(option);
            });
            modal.style.display = 'block';
        }

        function showAddSectionModal() {
            const modal = document.getElementById('addSectionModal');
            modal.style.display = 'block';
        }

        function closeModal(modalId) {
            const modal = document.getElementById(modalId);
            modal.style.display = 'none';
        }

        function addNewCriteria() {
            const sectionIndex = document.getElementById('sectionSelect').value;
            const newCriteria = document.getElementById('newCriteriaInput').value;
            const newCriteriaPriority = parseInt(document.getElementById('newCriteriaPriority').value, 10);
            if (newCriteria) {
                saveState();
                checklistData.sections[sectionIndex].criteria.push({
                    text: newCriteria,
                    checked: false,
                    priority: newCriteriaPriority,
                    notes: '',
                    imageData: null
                });
                updateUI();
                closeModal('addCriteriaModal');
                document.getElementById('newCriteriaInput').value = '';
                document.getElementById('newCriteriaPriority').value = '1';
            }
        }

        function addNewSection() {
            const newSectionName = document.getElementById('newSectionInput').value;
            if (newSectionName) {
                saveState();
                checklistData.sections.push({ name: newSectionName, criteria: [] });
                updateUI();
                closeModal('addSectionModal');
                document.getElementById('newSectionInput').value = '';
            }
        }

        function editSectionName(sectionIndex) {
            const newName = prompt('Enter new section name:', checklistData.sections[sectionIndex].name);
            if (newName) {
                saveState();
                checklistData.sections[sectionIndex].name = newName;
                updateUI();
            }
        }

        function deleteSection(sectionIndex) {
            if (confirm('Are you sure you want to delete this section?')) {
                saveState();
                checklistData.sections.splice(sectionIndex, 1);
                updateUI();
            }
        }

        function editCriteria(sectionIndex, criteriaIndex) {
            const newText = prompt('Edit criteria:', checklistData.sections[sectionIndex].criteria[criteriaIndex].text);
            const newPriority = parseInt(prompt('Edit priority (number):', checklistData.sections[sectionIndex].criteria[criteriaIndex].priority), 10);
            if (newText !== null && !isNaN(newPriority)) {
                saveState();
                checklistData.sections[sectionIndex].criteria[criteriaIndex].text = newText;
                checklistData.sections[sectionIndex].criteria[criteriaIndex].priority = newPriority;
                updateUI();
            }
        }

        function deleteCriteria(sectionIndex, criteriaIndex) {
            if (confirm('Are you sure you want to delete this criteria?')) {
                saveState();
                checklistData.sections[sectionIndex].criteria.splice(criteriaIndex, 1);
                updateUI();
            }
        }

        function dragStart(e) {
            e.dataTransfer.setData('text/plain', e.target.getAttribute('data-section-index') + ',' + (e.target.getAttribute('data-criteria-index') || ''));
        }

        function dragOver(e) {
            e.preventDefault();
        }

        function drop(e) {
            e.preventDefault();
            const [fromSectionIndex, fromCriteriaIndex] = e.dataTransfer.getData('text').split(',');
            const toSectionIndex = e.target.closest('.section-card').getAttribute('data-section-index');
            const toCriteriaIndex = e.target.closest('.checklist-item')?.getAttribute('data-criteria-index');

            if (fromCriteriaIndex === '') { // Moving a section
                saveState();
                const [movedSection] = checklistData.sections.splice(fromSectionIndex, 1);
                checklistData.sections.splice(toSectionIndex, 0, movedSection);
            } else { // Moving a criteria
                saveState();
                const [movedCriteria] = checklistData.sections[fromSectionIndex].criteria.splice(fromCriteriaIndex, 1);
                if (toCriteriaIndex !== null) {
                    checklistData.sections[toSectionIndex].criteria.splice(toCriteriaIndex, 0, movedCriteria);
                } else {
                    checklistData.sections[toSectionIndex].criteria.push(movedCriteria);
                }
            }

            updateUI();
        }

        function exportChecklistData() {
            const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(checklistData));
            const downloadAnchorNode = document.createElement('a');
            downloadAnchorNode.setAttribute("href", dataStr);
            downloadAnchorNode.setAttribute("download", "checklist_data.json");
            document.body.appendChild(downloadAnchorNode);
            downloadAnchorNode.click();
            downloadAnchorNode.remove();
        }

        function importChecklistData() {
            const input = document.createElement('input');
            input.type = 'file';
            input.accept = '.json';
            input.onchange = function(event) {
                const file = event.target.files[0];
                const reader = new FileReader();
                reader.onload = function(e) {
                    try {
                        saveState();
                        checklistData = JSON.parse(e.target.result);
                        updateUI();
                    } catch (error) {
                        alert('Error importing data: ' + error.message);
                    }
                };
                reader.readAsText(file);
            };
            input.click();
        }

        function resetChecklistData() {
            if (confirm('Are you sure you want to reset all data?')) {
                saveState();
                checklistData = { sections: [] };
                updateUI();
            }
        }

        function toggleNotes(sectionIndex, criteriaIndex) {
            const notesSection = document.querySelector(`.checklist-item[data-section-index="${sectionIndex}"][data-criteria-index="${criteriaIndex}"] .notes-section`);
            notesSection.style.display = notesSection.style.display === 'block' ? 'none' : 'block';
        }

        function saveNotes(sectionIndex, criteriaIndex, notes) {
            saveState();
            checklistData.sections[sectionIndex].criteria[criteriaIndex].notes = notes;
            localStorage.setItem('checklistData', JSON.stringify(checklistData));
        }

        function handleFileUpload(event, sectionIndex, criteriaIndex) {
            const file = event.target.files[0];
            const reader = new FileReader();
            reader.onload = function(e) {
                saveState();
                checklistData.sections[sectionIndex].criteria[criteriaIndex].imageData = e.target.result;
                updateUI();
            };
            reader.readAsDataURL(file);
        }

        function getTotalItems() {
            return checklistData.sections.reduce((total, section) => total + section.criteria.length, 0);
        }

        function getCompletedItems() {
            return checklistData.sections.reduce((total, section) => total + section.criteria.filter(criteria => criteria.checked).length, 0);
        }

        function saveState() {
            undoStack.push(JSON.parse(JSON.stringify(checklistData)));
            redoStack = []; 
        }

        function undo() {
            if (undoStack.length > 1) {
                redoStack.push(undoStack.pop());
                checklistData = JSON.parse(JSON.stringify(undoStack[undoStack.length - 1]));
                updateUI();
            }
        }

        function redo() {
            if (redoStack.length > 0) {
                undoStack.push(redoStack.pop());
                checklistData = JSON.parse(JSON.stringify(undoStack[undoStack.length - 1]));
                updateUI();
            }
        }

        document.addEventListener('keydown', function(event) {
            if (event.ctrlKey && event.key === 'z') {
                undo();
            } else if (event.ctrlKey && event.shiftKey && event.key === 'Z') {
                redo();
            }
        });

        function loadState() {
            const storedData = localStorage.getItem('checklistData');
            if (storedData) {
                checklistData = JSON.parse(storedData);
            } else {
                checklistData = {
                    sections: [
                        {
                            name: 'Section 1',
                            criteria: [
                                { text: 'Criteria 1', checked: false, priority: 1, notes: '', imageData: null },
                                { text: 'Criteria 2', checked: true, priority: 2, notes: '', imageData: null }
                            ]
                        }
                    ]
                };
            }
        }

        loadState();
        updateUI();
    </script>
</body>
</html>

now refactor my above code with all 31 instructions provided.