"<!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;
}

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;
grid-row-gap: 20px;
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;
  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);

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-gap: 10px;
  align-items: start;
  justify-items: center;
}
.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);

// To allow multiple drags, clone the original element
const clonedEl = el.cloneNode(true);
clonedEl.classList.remove('correct', 'incorrect'); // Reset styles
clonedEl.addEventListener('dragstart', drag); // Reattach drag event

if (event.target.className.includes('droppable')) {
event.target.appendChild(clonedEl);
}
}

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>" i want that items in droppable stack in 3x3