维恩图游戏评估和重置

Question

我一直致力于使用Html5，CSS3和Javascript的维恩图游戏。游戏包括将正确的答案放在维恩图上的正确区域。我给图中的每个区域分配了一个id，并告诉它哪些draggables可以接受。我想评估正确放置元素的数量，如果所有元素都正确显示说明得分的图像，如果不是所有元素都放置正确，我想将错误的元素恢复到原始位置。然后允许用户尝试更多的回答游戏，如果答案是错误或正确的，再次id喜欢用分数显示图片。任何想法如何我可以把它关闭。即时通讯新的在stackoverflow和希望我问正确。

<!-- Actividad a Realizar --> 
    <section class="imagenDrag hidden" id="contenido"> 
     <div class="drag1" style="z-index: 1"><img src="images/elemento1.png" /></div> 
     <div class="drag2" style="z-index: 1"><img src="images/elemento2.png" /></div> 
     <div class="drag3" style="z-index: 1"><img src="images/elemento3.png" /></div> 
     <div class="drag4" style="z-index: 1"><img src="images/elemento4.png" /></div> 
     <div class="drag5" style="z-index: 1"><img src="images/elemento5.png" /></div> 
     <div class="drag6" style="z-index: 1"><img src="images/elemento6.png" /></div> 
     <div class="drag7" style="z-index: 1"><img src="images/elemento7.png" /></div> 
     <div class="drag8" style="z-index: 1"><img src="images/elemento8.png" /></div> 
    </section> 
    <hr class="cf hidden" id="hr1"> 
       <!-- Imagen de Actividad Interactiva --> 
     <div class="hidden" id = "imagenJuego"> 
     <div class="imagenDrop vennIzquierda dropIzquierda"><img src="images/vennizquierda.png" /></div> 
     <div class="imagenDrop vennCentro dropCentro"><img src="images/venncentro.png" /></div> 
     <div class="imagenDrop vennDerecha dropDerecha"><img src="images/vennderecha.png" /></div> 
     </div> 
       <!-- Imagen de Actividad Interactiva Fin --> 
    <!-- Actividad a Realizar Fin --> 
    <hr class="cf hidden" id="hr2"> 
      <!-- Footer con boton de Verificacion --> 
    <footer>Conecta2 &nbsp;|&nbsp; Criterios para el manejo de la informaci&oacute;n    
    <button id="botonVerificar" class="hidden" ><a href="#">Verificar</a></button> 

    </footer> 
      <!-- Footer con boton de Verificacion Fin --> 
     </body> 
    </html> 

JAVASCRIPT

 $(init); 
function init() { 
    $('.drag1, .drag2, .drag3, .drag4, .drag5, .drag6, .drag7, .drag8').draggable(); //todos los elementos son hechos draggable 
}; 
$(function() { 
    $(".dropDerecha").droppable({ 
     accept: ".drag1, .drag4, .drag6" //drags que acepta el lado derecho del diagrama 
    }); 
}); 
$(function() { 
    $(".dropIzquierda").droppable({ 
     accept: ".drag2, .drag3, .drag7"//drags que acepta el lado izquierdo del diagrama 
    }); 
}); 
$(function() { 
    $(".dropCentro").droppable({ 
     accept: ".drag8, .drag5" //drags que acepta el centro del diagrama 
    }); 
}); 

$(document).ready(function(){ 
    $("#botonIniciar").click(function(){ 
     $('#contenido, #imagenJuego, #botonVerificar, #ayuda, #instrucciones, #hr1, #hr2').removeClass('hidden'); 
     $('#imagenInicio, #botonIniciar').addClass('hidden'); 
     console.log('Haz Iniciado'); // boton que inicia el juego 
    }); 
}); 


// verificacion de resultados (si esta bien, nos da la evaluacion. si no esta bien regresa solo las erroneas a su posicion original para dar 1 intento mas para resolver, evaluando al final) 
$(document).ready(function(){ 
    $('#botonVerificar').click(function(){ 
     console.log('Verificando'); 
    }); 
}); 

Answer 1

有关于你的代码一对夫妇奇怪的事情。我认为问题容器必须接受所有答案，无论是对还是错，否则玩家永远不会输！

接下来的事情是你需要解决服务器端的胜利或失败。在客户端做这件事很容易作弊。我知道我会...... jeje。

A JSfiddle

HTML：

<div id='answers'> 
    <div id='a0' class='answer'>Answer 0</div> 
    <div id='a1' class='answer'>Answer 1</div> 
    <div id='a2' class='answer'>Answer 2</div> 
    <div id='a3' class='answer'>Answer 3</div> 
    <div id='a4' class='answer'>Answer 4</div> 
    <div id='a5' class='answer'>Answer 5</div> 
</div> 

<div id='q0' class='question'><span>Q0</span></div> 
<div id='q1' class='question'><span>Q1</span></div> 
<div id='q2' class='question'><span>Q2</span></div> 

<button id='done'>DONE</button> 
<button id='reset'>RESET</button> 

JS：

$('.answer').draggable({ 
    revert: true 
}); 

$('#answers, .question').droppable({ 
    accept: '.answer', 
    drop: function(e, ui){ 
     $(this).append(ui.draggable) 
    } 
}); 

$('#done').click(function(){ 

    var results = {q0: [], q1: [], q2: []}; 

    for(i in results) 
     $('#' + i + ' .answer').each(function(){ 
      results[i].push($(this).attr('id')); 
     }); 

    // results ready to send back to server 
    console.log(results); 
}); 

$('#reset').click(function(){ 
    $('.question .answer').appendTo($('#answers')); 
}); 

有很多很多的方法来存储问题/答案/正确/不正确。我只是在打字的时候选择了第一个，这样可以（也应该）改进。

从这里你必须通过Ajax发送结果变量到服务器。得到哪些是不正确的，并调整$('.question .answer').appendTo($('#answers')); acorddingly恢复只有那些。

你一定会想顺利地恢复错误的答案，所以按照这个其他线程。 Smoothly revert draggables