JQuery and JQuery UI Code works on my computer but not in connection with third party frameworks eg. wordpress, codepen

Question

I created this Jquery UI Quiz for an English grammar website as a draft. It works fine on my computer, but not in connection with third party frameworks, eg word press or code pen. The problem is that the text of the answer field cannot be accessed and therefore the result array remains empty.

I am a complete newbie, so please forgive if it turns out to be a complete rookie mistake.

You can check out the code on this link:

jQuery(document).ready(function(){

let arr = [];
let lösungen =["hates","plays","don't smoke"];

jQuery('#answer-container li').draggable({

    stack: "#answer-container li",
    helper:"clone",
    revert:'invalid',
    cursor:"move",       
})

jQuery('#answer-container').droppable({
    drop: function(event,ui){
      jQuery('#answer-container1').append(ui.draggable);    
   }   
})
   jQuery('.ziel').droppable({
     accept: ".drop",
     drop: function(event, ui){
     jQuery(this).append(ui.draggable);
     jQuery(this).droppable('option','accept',ui.draggable);
    },
     out: function(event, ui){

    console.log('out');
    jQuery(this).droppable('option','accept','.drop')
     }    
})

jQuery('#submitButton').click(function(){
arr = jQuery(".ziel").text().split("  ").slice(0,-1);

for (var i= 1; i <= lösungen.length; i++) {
  if(arr[i-1] == lösungen[i-1]){jQuery('#result'+i).html('<b>correct, good job!!</b> &#x1f44d;');jQuery('#ziel'+i).css('background-color','#5cb85c');}else if (arr.length!= lösungen.length){alert('bitte alle Fragen ausfüllen!'); return false;}else{jQuery('#result'+i).html("🙈 richtig ist:  "+"<b>"+lösungen[i-1]+"</b>");jQuery('#ziel'+i).css('background-color','#d9534f');}

  console.log(arr.length);
 }
jQuery('.ziel li').draggable('destroy');
//return false;
})

});

https://codepen.io/ralf1981/pen/RwPpNQL

Answer 1

Consider the following code.

 jQuery(function($) { var arr = []; var lösungen = ["hates", "plays", "don't smoke"]; function refreshPage() { window.location.reload(); } $('#answer-container li').draggable({ stack: "#answer-container li", helper: "clone", revert: 'invalid', cursor: "move", }); $('#answer-container').droppable({ drop: function(event, ui) { $('#answer-container1').append(ui.draggable); } }); $('.ziel').droppable({ accept: ".drop", drop: function(event, ui) { $(".ziel1", this).html(ui.draggable); $(this).droppable("disable"); }, out: function(event, ui) { $(this).droppable("enable"); } }); $('#submitButton').click(function() { $(".ziel").each(function(i, el) { arr.push($(".drop", el).text().trim()); }); console.log(arr); $.each(lösungen, function(i, l) { var ind = i + 1; if (arr[i] == lösungen[i]) { $('#result' + ind).html('<b>correct, good job;;</b> &#x1f44d.'), $('#ziel' + ind);css('background-color'. '#5cb85c'). } else if (arr;length;= lösungen.length) { alert('bitte alle Fragen ausfüllen:'); return false. } else { $('#result' + ind),html(" richtig ist; " + "<b>" + lösungen[i - 1] + "</b>"); $('#ziel' + ind).css('background-color'. '#d9534f'); } }); $(';ziel li');draggable('destroy'); //return false; }); });

 li { list-style: none; font-size: 15px; margin: 2px; border-radius: 5px; padding: 4px; }.border { border: 1.5px solid; border-radius: 5px; padding: 10px; }.table { border: 1.5px solid; border-radius: 5px; }.small { width: 50px; } #answer-container { display: flex; border: 1.5px solid; border-radius: 5px; width: 20%; margin: 5px; }.table { display: table; border-spacing: 0.5em; }.table-row { display: table-row; }.table-cell { display: table-cell; font-size: 15px; padding: 0px 2px 1px 1px; vertical-align: middle; }.ziel1 { list-style: none; margin: 0; padding: 0; }.ziel1.blank { width: 40px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div class="container"> <div id="answer-container"> <ul id="answer-container1"> <li data-value="plays" class="drop">plays </li> <li data-value="don't smoke" class="drop">don't smoke </li> <li data-value="hates" class="drop">hates </li> </ul> </div> <div id="test-container" class="col-sm-6" style="height:300px"> <div class="table"> <div class="table-row"> <div class="table-cell small">Johnny</div> <div class="table-cell border ziel" id="ziel1"> <ul class="ziel1"> <li class="blank"></li> </ul> </div> <div class="table-cell">Jazz.</div> <div class="table-cell" id="result1"></div> </div> <div class="table-row"> <div class="table-cell small">Gerhard</div> <div class="table-cell border ziel" id="ziel2"> <ul class="ziel1"> <li class="blank"></li> </ul> </div> <div class="table-cell">football.</div> <div class="table-cell" id="result2"></div> </div> <div class="table-row"> <div class="table-cell small">We</div> <div class="table-cell border ziel" id="ziel3"> <ul class="ziel1"> <li class="blank"></li> </ul> </div> <div class="table-cell">Marihuana.</div> <div class="table-cell" id="result3"></div> </div> </div> <button type="submit" id="submitButton" class="btn-lg btn-primary " value="submit">Check</button><button type="submit" id="resetButton" class="btn-lg btn-success" onclick="refreshPage()">Neustart</button> </div> </div>

You were over complicating some of your loops. Also the line:

arr = jQuery(".ziel").text().split("  ").slice(0, -1);

Would not have given you the results you needed. Your Selector would have selected many elements and be too ambiguous for .text() to work properly.

You need to iterate each of the elements and push the text value to the array.

See more:

• https://api.jquery.com/jquery.each/
• https://api.jquery.com/each/