Hey look customise the code that I will send you below and send me the updated version as a whole so I can just copy and paste it what I want you to change is make it so users can add exam and by doing so they can customize the number of dancers to the exam the correct key answers and the sectioning of the exam also make it so if you add a number in a box and you had a second one it automatically adds the second one to the next part the same way if you add like let's say 20 number and paste it in a single box it automatically separates the numbers and spreads them through the next 20 boxes/////<!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;
        }

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

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

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

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

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

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

        .input-grid input {
            width: 40px;
            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 input[type="number"] {
            padding: 5px;
            font-size: 16px;
            width: 60px;
            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"],
            .categorization input[type="number"] {
                width: 100%;
                margin-bottom: 10px;
            }

            .categorization button {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <h1>Exam Score Calculator</h1>
    <!-- Tab Buttons -->
    <div class="tabs">
        <button class="tab-button active" data-exam="exam1">Exam 1</button>
        <!-- Additional Exam Tabs Can Be Added Here -->
    </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">
            <!-- 70 Input Boxes 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>
        // Preset Keys for Exams
        const presetKeys = {
            exam1: "1241331241231423421312431214312143124132124134232443112342421331342434221234"
            // Additional Exams Can Be Added Here
        };

        // Preset Categories for Exams
        const presetCategories = {
            exam1: {
                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' Categories Can Be Added Here
        };

        // 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;
        }

        // Initialize Exam Sections
        document.addEventListener("DOMContentLoaded", () => {
            initializeExam('exam1');
            // Initialize additional exams if added
        });

        // Function to Initialize an Exam
        function initializeExam(examId) {
            const inputGrid = document.getElementById(`input-grid-${examId}`);
            // Generate 70 Input Boxes
            for(let i = 1; i <= 70; 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);
            }

            // Load Preset Categories
            if(presetCategories[examId]) {
                for(const category in presetCategories[examId]) {
                    const questions = presetCategories[examId][category];
                    addCategoryToList(examId, category, questions);
                }
            }
        }

        // 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);
            if(questionNumbers.length === 0) {
                alert("Please enter valid question numbers.");
                return;
            }

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

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

        // Function to Parse Question Numbers from String
        function parseQuestions(input) {
            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) {
                        for(let i = start; i <= end; i++) {
                            if(i >=1 && i <=70) numbers.push(i);
                        }
                    }
                } else {
                    const num = parseInt(part);
                    if(!isNaN(num) && num >=1 && num <=70) 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 inputs = document.querySelectorAll(`#input-grid-${examId} input`);
            const userAnswers = Array.from(inputs).map(input => input.value.trim());
            const correctKey = presetKeys[examId].split('');
            let totalCorrect = 0;
            let totalWrong = 0;
            let totalMissed = 0;

            // Compare Answers
            for(let i=0; i<70; 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) / 70 * 100).toFixed(2);

            // Gather Categories
            const categories = {};
            const categoryItems = document.querySelectorAll(`#categories-list-${examId} .category-item`);
            categoryItems.forEach(item => {
                const [name, questions] = item.textContent.split(':');
                const qNums = questions.split(',').map(num => parseInt(num.trim()));
                categories[name.trim()] = qNums;
            });

            // 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,3);
            const weaknesses = sortedCategories.slice(-3).reverse();

            // Display Results
            const resultsDiv = document.getElementById(`results-${examId}`);
            resultsDiv.innerHTML = `
                <h3>Results:</h3>
                <p><strong>Total Correct Answers:</strong> ${finalCorrect}/70</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', () => {
                // 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
                const examId = button.getAttribute('data-exam');
                document.getElementById(examId).classList.add('active');
            });
        });
    </script>
</body>
</html>