維恩圖遊戲評估和重置

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