基于 XML、XSL、HTML 和 JavaScript 的通用 Web 调查系统

• 下载源代码 - 3.82 KB

引言

Web 调查被广泛用于从各种用户那里收集信息并基于数据进行分析。本文讨论了如何设计一个通用的调查应用程序。

关于本文

本文解释了如何设计一个通用的调查系统，该系统可以提问、收集信息并对调查数据进行分析。任何调查应用程序都具有以下功能：

• 提出一系列问题
• 动态分支
• 收集答案
• 数据分析

本文仅涵盖如何从用户那里收集信息的前端部分。

设计

该应用程序的设计是通用的，因此将来对问题/答案/分支逻辑的更改将非常容易。

• 配置：使用 XML 进行配置
• 显示：使用 XSL 根据 XSL 渲染 HTML
• 事件：JavaScript 处理所有事件和调查数据的提交

配置 - XML

XML 结构存储问题列表、问题之间的依赖关系、要获取的答案类型以及要显示的控件类型（例如复选框/单选按钮/文本框）的详细信息。请参考下面的 XML

<?xml version="1.0" encoding="utf-8" ?>
<survey>
  <surveytypes>
    <surveytype>
      <surveyname> Demo Survey </surveyname>
            <questions>
                  <question qid="1" >
                  <qid>1</qid>
                  <questiondesc>Q1) Enter some free text</questiondesc>
                  <typeid>2</typeid>
            </question> 
            <question qid="2" parentquestion="3" valuecondition="Yes">
                  <qid>2</qid>
                  <questiondesc>Q2) Select any of the choices</questiondesc>
                  <typeid>6</typeid>
                  <choices>
                        <choice>Choice1</choice>
                        <choice>Choice2</choice>
                        <choice>Choice3</choice>
                  </choices>
            </question>
         </surveytype>
    </surveytypes>
</survey>

需要注意的重要事项是：

• 属性“parentquestion”设置依赖关系
• 属性“valuecondition”指定应显示问题的条件
• 元素“typeid”指定控件类型

支持的控件类型包括：

以下是支持的不同类型的控件，用于获取答案：

• 数字开放式文本
• 文本开放式文本
• 文本开放式多行
• 多项选择
• 具有其他选项的多项选择
• 多项选择（单选）

请参考 XML 以获取完整类型及其各自类型 ID 的列表。

显示 - XSL

XSL “generate-surveyform.xslt” 读取 XML 问题并根据类型 ID 创建控件。它为每个问题创建一个 DIV 标签，以便可以通过隐藏相应问题的 DIV 标签来处理动态分支。它使用以下 XSL 标签来创建控件

<xsl:if test="typeid = 2 ">
  <td> 
    <xsl:element name="input">
       <xsl:attribute name="type">textbox</xsl:attribute>
       <xsl:attribute name="name"><xsl:text>CONTROL</xsl:text>
       <xsl:value-of  select="$qidvar"/></xsl:attribute>
       <xsl:attribute name="value"></xsl:attribute>
    </xsl:element>
</td>
</xsl:if>

事件 - JavaScript

众所周知，JavaScript 是互联网的核心，没有 JavaScript 很难构建实时网页。我使用 JavaScript 加载 XML 并获取所有问题列表。我使用 XPATH 在不同的节点之间导航以识别要显示的提问，与控件的事件交互，并最终提交所有问题的答案。

结论

对于这个应用程序来说，总是存在改进的空间，就像任何其他应用程序一样。我希望这对于需要构建通用 Web 调查系统的人来说是有用的。