gpt4 book ai didi

javascript - 通过 javascript 从 XML 中检索值

转载 作者:行者123 更新时间:2023-11-28 02:01:54 25 4
gpt4 key购买 nike

我有一个 XML,其中包含 3 个问题,每个问题 4 个选项和答案。我想随机选择一个问题并将其显示在 html div 标签中。请帮忙做这件事。

我正在获取对象而不是 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 页面:

<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>

最佳答案

这是 json 方式的完整工作代码

它将答案存储到一个数组中并在最后打印它们。

  1. 随机播放功能
  2. 缓存问题
  3. 存储答案
  4. 添加和删除不必要的事件处理程序。
  5. 打印结果
  6. 使用文档片段
  7. 无限的问题
  8. 无限的答案
  9. 与外部库兼容
  10. 并且引用全部在加载时定义
<小时/>
<!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"]
}
]

关于javascript - 通过 javascript 从 XML 中检索值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18333780/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com