Javascript funktioniert nicht auf WordPress

Question

Dieser Code funktioniert nicht so, wie es auf JsFiddle ist. Es zeigt kaum die Hälfte der App, wenn es auf WordPress implementiert wird.

Siehe Geige: https://jsfiddle.net/od6g095L/

Wie ist es zu Anzeige soll:

Dies ist, wie es auf Wordpress zeigt:

Dies ist genau das, was ich habe auf meiner Wordpress-Seite:

<div id="container"> 
     <div id="content"> 
    <strong>What Type of Person Are You?</strong> 
     <strong><h3 id="question"></h3></strong> 
     <div id="choices"></div> 
     <p id="score"></p> 
     </div> 
<script type="text/javascript"> 
var quiz = [{ 
      "question": "What is the full form of IP?", 
      "choices": ["Internet Provider", "Internet Port", "Internet Protocol" , "Other"], 
      "correct": "Other" 
     }, { 
      "question": "Who is the founder of Microsoft?", 
      "choices": ["Bill Gates", "Steve Jobs", "Steve Wozniak" , "Martin Shaba"], 
      "correct": "Bill Gates" 
     }, { 
      "question": "What was your first dream?", 
      "choices": ["8 bits", "64 bits", "1024 bits"], 
      "correct": "8 bits" 
     }, { 
      "question": "The C programming language was developed by?", 
      "choices": ["Brendan Eich", "Dennis Ritchie", "Guido van Rossum"], 
      "correct": "Dennis Ritchie" 
     }, { 
      "question": "What does CC mean in emails?", 
      "choices": ["Carbon Copy", "Creative Commons", "other"], 
      "correct": "Carbon Copy" 
     }]; 


// define elements 
var content = $("content"), 
questionContainer = $("question"), 
choicesContainer = $("choices"), 
scoreContainer = $("score"), 
submitBtn = $("submit"); 

// init vars 
var currentQuestion = 0, 
score = 0, 
askingQuestion = true; 

function $(id) { // shortcut for document.getElementById 
    return document.getElementById(id); 
} 

function askQuestion() { 
    var choices = quiz[currentQuestion].choices, 
    choicesHtml = ""; 

    // loop through choices, and create radio buttons 
    for (var i = 0; i < choices.length; i++) { 
    choicesHtml += "<input type='radio' name='quiz" + currentQuestion + 
    "' id='choice" + (i + 1) + 
    "' value='" + choices[i] + "'>" + 
    " <label for='choice" + (i + 1) + "'>" + choices[i] + "</label><br>"; 
    } 

    // load the question 
    questionContainer.textContent = quiz[currentQuestion].question; 

    // load the choices 
    choicesContainer.innerHTML = choicesHtml; 

    // setup for the first time 
    if (currentQuestion === 0) { 
    scoreContainer.textContent = "0 correct out of " + 
    quiz.length + ""; 
    // submitBtn.textContent = "Submit Answer"; 
    } 

    var radios = document.querySelectorAll('input[type=radio]'); 
    [].forEach.call(radios, function(radio) { 
    radio.onchange = function() { 
     checkAnswer(); 
    } 
    }) 
} 

function checkAnswer() { 
    // are we asking a question, or proceeding to next question? 
    if (askingQuestion) { 
    // submitBtn.textContent = "Next Question"; 
    askingQuestion = false; 

    // determine which radio button they clicked 
    var userpick, 
    correctIndex, 
    radios = document.getElementsByName("quiz" + currentQuestion); 
    for (var i = 0; i < radios.length; i++) { 
     if (radios[i].checked) { // if this radio button is checked 
     userpick = radios[i].value; 
     } 

     // get index of correct answer 
     if (radios[i].value == quiz[currentQuestion].correct) { 
     correctIndex = i; 
     } 
    } 

    // setup if they got it right, or wrong 

    if (userpick == quiz[currentQuestion].correct) { 
     score++; 
    } else { 
    } 

    scoreContainer.textContent = "" + score + " correct out of " + 
    quiz.length + ""; 


    askingQuestion = true; 
    // change button text back to "Submit Answer" 
    //submitBtn.textContent = "Submit Answer"; 
    // if we're not on last question, increase question number 
    if (currentQuestion < quiz.length - 1) { 
     currentQuestion++; 
     askQuestion(); 
    } else { 
     showFinalResults(); 
    } 
    } else { 
    } 
} 

function showFinalResults() { 
    content.innerHTML = "<h1>You did amazing!</h1>" + 
    "<h5>Below are your results</h5>" + 
    "<h2>" + score + " out of " + quiz.length + " questions, " + 
    Math.round(score/quiz.length * 100) + "%<h2>"; 
} 

window.addEventListener("load", askQuestion, false); 
submitBtn.addEventListener("click", checkAnswer, false); 
</script> 

<style> 
#container { 
    max-width:600px; 
    height: auto; 
    background: #59C1DA; 
    border: 10px solid #333; 
    border-radius: 5px; 
    margin: auto; 
    text-align: center; 
} 

#content { 
    border: 10px solid #fff; 
    padding: 15px; 
    color: #fff; 

} 
#question { 
    font-weight: bold; 
} 
#score { 
    margin-top: 20px; 
    font-weight: bold; 
} 
</style> 

Answer 1

Auf jsfiddle haben Sie das Skript getrennt. Auf Ihrer WordPress-Seite ist alles in einem Inline-Tag <script>. Das bedeutet, dass das window.load Ereignis * bereits bei der Ausführung des Skripts aufgetreten ist. Sie müssen entweder die Funktion askQuestion() direkt aufrufen oder (viel, viel, viel besser) das Skript in eine separate .js-Datei einfügen und es mit wp_enqueue_script() einbinden.

Answer 2

Ich behob das Problem durch die Installation eines WordPress-Plugins namens "Scripts n Styles", mit dem Sie Javascript-Code und CSS in jeden Beitrag separat implementieren können, ohne dass es beschädigt ist! Der HTML-Code bleibt im Wordpress-HTML-Post erhalten.

Es funktionierte für mich !!! Ich bin froh, dass ich es gelöst habe !!!