jquery - Javascript pick random txt in dir and populate div -

i want create allows me have txt documents or single web page (i can pre-populate mysql) has following data in it:

• question
• answer1
• answer2
• answer3
• answer4

each answer needs have set amount of points associated it. want place specific div tags in script, script goes following:

<script>  // psuedo:  // if answer irc found, run element change  // element change pulls question - answer db  // else, play sound.  var div = document.getelementbyid('answerone');  div.innerhtml = 'extra stuff';    var div = document.getelementbyid('answertwo');  div.innerhtml = 'extra stuff';    var div = document.getelementbyid('answerthree');  div.innerhtml = 'extra stuff';    var div = document.getelementbyid('answerfour');  div.innerhtml = 'extra stuff';    // add "points" class together	  $( document ).ready(function() {  	var sum = 0;  	$('.points').each(function () {  		sum += parsefloat($(this).text());  	});  	$('.total-points').text(sum);  });  </script>

body {      background: url('http://puu.sh/i4hoo/361da54ae9.jpg') no-repeat;      font-family:'montserrat', sans-serif;  }  span {      margin-top:10px;  }  #answers {      padding: 16px 0px;      margin-left: 240px;      color: white;      //background: cyan;      text-shadow: 2px 2px 3px rgba(0, 0, 0, 1);      width: 520px;  }  #answerone {      padding: 8px;      //background: blue;      width: 434px;      float:left;  }  #answertwo {      padding: 8px;      //background: blue;      width: 434px;      float:left;  }  #answerthree {      padding: 8px;      //background: blue;      width: 434px;      float:left;  }  #answerfour {      padding: 8px;      //background: blue;      width: 434px;      float:left;  }  #answerfive {      padding: 8px;      //background: blue;      width: 434px;      float:left;  }  #totalpoints {      padding: 8px;      //background: blue;      width: 434px;      float:left;      margin-top: 10px;  }  .points {      padding: 8px;      //background: blue;      width: 20px;      float:right;  }  .total-points {      padding: 8px;      //background: blue;      width: 20px;      float:right;      margin-top: 4px;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  <div id="answers">      <div id="answerone">tests</div>      <div class="points">12</div>      <div id="answertwo">tests</div>      <div class="points">12</div>      <div id="answerthree">tests</div>      <div class="points">12</div>      <div id="answerfour">tests</div>      <div class="points">12</div>      <div id="answerfive">tests</div>      <div class="points">12</div>      <div id="totalpoints"></div>      <div class="total-points">0</div>  </div>

the answers hidden @ first , activate if word detected (one of answers). how format text document populate content within divs using div.innerhtml?

you use filereader api read text file , put content div via .innerhtml. have html syntax in if like.

// pseudo text file!  var txtfile = new blob(['hello<br />', ' world!']);    var r = new filereader();    r.onload = function(e) {    var content = e.target.result;    var output = document.getelementbyid('output');    output.innerhtml = content;  }    r.readastext(txtfile);    // have load file first.  /*    var txtfile = "path/to/your/text.txt";  var xhr = new xmlhttprequest();  xhr.open('get', txtfile, true);  xhr.responsetype = 'blob';    xhr.onload = function(e) {    if (this.status == 200) {      var blob = this.response;      var r = new filereader();      r.onload = function(e) {        var content = e.target.result;        var output = document.getelementbyid('output');        output.innerhtml = content;      }      r.readastext(blob);    }  };    xhr.send();      */

<div id="output"></div>