Question

我一直在使用Html5，CSS3和Javascript进行维恩图游戏。游戏包括将正确的答案放在维恩图上的正确区域。我给图中的每个区域一个id并告诉它接受哪些可拖动。我想评估正确放置元素的数量，如果所有元素都正确，则显示一个表示分数的图像，如果不是所有元素都正确放置，我希望将错误的元素恢复到原始位置。然后允许用户尝试ONCE更多来回答游戏，如果答案错误或正确，再次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

您的代码有几个奇怪的地方。我认为问题容器必须接受所有答案，无论是对还是错，否则玩家永远不会失败！

接下来你需要解决输赢服务器端的问题。在客户端进行操作可以轻松作弊。我知道我会......杰杰。

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'));进行调整以仅恢复那些。

你肯定想顺利回复错误的答案，所以请关注其他帖子。 Smoothly revert draggables

维恩图游戏评估和重置

1 个答案: