第9章 XML存储结构以及整合ASP的应用

下面是一个自编心理测试程序的例子,用XML+JAVASCRIPT实现.

心得:
1.如果要使用node.nextSibling,最好这个节点后面没有注释.
2.还是大小写问题,一定不能弄错.此例中的Element有一个我写成了ELement,花了2个小时才找到这个错误.

testfile.xml:(测试题目的XML数据文件)

<?xml version="1.0" encoding="gb2312"?>

<text>你喜欢哪一类的人?</text>

<answer1 gd="1">比自己强的;</answer1>

<answer2 gd="3">喜欢和尊重自己的;</answer2>

<answer3 gd="5">需要自己的;</answer3>

</question>

<text>当你的朋友不赞成也不理解你的建议时,你会:</text>

<answer1 gd="1">避开这个问题;</answer1>

<answer3 gd="5">听听他的意见;</answer3>

<answer4 gd="0">觉得受伤或生气,不再说话;</answer4>

</question>

<text>和朋友聚会,当你觉得情绪低落时,你会:</text>

<answer1 gd="1">不掩饰情绪,但坚持到最后;</answer1>

<answer2 gd="3">强作欢颜,不让人注意到不快情绪;</answer2>

<answer3 gd="5">找借口离开;</answer3>

<answer4 gd="0">如实告诉朋友离开;</answer4>

</question>

<text>工作上遇到麻烦,下班后你会:</text>

<answer2 gd="3">找朋友倾吐不快;</answer2>

<answer3 gd="5">一个人出去散心,忘掉烦恼;</answer3>

<answer4 gd="0">希望回家从亲人处得到安慰;</answer4>

</question>

<text>某人你刚认识的人,吃力地向教导你某件你很清楚的事,你会:</text>

<answer2 gd="3">等他讲完,再显示你对此道十分精通;</answer2>

<answer3 gd="5">很认真地听完他的讲述,并不时称赞;</answer3>

<answer4 gd="0">告诉他你早就知道;</answer4>

</question>

<text>你认为自己:</text>

<answer1 gd="1">每遇上好机会,不然会有更好的生活;</answer1>

<answer2 gd="3">总是在花大量时间做着自己不想做的事;</answer2>

<answer3 gd="5">目前的生活与自己的付出的相符;</answer3>

<answer4 gd="0">说不定明天就会撞上好运;</answer4>

</question>

<text>马上要过节了,你会:</text>

<answer1 gd="1">花许多时间想像要做的事;</answer1>

<answer2 gd="3">过节没意思;</answer2>

<answer3 gd="5">没什么特别的异样感觉;</answer3>

<answer4 gd="0">激动不已地等待盼望;</answer4>

</question>

<text>出门前你的家人若穿着不适,你:</text>

<answer2 gd="3">建议他(她)换一下装束;</answer2>

<answer4 gd="0">除非他(她)换装,不然不会与其一同出门;</answer4>

</question>

<text>在重要的事情即将发生时,你会:</text>

<answer1 gd="1">想寻求支持和鼓励;</answer1>

<answer2 gd="3">不愿与人谈及此事;</answer2>

<answer3 gd="5">轻松的与朋友谈论此事;</answer3>

<answer4 gd="0">干其余事时非常焦躁;</answer4>

</question>

<text>当有人惹恼你时,你会:</text>

<answer1 gd="1">向其余人唠叨,抱怨;</answer1>

<answer2 gd="3">偶尔会唠叨几句;</answer2>

<answer3 gd="5">不记在心上,无所谓;</answer3>

<answer4 gd="0">挖苦讽刺回击他(她);</answer4>

</question>

<text>当你的密友发脾气时,你会:</text>

<answer1 gd="1">焦虑,担心是不是自己的过错;</answer1>

<answer2 gd="3">不住地问他(她)怎么啦;</answer2>

<answer3 gd="5">不理睬,让密友自己恢复;</answer3>

<answer4 gd="0">叫他(她)停止无理取闹;</answer4>

</question>

<text>你在与人发生争执后会:</text>

<answer1 gd="1">仍然坚持并想证明自己的观点;</answer1>

<answer2 gd="3">假装什么也没有发生;</answer2>

<answer3 gd="5">很快冷静下来并且道歉;</answer3>

<answer4 gd="0">连着几天不理他(她);</answer4>

</question>

</mentality>

ex40-1.htm:(测试的设置界面,选择要测试的题目数量)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> 测试设置界面 </TITLE>

<style>

.title {font:24pt 楷体_gb2312;font:bold;color:Purple;}

</style>

</HEAD>

<!--

//单击开始测试,将题目数量的信息通过URL传递到测试页面

function startTest()

{

var testData="?"+testNumber.value;

location.href="ex40-2.htm"+testData;

}

//-->

</SCRIPT>

<p align="center">@请设置题目数量:</p>

</select>题

</div>

</p>

</BODY>

</HTML>

ex40-2.htm:(测试做题主界面)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<style>

.big {font:bold;}

.showhand {font:15pt;font:bold;cursor:hand;text-align:center;}

.ans {border:outset;color:teal;}

.anssel {border:outset;color:Aqua;}

.anst {font:12pt;}

</style>

</HEAD>

</FORM>

<tr>

</tr>

<tr>

</tr>

<tr>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

</td>

</tr>

</table>

</FORM>

</BODY>

</HTML>

ex40.js:(处理脚本程序)

//初始化程序,调入参数对测试数据初始化

function getTestSet()

{

//从URL信息字串中读取参数值

var dataQueue=location.search;

dataQueue=dataQueue.substring(1,dataQueue.length);

document.hiddenElements.testNum.value=dataQueue;

//生成题库总量

var xmldoc=document.all("qusXML").XMLDocument;

var testNode=xmldoc.documentElement;

var databaseN=testNode.attributes.getNamedItem("qusNu").value;

if(dataQueue=="所有")

{

document.hiddenElements.testNum.value=databaseN;

}

totalNum.innerHTML="共"+document.hiddenElements.testNum.value+"题";

}

//开始测试

function startTest()

{

if(document.hiddenElements.testStart.value==1&&document.hiddenElements.testOver==0)

{

alert("测试已经开始,快做题吧!");

}

else if(document.hiddenElements.testOver.value==1)

{

alert("测试已经结束,有什么收获么?");

}

else

{

document.hiddenElements.testStart.value=1;

//调用处理XML文档信息的程序;

readXMLDocument();

}

//下一题

function nextQuestion()

{

if(document.hiddenElements.testStart.value==0)

{

alert("请先单击开始按钮!");

}

else

{

if(document.hiddenElements.testOver.value==1)

{

alert("测试已经结束,有什么收获么?");

}

else

{

if(checkAnswer()==-1)

{

alert("请选择一个答案:");

}

else

{

//将用户当前选择的答案转化为数值,累加到总分中

var gd=parseInt(document.hiddenElements.AnswerQueue.value);

gd+=parseInt(checkAnswer());

document.hiddenElements.AnswerQueue.value=gd;

//显示下一题

readXMLDocument();

//复位当前按钮

document.testArea.checkAnswer[0].checked=true;

document.testArea.checkAnswer[0].checked=false;

}

function showAnswer()

{

alert("暂不提供答案提示功能!");

}

//读取XML数据,显示题目

function readXMLDocument()

{

var xmldoc,QuestionNode;

var TextNode;

//指向答案节点的数组

var AnswerNode=new Array(4);

//定义测试题目总数和当前题目序号

var tolnum,num;

tolnum=document.hiddenElements.testNum.value;

num=document.hiddenElements.nowNum.value;

//如果当前题目序号等于总测试题数,结束测试(注意num是从0开始的)

if(num==tolnum)

{

document.hiddenElements.testOver.value=1;

alert("测试结束,来看看您的测试结果!");

getResult();

}

else

{

num++;

document.hiddenElements.nowNum.value=num;

//XML数据岛连接读取测试题目信息

xmldoc=document.all("qusXML").XMLDocument;

//XML文档数据调用

QuestionNode=xmldoc.getElementsByTagName("question");

TextNode=QuestionNode.item(num-1).firstChild;

AnswerNode[0]=TextNode.nextSibling;

AnswerNode[1]=AnswerNode[0].nextSibling;

AnswerNode[2]=AnswerNode[1].nextSibling;

AnswerNode[3]=AnswerNode[2].nextSibling;

//清空上次选择的答案,复位答案选框

pA.innerHTML="<div class='ans'>A</div>";

pB.innerHTML="<div class='ans'>B</div>";

pC.innerHTML="<div class='ans'>C</div>";

pD.innerHTML="<div class='ans'>D</div>";

//调入试题答案,将相应的分值存储到表单中

document.hiddenElements.Answer1Value.value=AnswerNode[0].attributes.getNamedItem("gd").value;

document.hiddenElements.Answer2Value.value=AnswerNode[1].attributes.getNamedItem("gd").value;

document.hiddenElements.Answer3Value.value=AnswerNode[2].attributes.getNamedItem("gd").value;

document.hiddenElements.Answer4Value.value=AnswerNode[3].attributes.getNamedItem("gd").value;

//在页面上显示试题和选项

thisNum.innerHTML="第"+num+"题";

qustext.innerHTML=TextNode.firstChild.nodeValue;

a.innerHTML=AnswerNode[0].firstChild.nodeValue;

b.innerHTML=AnswerNode[1].firstChild.nodeValue;

c.innerHTML=AnswerNode[2].firstChild.nodeValue;

d.innerHTML=AnswerNode[3].firstChild.nodeValue;

}

//参照隐藏表单中的分数值将选择转化为分数

function checkAnswer()

{

var i=0;

while(i<4&&!document.testArea.checkAnswer[i].checked)

i++;

switch(i)

{

case 0:return document.hiddenElements.Answer1Value.value;

case 1:return document.hiddenElements.Answer2Value.value;

case 2:return document.hiddenElements.Answer3Value.value;

case 3:return document.hiddenElements.Answer4Value.value;

default:return -1;

}

//显示测试结果

function getResult()

{

document.hiddenElements.testOver.value=1;

var testgd=document.hiddenElements.AnswerQueue.value;

var titlegd=document.hiddenElements.testNum.value*5;

var dig=testgd/titlegd;

var result="您的分数为"+testgd+"(最高"+titlegd+"分),正处于";

if(dig<=0.33)

result+="儿童时期";

else if(dig<0.66)

result+="青少年时期";

else

result+="成年时期";

alert(result);

}

//使用CSS样式定义处理按钮效果

function setAnsA()

{

document.testArea.checkAnswer[0].checked=true;

pA.innerHTML="<div class='anssel'>A</div>";

pB.innerHTML="<div class='ans'>B</div>";

pC.innerHTML="<div class='ans'>C</div>";

pD.innerHTML="<div class='ans'>D</div>";

}

function setAnsB()

{

document.testArea.checkAnswer[1].checked=true;

pA.innerHTML="<div class='ans'>A</div>";

pB.innerHTML="<div class='anssel'>B</div>";

pC.innerHTML="<div class='ans'>C</div>";

pD.innerHTML="<div class='ans'>D</div>";

}

function setAnsC()

{

document.testArea.checkAnswer[2].checked=true;

pA.innerHTML="<div class='ans'>A</div>";

pB.innerHTML="<div class='ans'>B</div>";

pC.innerHTML="<div class='anssel'>C</div>";

pD.innerHTML="<div class='ans'>D</div>";

}

function setAnsD()

{

document.testArea.checkAnswer[3].checked=true;

pA.innerHTML="<div class='ans'>A</div>";

pB.innerHTML="<div class='ans'>B</div>";

pC.innerHTML="<div class='ans'>C</div>";

pD.innerHTML="<div class='anssel'>D</div>";

}

功能和原理:
开始先选择题目数量,通过URL参数传递到测试页面,并设置隐藏题目总数字段的值,然后分别对下一题等按钮进行事件处理,最后判断测试完毕后给出一直进行计算放在隐藏字段中的总得分数.

posted on 2005-07-29 11:02 wddavid 阅读(854) 评论(2) 编辑收藏举报