Matching Pairs - matching 2 different cards

Questions
1

I have been able to work out the Matching Pairs Game:
(ZIM Matching Game)

This is an extract from the code that will give 2 sets of each card.

var pics = ["squid.jpg", "seahorse.jpg", "shell.jpg", "crab.jpg"];
 var answers = shuffle(pics.concat(pics,pics,pics)); // four sets or two sets of matches

I am just wondering if it is possible to match 2 different cards. for example, what if I had the following code:

// Images array - 
var pics = ["create1.png", "create2.png", "create3.png", "create4.png", "create5.png", "create6.png", "create7.png", "create8.png", "create9.png", "create10.png"];

// Generate one set of pairs instead of multiple sets
var answers = shuffle(pics.concat(pics)); // One pair per image

... but wanted to match create1 with create2, create3 with create4 etc. Is that possible?

That would allow me, for example to have 3 x 5 on one card and 15 on another for doing a times table matching exercise.

Thanks for any guidance on this.

Rod

2

Yes - there are a couple ways to do this. One might be to hold a different data structure - one with an id.

const pics = [{id:1, src:"five_three.jpg"}, {id:2, src:"two_five.jpg"}]
const answers = shuffle( [{id:1, src:"fifteen.jpg"}, {id:2, src:"ten.jpg"}] );

You then just need to adjust how you handle this data - let us know if you need more help.

3

I am going to do my best with this ... don't close off just yet!!! :smile:

1 Like
4

So I am a bit stuck with this.
Here is the code that I got from the ZIM app that matches 10 cards (duplicated to a total of 20).

// Images array
var pics = ["ques1.png", "ques2.png", "ques3.png", "ques4.png", "ques5.png", "ques6.png", "ques7.png", "ques8.png", "ques9.png", "ques10.png"];
// Generate one set of pairs instead of multiple sets
var answers = shuffle(pics.concat(pics)); // One pair per image
var index = 0;
function makeCard() {
var front = new Pic("woodTexture.png",150,150).centerReg(); 
var back = new Page(front.width, front.height, "white");
var answer = answers[index++];
asset(answer).clone().scaleTo(back, 95, 95).center(back).ble("multiply");
var card = new Flipper(front, back, null, null, null, null, null, false, false).centerReg({ add: false });
card.answer = answer; // Store the match identifier on the card
return card;
}

I've replace the var pics with the following:

const pics = [{id:1, src:"ques1.jpg"}, {id:2, src:"ques2.jpg"}, {id:3, src:"ques3.jpg"}, {id:4, src:"ques4.jpg"}, {id:5, src:"ques5.jpg"}, {id:6, src:"ques6.jpg"}, {id:7, src:"ques7.jpg"}, {id:8, src:"ques8.jpg"}, {id:9, src:"ques9.jpg"}, {id:10, src:"ques10.jpg"}]
const answers = shuffle( [{id:1, src:"ans1.jpg"}, {id:2, src:"ans2.jpg"}, {id:3, src:"ans3.jpg"}, {id:4, src:"ans4.jpg"}, {id:5, src:"ans5.jpg"}, {id:6, src:"ans6.jpg"}, {id:7, src:"ans7.jpg"}, {id:8, src:"ans8.jpg"}, {id:9, src:"ans9.jpg"}, {id:10, src:"ans10.jpg"}]);

But I can't work out what I have to do in the makeCard() function to match the 2 sets of cards. Are you able to give me a little guidance with this? My coding skills are progressing, but I just can't work out how to do this.

Thanks
Rod

5 
// where it says 
var answer = answers[index++] 

// you would use the src property of the answer
var answer = answers[index++].src;

// and where it says 
card.answer = answer;

// you would store the id property of the answer 
card.answer = answers[index++].id;

// then it will just compare the ids rather than the file names
6

OK - I'm going to work through this now. Thank you - I will let you know how it goes.

Rod

1 Like
7

I think you had better close this off.... I am stuck and I will need to come back at a later stage. Thanks

8

Well... let us know if you need a hand when you get back to it ;-).