"<!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: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            text-align: center;
            margin: 0;
            padding: 20px;
            background: #f1f5f9; /* Using a neutral background for contrast */
        }
        
        h1 {
            color: #1a237e;
            margin-bottom: 20px;
            font-size: 2.5em;
        }

        #slideContainer {
            margin-bottom: 20px;
        }

        #rule, #numbers {
            font-size: 1.2em;
            color: #37474f;
        }

        button {
            padding: 12px 24px;
            font-size: 1em;
            margin: 10px;
            cursor: pointer;
            background-color: #1e88e5;
            color: white;
            border: none;
            border-radius: 25px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: background-color 0.3s, transform 0.3s;
        }

        button:hover {
            background-color: #1565c0;
            transform: translateY(-2px);
        }

        #grid-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            grid-column-gap: 50px; /* Horizontal gap between columns */
            grid-row-gap: 20px; /* Optional: Separate control for vertical space */
            justify-items: center;
            align-items: center;
            margin: 0 auto;
            max-width: 900px;
            padding: 20px;
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
        }

        .droppable {
            border: 2px dashed #90a4ae;
            padding: 20px;
            width: 100%;
            min-height: 100px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-color: #e3f2fd;
            border-radius: 8px;
            transition: border-color 0.3s ease, background-color 0.3s ease;
            box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
        }

        .droppable:hover {
            border-color: #1e88e5;
            background-color: #e1f5fe;
        }

        .draggable {
            display: inline-block;
            padding: 10px 20px;
            margin: 10px 0;
            background-color: #ffeb3b;
            border-radius: 4px;
            border: 1px solid #fbc02d;
            cursor: grab;
            transition: background-color 0.3s ease, transform 0.3s;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .draggable:active {
            transform: scale(0.98);
        }

        .correct {
            background-color: #4caf50;
            color: white;
            border: 1px solid #388e3c;
        }

        .incorrect {
            background-color: #f44336;
            color: white;
            border: 1px solid #d32f2f;
        }
    </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>" make texts a little bit bigger and use a good font