Question

尝试重新创建将卡片分类到卡片位置的游戏。我可以这样做，以便卡＆＃39; a＆＃39;进入第一个卡位＆＃39;偶然＆＃39;但是我想这样做，以便卡＆＃39; a＆＃39;也可以进入第二个卡位“偶数”。＆＃39;同样，我想要卡＆＃39; b＆＃39;能够进入“甚至＆＃39;插槽。同上卡＆＃39; c＆＃39;并且＆＃39; d＆＃39;对于“Odd＆＃39;插槽和＆＃39; e＆＃39;和＆＃39; f＆＃39;对于偶数和奇数＆＃39;插槽。有什么想法吗？

// 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)

中输入了拼写错误

多个（但不是全部）卡槽

1 个答案: