"<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Bölünebilme Kuralları ve Sürükle-Bırak Oyunu</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 20px;
        }
        #rule, #numbers {
            font-size: 1.2em;
            margin: 20px;
        }
        button {
            padding: 10px 20px;
            font-size: 1em;
            margin: 10px;
            cursor: pointer;
        }
        #grid-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            justify-items: center;
            align-items: center;
            margin: 20px auto;
            max-width: 650px;
        }
        .droppable {
            border: 2px dashed #ccc;
            padding: 10px;
            width: 300px;
            min-height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
        }
        .draggable {
            display: inline-block;
            padding: 10px;
            margin: 5px;
            background-color: #f1f1f1;
            border-radius: 4px;
            border: 1px solid #ccc;
            cursor: grab;
        }
        .correct { background-color: #28a745; color: white; }
        .incorrect { background-color: #dc3545; color: white; }
    </style>
</head>
<body>

    <h1>Bölünebilme Kuralları</h1>
    <div id="slideContainer">
        <div id="rule"></div>
    </div>

    <button onclick="previousSlide()">Geri</button>
    <button onclick="nextSlide()">İleri</button>
    <button id="checkBtn" style="display: none;" onclick="checkResults()">Kontrol</button>

    <script>
        const rules = [
            "Bir sayı 2 ile bölünebiliyorsa, son rakamı çift olmalıdır (yani 0, 2, 4, 6, 8).",
            "Bir sayı 3 ile bölünebiliyorsa, rakamlarının toplamı 3'ün katı olmalıdır.",
            "Bir sayı 4 ile bölünebiliyorsa, son iki rakamı 4 ile bölünebilmelidir.",
            "Bir sayı 5 ile bölünebiliyorsa, son rakamı 0 veya 5 olmalıdır.",
            "Bir sayı 6 ile bölünebiliyorsa, hem 2 hem de 3 ile bölünebilmelidir.",
            "Bir sayı 9 ile bölünebiliyorsa, rakamlarının toplamı 9'un katı olmalıdır.",
            "Bir sayı 10 ile bölünebiliyorsa, son rakamı 0 olmalıdır."
        ];

        let currentSlideIndex = 0;
        let randomNumbers = generateRandomNumbers(15, 4);

        function generateRandomNumbers(count, digits) {
            const numbers = [];
            for (let i = 0; i < count; i++) {
                const number = Math.floor(Math.random() * (Math.pow(10, digits) - Math.pow(10, digits - 1))) + Math.pow(10, digits - 1);
                numbers.push(number);
            }
            return numbers;
        }

        function displayCurrentSlide() {
            const slideContainer = document.getElementById('slideContainer');
            slideContainer.innerHTML = "";

            if (currentSlideIndex < rules.length) {
                slideContainer.innerHTML = `<div id="rule">${rules[currentSlideIndex]}</div>`;
                document.getElementById('checkBtn').style.display = 'none';
            } else {
                displayNumberDragAndDrop();
                document.getElementById('checkBtn').style.display = 'inline-block';
            }
        }

        function nextSlide() {
            if (currentSlideIndex < rules.length + 1) {
                currentSlideIndex++;
                displayCurrentSlide();
            }
        }

        function previousSlide() {
            if (currentSlideIndex > 0) {
                currentSlideIndex--;
                displayCurrentSlide();
            }
        }

        function displayNumberDragAndDrop() {
            const slideContainer = document.getElementById('slideContainer');
            slideContainer.innerHTML = `<div id="numbers">${randomNumbers.map(number => `<span class="draggable" draggable="true" ondragstart="drag(event)" id="number-${number}">${number}</span>`).join(' ')}</div>`;

            slideContainer.innerHTML += '<div id="grid-container">' + [2, 3, 4, 5, 6, 9, 10].map(divisor => 
                `<div class="droppable" ondrop="drop(event)" ondragover="allowDrop(event)" data-rule="${divisor}">${divisor} ile bölünebilenler</div>`).join(' ') + '</div>';
        }

        function allowDrop(event) {
            event.preventDefault();
        }

        function drag(event) {
            event.dataTransfer.setData("text", event.target.id);
        }

        function drop(event) {
            event.preventDefault();
            const data = event.dataTransfer.getData("text");
            const el = document.getElementById(data);
            if (event.target.className.includes('droppable')) {
                el.classList.remove('correct', 'incorrect');  // Renk sıfırlanır
                event.target.appendChild(el);
            }
        }

        function checkDivisibility(number, divisor) {
            if (divisor === 2) {
                return number % 2 === 0;
            }
            if (divisor === 3) {
                return number.toString().split('').reduce((acc, digit) => acc + parseInt(digit, 10), 0) % 3 === 0;
            }
            if (divisor === 4) {
                return parseInt(number.toString().slice(-2), 10) % 4 === 0;
            }
            if (divisor === 5) {
                return number % 10 === 0 || number % 10 === 5;
            }
            if (divisor === 6) {
                return number % 2 === 0 && number.toString().split('').reduce((acc, digit) => acc + parseInt(digit, 10), 0) % 3 === 0;
            }
            if (divisor === 9) {
                return number.toString().split('').reduce((acc, digit) => acc + parseInt(digit, 10), 0) % 9 === 0;
            }
            if (divisor === 10) {
                return number % 10 === 0;
            }
            return false;
        }

        function checkResults() {
            const droppables = document.querySelectorAll('.droppable');
            droppables.forEach(dropZone => {
                const ruleNumber = parseInt(dropZone.getAttribute('data-rule'), 10);
                const numbers = Array.from(dropZone.querySelectorAll('.draggable'));

                numbers.forEach(numberElement => {
                    const number = parseInt(numberElement.innerText, 10);
                    numberElement.classList.remove('correct', 'incorrect');

                    if (checkDivisibility(number, ruleNumber)) {
                        numberElement.classList.add('correct');
                    } else {
                        numberElement.classList.add('incorrect');
                    }
                });
            });
        }

        // Başlangıç slaytını göster
        displayCurrentSlide();
    </script>
</body>
</html>" enhance this page visually.