1

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.

For example: 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){

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

Felix
  • 2,532
  • 5
  • 37
  • 75

1 Answers1

1

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.

WORKING JS FIDDLE

New validate code:

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');
        }
    } 
}

New 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>
Rooster
  • 9,954
  • 8
  • 44
  • 71
  • Alright. I'll make sure to try this out, however you say your jsfiddle works, and it doesn't. Try putting the "take risks" and putting it in the first answer of the first column, rather than the second answer of the first column. – Felix Jul 17 '14 at 18:37
  • @FelixMaxime ah, my mistake. I forgot to add the new classes in the html of the first answer. I've updated the fiddle and html content of this answer – Rooster Jul 17 '14 at 19:20