Validar Drag & Drop

Hola. Estoy recién llegado así que mando un saludo a todos por acá y espero poder recibir su ayuda

Necesito hacer un tipo test en Html5 en el cual, después de poner las opciones en la casilla pueda dar al botón de validar y que aparezca una (X) si es incorrecta la opción o una (V) si es correcta al lado de la opción; es decir, que cada opción corresponda con una sola respuesta correcta. Y así es donde me he atorado, ya que tengo un script muy útil, pero no sé cómo implementar la validación, o sea; comprobar que cada opción está donde debería de estar.
Espero su ayuda, ya que no soy programador, pero me urge hacer este test para un proyecto.

Saludos

Código CSS :

.div_swap {
    width:150px;
    height:30px;
    padding:10px;
    border:1px solid #aaaaaa;
}

.sch {
    
}

Código Javascript :

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("src", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var src = document.getElementById(ev.dataTransfer.getData("src"));
    var srcParent = src.parentNode;
    var tgt = ev.currentTarget.firstElementChild;

    ev.currentTarget.replaceChild(src, tgt);
    srcParent.appendChild(tgt);
}

function submitNewRoles() {
    var x = document.getElementsByClassName("sch");
    var str ="";
    for (var i = 0; i < x.length; i++) {
        str += x[i].innerHTML;
        if (i< x.length -1) str +=", ";
    }
    var y = document.getElementById("GrantRoles");
    y.innerHTML = str;
}

function submitNewRoles2() {
    var x = $( "#second" ).find(".sch");
    var str ="";
    for (var i = 0; i < x.length; i++) {
        str += x[i].innerHTML;
        if (i< x.length -1) str +=", ";
    }
    var y = document.getElementById("GrantRoles");
    y.innerHTML = str;
}


function myFunction() {
    var y = document.getElementById("GrantRoles");
}

$('#formAssignRoles :input').keypress(function(e){
    alert("Arrastra y suelta en la casilla correspondiente"); 
    //$(this).pop();
    return false;
});
$('#formAssignRoles :input').bind('copy paste',function(e){
    alert("Arrastra y suelta en la casilla correspondiente"); 
    e.preventDefault();
});

Código HTML :

<div id="GrantRoles" ></div>
<form id="formAssignRoles" onsubmit="myFunction()"> 
    <div id="second">
        <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
            Opci&oacute;n 1 <input id="drag1" class="div_swap" draggable="true" ondragstart="drag(event)" required>
            </input>
        </div>
        <br>
        <div id="div2"  ondrop="drop(event)" ondragover="allowDrop(event)">
            Opci&oacute;n 2 <input id="drag2" class="div_swap" draggable="true" ondragstart="drag(event)" required>
            </input>
        </div>
        <br>
        <div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)">
            Opci&oacute;n 3 <input id="drag3" class="div_swap" draggable="true" ondragstart="drag(event)" required>
            </input>
        </div>
    </div>
    <br><br>
    <input type="submit" onclick="submitNewRoles2()" value="Revisar">            
</form>

<h3>Elige una respuesta y arrastrala a la casilla correcta</h3>        
        <div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)">
            <div id="drag4" class="div_swap" draggable="true" ondragstart="drag(event)">
                <span id="sch_4" class="sch" >Op. correcta 1</span>
            </div>
        </div>
        <div id="div5" ondrop="drop(event)" ondragover="allowDrop(event)">
            <div id="drag5" class="div_swap" draggable="true" ondragstart="drag(event)">
                <span id="sch_5" class="sch" >Op. correcta 2</span>
            </div>
        </div>
        <div id="div6" ondrop="drop(event)" ondragover="allowDrop(event)">
            <div id="drag6" class="div_swap" draggable="true" ondragstart="drag(event)">
                <span id="sch_6" class="sch" >Op. correcta 3</span>
            </div>
        </div>

Y en que estas atorado.?

En que no sé cómo hacer que una vez que se arrastró y soltó las opciones, el botón valide que cada uno está en su casilla corresponde y que ponga X si está mal. O sea, que sólo hay una casilla correcta para cada elemento.

Vale ahora si se entiende

tienes que tener una función que vaya por todos los elementos y valide la correspondencia.

eso es más que nada la lógica de tu problema, asi que no puedo ayudarte mucho, pero la función debe ser llamada al hacer un drop a cualquier elemento, peude ser algo como

<div id="div1" ondrop="drop(event); funcionVerificadora()"> en cada elemento...

o lo puede llamar con JS indiscriminadamente por aparte.

Si colocas tu demo en http://jsfiddle.net o en http://plnkr.co/ te propondremos algo en tu codigo.

Hola. La verdad es que no sé nada de programación web; apenas de Css y Html, pero de Js nada. Este código ha salido de buscarle en otras páginas

Acá dejo el código, aunque no funciona como funciona en el archivo .html que tengo en mi ordenado.

Espero su ayuda y gracias por la respuesta.

https://jsfiddle.net/smg47x6k/