HTML，CSS和JS没有正确链接

Question

我正在尝试使用 this codepen 中的代码构建测验（代码在下面的代码段中发布）。

$(document).ready(function() {
  //get total of questions
  var $questionNumber = $('h2').length;
  console.log($questionNumber);
  //caching final score
  var $totalScore = 0;

  $('li').click(function() {
    //caching variables
    var $parent = $(this).parent();
    var $span = $(this).find('.fa');

    //deactivate options on click
    $parent.find('li').off("click");

    //check for .correct class
    //if yes
    if ($(this).hasClass('correct')) {
      //add .correctAnswer class
      $(this).addClass('correctAnswer');
      //find next span and change icon
      $span.removeClass('fa fa-square-o').addClass('fa fa-check-square-o');
      //reduce opacity of siblings
      $(this).siblings().addClass('fade');
      //show answer
      var $answerReveal = $parent.next('.answerReveal').show();
      var $toShowCorrect = $answerReveal.find('.quizzAnswerC');
      var $toShowFalse = $answerReveal.find('.quizzAnswerF');
      $toShowCorrect.show();
      $toShowFalse.remove();
      //add 1 to total score
      $totalScore += 1;
      //console.log($totalScore);
    } else {
      //add .wrongAnswer class
      $(this).addClass('wrongAnswer').addClass('fade');
      //change icon
      $span.removeClass('fa fa-square-o').addClass('fa fa-check-square-o');
      //reduce opacity of its siblings
      $(this).siblings().addClass('fade');
      //show wrong Message
      var $answerReveal = $parent.next('.answerReveal').show();
      var $toShowCorrect = $answerReveal.find('.quizzAnswerC');
      var $toShowFalse = $answerReveal.find('.quizzAnswerF');
      $toShowCorrect.remove();
      $toShowFalse.show();
      //locate correct answer and highlight
      $parent.find('.correct').addClass('correctAnswer');
    };
  }); //end click function

  //print Results
  function printResult() {
    var resultText = '<p>';
    if ($totalScore === $questionNumber) {
      resultText += 'You got ' + $totalScore + ' out of ' + $questionNumber + '! </p>';
      $('.resultContainer').append(resultText);
      $('#halfText').append('<p>This is awesome!</p>');
      $('#halfImage').append('<img src="http://placehold.it/350x150" width="100%"><img>');
    } else if ($totalScore >= 3 && $totalScore < $questionNumber) {
      resultText += 'You got ' + $totalScore + ' out of ' + $questionNumber + '! </p>';
      $('.resultContainer').append(resultText);
      $('#halfText').append('<p>So and so...better luck next time</p>');
      $('#halfImage').append('<img src="http://placehold.it/350x150" width="100%"><img>');
    } else if ($totalScore < 3) {
      resultText += 'You got ' + $totalScore + ' out of ' + $questionNumber + ' </p>';
      $('.resultContainer').append(resultText);
      $('#halfText').append('<p>No..no...no...you have to try harder</p>');
      $('#halfImage').append('<img src="http://placehold.it/350x150" width="100%"><img>');
    }

  }; //end function

  //final score
  $('ul').last().click(function() {
    //prevent further clicks on this
    $(this).off('click');
    //show result after last li is clicked
    var $height = $('.finalResult').height();
    printResult();
    $('.finalResult').show();
    $('html, body').animate({
        scrollTop: $(document).height() - $height
      },
      1400);
  });

}); //end dom ready

@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
 body {
  background: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size: 1em;
}
.container {
  width: 100%;
}
.inner {
  width: 60%;
  margin: 0 auto;
}
ul {
  list-style-type: none;
  margin-left: -40px;
}
h2 {
  margin-top: 50px;
}
/*********************** LIST ***********************/

.simpleListAnswer:hover {
  /*background:#fff195;*/
  cursor: pointer;
}
.simpleListAnswer,
.quizzAnswer {
  width: 100%;
  background: #f2f2f2;
  padding: 9px;
  margin-top: 12px;
  border: 1px solid #d8d8d8;
}
.simpleListText {
  margin-left: 8px;
  font-size: 19px;
  color: #3d3d3d;
}
/***************************ANSWER REVEAL******************/

.quizzAnswerC,
.quizzAnswerF,
.finalResult {
  background: #fefefe;
  border: 1px solid #ddd;
}
.answerReveal {
  display: none;
  width: 100%;
}
.answerHeader div {
  color: #84f272;
  margin-top: 10px;
}
#bravo,
#sorry {
  width: 100%;
  margin-left: 20px;
  margin-top: 30px;
}
.answerHeader {
  margin-left: 20px;
  width: 100%;
}
h3.correctMessage {
  color: #88f078;
  font-size: 30px;
}
h3.wrongMessage {
  color: #ff1f1f;
  font-size: 30px;
}
.fa.fa-check-circle,
.fa.fa-times-circle {
  padding-right: 10px;
}
.correctAnswer {
  background: #88f078;
}
.wrongAnswer {
  background: #ff1f1f;
}
.fade {
  opacity: .6;
  cursor: default;
}
/*************************FINAL RESULT******************************/

.finalResult {
  width: 100%;
  height: 300px;
  padding: 0 10px;
  margin-top: 30px;
  display: none;
}
.finalResult h4 {
  color: #797979;
}
.resultContainer p {
  font-size: 25px;
}
#halfText,
#halfImage {
  width: 50%;
  float: left;
}
#halfImage {
  margin-top: -40px;
}
#halfImage img {
  width: 100%;
}

<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="font-awesome-4.3.0/css/font-awesome.min.css">
  <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
  <script src="jquery-1.11.2.js"></script>
  <script src="app.js"></script>
</head>

<body>
  <div class="container">
    <div class="inner">

      <h1>How much do you think you know about stuff?</h1>

      <h2>Who discovered America?</h2>
      <ul class="simpleList">
        <li class="simpleListAnswer correct">
          <span class="fa fa-square-o"></span>
          <span class="simpleListText">Christopher Columbus</span>
        </li>

        <li class="simpleListAnswer">
          <span class="fa fa-square-o"></span>
          <span class="simpleListText">My grandma</span>
        </li>
        <li class="simpleListAnswer">
          <span class="fa fa-square-o"></span>
          <span class="simpleListText">Yes,please</span>
        </li>
        <li class="simpleListAnswer">
          <span class="fa fa-square-o"></span>
          <span class="simpleListText">Who's this on the phone again?</span>
        </li>
      </ul>
      <!--end simpleList-->

      <div class="answerReveal">

        <div class="quizzAnswerC">
          <div class="answerHeader">
            <h3 class="correctMessage"><i class="fa fa-check-circle "></i>Correct! </h3>
          </div>
          <!--end answer header-->
          <div class="answerText">
            <p id="bravo">Your answer is correct on so many levels! Well done!</p>
          </div>
          <!--end asnwerText-->
        </div>
        <!--end quizzAnswerC-->

        <div class="quizzAnswerF">
          <div class="answerHeader">
            <h3 class="wrongMessage"><i class="fa fa-times-circle"></i>Sorry</h3>
          </div>
          <!--end answer header-->
          <div class="answerText">
            <p id="sorry">This is not the answer we were looking for...</p>
          </div>
          <!--end asnwerText-->
        </div>
        <!--end quizzAnswerF-->
      </div>
      <!--end answerReveal-->

      <h2>What is 2 x 4?</h2>
      <ul class="simpleList">
        <li class="simpleListAnswer">
          <span class="fa fa-square-o"></span>
          <span class="simpleListText">Pasta</span>
        </li>

        <li class="simpleListAnswer correct">
          <span class="fa fa-square-o"></span>
          <span class="simpleListText">8</span>
        </li>
        <li class="simpleListAnswer">
          <span class="fa fa-square-o"></span>
          <span class="simpleListText">232.456</span>
        </li>
        <li class="simpleListAnswer">
          <span class="fa fa-square-o"></span>
          <span class="simpleListText">1</span>
        </li>
      </ul>
      <!--end simpleList-->

      <div class="answerReveal">

        <div class="quizzAnswerC">
          <div class="answerHeader">
            <h3 class="correctMessage"><i class="fa fa-check-circle "></i>Correct! </h3>
          </div>
          <!--end answer header-->
          <div class="answerText">
            <p id="bravo">Your answer is correct on so many levels! Well done!</p>
          </div>
          <!--end asnwerText-->
        </div>
        <!--end quizzAnswerC-->

        <div class="quizzAnswerF">
          <div class="answerHeader">
            <h3 class="wrongMessage"><i class="fa fa-times-circle  "></i>Sorry</h3>
          </div>
          <!--end answer header-->
          <div class="answerText">
            <p id="sorry">This is not the answer we were looking for...</p>
          </div>
          <!--end asnwerText-->
        </div>
        <!--end quizzAnswerF-->
      </div>
      <!--end answerReveal-->

      <h2>How many tires do you have to buy if you have 2 cars in the family?</h2>
      <ul class="simpleList">
        <li class="simpleListAnswer">
          <span class="fa fa-square-o"></span>
          <span class="simpleListText">10</span>
        </li>

        <li class="simpleListAnswer">
          <span class="fa fa-square-o"></span>
          <span class="simpleListText">We don't have a car</span>
        </li>
        <li class="simpleListAnswer correct">
          <span class="fa fa-square-o"></span>
          <span class="simpleListText">8</span>
        </li>
        <li class="simpleListAnswer">
          <span class="fa fa-square-o"></span>
          <span class="simpleListText">12</span>
        </li>
      </ul>
      <!--end simpleList-->

      <div class="answerReveal">

        <div class="quizzAnswerC">
          <div class="answerHeader">
            <h3 class="correctMessage"><i class="fa fa-check-circle "></i>Correct! </h3>
          </div>
          <!--end answer header-->
          <div class="answerText">
            <p id="bravo">Your answer is correct on so many levels! Well done!</p>
          </div>
          <!--end asnwerText-->
        </div>
        <!--end quizzAnswerC-->

        <div class="quizzAnswerF">
          <div class="answerHeader">
            <h3 class="wrongMessage"><i class="fa fa-times-circle  "></i>Sorry</h3>
          </div>
          <!--end answer header-->
          <div class="answerText">
            <p id="sorry">This is not the answer we were looking for...</p>
          </div>
          <!--end asnwerText-->
        </div>
        <!--end quizzAnswerF-->
      </div>
      <!--end answerReveal-->

      <h2>If a jar of marmelade costs $3 how much do 12 jars of marmelade cost?</h2>
      <ul class="simpleList">

        <li class="simpleListAnswer">
          <span class="fa fa-square-o"></span>
          <span class="simpleListText">Batman</span>
        </li>

        <li class="simpleListAnswer">
          <span class="fa fa-square-o"></span>
          <span class="simpleListText">$30</span>
        </li>
        <li class="simpleListAnswer">
          <span class="fa fa-square-o"></span>
          <span class="simpleListText">Can I have Nutella instead?</span>
        </li>
        <li class="simpleListAnswer correct">
          <span class="fa fa-square-o"></span>
          <span class="simpleListText">$36</span>
        </li>
      </ul>
      <!--end simpleList-->

      <div class="answerReveal">

        <div class="quizzAnswerC">
          <div class="answerHeader">
            <h3 class="correctMessage"><i class="fa fa-check-circle "></i>Correct! </h3>
          </div>
          <!--end answer header-->
          <div class="answerText">
            <p id="bravo">Your answer is correct on so many levels! Well done!</p>
          </div>
          <!--end asnwerText-->
        </div>
        <!--end quizzAnswerC-->

        <div class="quizzAnswerF">
          <div class="answerHeader">
            <h3 class="wrongMessage"><i class="fa fa-times-circle  "></i>Sorry</h3>
          </div>
          <!--end answer header-->
          <div class="answerText">
            <p id="sorry">This is not the answer we were looking for...</p>
          </div>
          <!--end asnwerText-->
        </div>
        <!--end quizzAnswerF-->
      </div>
      <!--end answerReveal-->

      <h2>Which planet is nearest the sun?</h2>
      <ul class="simpleList">

        <li class="simpleListAnswer">
          <span class="fa fa-square-o"></span>
          <span class="simpleListText">Venus</span>
        </li>

        <li class="simpleListAnswer correct">
          <span class="fa fa-square-o"></span>
          <span class="simpleListText">Mercury</span>
        </li>
        <li class="simpleListAnswer">
          <span class="fa fa-square-o"></span>
          <span class="simpleListText">The Moon</span>
        </li>
        <li class="simpleListAnswer">
          <span class="fa fa-square-o"></span>
          <span class="simpleListText">Earth</span>
        </li>
      </ul>
      <!--end simpleList-->

      <div class="answerReveal">

        <div class="quizzAnswerC">
          <div class="answerHeader">
            <h3 class="correctMessage"><i class="fa fa-check-circle "></i>Correct! </h3>
          </div>
          <!--end answer header-->
          <div class="answerText">
            <p id="bravo">Your answer is correct on so many levels! Well done!</p>
          </div>
          <!--end asnwerText-->
        </div>
        <!--end quizzAnswerC-->

        <div class="quizzAnswerF">
          <div class="answerHeader">
            <h3 class="wrongMessage"><i class="fa fa-times-circle  "></i>Sorry</h3>
          </div>
          <!--end answer header-->
          <div class="answerText">
            <p id="sorry">This is not the answer we were looking for...</p>
          </div>
          <!--end asnwerText-->
        </div>
        <!--end quizzAnswerF-->
      </div>
      <!--end answerReveal-->


      <div class="finalResult">
        <h4>How much do you think you know about stuff?</h4>
        <div class="resultContainer"></div>
        <div id="halfText"></div>
        <div id="halfImage"></div>
      </div>
      <!--end finalResult-->

    </div>
    <!--end inner-->
  </div>
  <!--end container-->
</body>

我把它放在一个单独的HTML，CSS和JavaScript文件中并将它们全部链接起来然而当我将它上传到我的服务器时，没有任何按钮实际让我点击它们，它没有显示正确或错误的答案。

我有什么明显的理由在这里失踪吗？

Answer 1

Codepen会自动为您提供jQuery，但是如果您直接复制代码，则会缺少jQuery引用。

您需要做的就是修改HTML所在的位置：

<script src="jquery-1.11.2.js"></script>

并将整个元素更改为：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>