Venn Diagram Game Evaluation and Reset

Question

I have been working on a Venn Diagram game using Html5, CSS3 and Javascript. The game consists of placing the correct answer in the correct zone on the venn diagram. I gave each zone in the diagram an id and told it which draggables to accept. I would like to evaluate the number of correctly placed elements and if all elements are correct show an image that says the score, if not all elements are placed correctly i want the wrong ones to be reverted back to their original position. Then allow the user to try ONCE more to answer the game, if the answers are wrong or right, again id like to show the picture with the score. Any idea how i can pull this off. Im new on stackoverflow and hope i am asking correctly.

 <!-- 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

There are a couple odd things about your code. I think questions containers must accept all answers, whether right or wrong, otherwise player could never lose!

Next thing is you'll need to resolve winning or losing server-side. Doing it client-side makes it easy to cheat. I know I would...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'));
});

There are many many ways to store questions/answers/correct/incorrect. I just picked the first that crossed my mind while typing so it can (and should) be improved.

From here you'll have to send result variable to the server via Ajax. Get which are incorrect and tweak $('.question .answer').appendTo($('#answers')); acorddingly to restore only those.

You'll surely want to revert the wrong answers smoothly so follow this other thread. Smoothly revert draggables