Javascript Match Type Game

This is a simple game template where you would need to select two numbers and then click the right button to get a correct or wrong answer. The correct answers are like 1 and 2 and the button A. And then 3 and 4 and the button B. Of course you can change this in the Javascript code.

by kidino

HTML

<!--
This is a simple game template where you would need to select
two numbers and then click the right button to get a correct
or wrong answer. The correct answers are like 1 and 2 and the
button A. And then 3 and 4 and the button B. Of course you can
change this in the Javascript code.
-->

<!-- CHECK ANSWER -->
	<button data-type='a'>CHECK A</button>
	<button data-type='b'>CHECK B</button>
	<button data-type='c'>CHECK C</button>
	
	<!-- CARD CONTAINER -->
	<div id="cards"></div>
	
	<!-- CARD TEMPLATE -->
	<script id="tpl-card" type="text/template"><div class="card" id="card-{id}">{name}</div></script>

CSS

/*-- default card --*/
		.card {
			float: left;
			margin: 5px;
			height: 100px;
			width: 100px;
			background-color: aliceblue;
			border: 1px solid #2ce9eb;
			cursor: pointer;
		}	
		
		/*-- selected card --*/
		.card.selected {
			background-color: darkturquoise;
		}
		
		/*-- disabled card from correct answer --*/
		.card.disabled {
			background-color: #eaeaea;
			border: 1px solid #ccc;
			cursor:not-allowed;
		}

JavaScript

// requires JQuery
// card match data -- smaller id MUST be in front "{smallid}-{bigid}-{type}"
var match = [ 
	"1-2-a",
	"3-4-b",
	"5-6-c",
	"7-8-a",
	"9-10-b",
	"11-12-c",
	"13-14-a",
	"15-16-b",
	"17-18-c",
	"19-20-a",
	"21-22-b",
	"23-24-c",
	"25-26-a",
	"27-28-b",
	"29-30-c"
];

// cards data
var cards = [
	{id : 1, name : "1"},
	{id : 2, name : "2"},
	{id : 3, name : "3"},
	{id : 4, name : "4"},
	{id : 5, name : "5"},
	{id : 6, name : "6"},
	{id : 7, name : "7"},
	{id : 8, name : "8"},
	{id : 9, name : "9"},
	{id : 10, name : "10"},
	{id : 11, name : "11"},
	{id : 12, name : "12"},
	{id : 13, name : "13"},
	{id : 14, name : "14"},
	{id : 15, name : "15"},
	{id : 16, name : "16"},
	{id : 17, name : "17"},
	{id : 18, name : "18"},
	{id : 19, name : "19"},
	{id : 20, name : "20"},
	{id : 21, name : "21"},
	{id : 22, name : "22"},
	{id : 23, name : "23"},
	{id : 24, name : "24"},
	{id : 25, name : "25"},
	{id : 26, name : "26"},
	{id : 27, name : "27"},
	{id : 28, name : "28"},
	{id : 29, name : "29"},
	{id : 30, name : "30"}
];

// shuffle array function
function shuffle(a) {
    var j, x, i;
    for (i = a.length - 1; i > 0; i--) {
        j = Math.floor(Math.random() * (i + 1));
        x = a[i];
        a[i] = a[j];
        a[j] = x;
    }
}

// shuffle and map out cards
function mapcards(){
	shuffle(cards);
	
	for(var i in cards) {		
		var text = $('#tpl-card').text();
		text = text.replace("{id}", cards[i].id);
		text = text.replace("{name}", cards[i].name);		
		
		$('#cards').append(text);
	}
}

// check answer -- tied to buttons
function check(type) {
	var ids = [];
	$('.card.selected').each(function(){
		ids.push( parseInt($(this).attr('id').split('-')[1]) );
	});
	
	if (ids[0] > ids[1]) {
		var x = ids[0];
		ids[0] = ids[1];
		ids[1] = x;
	}
	
	var str = ids[0]+'-'+ids[1]+'-'+type;
	
	console.log(str);
	console.log($.inArray(str, match));
	if ($.inArray(str, match) > -1) {
		// success...