2016-03-23 6 views
-1

Этот код не работает так, как на JsFiddle. Он едва показывает половину приложения, когда он реализован в WordPress.Javascript не работает над WordPress

См скрипку: https://jsfiddle.net/od6g095L/

Как это должно дисплей:

enter image description here

Это, как он отображает на WordPress: enter image description here

Это именно то, что я на моей странице Wordpress:

<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> 
+0

Я уверен, что jQuery запускается по умолчанию в WordPress, и если это так, функция 'function $ (id) {// ярлык для document.getElementById' будет работать с jQuery ... или наоборот. – LGSon

ответ

0

На jsfiddle у вас есть отдельный сценарий. На вашей странице WordPress все это в встроенном теге <script>. Это означает, что событие window.load имеет * уже произошел к моменту выполнения вашего скрипта. Вам нужно либо просто вызвать функцию askQuestion(), либо (намного, намного, намного лучше) поставить скрипт в отдельный .js-файл и включить его с помощью wp_enqueue_script().

0

Я исправил проблему, установив плагин WordPress под названием «Сценарии n стилей», который позволяет вам внедрять Javascript-код и CSS в каждый пост отдельно, без его повреждения! Html останется в сообщении wordpress html.

Это сработало для меня !!! Я рад, что решил!

Смежные вопросы