的Javascript挑隨機TXT的dir和填充DIV

Question

我想創造的東西，讓我有TXT文本文件或一個單一的網頁（與MYSQL我可以預填充此），其中有如下數據：

• 問題
• 正確答案爲
• ANSWER2
• ANSWER3
• Answer4

每個答案還需要有一定數量的關聯點。 然後我想把它放到我的腳本具體div標籤，腳本都按如下：

<script> 
 
// PSUEDO: 
 
// If Answer from IRC is found, then run Element change 
 
// Element change pulls from 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 all "Points" class together \t 
 
$(document).ready(function() { 
 
\t var sum = 0; 
 
\t $('.Points').each(function() { 
 
\t \t sum += parseFloat($(this).text()); 
 
\t }); 
 
\t $('.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>

這些問題的答案將首先被隱藏，如果檢測到的字將啓動（其中一個答案）。我如何格式化文本文檔以使用div.innerHTML填充div內的內容？

Answer 1

您可以使用FileReader API來讀取文本文件，然後通過.innerHTML將內容放入您的div。如果你願意的話，你甚至可以使用HTML語法。

// This is just a 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); 
 

 
// You would actually have to load your 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>

Answer 2

嘗試利用text/html文件，​​填充div元素。

text/html文件

<div class="Answerone"> 
    Extra stuff 
</div> 
<div class="Answertwo"> 
    Extra stuff 
</div> 
<div class="Answerthree"> 
    Extra stuff 
</div> 
<div class="Answerfour"> 
    Extra stuff 
</div> 

js

$("#Answerone").load("path/to/html/document .Answerone", function() { 
    $(this) 
    .html(
    $(this) 
    .find(".Answerone") 
    .html() 
); 
}); 

的jsfiddle http://jsfiddle.net/Lvb01xey/