Question

这是一场争夺战。孩子们需要拖放单词以形成正确的句子。该句子来自database，实际上是$output。为了拆分句子中的单词，我使用分隔符“#”来分割它。例如：“I can# speak# both english# and Chinese.”。所以这意味着句子分为四个不同的部分：“I can”，“speak”“both english”＆amp; “and Chinese”。（分为id1, id2, id3 & id4）。我现在需要做的是检查孩子是否有拖拽和单词（id）到正确的位置。

 <head>
    <title>Scramble Game</title>
    <script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js">    
    </script>
 </head>
 <body>
    <center>
    <div id="cardContainer" draggable="true"></div>

    <style>
      .box { 
          width:200px;
          height:30px;
          padding:30px;
          border:5px solid #DF2E34; 
          background-color: #FA4F55;
          display: inline-block;
     }
    .mover{
          color:red;
          background-color: #2BFFB6;
          width:auto ;
          font-size: 30px ;
          border: 20px;
     }
    #id1 {
         color:black;
         background-color: #2BFFB6;
         width:150px ; 
         font-size: 40px ;
         border: 1px;
         display: block;
         margin: 40px;
    }
    #id2 {
         color:black; 
         background-color: #2BFFB6; 
         width:150px ; 
         font-size: 40px ;
         border: 1px;
         display: block;
         margin: 40px;
    }
    #id3 {
          color:black; 
          background-color: #2BFFB6;
          width:150px ;
          font-size: 40px ; 
          border: 1px;
          display: block;
          margin: 40px;
    }
    #id4 {
         color:black; 
         background-color: #2BFFB6;
         width:150px ;
         font-size: 40px ; 
         border: 1px;
         display: block;
         margin: 40px;
    }
    #id5 {
       color:black; 
       background-color: #2BFFB6;
       width:150px ; 
       font-size: 40px ; 
       border: 1px;
       display: block;
       margin: 40px;
   }
   #id6 {
           color:black; 
           background-color: #2BFFB6;
           width:150px ; 
           font-size: 40px ; 
           border: 1px;
           display: block;
           margin: 40px;
    }
</style>

<script>
var js_var = "<?php echo $output ?>";
var div_id = ['id1','id2','id3','id4','id5','id6','id7','id8','id9','id10'];
var box_id = ['box1','box2','box3','box4','box5','box6','box7','box8','box9','box10'];
var balls90= js_var.split("#");
var x = document.getElementById("demo");
x.innerHTML = balls90.join(" ");


function getNumbers() {
    var player1 = new Array();
    balls90.sort(function() {
       return Math.random() - .25;
       document.getElementById("shuffle").onclick = function(){displayDate()};
    });
    for (var i = 0; i < balls90.length; i++) {
       document.writeln('<div id="+box_id[i]+" class="box" droppable="true"      ondrop="drop(event)" 
       ondragover="allowDrop(event)"></div>');
    }

    for (var i = 0; i < balls90.length; i++) {
        player1.push(balls90[i]);

      document.writeln('<div id="'+div_id[i]+'" draggable="true" droppable="true" 
              ondragstart="drag(event)">'+balls90[i]+'</div>');
    }
}
getNumbers();


function dragWord(dragEvent){
       dragEvent.dataTransfer.setData("text/html",     
       dragEvent.target.textContent+"|"+dragEvent.target.parentNode.id);
}

function dropWord(dropEvent){ 
     var dropData = dropEvent.dataTransfer.getData("text/html"); 
     var dropItems = dropData.split("|"); 
     var prevElem = document.getElementById(dropItems[1]); 
     prevElem.getElementsByTagName("div")[0].textContent = dropEvent.target.textContent; 
     dropEvent.target.textContent = dropItems[0]; 
     dropEvent.preventDefault(); 
} 
function allowDrop(ev) {
    ev.preventDefault();
}   

function drag(ev) {
    ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
     //var data_content=document.getElementById(data).innerText;
    //alert('The selected text is: ' + data_content + '.');
}

</script>
</body>
</html>

检查争夺游戏的id匹配

0 个答案: