jQuery拖放相应的答案验证 [英] jQuery drag and drop corresponding answer validation

问题描述

我正在构建拖放式测验，将答案从答案池中拖放到相应的列中.

I'm building a drag and drop type quiz, where you drop answers into the corresponding columns from a pool of answers.

您可以在每列内添加有限数量的答案.

There is a limited amount of answers you can put inside each column.

在大多数情况下，我都能正常工作.但是，按照该工具的编写方式，每个答案槽只能有一个正确答案，在此，我希望有多个正确答案.

I have it working, for the most part. However, the way the tool is written, each answer slot can only have one correct answer, where i'd like there to be multiple correct answers.

例如: http://jsfiddle.net/Hr465/

在第一列中，正确的答案是挑战现状"和冒险". 但是，颠倒顺序，将冒险"置于挑战现状"之上，答案就会不正确.

In the first column, the correct answers are "Challenge the status quo" and "Take Risks". However, reverse the order, "Take Risks" being on top of "Challenge the status quo", and the answer comes out incorrect.

问题出在验证功能的这一行

The problem comes down to this line of the validation function

        if($('#mover'+x).parent().attr('id') == "takercontent"+x){

基本上，我想用&&重写它.因此，第一列#mover1&& #mover2，第二列等.

essentially I'd like to rewrite this with an &&. So first column #mover1 && #mover2, second column etc. etc.

推荐答案

您可以使用

Instead of using all those ids, use classes, then you can validate with the hasClass method. You can still use the ids so your show answers works.

工作JS字段

新的验证码:

function validateactivity(){

    for(var x=1; x<=totalmovers; x++){
        if($('#mover'+x).parent().hasClass("takercontent"+x)){
            $('#mover'+x).parent().css('border','2px solid #0F0'); //green
        } else {
            $('#mover'+x).parent().css('border','2px solid #F00');
        }
    } 
}

新HTML:

        <div class="takers" id="taker1">
            <div class="takerheader">Courage to Innovate</div>
            <ul class="takercontent takercontent1 takercontent2" id="takercontent1"></ul>
            <ul class="takercontent takercontent1 takercontent2" id="takercontent2"></ul>
        </div>

        <div class="takers" id="taker2">
            <div class="takerheader">Behavioural Skills</div>
            <ul class="takercontent  takercontent6 takercontent5 takercontent4 takercontent3" id="takercontent3"  ></ul>
            <ul class="takercontent  takercontent6 takercontent5 takercontent4 takercontent3" id="takercontent4" ></ul>
            <ul class="takercontent  takercontent6 takercontent5 takercontent4 takercontent3" id="takercontent5" ></ul>
            <ul class="takercontent takercontent6 takercontent5 takercontent4 takercontent3" id="takercontent6"></ul>
        </div>

        <div class="takers" id="taker3">
            <div class="takerheader">Cognitive Skill to synthesize novel inputs</div>
            <ul class="takercontent takercontent7" id="takercontent7"></ul>
        </div>

        <div class="takers" id="taker4">
            <div class="takerheader">Leads to…</div>
            <ul class="takercontent takercontent8" id="takercontent8"></ul>
        </div>

这篇关于jQuery拖放相应的答案验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！