Scrambler: duplicate letters issue

Questions
1

Hi there,

I am working on a spelling program where words are scrambled and students will put them in the correct order for spelling.

I have not yet got an understanding of how to deal with duplicate letters.

At the moment a word like "aviaun" is loaded as a png and scrambled with the following code: (I have set up a const pic4 for the loaded image)

const puzzle4 = new Scrambler(chop((pic4), 6, 1))
	.addTo(page5)
	.pos(0,180,CENTER,BOTTOM);

So this all works well except for the fact if I have the "a" s in the wrong order the puzzle is not solved until I swop them.

From what I can see there is a "key" that can be used somehow, but quite honestly I am lost on how to do this at this stage of my learning.

Just wondering if I could get some guidance on this.

I am working in Adobe Animate.

Thanks for any help.

Rod

1 Like
2

Hi Rod, here is an example

const tiles = [];
const keys = ["S","C","R","A","M","B","L","E","R"];
zim.loop(keys, function (letter, i) {
    var tile = new zim.Label({
        text:letter,
        color:pink.lighten(.9),
        size:35,
        backing:new zim.Rectangle(70,70,new GradientColor([pink,purple],45)),
        align:CENTER,
        valign:CENTER,
    });
    tiles.push(tile);
});

const tile = new Tile({
    obj:tiles,
    unique:true,
    cols:9,
    rows:1,
    spacingH:8
});

const scrambler = new Scrambler({tile:tile, keys:keys, keyProperty:"text"})
   .center();

const emitter = new Emitter({
    startPaused:true
}).center();

scrambler.on("complete", ()=>{
    emitter.spurt(30);
    scrambler.scramble(1,1,2);
});
3

Each object in the Scrambler has a text property because it is a Label. If the items are pictures you can still do this - you would just have to assign a custom property and value to the tile parts in the chopped picture tile. Then use the custom property as the key.

4

I think I know where the gap in my understanding is .... I can see why I need the key and the key property, but this is the part I don't understand....

"f the items are pictures you can still do this - you would just have to assign a custom property and value to the tile parts in the chopped picture tile. Then use the custom property as the key." (extract from your last reply)

I have a picture that is broken into 6 tiles (see code below), I can't use the text values as I have below, because it is just an image broken into 6. I don't know how to assign a custom property and value to the tile parts, then use this as the key.

const keys = ["a","v","i","a","u","v"];
const puzzle4 = new Scrambler(chop((pic4), 6, 1))
	.addTo(page5)
	.pos(0,180,CENTER,BOTTOM);

Here is a copy of the image that I am breaking up..... I need to keep this font that is why I can't create tiles with the letters

aviaun_red

5

Here is the way - untested... racing to teach...

const keys = ["a","v","i","a","u","v"];
const tile = chop(pic4, 6, 1);
tile.loop((item,i)=>{
  item.letter = keys[i];
});
const puzzle4 = new Scrambler({tile:tile, keys:keys, keyProperty:"letter"})
    .addTo(page5)
    .pos(0,180,CENTER,BOTTOM);
6

I appreciate they way you help so much ..... this has worked perfectly and in the process I have learned so much.

Thank you

Rod

2 Likes
7

Glad to be of help. Questions are always welcome.

1 Like