Hey this is the web page I called it fix it and send me the updated code what I want you to fix this there's an ability which basically functions like this if you paste it a string of numbers it goes to the next box and next box basically distributes them between the box in order or if you add a number and then add another one in the parks it automatically moves the at the number to the next box but the problem with that is a basically doesn't recognize the little squares that's users put their answers into as boxes and goes to the add category after an input in one of the squares that users are supposed to answer in so fix it and send it to me as a whole/////<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Exam Score Calculator</title>
    <style>
        /* General Styles */
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f9f9f9;
        }

        h1 {
            text-align: center;
            color: #333;
        }

        /* Tab Styles */
        .tabs {
            display: flex;
            border-bottom: 2px solid #ccc;
            margin-bottom: 20px;
            flex-wrap: wrap;
            align-items: center;
        }

        .tab-button {
            padding: 10px 20px;
            cursor: pointer;
            border: none;
            background-color: #e0e0e0;
            margin-right: 2px;
            transition: background-color 0.3s;
            font-size: 16px;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
        }

        .tab-button.active {
            background-color: #ffffff;
            border-bottom: 2px solid #ffffff;
            font-weight: bold;
        }

        .tab-button:hover {
            background-color: #d5d5d5;
        }

        .add-exam-button {
            padding: 10px 20px;
            cursor: pointer;
            border: none;
            background-color: #4CAF50;
            color: white;
            border-radius: 4px;
            transition: background-color 0.3s;
            font-size: 16px;
            margin-left: auto;
        }

        .add-exam-button:hover {
            background-color: #45a049;
        }

        /* Exam Section Styles */
        .exam-section {
            display: none;
        }

        .exam-section.active {
            display: block;
        }

        /* Input Grid Styles */
        .input-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
            grid-gap: 5px;
            margin-bottom: 20px;
        }

        .input-grid input {
            width: 100%;
            height: 40px;
            text-align: center;
            font-size: 18px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .input-grid input:focus {
            border-color: #007BFF;
            outline: none;
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
        }

        /* Categorization Styles */
        .categorization {
            margin-bottom: 20px;
        }

        .categorization input[type="text"] {
            padding: 5px;
            font-size: 16px;
            width: 200px;
            margin-right: 10px;
        }

        .categorization button {
            padding: 6px 12px;
            font-size: 16px;
            cursor: pointer;
            border: none;
            background-color: #4CAF50;
            color: white;
            border-radius: 4px;
            transition: background-color 0.3s;
        }

        .categorization button:hover {
            background-color: #45a049;
        }

        .categories-list {
            margin-top: 10px;
        }

        .category-item {
            display: inline-block;
            background-color: #e7f3fe;
            color: #31708f;
            padding: 5px 10px;
            margin: 5px;
            border-radius: 4px;
            font-size: 14px;
        }

        /* Calculate Button Styles */
        .calculate-button {
            padding: 10px 20px;
            font-size: 18px;
            cursor: pointer;
            border: none;
            background-color: #008CBA;
            color: white;
            border-radius: 4px;
            transition: background-color 0.3s;
        }

        .calculate-button:hover {
            background-color: #007B9E;
        }

        /* Results Styles */
        .results {
            margin-top: 30px;
            padding: 20px;
            background-color: #ffffff;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .results h3 {
            margin-top: 0;
            color: #333;
        }

        .results ul {
            list-style-type: none;
            padding-left: 0;
        }

        .results li {
            margin-bottom: 10px;
            font-size: 16px;
        }

        .strengths, .weaknesses {
            color: #2e7d32;
        }

        .strengths li, .weaknesses li {
            background-color: #e8f5e9;
            padding: 5px 10px;
            border-radius: 4px;
            margin-bottom: 5px;
        }

        /* Responsive Design */
        @media (max-width: 600px) {
            .input-grid {
                grid-template-columns: repeat(5, 40px);
            }

            .categorization input[type="text"] {
                width: 100%;
                margin-bottom: 10px;
            }

            .categorization button {
                width: 100%;
                margin-bottom: 10px;
            }

            .add-exam-button {
                margin-left: 0;
                margin-top: 10px;
            }
        }
    </style>
</head>
<body>
    <h1>Exam Score Calculator</h1>
    <!-- Tab Buttons -->
    <div class="tabs">
        <button class="tab-button active" data-exam="exam1">Exam 1</button>
        <button class="add-exam-button" id="add-exam-button">+ Add Exam</button>
    </div>

    <!-- Exam Sections -->
    <div class="exam-section active" id="exam1">
        <h2>Exam 1</h2>
        <p>Enter your answers below. Use numbers (1, 2, 3, 4) for your answers. Enter '0' or leave blank for missed questions.</p>
        <!-- Input Grid -->
        <div class="input-grid" id="input-grid-exam1">
            <!-- Input boxes will be generated by JavaScript -->
        </div>

        <!-- Categorization Section -->
        <div class="categorization">
            <h3>Categorize Questions:</h3>
            <input type="text" id="category-name-exam1" placeholder="Category Name">
            <input type="text" id="category-questions-exam1" placeholder="Questions (e.g., 1-5,7,10)">
            <button onclick="addCategory('exam1')">Add Category</button>
            <div class="categories-list" id="categories-list-exam1">
                <!-- Categories Displayed Here -->
            </div>
        </div>

        <!-- Calculate Button -->
        <button class="calculate-button" onclick="calculateScore('exam1')">Calculate</button>

        <!-- Results Section -->
        <div class="results" id="results-exam1">
            <!-- Results Displayed Here -->
        </div>
    </div>

    <!-- JavaScript Section -->
    <script>
        // Utility Function to Generate Range of Numbers
        function range(start, end) {
            const array = [];
            for(let i = start; i <= end; i++) {
                array.push(i);
            }
            return array;
        }

        // Examinations Data Structure
        const exams = {
            exam1: {
                name: "Exam 1",
                numQuestions: 70,
                key: "1241331241231423421312431214312143124132124134232443112342421331342434221234",
                categories: {
                    Grammar: range(1,15),
                    Vocabulary: range(16,35),
                    Sentence_Structure: range(36,40),
                    Language_Function: range(41,45),
                    Cloze_Test: range(46,55),
                    Reading_Comprehension: range(56,70)
                }
            }
            // Additional Exams Can Be Added Dynamically
        };

        // Initialize Exams on DOM Content Loaded
        document.addEventListener("DOMContentLoaded", () => {
            for(const examId in exams) {
                initializeExam(examId);
                // Load preset categories if any
                if(exams[examId].categories) {
                    for(const category in exams[examId].categories) {
                        const questions = exams[examId].categories[category];
                        addCategoryToList(examId, category, questions);
                    }
                }
            }

            // Add Exam Button Event Listener
            document.getElementById('add-exam-button').addEventListener('click', addNewExam);
        });

        // Function to Initialize an Exam
        function initializeExam(examId) {
            const exam = exams[examId];
            const inputGrid = document.getElementById(`input-grid-${examId}`);

            // Clear existing inputs if any
            inputGrid.innerHTML = '';

            // Generate Input Boxes based on number of questions
            for(let i = 1; i <= exam.numQuestions; i++) {
                const input = document.createElement('input');
                input.type = 'text';
                input.maxLength = 1;
                input.dataset.question = i;
                input.placeholder = i;
                input.classList.add('answer-input'); // Added class for easier selection

                // Event Listener for Input Event
                input.addEventListener('input', (e) => {
                    const value = e.target.value;
                    if (!/^[1-4]$/.test(value)) { // Accept only numbers 1-4
                        e.target.value = '';
                        return;
                    }
                    // Auto-focus next input
                    const nextInput = e.target.parentElement.nextElementSibling
                        ? e.target.parentElement.nextElementSibling.querySelector('input')
                        : null;
                    if (nextInput) {
                        nextInput.focus();
                    }
                });

                // Event Listener for Keydown (Backspace)
                input.addEventListener('keydown', (e) => {
                    if (e.key === "Backspace" && e.target.value === '') {
                        const prevInput = e.target.parentElement.previousElementSibling
                            ? e.target.parentElement.previousElementSibling.querySelector('input')
                            : null;
                        if (prevInput) {
                            prevInput.focus();
                        }
                    }
                });

                // Event Listener for Paste
                input.addEventListener('paste', (e) => {
                    e.preventDefault();
                    const pasteData = (e.clipboardData || window.clipboardData).getData('text');
                    const digits = pasteData.replace(/\D/g, '').split('');
                    if (digits.length === 0) return;

                    let currentInput = e.target;
                    digits.forEach(digit => {
                        if (/^[1-4]$/.test(digit)) { // Accept only numbers 1-4
                            currentInput.value = digit;
                            const nextElem = currentInput.parentElement.nextElementSibling;
                            currentInput = nextElem ? nextElem.querySelector('input') : null;
                        }
                    });

                    if (currentInput) {
                        currentInput.focus();
                    }
                });

                inputGrid.appendChild(input);
            }
        }

        // Function to Add New Exam
        function addNewExam() {
            const examName = prompt("Enter the name of the new exam:");
            if(!examName) {
                alert("Exam name cannot be empty.");
                return;
            }

            const numQuestionsStr = prompt("Enter the number of questions for this exam:");
            const numQuestions = parseInt(numQuestionsStr);
            if(isNaN(numQuestions) || numQuestions <=0) {
                alert("Please enter a valid positive number for questions.");
                return;
            }

            const correctKey = prompt(`Enter the correct answer key for ${examName} as a string of numbers (e.g., "1234..."), length should be ${numQuestions}:`);
            if(!correctKey || correctKey.length !== numQuestions || !/^[1-4]+$/.test(correctKey)) {
                alert(`Correct key must be a string of ${numQuestions} numbers, each between 1 and 4.`);
                return;
            }

            // Generate a unique examId
            let examNumber = 1;
            while(exams[`exam${examNumber}`]) {
                examNumber++;
            }
            const examId = `exam${examNumber}`;

            // Add to exams object
            exams[examId] = {
                name: examName,
                numQuestions: numQuestions,
                key: correctKey,
                categories: {}
            };

            // Create new tab button
            const tabsDiv = document.querySelector('.tabs');
            const newTabButton = document.createElement('button');
            newTabButton.className = 'tab-button';
            newTabButton.textContent = examName;
            newTabButton.setAttribute('data-exam', examId);
            tabsDiv.insertBefore(newTabButton, document.getElementById('add-exam-button'));

            // Create new exam section
            const newExamSection = document.createElement('div');
            newExamSection.className = 'exam-section';
            newExamSection.id = examId;
            newExamSection.innerHTML = `
                <h2>${examName}</h2>
                <p>Enter your answers below. Use numbers (1, 2, 3, 4) for your answers. Enter '0' or leave blank for missed questions.</p>
                <!-- Input Grid -->
                <div class="input-grid" id="input-grid-${examId}">
                    <!-- Input boxes will be generated dynamically -->
                </div>

                <!-- Categorization Section -->
                <div class="categorization">
                    <h3>Categorize Questions:</h3>
                    <input type="text" id="category-name-${examId}" placeholder="Category Name">
                    <input type="text" id="category-questions-${examId}" placeholder="Questions (e.g., 1-5,7,10)">
                    <button onclick="addCategory('${examId}')">Add Category</button>
                    <div class="categories-list" id="categories-list-${examId}">
                        <!-- Categories Displayed Here -->
                    </div>
                </div>

                <!-- Calculate Button -->
                <button class="calculate-button" onclick="calculateScore('${examId}')">Calculate</button>

                <!-- Results Section -->
                <div class="results" id="results-${examId}">
                    <!-- Results Displayed Here -->
                </div>
            `;

            document.body.appendChild(newExamSection);

            // Initialize the new exam
            initializeExam(examId);

            // Add event listener to the new tab button
            newTabButton.addEventListener('click', () => {
                // Remove active class from all buttons
                document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active'));
                // Hide all exam sections
                document.querySelectorAll('.exam-section').forEach(section => section.classList.remove('active'));
                // Add active class to clicked button
                newTabButton.classList.add('active');
                // Show corresponding exam section
                newExamSection.classList.add('active');
            });

            // Activate the new tab
            document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active'));
            newTabButton.classList.add('active');
            document.querySelectorAll('.exam-section').forEach(sec => sec.classList.remove('active'));
            newExamSection.classList.add('active');
        }

        // Function to Add Category
        function addCategory(examId) {
            const categoryNameInput = document.getElementById(`category-name-${examId}`);
            const categoryQuestionsInput = document.getElementById(`category-questions-${examId}`);
            const categoryName = categoryNameInput.value.trim();
            const categoryQuestions = categoryQuestionsInput.value.trim();

            if(categoryName === "" || categoryQuestions === "") {
                alert("Please enter both category name and questions.");
                return;
            }

            // Parse Questions Input (e.g., "1-5,7,10")
            const questionNumbers = parseQuestions(categoryQuestions, exams[examId].numQuestions);
            if(questionNumbers.length === 0) {
                alert("Please enter valid question numbers.");
                return;
            }

            // Check for overlapping questions
            for(const existingCategory in exams[examId].categories) {
                const overlap = exams[examId].categories[existingCategory].some(q => questionNumbers.includes(q));
                if(overlap) {
                    alert(`Some questions in "${categoryName}" overlap with existing category "${existingCategory}". Please adjust.`);
                    return;
                }
            }

            // Add Category to Exams object
            exams[examId].categories[categoryName] = questionNumbers;

            // Add Category to List
            addCategoryToList(examId, categoryName, questionNumbers);

            // Clear Inputs
            categoryNameInput.value = "";
            categoryQuestionsInput.value = "";
        }

        // Function to Parse Question Numbers from String
        function parseQuestions(input, maxQuestion) {
            const parts = input.split(',');
            const numbers = [];
            parts.forEach(part => {
                part = part.trim();
                if(part.includes('-')) {
                    const [start, end] = part.split('-').map(Number);
                    if(!isNaN(start) && !isNaN(end) && start <= end && start >=1 && end <= maxQuestion) {
                        for(let i = start; i <= end; i++) {
                            numbers.push(i);
                        }
                    }
                } else {
                    const num = parseInt(part);
                    if(!isNaN(num) && num >=1 && num <= maxQuestion) {
                        numbers.push(num);
                    }
                }
            });
            return [...new Set(numbers)]; // Remove duplicates
        }

        // Function to Add Category to the List
        function addCategoryToList(examId, categoryName, questionNumbers) {
            const categoriesList = document.getElementById(`categories-list-${examId}`);
            const categoryItem = document.createElement('div');
            categoryItem.className = 'category-item';
            categoryItem.textContent = `${categoryName}: ${questionNumbers.join(', ')}`;
            categoriesList.appendChild(categoryItem);
        }

        // Function to Calculate Score
        function calculateScore(examId) {
            const exam = exams[examId];
            const inputs = document.querySelectorAll(`#input-grid-${examId} input`);
            const userAnswers = Array.from(inputs).map(input => input.value.trim());
            const correctKey = exam.key.split('');
            const numQuestions = exam.numQuestions;
            let totalCorrect = 0;
            let totalWrong = 0;
            let totalMissed = 0;

            // Compare Answers
            for(let i=0; i<numQuestions; i++) {
                const userAnswer = userAnswers[i];
                const correctAnswer = correctKey[i];
                if(userAnswer === "" || userAnswer === "0") {
                    totalMissed++;
                } else if(userAnswer === correctAnswer) {
                    totalCorrect++;
                } else {
                    totalWrong++;
                }
            }

            // Apply Penalty: For every 3 wrongs, deduct 1 correct
            const penalty = Math.floor(totalWrong / 3);
            const adjustedCorrect = totalCorrect - penalty;
            const finalCorrect = adjustedCorrect >= 0 ? adjustedCorrect : 0;
            const percentage = ((finalCorrect) / numQuestions * 100).toFixed(2);

            // Gather Categories
            const categories = exam.categories;

            // Calculate Performance Per Category
            const categoryPerformance = {};
            for(const category in categories) {
                const qNums = categories[category];
                let catCorrect = 0;
                let catWrong = 0;
                let catMissed = 0;

                qNums.forEach(qNum => {
                    const userAnswer = userAnswers[qNum -1];
                    const correctAnswer = correctKey[qNum -1];
                    if(userAnswer === "" || userAnswer === "0") {
                        catMissed++;
                    } else if(userAnswer === correctAnswer) {
                        catCorrect++;
                    } else {
                        catWrong++;
                    }
                });

                const catPenalty = Math.floor(catWrong / 3);
                const catAdjusted = catCorrect - catPenalty;
                const finalCatCorrect = catAdjusted >=0 ? catAdjusted : 0;
                const catPercentage = ((finalCatCorrect) / qNums.length * 100).toFixed(2);

                categoryPerformance[category] = {
                    correct: finalCatCorrect,
                    wrong: catWrong,
                    missed: catMissed,
                    penalty: catPenalty,
                    percentage: catPercentage
                };
            }

            // Determine Strengths and Weaknesses
            const sortedCategories = Object.entries(categoryPerformance).sort((a, b) => b[1].percentage - a[1].percentage);
            const strengths = sortedCategories.slice(0, Math.min(3, sortedCategories.length));
            const weaknesses = sortedCategories.slice(-Math.min(3, sortedCategories.length)).reverse();

            // Display Results
            const resultsDiv = document.getElementById(`results-${examId}`);
            resultsDiv.innerHTML = `
                <h3>Results:</h3>
                <p><strong>Total Correct Answers:</strong> ${finalCorrect}/${numQuestions}</p>
                <p><strong>Total Wrong Answers:</strong> ${totalWrong}</p>
                <p><strong>Total Missed Answers:</strong> ${totalMissed}</p>
                <p><strong>Final Score:</strong> ${percentage}%</p>
                <h4>Category Performance:</h4>
                <ul>
                    ${sortedCategories.map(([cat, perf]) => `
                        <li><strong>${cat}</strong>: ${perf.correct} Correct, ${perf.wrong} Wrong, ${perf.missed} Missed, Penalty: ${perf.penalty} <br> <strong>Percentage:</strong> ${perf.percentage}%</li>
                    `).join('')}
                </ul>
                <h4 class="strengths">Strengths:</h4>
                <ul>
                    ${strengths.map(([cat, perf]) => `<li>${cat} (${perf.percentage}%)</li>`).join('')}
                </ul>
                <h4 class="weaknesses">Weaknesses:</h4>
                <ul>
                    ${weaknesses.map(([cat, perf]) => `<li>${cat} (${perf.percentage}%)</li>`).join('')}
                </ul>
            `;
        }

        // Tab Functionality (For Multiple Exams)
        const tabButtons = document.querySelectorAll('.tab-button');
        const examSections = document.querySelectorAll('.exam-section');

        tabButtons.forEach(button => {
            button.addEventListener('click', () => {
                const examId = button.getAttribute('data-exam');

                // Remove active class from all buttons
                tabButtons.forEach(btn => btn.classList.remove('active'));
                // Hide all exam sections
                examSections.forEach(section => section.classList.remove('active'));
                // Add active class to clicked button
                button.classList.add('active');
                // Show corresponding exam section
                document.getElementById(examId).classList.add('active');
            });
        });
    </script>
</body>
</html>