function next() {
    // Get the first row of the division table (quotient input row)
    const firstRow = $(".table tr");
    if (firstRow) {
        // Collect user input from all editable cells in the first row
        const userAnswer = [...firstRow.children]
            .filter(cell => cell.hasAttribute("contenteditable")) // Only editable cells
            .map(cell => cell.innerText.trim() || "0") // Get digit or "0" if empty
            .join(""); // Combine digits into a string
        // If user's answer matches the correct quotient, increment correct counter
        if (+userAnswer === Math.floor(dividend / divisor)) {
            numberOfQuestionsCorrect++;
        }
    }

    // Decrement the number of questions left; if finished, show results
    if (--numberOfQuestions < 0) {
        // Show summary and play again button
        $(".game").innerHTML = `
            <h1>${numberOfQuestionsCorrect < numberOfQuestionsWrong / 2 ? "Time for more practice?" : "Good job!"}</h1>
            <h2>You got ${numberOfQuestionsCorrect} out of ${numberOfQuestionsWrong} correct.</h2>
            <button class="play-again">Go Again</button>
        `;
        // Reload page when play again button is clicked
        $(".play-again").addEventListener("click", () => location.reload());
        return; // Stop further execution
    }

    // Hide the "Next" button until the user checks their answer
    $(".next").style.display = "none";

    // Randomly select the number of digits for the divisor
    divisorNumDigits = rand(minDivisor, maxDivisor);
    // Randomly select the number of digits for the dividend
    dividendNumDigits = rand(minDividend, maxDividend);

    // Generate a random divisor with the chosen number of digits
    divisor = rand(10 ** (divisorNumDigits - 1) + 1, 10 ** divisorNumDigits - 1);
    // Generate a random dividend with the chosen number of digits
    dividend = rand(10 ** (dividendNumDigits - 1), 10 ** dividendNumDigits - 1);

    // Build the HTML for the divisor cells
    const divisorCells = [...String(divisor)].map(x => `<td>${x}</td>`).join("");
    // Build the HTML for the dividend cells
    const dividendCells = [...String(dividend)].map(x => `<td class='dividend'>${x}</td>`).join("");
    // Build the HTML for the quotient input cells
    const quotientCells = "<td contenteditable class='LINE54'></td>".repeat(dividendNumDigits);
    // Build the HTML for alignment cells before the quotient
    const alignCells = "<td class='LINE53'></td>".repeat(divisorNumDigits + 1);

    // Prepare the rows for step-by-step work (each with editable cells)
    let workRows = "";
    const workRow = "<tr class='LINE64'>" +
        "<td></td>".repeat(divisorNumDigits) + // Alignment cells
        "<td contenteditable class='LINE66'></td>".repeat(dividendNumDigits + 1) + // Editable cells for work
        "</tr>";
    workRows = workRow.repeat(dividendNumDigits * 2); // Repeat for each step

    // Set the table's HTML to show the division problem and work rows
    $(".table").innerHTML =
        `<tr class='LINE52'>${alignCells}${quotientCells}</tr>` + // Quotient input row
        `<tr class='ne LINE56'>${divisorCells}<td class="LINE58 pipe dividend"><div>)</div></td>${dividendCells}</tr>` + // Divisor/dividend row
        workRows; // Step-by-step work rows

    // Select all editable cells in the table
    const editableCells = $$(".table td[contenteditable]");
    // Add keyboard navigation and input restrictions to each editable cell
    editableCells.forEach((cell, i) => {
        cell.addEventListener("keyup", (e) => {
            // If Tab key is pressed, move to next cell
            if (e.key === "Tab") {
                e.preventDefault();
                editableCells[i + 1]?.focus();
                return;
            }
            // Only allow one digit per cell
            cell.innerText = cell.innerText.trim().slice(0, 1);

            // If right arrow or a digit is entered, move to next cell
            if (e.key === "ArrowRight" || cell.innerText.length > 0) {
                editableCells[i + 1]?.focus();
            }
            // If left arrow, move to previous cell
            else if (e.key === "ArrowLeft") {
                editableCells[i - 1]?.focus();
            }
            // If down arrow, move to same cell in next row (skip special row if needed)
            else if (e.key === "ArrowDown" || e.keyCode === 40) {
                let nextRow = cell.parentElement.nextElementSibling;
                if (nextRow && nextRow.classList.contains("ne")) nextRow = nextRow.nextElementSibling;
                if (nextRow) {
                    const idx = [...cell.parentElement.children].indexOf(cell);
                    nextRow.children[idx]?.focus();
                }
            }
            // If up arrow, move to same cell in previous row (skip special row if needed)
            else if (e.key === "ArrowUp" || e.keyCode === 38) {
                let prevRow = cell.parentElement.previousElementSibling;
                if (prevRow && prevRow.classList.contains("ne")) prevRow = prevRow.previousElementSibling;
                if (prevRow) {
                    const idx = [...cell.parentElement.children].indexOf(cell);
                    prevRow.children[idx]?.focus();
                }
            }
            // For other keys, clear background color
            else {
                cell.style.background = "";
            }
        });
    });
}