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

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

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

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

<? xml version="1.0" encoding="gb2312" ?>
<!--  测试题目qusNu属性代表题目总数  -->
<!--  gd代表了该选项的分值  -->
< mentality  qusNu ="12" >
     < question  id ="1" >
         < text > 你喜欢哪一类的人? </ text >
         < answer1  gd ="1" > 比自己强的; </ answer1 >
         < answer2  gd ="3" > 喜欢和尊重自己的; </ answer2 >
         < answer3  gd ="5" > 需要自己的; </ answer3 >
         < answer4  gd ="0" > 不知道; </ answer4 >
     </ question >
     < question  id ="2" >
         < text > 当你的朋友不赞成也不理解你的建议时,你会: </ text >
         < answer1  gd ="1" > 避开这个问题; </ answer1 >
         < answer2  gd ="3" > 继续解释; </ answer2 >
         < answer3  gd ="5" > 听听他的意见; </ answer3 >
         < answer4  gd ="0" > 觉得受伤或生气,不再说话; </ answer4 >
     </ question >
     < question  id ="3" >
         < text > 和朋友聚会,当你觉得情绪低落时,你会: </ text >
         < answer1  gd ="1" > 不掩饰情绪,但坚持到最后; </ answer1 >
         < answer2  gd ="3" > 强作欢颜,不让人注意到不快情绪; </ answer2 >
         < answer3  gd ="5" > 找借口离开; </ answer3 >
         < answer4  gd ="0" > 如实告诉朋友离开; </ answer4 >
     </ question >
     < question  id ="4" >
         < text > 工作上遇到麻烦,下班后你会: </ text >
         < answer1  gd ="1" > 闷在心里,愤愤不已; </ answer1 >
         < answer2  gd ="3" > 找朋友倾吐不快; </ answer2 >
         < answer3  gd ="5" > 一个人出去散心,忘掉烦恼; </ answer3 >
         < answer4  gd ="0" > 希望回家从亲人处得到安慰; </ answer4 >
     </ question >
     < question  id ="5" >
         < text > 某人你刚认识的人,吃力地向教导你某件你很清楚的事,你会: </ text >
         < answer1  gd ="1" > 不说什么,但也不听; </ answer1 >
         < answer2  gd ="3" > 等他讲完,再显示你对此道十分精通; </ answer2 >
         < answer3  gd ="5" > 很认真地听完他的讲述,并不时称赞; </ answer3 >
         < answer4  gd ="0" > 告诉他你早就知道; </ answer4 >
     </ question >
     < question  id ="6" >
         < text > 你认为自己: </ text >
         < answer1  gd ="1" > 每遇上好机会,不然会有更好的生活; </ answer1 >
         < answer2  gd ="3" > 总是在花大量时间做着自己不想做的事; </ answer2 >
         < answer3  gd ="5" > 目前的生活与自己的付出的相符; </ answer3 >
         < answer4  gd ="0" > 说不定明天就会撞上好运; </ answer4 >
     </ question >
     < question  id ="7" >
         < text > 马上要过节了,你会: </ text >
         < answer1  gd ="1" > 花许多时间想像要做的事; </ answer1 >
         < answer2  gd ="3" > 过节没意思; </ answer2 >
         < answer3  gd ="5" > 没什么特别的异样感觉; </ answer3 >
         < answer4  gd ="0" > 激动不已地等待盼望; </ answer4 >
     </ question >
     < question  id ="8" >
         < text > 出门前你的家人若穿着不适,你: </ text >
         < answer1  gd ="1" > 坚持要他(她)换装; </ answer1 >
         < answer2  gd ="3" > 建议他(她)换一下装束; </ answer2 >
         < answer3  gd ="5" > 无所谓; </ answer3 >
         < answer4  gd ="0" > 除非他(她)换装,不然不会与其一同出门; </ answer4 >
     </ question >
     < question  id ="9" >
         < text > 在重要的事情即将发生时,你会: </ text >
         < answer1  gd ="1" > 想寻求支持和鼓励; </ answer1 >
         < answer2  gd ="3" > 不愿与人谈及此事; </ answer2 >
         < answer3  gd ="5" > 轻松的与朋友谈论此事; </ answer3 >
         < answer4  gd ="0" > 干其余事时非常焦躁; </ answer4 >
     </ question >
     < question  id ="10" >
         < text > 当有人惹恼你时,你会: </ text >
         < answer1  gd ="1" > 向其余人唠叨,抱怨; </ answer1 >
         < answer2  gd ="3" > 偶尔会唠叨几句; </ answer2 >
         < answer3  gd ="5" > 不记在心上,无所谓; </ answer3 >
         < answer4  gd ="0" > 挖苦讽刺回击他(她); </ answer4 >
     </ question >
     < question  id ="11" >
         < text > 当你的密友发脾气时,你会: </ text >
         < answer1  gd ="1" > 焦虑,担心是不是自己的过错; </ answer1 >
         < answer2  gd ="3" > 不住地问他(她)怎么啦; </ answer2 >
         < answer3  gd ="5" > 不理睬,让密友自己恢复; </ answer3 >
         < answer4  gd ="0" > 叫他(她)停止无理取闹; </ answer4 >
     </ question >
     < question  id ="12" >
         < 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 >
< meta  http-equiv ="Content-Type"  content ="text/html;charset=gb2312" />
< TITLE >  测试设置界面  </ TITLE >
< style >
.title {}{font:24pt 楷体_gb2312;font:bold;color:Purple;}
</ style >
</ HEAD >

< BODY  bgcolor ="#6699FF" >
< SCRIPT  LANGUAGE ="JavaScript" >
<!-- 
//单击开始测试,将题目数量的信息通过URL传递到测试页面
function startTest()
{
    var testData="?"+testNumber.value;
    location.href="ex40-2.htm"+testData;
}
//-->
</ SCRIPT >
< div  align ="center" > 新建测试 </ div >
< p  align ="center" > @请设置题目数量: </ p >
< div  align ="center" >
< select  name ="testNumber" >
     < option  value ="5" > 5 </ option >
     < option  value ="10" > 10 </ option >
     < option  value ="所有" > 全部 </ option >
</ select > 题
</ div >
< p  align ="center" >
< input  type ="button"  name ="submit3"  value ="开始测验"  onClick ="startTest()" />
</ p >
</ BODY >
</ HTML >

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

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
< HTML >
< HEAD >
< meta  http-equiv ="Content-Type"  content ="text/html;charset=gb2312" />
< TITLE >  测试界面  </ TITLE >
< 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 >
< BODY  bgcolor ="#6699FF"  onload ="getTestSet()" >
<!--  使用HTML的隐藏表单来存储测试中的临时信息  -->
< FORM  METHOD =POST  ACTION =""  NAME ="hiddenElements" >
<!--  测试数量  -->
< INPUT  TYPE ="hidden"  NAME ="testNum"  VALUE ="10" >
<!--  当前测试题标号  -->
< INPUT  TYPE ="hidden"  NAME ="nowNum"  VALUE ="0" >
<!--  随机的测试题标号串  -->
< INPUT  TYPE ="hidden"  NAME ="testNo"  VALUE ="0" >
<!--  测试开始标志  -->
< INPUT  TYPE ="hidden"  NAME ="testStart"  VALUE ="0" >
<!--  测试结束标志  -->
< INPUT  TYPE ="hidden"  NAME ="testOver"  VALUE ="0" >
<!--  答案A-D  -->
< INPUT  TYPE ="hidden"  NAME ="Answer1Value"  VALUE ="0" >
< INPUT  TYPE ="hidden"  NAME ="Answer2Value"  VALUE ="0" >
< INPUT  TYPE ="hidden"  NAME ="Answer3Value"  VALUE ="0" >
< INPUT  TYPE ="hidden"  NAME ="Answer4Value"  VALUE ="0" >
<!--  测试分数  -->
< INPUT  TYPE ="hidden"  NAME ="AnswerQueue"  VALUE ="0" >
</ FORM >
<!--  调用ex40.js中的脚本程序  -->
< script  language ="javascript"  src ="ex40.js" ></ script >
< XML  id ="qusXML"  src ="testfile.xml" ></ XML >
< input  type ="button"  value ="开始"  onclick ="startTest()" >
< input  type ="button"  value ="下一题"  onclick ="nextQuestion()" >
< input  type ="button"  value ="提示"  onclick ="showAnswer()" >
< FORM  METHOD =POST  ACTION =""  NAME ="testArea" >
< table  width ="100%"  border ="0" >
     < tr >
     <!--  显示当前题目的序号  -->
         < td  width ="15%"  align ="center" >< div  id ="thisNum" ></ div ></ td >
         < td >< div  id ="totalNum"  align ="center" /></ td >
         < td  rowspan ="2"  valign ="top" />
     </ tr >
     < tr >
         < td  height ="40"  align ="center" />
         <!--  显示当前测试的问题  -->
         < td  valign ="top" >< div  id ="qustext"  class ="big" ></ div ></ td >
     </ tr >
     <!--  显示当前题目的选项  -->
     < tr >
         < td  width ="8%"  class ="showhand"  onclick ="setAnsA()" >
             < div  id ="pA" >< div  class ="ans" > A </ div ></ div >
         </ td >
         < td >< div  id ="a"  class ="anst" /></ td >
         < td  width ="8%" >< input  type ="radio"  name ="checkAnswer"  value ="1" ></ td >
     </ tr >
     < tr >
         < td  width ="8%"  class ="showhand"  onclick ="setAnsB()" >
             < div  id ="pB" >< div  class ="ans" > B </ div ></ div >
         </ td >
         < td >< div  id ="b"  class ="anst" /></ td >
         < td  width ="8%" >< input  type ="radio"  name ="checkAnswer"  value ="2" ></ td >
     </ tr >
     < tr >
         < td  width ="8%"  class ="showhand"  onclick ="setAnsC()" >
             < div  id ="pC" >< div  class ="ans" > C </ div ></ div >
         </ td >
         < td >< div  id ="c"  class ="anst" /></ td >
         < td  width ="8%" >< input  type ="radio"  name ="checkAnswer"  value ="3" ></ td >
     </ tr >
     < tr >
         < td  width ="8%"  class ="showhand"  onclick ="setAnsD()" >
             < div  id ="pD" >< div  class ="ans" > D </ div ></ div >
         </ td >
         < td >< div  id ="d"  class ="anst" /></ td >
         < td  width ="8%" >< input  type ="radio"  name ="checkAnswer"  value ="4" ></ 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参数传递到测试页面,并设置隐藏题目总数字段的值,然后分别对下一题等按钮进行事件处理,最后判断测试完毕后给出一直进行计算放在隐藏字段中的总得分数.