通过javascript从XML中检索值

我有一个XML，其中有3个问题4个选项，每个答案都是。我想随机选择一个问题，并将其显示在html div标记中。请帮助做到这一点。通过javascript从XML中检索值

我; m获取对象，而不是xml节点中的值。

<exam> 
<sitescope> 
    <q1>what is sitescope 1</q1> 
    <q1a1>1</q1a1> 
    <q1a2>2</q1a2> 
    <q1a3>3</q1a3> 
    <q1a4>4</q1a4> 
    <q1ans>1</q1ans> 
    <q2>what is sitescope 1</q2> 
    <q2a1>1</q2a1> 
    <q2a2>2</q2a2> 
    <q2a3>3</q2a3> 
    <q2a4>4</q2a4> 
    <q2ans>1</q2ans> 
    <q3>what is sitescope 1</q3> 
    <q3a1>1</q3a1> 
    <q3a2>2</q3a2> 
    <q3a3>3</q3a3> 
    <q3a4>4</q3a4> 
    <q3ans>1</q3ans> 
</sitescope>

这是使用HTML网页IM：

<html> 
<script type="text/javascript"> 
function questions() { 
    var request = new XMLHttpRequest(); 
    request.open("GET", "/questions.xml", false); 
    request.send(); 
    var xml = request.responseXML; 

    var qstn = xml.getElementsByTagName("q1").item(0).nodeValue; 
    var qstnans1 = xml.getElementsByTagName("q1a1").item(0).nodeValue; 
    var qstnans2 = xml.getElementsByTagName("q1a2").item(0).nodeValue; 
    var qstnans3 = xml.getElementsByTagName("q1a3").item(0).nodeValue; 
    var qstnans4 = xml.getElementsByTagName("q1a4").item(0).nodeValue; 


    document.getElementById("q1").innerHTML = qstn; 
    document.getElementById("q1a1").innerHTML = qstnans1; 
    document.getElementById("q1a2").innerHTML = qstnans2; 
    document.getElementById("q1a3").innerHTML = qstnans3; 



</script> 


<form> 
    <div> 
     <div> 
      <div style="float: left;" id="qstn1"></div> 
      <div id="q1"></div> 
     </div> 
     <br> 
     <div> 
      <input type="radio" name="1" style="float: left;"> 
      <div id="q1a1"></div> 
     </div> 
     <br> 
     <div> 
      <input type="radio" name="1" style="float: left;"> 
      <div id="q1a2"></div> 
     </div> 
     <br> 
     <div> 
      <input type="radio" name="1" style="float: left;"> 
      <div id="q1a3"></div> 
     </div> 
     <br> 
     <div> 
      <input type="radio" name="1" style="float: left;"> 
      <div id="q1a4"></div> 
     </div> 
    </div> 

</form>

来源

2013-08-20 sek har

你能改变xml的结构吗？像： – cocco

是可以改变这一点。 –

给我一秒钟 – cocco

这里是存储答案到一个数组中，并在打印他们的JSON方式

完全工作代码结束。

随机播放功能
缓存问题
存储答案
添加和删除不必要的事件处理器。
打印出结果
使用文档片段
无限答案
与外部库
和引用兼容全部负载

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Quiz</title> 
<script> 
(function(W){ 
var q,current=0,question,answers,btn,D,A=[]; 
function shuffleArray(d){for(var c=d.length-1;c>0;c--){var b=Math.floor(Math.random()*(c+1));var a=d[c];d[c]=d[b];d[b]=a}return d} 
function ajax(a,b,c){c=new XMLHttpRequest;c.open('GET',a);c.onload=b;c.send()} 
function set(){q=shuffleArray(JSON.parse(this.response));next()} 
function next(){ 
var a=q[current]; 
question.innerText=a.question; 
var f=D.createDocumentFragment(); 
for(var c=0,d;d=a.answers[c];++c){ 
    var g=D.createElement('input'),l=D.createElement('label'); 
    g.type='radio';g.name='a';g.value=d; 
    l.appendChild(g);l.appendChild(D.createTextNode(d)); 
    f.appendChild(l); 
} 
btn.addEventListener('click',ok,false); 
answers.innerHTML=''; 
answers.appendChild(f); 
current++; 
} 
function ok(){ 
btn.removeEventListener('click',ok,false);var a=current-1; 
A[a]={'q':q[a].question,'a':answers.querySelector('input[type="radio"]:checked').value} 
if(current<q.length){next()}else{done()} 
} 
function done(){ 
question.parentNode.removeChild(question); 
answers.parentNode.removeChild(answers); 
btn.parentNode.removeChild(btn); 
D.body.appendChild(D.createElement('pre')).innerText=JSON.stringify(A,null,' '); 
} 
function init(){ 
D=W.document; 
answers=D.getElementById('answers'); 
question=D.getElementById('question'); 
btn=D.getElementById('btn'); 
ajax('exam.js',set); 
} 
W.addEventListener('load',init,false); 
})(window) 
</script> 
</head> 
<body> 
<div id="question"></div> 
<div id="answers"></div> 
<button id="btn">OK</button> 
</body> 
</html>

定义

无限的问题

json

[ 
{ 
    "question":"what is a?", 
    "answers":["a","b","c","d"] 
}, 
{ 
    "question":"what is b?", 
    "answers":["a","b","c","d"] 
}, 
{ 
    "question":"what is c?", 
    "answers":["a","b","c","d"] 
} 
]

来源

2013-08-20 14:11:46 cocco

因此XML适当这种方式构造。

在HTML

我加入了费舍尔耶茨洗牌的功能，因为它是一个考试，因此它返回一个更真实的数字VS只是length*Math.random();

n包含洗牌答案指数。

该代码没有完成...它只是显示第一个随机问题。

XML

<?xml version="1.0" encoding="utf-8"?> 
<exam> 
<item> 
<question>what is a?</question> 
<answers> 
<answer>a</answer> 
<answer>b</answer> 
<answer>c</answer> 
<answer>d</answer> 
</answers> 
</item> 
<item> 
<question>what is b?</question> 
<answers> 
<answer>a</answer> 
<answer>b</answer> 
<answer>c</answer> 
<answer>d</answer> 
</answers> 
</item> 
<item> 
<question>what is c?</question> 
<answers> 
<answer>a</answer> 
<answer>b</answer> 
<answer>c</answer> 
<answer>d</answer> 
</answers> 
</item> 
<item> 
<question>what is d?</question> 
<answers> 
<answer>a</answer> 
<answer>b</answer> 
<answer>c</answer> 
<answer>d</answer> 
</answers> 
</item> 
</exam>

HTML

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
<script> 
function shuffleArray(d){for(var c=d.length-1;c>0;c--){var b=Math.floor(Math.random()*(c+1));var a=d[c];d[c]=d[b];d[b]=a}return d}; 
function x(a,b,c){ // Url, Callback, just a placeholder 
c=new XMLHttpRequest; 
c.open('GET',a); 
c.onload=b; 
c.send() 
} 
function h(){ 
var i=this.responseXML.getElementsByTagName('item'),l=i.length,n=[]; 
while(l--){n[l]=l}; 
n=shuffleArray(n); 
document.getElementById('question').innerText=i[n[0]].getElementsByTagName('question')[0].textContent; 
} 
window.onload=function(){ 
x('exam.xml',h); 
} 
</script> 
</head> 
<body> 
<div id="question"></div> 
</body> 
</html>

，如果你不明白的地方就问..

来源

2013-08-20 11:57:47 cocco

在函数x我不得不再次调用h函数是不是.. –

你应该考虑改变你的XML结构更易于管理的一个或使用JSON正如所建议的那样。但是，因为我有时间杀

function displayQn(xml, qnIdx) { 
    var prefix = 'q' + qnIdx; 
    document.getElementById("q").innerHTML = xml.querySelector(prefix).textContent; 
    for (var i = 1; i < 5; i++) { 
    document.getElementById('a' + i).innerHTML = xml.querySelector(prefix + 'a' + i).textContent; 
    } 
} 
//... 
var xml = request.responseXML; 
var total = parseInt(xml.querySelector('sitescope').lastElementChild.tagName.replace(/q(\d+)ans/, '$1'), 10) 
var qnIdx = Math.floor(Math.random() * total) + 1; 
displayQn(xml, qnIdx);

的jsfiddle链接：http://jsfiddle.net/UfQea/3/

来源

2013-08-20 13:37:12 shyam

通过javascript从XML中检索值

回答

相关问题