Limit times draggable can be dropped, and count if correct?

Question

This is my conundrum today:

That extra check mark down there is the draggable that goes into the little grey boxes. The user is only supposed to be able to drop 4 check marks onto the boxes. After four check marks have been dropped, I need a way to disable dragging and dropping.

Also, I need a way to check if the draggables are in the correct droppables. The checkAns() function happens once the user clicks the SUBMIT button (not seen here; it's way below the boxes), and it's the one that checks how many correct answers are in var correct. Also, we've made some functions that increment var answers so there'll be a way to check how many check marks have been dropped. I have some code here; but I can't for the life of me figure out what's wrong with it.

Before anyone refers me, let me just state that I've seen this:

jQuery droppable and draggable count if correct

And I actually thought it might've worked if not for the code's need to have identical ID strings to check if something is correct. My check marks are numbered yes, but this is not a matching-type case unfortunately... Is there a way for the droppable to detect if a draggable has been dropped into it, regardless of the ID?

Please take a look; any help would be deeply appreciated! Thank you in advance!

EDIT

Here's the fiddle.

EDIT2

Since I put a link to the JS Fiddle, I removed the code blocks for readability.

Answer 1

So I did a bit of fiddling around with the code and I managed to do what I needed to do.

Here are the more important bits of code.

This is the code for the droppables (see comments in code for explanations):

    $( "#dropArea1" ).droppable({

                    activeClass: "ui-state-hover",
                    hoverClass: "ui-state-active",
                    cursor: "arrow",
                    drop: function( event, ui) {
                    //correct++ goes here if item is correct or if wrong="false"
                    answers++;
                    //just to check if code is working properly
                    console.log(ui.draggable.attr('id')) ;
                    console.log(answers);
                    console.log(correct);
                    //says if item is correct or not; makes img border red or green in checkAns()
                    wrong1="true";

                    if(ui.draggable.attr('id') == "cMark1"){
                        //if 4 check marks have been dropped, you can't drop any more
                        if (answers == 4) {
                            $('.box').droppable( 'disable' );
                            $( "#cMark1" ).draggable({ disabled: true });
                        }
                        //if less than 4 have been dropped, just disable the draggable
                        else {
                            $( "#cMark1" ).draggable({ disabled: true });
                        }
                    }
                    if(ui.draggable.attr('id') == "cMark2"){
                        if (answers == 4) {
                            $('.box').droppable( 'disable' );
                            $( "#cMark2" ).draggable({ disabled: true });
                        }
                        else {
                            $( "#cMark2" ).draggable({ disabled: true });
                        }
                    }
                    if(ui.draggable.attr('id') == "cMark3"){
                        if (answers == 4) {
                            $('.box').droppable( 'disable' );
                            $( "#cMark3" ).draggable({ disabled: true });
                        }
                        else {
                            $( "#cMark3" ).draggable({ disabled: true });
                        }
                    }
                    if(ui.draggable.attr('id') == "cMark4"){
                        if (answers == 4) {
                            $('.box').droppable( 'disable' );
                            $( "#cMark4" ).draggable({ disabled: true });
                        }
                        else {
                            $( "#cMark4" ).draggable({ disabled: true });
                        }
                    }
                    if(ui.draggable.attr('id') == "cMark5"){
                        if (answers == 4) {
                            $('.box').droppable( 'disable' );
                            $( "#cMark5" ).draggable({ disabled: true });
                        }
                        else {
                            $( "#cMark5" ).draggable({ disabled: true });
                        }
                    }
                    if(ui.draggable.attr('id') == "cMark6"){
                        if (answers == 4) {
                            $('.box').droppable( 'disable' );
                            $( "#cMark6" ).draggable({ disabled: true });
                        }
                        else {
                            $( "#cMark6" ).draggable({ disabled: true });
                        }
                    }

                //alert(answer1);
                        $( ".drag" ).css( 'cursor', 'default' );
                            $( ".draggable" ).draggable({ disabled: false });
                            $( "#dropArea1" ).append(ui.draggable.css('position','static'))
                            $( ".drag" ).append(ui.draggable.css('margin','5px'))
                            $(this).droppable( 'disable' );
                    },
                });

and this is the checkAns() function:

function checkAns(){

    document.getElementById('alertMsg').style.visibility = "hidden";
    $( ".drag" ).draggable({ disabled: true });

    //if an item is wrong, image border turns red
    if(wrong1 == "true"){
        $('#img1').css('border', '1px solid red');
    }
    if(wrong2 == "true"){
        $('#img2').css('border', '1px solid red');
    }
    if(wrong3 == "true"){
        $('#img3').css('border', '1px solid red');
    }
    if(wrong4 == "true"){
        $('#img4').css('border', '1px solid red');
    }
    if(wrong5 == "true"){
        $('#img5').css('border', '1px solid red');
    }
    if(wrong6 == "true"){
        $('#img6').css('border', '1px solid red');
    }   

    //if an item is correct, image border turns lime
    if(wrong1 == "false"){
        $('#img1').css('border', '1px solid lime');
    }
    if(wrong2 == "false"){
        $('#img2').css('border', '1px solid lime');
    }
    if(wrong3 == "false"){
        $('#img3').css('border', '1px solid lime');
    }
    if(wrong4 == "false"){
        $('#img4').css('border', '1px solid lime');
    }
    if(wrong5 == "false"){
        $('#img5').css('border', '1px solid lime');
    }
    if(wrong6 == "false"){
        $('#img6').css('border', '1px solid lime');
    }


    document.getElementById("score").innerHTML = correct + '<span>/4</span>';
    document.getElementById("submitAns").setAttribute("disabled", "disabled");
    document.getElementById("refreshBtn").setAttribute("disabled", "disabled");
}

Posting the answer here so anyone with the same problem has some sort of reference! Happy coding!