Несколько (но не все) слотов для карт

Question

Попытка воссоздать игру, в которой карты сортируются в слоты для карт. Я могу сделать так, чтобы карта «а» попала в первый слот для карт «Четный», но я хочу сделать так, чтобы карта «а» также могла попасть во второй слот для карт «Четный». Точно так же я хочу, чтобы карта «b» могла попасть в слот «Even». Ditto-карты «c» и «d» для слотов «Odd» и «e» и «f» для слотов «Четный и нечетный». Есть идеи?

// Create the pile of shuffled cards 
    var equations = []; 
    equations [ 0 ] = {x:1, y:'a'}; 
    equations [ 1 ] = {x:2, y:'b'}; 
    equations [ 2 ] = {x:3, y:'c'}; 
    equations [ 3 ] = {x:4, y:'d'}; 
    equations [ 4 ] = {x:5, y:'e'}; 
    equations [ 5 ] = {x:6, y:'f'}; 

    equations.sort(function() { return Math.random() - .4 }); 

    for (var i=0; i<6; i++) { 
    $('<div>' + equations[i].y + '</div>').data('number', equations[i].x).attr('id', 'card'+equations[i].x).appendTo('#cardPile').draggable({ 
     containment: '#content', 
     stack: '#cardPile div', 
     cursor: 'move', 
     revert: true 
    }); 
    } 

    // Create the card slots 
    var words = [ 'Even', 'Even', 'Odd)', 'Odd', 'Even + Odd', 'Even + Odd' ]; 
    for (var i=1; i<=6; i++) { 
    $('<div>' + words[i-1] + '</div>').data('number', i).appendTo('#cardSlots').droppable({ 
     accept: '#cardPile div', 
     hoverClass: 'hovered', 
     drop: handleCardDrop 
    }); 
    } 

} 

function handleCardDrop(event, ui) { 
    var slotNumber = $(this).data('number'); 
    var cardNumber = ui.draggable.data('number'); 

    // If the card was dropped to the correct slot, 
    // change the card colour, position it directly 
    // on top of the slot, and prevent it being dragged 
    // again 

    if (slotNumber == cardNumber) { 
    ui.draggable.addClass('correct'); 
    ui.draggable.draggable('disable'); 
    $(this).droppable('disable'); 
    ui.draggable.position({ of: $(this), my: 'left top', at: 'left top' }); 
    ui.draggable.draggable('option', 'revert', false); 
    correctCards++; 
    } 

    // If all the cards have been placed correctly then display a message 
    // and reset the cards for another go 

    if (correctCards == 6) { 
    $('#successMessage').show(); 
    $('#successMessage').animate({ 
     left: '430px', 
     top: '150px', 
     width: '400px', 
     height: '180px', 
     opacity: 1 
    }); 
    } 

} 
}); 

Answer 1

Прямо сейчас у вас есть отношения один-к-одному между картами и слотами, но это звучит, как вы хотите, отношение один-ко-многим.

Итак, прежде всего вам нужно определить правильный ответ для каждого из ваших уравнений, добавив третье значение.

equations [ 0 ] = {x:1, y:'a', correct: 'Even'}; 

(Вы можете сделать это массив, если вы хотите использовать несколько правильных ответов.)

Далее вам нужно добавить этот ответ на данные платы.

.data('correct', equations[i].correct) 

И, наконец, проверить ответ, когда вы обработать отпускание

var slotAnswer = $(this).text(); 
var cardAnswer = ui.draggable.data('correct'); 
if (slotAnswer == cardAnswer) { 

Было бы лучше, чтобы сохранить слот ответа в данных, а не только текст.

Кроме того, у вас есть опечатка в слоте с именем Odd)