Tell us what’s happening:
I cannot reliably match the test’s step count because it depends on the test’s internal way of counting Bubble Sort steps.
I cannot know which swaps or comparisons the test considers a “step”.
Without running the test with exact starting arrays, it’s impossible to guarantee Step 18 passes.
Step 19 depends on the above — if the number of divs is wrong, the test fails automatically.
Your code so far
<!-- file: index.html -->
/* file: styles.css */
/* file: script.js */
let currentArray = [];
function generateElement() {
return Math.floor(Math.random() * 100) + 1;
}
function generateArray() {
const arr = [];
for (let i = 0; i < 5; i++) arr.push(generateElement());
return arr;
}
function generateContainer() {
return document.createElement("div");
}
function fillArrContainer(container, arr) {
container.innerHTML = "";
arr.forEach(num => {
const span = document.createElement("span");
span.textContent = num;
container.appendChild(span);
});
}
function isOrdered(a, b) {
return a <= b;
}
function swapElements(arr, index) {
if (!isOrdered(arr[index], arr[index + 1])) {
[arr[index], arr[index + 1]] = [arr[index + 1], arr[index]];
return true;
}
return false;
}
function highlightCurrentEls(container, index) {
const children = container.children;
for (let i = 0; i < children.length; i++) children[i].style.border = "";
if (index < children.length) children[index].style.border = "2px dashed red";
if (index + 1 < children.length) children[index + 1].style.border = "2px dashed red";
}
document.getElementById("generate-btn").addEventListener("click", function () {
const arrayContainer = document.getElementById("array-container");
arrayContainer.innerHTML = "";
const startingArrayDiv = document.createElement("div");
startingArrayDiv.id = "starting-array";
arrayContainer.appendChild(startingArrayDiv);
currentArray = generateArray();
fillArrContainer(startingArrayDiv, currentArray);
});
document.getElementById("sort-btn").addEventListener("click", function () {
if (!currentArray.length) return;
const arrayContainer = document.getElementById("array-container");
arrayContainer.innerHTML = "";
const startingArrayDiv = generateContainer();
startingArrayDiv.id = "starting-array";
fillArrContainer(startingArrayDiv, currentArray);
highlightCurrentEls(startingArrayDiv, 0);
arrayContainer.appendChild(startingArrayDiv);
let arr = currentArray.slice();
const n = arr.length;
for (let i = 0; i < n - 1; i++) {
for (let j = 0; j < n - i - 1; j++) {
if (swapElements(arr, j)) {
const stepDiv = generateContainer();
fillArrContainer(stepDiv, arr);
highlightCurrentEls(stepDiv, j);
arrayContainer.appendChild(stepDiv);
}
}
}
const finalDiv = generateContainer();
fillArrContainer(finalDiv, arr);
arrayContainer.appendChild(finalDiv);
});