First of all, to paraphrase Gemini, this was totally my fault. I know I fixed this bug a while back in a different game, I did not copy the fix over to our main 7 Gen Blocks repository and now I don’t remember how I fixed it.
Also, this refers to the DEVELOPER version we use to make games. This is what is behind the curtain, of our no-code game builder, 7 Gen Blocks , which is why it is so important that it works with any input a user might provide, as far as number of images they want on the screen, or if the images are selected randomly or not.
My point – and I do have one
I don’t want to be accused of burying the lede here so I’ll just get to it. My experience with AI for coding is this – I write a prompt, often one that is fairly explicit in terms of context and instructions, and includes one or more files of text for the LLM to use in answering the question. If it gets it wrong, I will provide additional instruction, maybe copy and paste any error code. If the second answer doesn’t work, I might try a third time, again, providing more context or pasting any errors. After the third time, I am done and I will just step through the code and solve it myself.
Sometimes AI works quickly and that’s awesome. I’m even giving a paper on uses of AI at the SRAI conference in Hawaii and another at the AISES conference in Portland, Oregon, both in October. It’s called “Uses of Generative AI in research administration: The good, the bad and the ugly.” I’m talking about the good, so I am not an AI hater.
However, when AI doesn’t give the correct answer on the first or second shot, I have found it to invariably be faster to forget AI and solve the issue without it. As far as the claim that generative AI has “Ph.D. level intelligence”. If you measure that by whether a person has an actual Ph.D. , I have Ph.D. level intelligence and the score today is:
Me: 1 , AI: 0
Evidence below.
The Problem
I have a config file that gives a number of items I want shown on a page and a list of images. When there are more images than the number to show, I want it to randomly select from the list. This does not work when I have exactly the same number of items in the list as the number I want selected, it selects one fewer. So, if I want three items and I have exactly three, it will show two images on the screen. This is a small part of a much larger project, so there was a LOT of code to step through.
Example use in the game “Follow the Bubbles”
My Steps
Step 1: Eliminate code that shuffles items and picks a random selection
/* if (num_cards <= cards.length) {
cards = cards.slice(0, num_cards);
cards = getShuffledArray(cards);
return cards;
}
*/
console.log(cards.length)
This produced exactly two items and it did not show a number in the console, which meant it never hit this part of the code. I went back to the config file and saw that “randomize” was set as ‘false’ and that bit of code was inside the function that shuffles the items and randomly selects them.
Step 2: Re-set to randomize and try again. Success! (But not)
I changed “randomize” in the config file to ‘true’ and ran this again. This time, I also had three items selected so I thought I had somehow fixed it, but I looked in the console and saw that the length of cards was 4, not 3. Previously, I had found that I could get this to work by just putting an extra item at the beginning of the list, so it wasn’t really working, it was selecting 3 from 4, not all 3 out of 3. When I deleted the extra item, I ended up with 2 out of 3 again.
While that “fix” would work internally, this is part of the back-end of the no-code game builder and “add a random image that won’t be used ” is not something I want in the documentation.
I re-set ‘randomize’ to ‘false’ again and got 3 out of 3. So, that worked consistently, and I did not have to have an extra, useless, first value. Actually, that is the correct thing to do, because there is no point in randomly selecting when you have the exact number of items you need. I could put in the documentation not to use ‘true’ for ‘randomize’ when you have the exact number of items, it’s unnecessary.
My goal is to make the 7 Gen Blocks Developer Platform as novice-proof as possible
I don’t want to say idiots because I don’t believe junior developers or game builders who don’t code are dumb, just inexperienced. Anyone, no matter how experienced can miss something or make a mistake. Since my goal is to make this code as easy as possible for anyone else to use to make educational games, I want to prevent any errors. So, even though randomly selecting 3 out of a group of 3 items is kind of silly, I still want your game to work.
You may already have begun to suspect, as I did, that the error here has to do with Javascript using 0 as the initial index value and somewhere in the code it is starting at 1.
Step 3: The error often isn’t where you think it is
Code that should not be executed here had to do with if a “distinguished item” existed. That is, sometimes on the page there is one specific image you want the player to find. Even if the rest are randomly selected. Here is the fixed code below:
if (num_cards <= cards.length) {
// Need to make sure distinguished item is included in first num_cards items
for (let i = 0; i < cards.length; i++) {
if ("distinguishedItem" in cards[i]) {
// Swap with first item
const temp = cards[0];
cards[0] = cards[i];
cards[i] = temp;
break;
}
}
cards = cards.slice(0, num_cards);
cards = getShuffledArray(cards);
return cards;
}
The third line had been executing, even though there was no ‘distinguished item’ and it had an error in that i was set as below. Since there was no fourth item in the array, when the program hit this line, it threw an error. All I needed to do was change the <= to < . Problem solved. Original line below that caused the problem:
for (let i = 0; i <= cards.length; i++) {What was AI’s solution?
I used a local install of qwen2.5-coder. I wanted to give the AI a fair shot so I provided the Javascript file with the code that created this block of the game and the config file. I gave it a context explaining the general design of the blocks. I told it to use the Javascript code and config files I provided to answer the question.
Fail #1
Its first response replaced a lot of existing code that does other things. It may have selected the correct number of images, but it removed the code that played audio, that flipped over the card when clicked and showed an item under it, etc. Since that is definitely not what I wanted, I didn’t even try it.
Fail #2
function createCards() {
const container = document.getElementById('card-container');
let numCards = getNumberOfCards(); // This function or variable decides how many cards to show
if (numCards < 3) {
numCards = 3;
}
for (let i = 0; i < numCards; i++) {
const cardDiv = document.createElement('div');
cardDiv.className = 'card-div';
cardDiv.innerHTML = `<img class="card-img" src="${backImage}" alt="[5D[K
alt="Card Back">`;
container.appendChild(cardDiv);
}
}I didn’t even test this, either, because, as you can see, even if it might work if the number of items was exactly equal to 3, I wanted a solution that would work regardless of the number of items the user wanted and regardless of the number of images they had provided.