Connecting Wordpress plugin file to css and JavaScript files

<div ng-app="">

  <center>
    <h1 id="nameToUse">What name do you want to use?</h1></center>
  <center>
    <p id="nameInput">Name :
      <input type="text" id="input" ng-model="name" placeholder="Enter name here">
    </p>
  </center>

  <center>
    <div id="soWhatsGoingOn">
      <h3>So <strong>{{name}}</strong>, what's going on?</h3>
      <style type="text/css">
        .tftable {
          font-size: 12px;
          color: #333333;
          width: 80%;
          border-width: 1px;
          border-color: #729ea5;
          border-collapse: collapse;
        }

        .tftable th {
          font-size: 12px;
          background-color: #acc8cc;
          border-width: 1px;
          padding: 8px;
          border-style: solid;
          border-color: #729ea5;
          text-align: left;
        }

        .tftable tr {
          background-color: #d4e3e5;
        }

        .tftable td {
          font-size: 12px;
          border-width: 1px;
          padding: 8px;
          border-style: solid;
          border-color: #729ea5;
        }

        .tftable tr:hover {
          background-color: #ffffff;
          cursor: pointer;
        }

        .continue1:hover {
          cursor: pointer;
        }

        h4,
        h5 {
          padding: 10px;
        }

        article.post ul,
        .comment-content ul,
        article.page ul {
          padding-left: 34px;
        }

      </style>

      <table class="tftable" border="1">
        <tr id="imHearingThings">
          <td>
            <center><span class="dashicons dashicons-format-chat"></span></center>
          </td>
          <td>
            <div class="mainOptions">People are saying things to me that I don't like </div>
          </td>
        </tr>
        <tr id="peopleAreHurtingMe">
          <td>
            <center><span class="dashicons dashicons-universal-access-alt"></span>
              <center>
          </td>
          <td>
            <div class="mainOptions">People are hurting my body </div>
          </td>
        </tr>
        <tr id="internetBullying">
          <td>
            <center><span class="dashicons dashicons-welcome-view-site"></span></center>
          </td>
          <td>
            <div class="mainOptions">Something was put on the internet </div>
          </td>
        </tr>
      </table>
    </div>
    </center>
    <center>
      <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:700' rel='stylesheet' type='text/css'>
      <a class="continue" href="javascript:void(0);">Continue</a>
    </center>
    <center id="ideasForCyberbulling">
      <table border="1">
        <tr>
          <td>
            <h4>Ideas on what you can do against cyber bulling</h4>
            <center>
              <h4>Steps that you can take</h4>
            </center>
            <ol>
              <li>Do not respond to any of the cyber bullying</li>
              <li>Copy and paste anything that you don't like into a word document: mean, embarrassing, lies or repeating the same thing over and over</li>
              <li>Make a list of names of people that are creating or sharing what you don't like</li>
              <li>Block anyone who is participating in the cyber bullying</li>
              <li>Create new account settings with filters and a new password</li>
              <li>Get help. You can talk with friends, family, teachers and the police</li>
              <ol>
                <center>
                  <div class="continue1" id="backToStartCyberBulling">Back to Start</div>
                </center>
          </td>
        </tr>
      </table>
    </center>
    <center id="hurtingMeResponse1">
      <table border="1">
        <tr>
          <td>
            <h4>How is someone hurting you?</h4>
            <div class="continue1" style="float: left;" id="touchingYes1">Touching me</div>
            <div class="continue1" id="hittingNo1" style="float: right;">Hitting me</div>
          </td>
        </tr>
      </table>
    </center>
    <center id="hurtingMeResponse3">
      <table border="1">
        <tr>
          <td>
            <h4>What to do if you are being hit:</h4>
            <ul>
              <li>Always protect your body. Walk, run or catch a bus/train to get away</li>
              <li>Call the police</li>
              <li>Tell your family</li>
            </ul>
            <div class="continue1" id="backToStartHitting" style="float: right;">Back to Start</div>
          </td>
        </tr>
      </table>
    </center>
    <center id="hurtingMeResponseTouching">
      <table border="1">
        <tr>
          <td>
            <h4>Do you think telling them to stop will work?</h4>
            <div class="continue1" style="float: left;" id="stopTouchingYes1">Yes</div>
            <div class="continue1" id="stopTouchingNo1" style="float: right;">No</div>
          </td>
        </tr>
      </table>
    </center>
    <center id="hurtingMeResponseTouchingTalkingNotWork">
      <table border="1">
        <tr>
          <td>
            <center>
              <h4>Here are some ideas for when telling someone to stop touching won't work:</h4></center>
            <ul>
              <li>In front of your friends say "I don't want you touching me."</li>
            </ul>
            <center>
              <div class="continue1" id="stopTouchingTalkingBackToStartTouchingNotWorking">Back to Start</div>
            </center>
          </td>
        </tr>
      </table>
    </center>
    <center id="hurtingMeResponseTouchingTalking">
      <table border="1">
        <tr>
          <td>
            <center>
              <h4>Here are some ideas for when you talk with the person touching you:</h4></center>
            <ul>
              <li>In front of your friends say "I don't want you touching me."</li>
              <li>Set up a meeting with you and a teacher, manager, boss and the person touching you</li>
              <li>Make your body stink (if you are doing this you should only do it once and go get more help)</li>
              <li>Yell--really loud--"FIRE!!!!"</li>
              <li>Say "I have something called <em>shingles.</em> It's a skin decease you get from touching"</li>
            </ul>
            <center>
              <div class="continue1" id="stopTouchingTalkingBackToStart">Back to Start</div>
            </center>
          </td>
        </tr>
      </table>
    </center>
    <center id="hearingBullyingResponse1">
      <table border="1">
        <tr>
          <td>
            <h4>Can you tell someone with some control? For example a parent, a teacher, a principal, a manager?</h4>
            <div class="continue1" style="float: left;" id="hearingYes1">Yes</div>
            <div class="continue1" id="hearingNo1" style="float: right;">No</div>
          </td>
        </tr>
      </table>
    </center>
    <center id="hearingBullyingResponseYes1">
      <table border="1">
        <tr>
          <td>
            <h4>Here are some things to think about when you talk with the person you trust:</h4>
            <ul>
              <li>Remove the reasons for being the target: think of 5 reasons you are being bullied and remove them</li>
              <li>Have friends: find 3 people that you can be with that will be on your side</li>
              <li>Talk with the bully with another person that you trust: find out more about your bully</li>
            </ul>
            <center>
              <div class="continue1" id="backToStart">Back to Start</div>
            </center>
          </td>
        </tr>
      </table>

    </center>
    <center id="hearingBullyingResponse2">
      <table border="1">
        <tr>
          <td>
            <center>
              <h4>Everyone has a boss; can you talk to the boss of your boss? </h4></center>
            <div class="continue1" style="float: left;" id="hearingYes2">Yes</div>
            <div class="continue1" id="hearingNo2" style="float: right;">No</div>
          </td>
        </tr>
      </table>
    </center>
    <center id="hearingBullyingResponse3">
      <table border="1">
        <tr>
          <td>
            <center>
              <h4>Here are some ideas of things to try:</h4></center>
            <ul>
              <li>Talk with your friends and family</li>
              <li>Keep a notepad of what was said to you and how you responded</li>
              <li>Find out what time of the day you get the worst bullying and go for lunch or to the bathroom at that time</li>
              <li>Try responding with a smile and the list of examples below</li>
              <center><strong>If someone says a negative like "You have no friends!" respond with:</strong></center>
              <li>Agree %100 so that it's crazy: <strong>Bully:</strong> “You have no friends” | <strong>{{name}}</strong><em> "Yea, I’m like Johnny Depp in Pirates of the Caribbean always on my own adventure."</em></li>
              <li>Disagree %100 so that it's crazy: <strong>Bully:</strong> “You have no friends!” | <strong>{{name}}</strong><em> "Not true. I’m actually a big deal in North Korea."</em></li>
              <li>Agree and flip “You have no friends!” | <strong>{{name}}</strong><em> "It’s true—so I guess you and I are the same"</em></li>
              <li>Disagree and flip: <strong>Bully:</strong> “You have no friends!” | <strong>{{name}}</strong><em>“I have friends and I’ll let you hang out with them if you have nothing to do this weekend.”</em></li>
              <li>Ignore</li>
              <li>Misdirect: <strong>Bully:</strong> “You have no friends!” | <strong>{{name}}</strong><em> "Ever see the show “Friends”… those people are the worst friends ever!"</em></li>
              <li>Not Understand: <strong>Bully:</strong> “You have no friends!” | <strong>{{name}}</strong><em> “What? That’s a strange thing to say.”</em></li>
            </ul>
            <center>
              <input type="text" name="txtJob" id="txtJob" value="Type Here">
              <p>Click "Practice" hear what you have typed above or press one of the options.</p>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>
      document.getElementById("myBtn").onclick = displayDate;

      function displayDate() {
        var x = document.getElementById("txtJob").value;
        var msg = new SpeechSynthesisUtterance(x);
        msg.lang = 'en-GB';
        window.speechSynthesis.speak(msg);
      }
      $(document).ready(function() {
        $(".continue").click(function() {
          $(".tftable").fadeIn(1000);
          $("#soWhatsGoingOn").fadeIn(9000);
          $("#nameInput").hide();
          $("#nameToUse").hide();
          $(".continue").hide();
        });
        $(document).keypress(function(e) {
          if (e.which == 13) {
            $(".tftable").fadeIn(1000);
            $("#soWhatsGoingOn").fadeIn(9000);
            $("#nameInput").hide();
            $("#nameToUse").hide();
            $(".continue").hide();
          }
        });
        $("#hittingNo1").click(function() {
          $("#hurtingMeResponse1").hide();
          $("#hurtingMeResponse3").fadeIn(2000);
        });
        $("#stopTouchingNo1").click(function() {
          $("#hurtingMeResponseTouching").hide();
          $("#hurtingMeResponseTouchingTalkingNotWork").fadeIn(2000);
        });
        $("#stopTouchingTalkingBackToStart").click(function() {
          $("#hurtingMeResponseTouchingTalking").hide();
          $("#nameToUse").fadeIn(2000);
          $("#nameInput").fadeIn(2000);
          $(".continue").fadeIn(2000);
        });
        $("#stopTouchingYes1").click(function() {
          $("#hurtingMeResponseTouching").hide();
          $("#hurtingMeResponseTouchingTalking").fadeIn(2000);
        });
        $("#imHearingThings").click(function() {
          $(".tftable, #soWhatsGoingOn").hide();
          $("#hearingBullyingResponse1, .continue1").fadeIn(2000);
        });
        $("#touchingYes1").click(function() {
          $("#hurtingMeResponse1").hide();
          $("#hurtingMeResponseTouching").fadeIn(2000);
        });
        $("#peopleAreHurtingMe").click(function() {
          $(".tftable, #soWhatsGoingOn").hide();
        });
        $("#internetBullying").click(function() {
          $(".tftable, #soWhatsGoingOn").hide();
          $("#ideasForCyberbulling").fadeIn(2000);
        });
        $("#hearingYes1").click(function() {
          $("#hearingBullyingResponse1").hide();
          $("#hearingBullyingResponseYes1").fadeIn(2000);
        });
        $("#hearingYes2").click(function() {
          $("#hearingBullyingResponse2").hide();
          $("#hearingBullyingResponseYes1").fadeIn(2000);
        });
        $("#hearingNo1").click(function() {
          $("#hearingBullyingResponse1").hide();
          $("#hearingBullyingResponse2").fadeIn(2000);
        });
        $("#hearingNo2").click(function() {
          $("#hearingBullyingResponse2").hide();
          $("#hearingBullyingResponse3").fadeIn(2000);
        });
        $("#stopTouchingTalkingBackToStartTouchingNotWorking").click(function() {
          $("#hurtingMeResponseTouchingTalkingNotWork").hide();
          $("#nameToUse").fadeIn(2000);
          $("#nameInput").fadeIn(2000);
          $(".continue").fadeIn(2000);
        });
        $("#backToStart").click(function() {
          $("#hearingBullyingResponseYes1").hide();
          $("#nameToUse").fadeIn(2000);
          $("#nameInput").fadeIn(2000);
          $(".continue").fadeIn(2000);
        });
        $("#backToStart2").click(function() {
          $("#hearingBullyingResponse3").hide();
          $("#nameToUse").fadeIn(2000);
          $("#nameInput").fadeIn(2000);
          $(".continue").fadeIn(2000);
        });
        $("#backToStartHitting").click(function() {
          $("#hurtingMeResponse3").hide();
          $("#nameToUse").fadeIn(2000);
          $("#nameInput").fadeIn(2000);
          $(".continue").fadeIn(2000);
        });
        $("#backToStartCyberBulling").click(function() {
          $("#ideasForCyberbulling").hide();
          $("#nameToUse").fadeIn(2000);
          $("#nameInput").fadeIn(2000);
          $(".continue").fadeIn(2000);
        });
        $("#peopleAreHurtingMe").click(function() {
          $("#hurtingMeResponse1").fadeIn(2000);
        });
      });

    </script>

    <style>
      #stopBullyingLogo {
        height: 142px;
        padding-bottom: 10px;
        margin-bottom: 10px;
      }

      #show,
      #soWhatsGoingOn,
      #hearingBullyingResponse1,
      #hearingBullyingResponse2,
      #hearingBullyingResponse3,
      #hearingBullyingResponseYes1,
      #hurtingMeResponse1,
      #hurtingMeResponseTouching,
      #hurtingMeResponseTouchingTalking,
      #hurtingMeResponseTouchingTalkingNotWork,
      #hurtingMeResponse3,
      #ideasForCyberbulling {
        display: none;
      }

      .mainOptions {
        padding: 20px;
      }

      body {
        background-image: url(http://subtlepatterns.com/patterns/ricepaper.png)
      }

      .continue,
      .continue1 {
        position: relative;
        color: rgba(255, 255, 255, 1);
        text-decoration: none;
        background-color: #00CDCD;
        font-family: 'Yanone Kaffeesatz';
        font-weight: 700;
        font-size: 3em;
        display: block;
        padding: 4px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
        -webkit-box-shadow: 0px 9px 0px #5F9EA0, 0px 9px 25px #5F9EA0;
        -moz-box-shadow: 0px 9px 0px #5F9EA0, 0px 9px 25px #5F9EA0;
        box-shadow: 0px 9px 0px #5F9EA0, 0px 9px 25px #5F9EA0;
        width: 160px;
        text-align: center;
        margin: 50px;
        -webkit-transition: all .1s ease;
        -moz-transition: all .1s ease;
        -ms-transition: all .1s ease;
        -o-transition: all .1s ease;
        transition: all .1s ease;
      }

      .continue:active,
      .continue1:active {
        -webkit-box-shadow: 0px 3px 0px #5F9EA0, 0px 3px 6px rgba(0, 0, 0, .9);
        -moz-box-shadow: 0px 3px 0px #5F9EA0, 0px 3px 6px rgba(0, 0, 0, .9);
        box-shadow: 0px 3px 0px #5F9EA0, 0px 3px 6px rgba(0, 0, 0, .9);
        position: relative;
        top: 6px;
      }

    </style>
</div>