<style>

    .section h1{
    margin-top: 25%;
    text-align: center;
    }
    
    .draggable{{rand}} { 
    cursor: pointer;
    width: 200px; 
    padding: 0.3em;
    border: solid 3px grey;
    background-color:white;
    z-index:9999;
    float: left; 
    margin: 0.5em;
    border-radius:0.35em;
    text-align: center;
    position: absolute!important;
    }
   
    .draggable{{rand}} p {
    margin-bottom: 0px;
    margin-top: 0px;
    }
    
    .draggable-start-area{
    padding: 5px;
    background-color:#cddfff61;
    height: 150px;
    padding-left: 38%;
    padding-top: 2%;
    }
        
    .drag-area{
    width: 100%;
    }
    
    .drag-drop-wrapper-{{rand}} {
        position: relative;
    }

    .drag-drop-wrapper-{{rand}} .section{
    width: {{sectionwith}}%;
    height: {{areaheight}}px;
    display:block;
    }
    
    .section-{{sections.0.value}}{
    background-color: {{colors.0}};}
    
    .section-{{sections.1.value}}{
    background-color: {{colors.1}};}
    
    .section-{{sections.2.value}}{
    background-color: {{colors.2}};}
    
    .correct{
    border: solid 3px green!important;
    background-color:#cae0c5!important;
    }
    
    .wrong{
    border: solid 3px #ff5200;
    background-color:#ffdeb1;
    }
    
    .drop-hover{
    border: solid 3px grey;
    font-size:3rem;
    filter: brightness(115%);
    }
    
    .drop-hover h1{
    font-size:3rem;
    }

    #check{{{rand}}}:disabled {
    cursor: not-allowed;
    pointer-events: all !important;
    }
    
    </style>

    <script>
    
    //Auswertung
    function checkResult{{rand}}(){
         jQuery(".draggable{{rand}}").addClass("wrong");
         {% for section in sections %}
            jQuery(".draggable{{rand}}.{{section.value|e}}-item.on-{{section.value|e}}-area").addClass("correct");
         {%endfor%}
  
         var sum_all{{rand}}=jQuery(".draggable{{rand}}").length;
         var sum_correct{{rand}}=jQuery(".draggable{{rand}}.correct").length;
    
            if(jQuery(".result-section{{rand}} .result-text{{rand}} p").length==0){
                if(sum_correct{{rand}}==sum_all{{rand}}){
                    jQuery(".result-section{{rand}} .result-text{{rand}}").append('<p class="result{{rand}} exer">Super! Sie haben '+sum_correct{{rand}}+' von '+sum_all{{rand}}+' Begriffen richtig eingeordnet. </p>');
                }
                else if(sum_correct{{rand}}>=sum_all{{rand}}-2 && sum_correct{{rand}} != sum_all{{rand}}){
                    jQuery(".result-section{{rand}} .result-text{{rand}}").append('<p class="result{{rand}} exer">Gar nicht schlecht! Sie haben '+sum_correct{{rand}}+' von '+sum_all{{rand}}+' Begriffen richtig eingeordnet. Versuchen Sie es erneut! </p>');
                }
                else{
                    jQuery(".result-section{{rand}} .result-text{{rand}}").append('<p class="result{{rand}} exer">Sie haben '+sum_correct{{rand}}+' von '+sum_all{{rand}}+' Begriffen richtig eingeordnet. Versuchen Sie es gern noch einmal! </p>');
                }
            }
            else if(jQuery(".result-section{{rand}} .result-text{{rand}} .info").length==0){
                jQuery(".result-section{{rand}} .result-text{{rand}}").append('<p class="result{{rand}} info">Vor einer erneuten Auswertung muss mindestens ein Begriff verschoben werden. </p>');
            }
    }
    
    //Spielablauf
    jQuery( function() {
        jQuery('.draggable{{rand}}.d-none').first().removeClass('d-none');
            jQuery(".draggable{{rand}}").draggable({
                drag: function() {
                jQuery(".result{{rand}}").remove();
                {% for section in sections %}
                    jQuery(this).removeClass("on-{{section.value|e}}-area correct wrong");
                {%endfor%} 
                }
            });
                  
            {% for section in sections %}
                jQuery( ".section-{{section.value|e}}" ).droppable({
                    hoverClass: "drop-hover",          
                    drop: function( event, ui ) {  
                    ui.draggable.addClass("dropped on-{{section.value|e}}-area"); 
                        if(jQuery('.draggable{{rand}}:not(.d-none, .dropped)').length < 1){
                            jQuery('.draggable{{rand}}.d-none').first().removeClass('d-none');
                        }
                        if(jQuery('.items{{rand}}').children().length == jQuery('.draggable{{rand}}.dropped').length){
                            jQuery('#check{{rand}}').removeAttr("disabled")
                        }
                    }
                });
            {% endfor %}
     })
    </script>

    <!-- Spielfeld aufbauen -->
<div class="drag-drop-wrapper-{{rand}} my-5">
    <div class="draggable-start-area">
           <div class="items{{rand}}">
            {% for item in items %}
                    {{item.html|raw}}
            {% endfor %}
        </div>
    </div>
    <div class="drag-area d-flex">
        {% for section in sections %}
            <div class="section section-{{section.value}}"> 
                    <h1>{{section.heading}}</h1>
            </div>
        {% endfor %}
    </div>
    <div class="result-section{{rand}} d-flex justify-content-between mt-4">
        <div class="result-button">
            <button class="btn btn-primary" type="button" disabled="disabled" id="check{{rand}}" onClick="checkResult{{rand}}()" value="Check">Auswertung</button>
        </div>
        <div class="result-text{{rand}}"></div>
    </div>
</div>