调查统计系统--动态设计问卷调查页面思路

问卷调查表单设计归纳为上图9种题型。

    <!-- QuestionAction -->
        <action name="QuestionAction_*" class="questionAction" method="{1}">
            <result name="selectQuestionTypePage">/selectQuestionType.jsp</result>
            <!-- 根据题型动态返回设计问题页面 -->
            <result name="0">/nonMatrixWithOtherQuestionDesign.jsp</result>
            <result name="1">/nonMatrixWithOtherQuestionDesign.jsp</result>
            <result name="2">/nonMatrixWithOtherQuestionDesign.jsp</result>
            <result name="3">/nonMatrixWithOtherQuestionDesign.jsp</result>

            <result name="4">/nonMatrixSelectQuestionDesign.jsp</result>
            <result name="5">/nonMatrixTextQuestionDesign.jsp</result>

            <result name="6">/matrixNormalQuestionDesign.jsp</result>
            <result name="7">/matrixNormalQuestionDesign.jsp</result>
            <result name="8">/matrixSelectQuestionDesign.jsp</result>
        </action>
View Code

 比较复杂的设计问题页面如下图，后台把问题选项（或者下拉列表）的字符串通过分割符"/r/n"转换成数组，然后在页面迭代显示

（根据不同的题型动态生成'radio':'checkbox'，或者生成表格），动态调查页面（designSurvey.jsp  比较早的项目使用Struts标签）。

<%@ page language="java" contentType="text/html; charset=utf-8"%>
<%@ taglib uri="/struts-tags" prefix="s" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>非矩阵型问题设计</title>
        <link rel="stylesheet" type="text/css" href='<s:url value="/styles.css" />'>
    </head>
    <body>
        <s:include value="/header.jsp" />
        <s:form action="QuestionAction_saveOrUpdateQuestion.action" method="post">
        <s:hidden name="id" />
        <s:hidden name="questionType" />
        <s:hidden name="pid" />
        <s:hidden name="sid" />
        <table>
            <tr>
                <td colspan="2" class="tdQHeaderL">非矩阵型问题设计:</td>
            </tr>
            <tr>
                <td width="35%" style="text-align: right;">问题标题:</td>
                <td width="*" style="text-align: left;"><s:textfield name="title" cssClass="text" /></td>
            </tr>
            <tr>
                <td style="text-align: right;vertical-align: top;">问题选项:</td>
                <td width="*" style="text-align: left;"><s:textarea cols="41" rows="8" name="options"/></td>
            </tr>
            <tr>
                <td style="text-align: right;">是否含有"其它"选项:</td>
                <td width="*" style="text-align: left;"><s:checkbox name="other" /></td>
            </tr>
            <tr>
                <td style="text-align: right;">"其它"项类型:</td>
                <td width="*" style="text-align: left;">
                    <s:radio list="#{0:'无',1:'文本框',2:'下拉列表框'}" listKey="key" listValue="value" name="otherStyle" />
                </td>
            </tr>
            <tr>
                <td style="text-align: right;vertical-align: top;">"其它"项下拉列表选项:</td>
                <td width="*" style="text-align: left;"><s:textarea cols="41" rows="8" name="otherSelectOptions" /></td>
            </tr>
            <tr>
                <td style="text-align: right;"></td>
                <td width="*" style="text-align: left;"><input type="submit" name="ok" value="确定" class="btn"></td>
            </tr>
        </table>
        </s:form>
    </body>
</html>
nonMatrixWithOtherQuestionDesign.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"%>
<%@ taglib uri="/struts-tags" prefix="s" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>矩阵型问题设计</title>
        <link rel="stylesheet" type="text/css" href='<s:url value="/styles.css" />'>
    </head>
    <body>
        <s:include value="/header.jsp" />
        <s:form action="QuestionAction_saveOrUpdateQuestion.action" method="post">
        <s:hidden name="id" />
        <s:hidden name="questionType" />
        <s:hidden name="pid" />
        <s:hidden name="sid" />
        <table>
            <tr>
                <td colspan="2" class="tdQHeaderL">矩阵型问题设计:</td>
            </tr>
            <tr>
                <td width="35%" style="text-align: right;">问题标题:</td>
                <td width="*" style="text-align: left;"><s:textfield name="title" cssClass="text" /></td>
            </tr>
            <tr>
                <td style="text-align: right;vertical-align: top;">行标题标签组:</td>
                <td width="*" style="text-align: left;"><s:textarea cols="41" rows="8" name="matrixRowTitles" /></td>
            </tr>
            <tr>
                <td style="text-align: right;vertical-align: top;">列标题标签组:</td>
                <td width="*" style="text-align: left;"><s:textarea cols="41" rows="8" name="matrixColTitles" /></td>
            </tr>
            <tr>
                <td style="text-align: right;"></td>
                <td width="*" style="text-align: left;"><input type="submit" name="ok" value="确定" class="btn"></td>
            </tr>
        </table>
        </s:form>
    </body>
</html>
matrixNormalQuestionDesign.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"%>
<%@ taglib uri="/struts-tags" prefix="s" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>设计调查</title>
        <link rel="stylesheet" type="text/css" href='<s:url value="/styles.css" />'>
        <script type="text/javascript" src="<s:url value="/jquery-1.7.1.js" />"></script>
        <script type="text/javascript">
            $(function(){
                $("a[href*=delete]").click(function(){
                    return confirm("删除该项?");
                });                
            });
        </script>
    </head>
    <body>
        <s:include value="header.jsp" />
        <s:set var="sId" value="id" />
        <table>
                <tr>
                    <td colspan="2" class="tdWhiteLine"></td>
                </tr>
                <tr>
                    <td colspan="2" class="tdHeader">设计调查</td>
                </tr>
                <tr>
                    <td colspan="2" class="tdWhiteLine"></td>
                </tr>
                <tr>
                    <td class="tdSHeaderL">
                        <s:if test="logoPhotoExists()">
                            <img src='<s:url value="%{logoPhotoPath}"/>' height="20px" width="50px">
                        </s:if>
                        <!-- 调查标题 -->
                        <s:property value="title" />
                    </td>
                    <td class="tdSHeaderR">
                        <s:a action="SurveyAction_toAddLogoPage?sid=%{#sId}" namespace="/">增加Logo</s:a>&nbsp;
                        <s:a action="SurveyAction_editSurvey?sid=%{#sId}" namespace="/">编辑调查</s:a>&nbsp;
                        <s:a action="PageAction_toAddPage?sid=%{#sId}" namespace="/">增加页</s:a>&nbsp;
                    </td>
                </tr>
                <tr>
                    <td colspan="2" style="text-align: left;vertical-align: top;">
                        <table>
                            <tr>
                                <td width="30px"></td>
                                <td width="*">
                                    <table>
                                        <!-- 迭代页面集合 -->
                                        <s:iterator var="p" value="pages">
                                        <s:set var="pId" value="#p.id" />
                                        <tr>
                                            <td>
            <table>
                <tr>
                    <!-- 页面标题 -->
                    <td class="tdPHeaderL"><s:property value="#p.title" /></td>
                    <td class="tdPHeaderR">
                        <s:a action="PageAction_editPage?sid=%{#sId}&pid=%{#pId}" namespace="/">编辑页标题</s:a>&nbsp;
                        <s:a action="MoveOrCopyPageAction_toSelectTargetPage?srcPid=%{#pId}" namespace="/">移动/复制页</s:a>&nbsp;
                        <s:a action="QuestionAction_toSelectQuestionType?sid=%{#sId}&pid=%{#pId}" namespace="/">增加问题</s:a>&nbsp;
                        <s:a action="PageAction_deletePage?sid=%{#sId}&pid=%{#pId}" namespace="/">删除页</s:a>&nbsp;
                    </td>
                </tr>
            </table>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <table>
                                                    <tr>
                                                        <td width="30px"></td>
                                                        <td width="*">
                                                            <table>
                                                                <tr>
                                                                    <td>
<table>
    <!-- 迭代问题集合 -->
    <s:iterator var="q" value="#p.questions">
    <s:set var="qId" value="#q.id" />
    <tr>
        <!-- 问题题干 -->
        <td class="tdQHeaderL"><s:property value="#q.title" /></td>
        <td class="tdQHeaderR">
            <s:a action="QuestionAction_editQuestion?sid=%{#sId}&pid=%{pId}&qid=%{#qId}">编辑问题</s:a>&nbsp;
            <s:a action="QuestionAction_deleteQuestion?sid=%{#sId}&qid=%{#qId}">删除问题</s:a>&nbsp;
        </td>
    </tr>
    <tr>
        <td colspan="2" style="text-align: left;color: black;background-color: white">
            <!-- 定义变量,设置第一大类的题型 -->
            <s:set var="qt" value="#q.questionType" />
            <!-- 判断当前题型是否属于第一大类(0,1,2,3) -->
            <s:if test='#qt lt 4'>
                <s:iterator value="#q.optionArr">
                    <input type='<s:property value="#qt < 2?'radio':'checkbox'" />'><s:property />
                    <s:if test="#qt == 1 || #qt == 3"><br></s:if>
                </s:iterator>
                <!-- 处理other问题 -->
                <s:if test="#q.other">
                    <input type='<s:property value="#qt < 2?'radio':'checkbox'" />'>其他
                    <!-- 文本框 -->
                    <s:if test="#q.otherStyle == 1">
                        <input type="text">
                    </s:if>
                    <!--  下拉列表 -->
                    <s:elseif test="#q.otherStyle == 2">
                        <select>
                            <s:iterator value="#q.otherSelectOptionArr" >
                                <option><s:property /></option>
                            </s:iterator>
                        </select>
                    </s:elseif>
                </s:if>
            </s:if>
                                                                                    
            <!-- 下拉列表 -->
            <s:if test="#qt == 4">
                <select>
                    <s:iterator value="#q.optionArr" >
                        <option><s:property /></option>
                    </s:iterator>
                </select>
            </s:if>
            <!-- text -->
            <s:if test="#qt == 5">
                <input type="text">
            </s:if>
            
            <!-- 矩阵问题(6,7,8) -->
            <s:if test="#qt > 5">
                <table>
                    <!-- 列头 -->
                    <tr>
                        <td></td>
                        <s:iterator value="#q.matrixColTitleArr">
                            <td><s:property /></td>
                        </s:iterator>
                    </tr>
                    <!-- 输出n多行 -->
                    <s:iterator value="#q.matrixRowTitleArr">
                        <tr>
                            <td><s:property /></td>
                            <!-- 套打控件 -->
                            <s:iterator value="#q.matrixColTitleArr">
                                <td>
                                    <!-- radio -->
                                    <s:if test="#qt == 6"><input type="radio"></s:if>
                                    <s:if test="#qt == 7"><input type="checkbox"></s:if>
                                    <s:if test="#qt == 8">
                                        <select>
                                            <s:iterator value="#q.matrixSelectOptionArr">
                                                <option><s:property /></option>
                                            </s:iterator>
                                        </select>
                                    </s:if>
                                </td>
                            </s:iterator>
                        </tr>
                    </s:iterator>
                </table>
            </s:if>
        </td>
    </tr>
    </s:iterator>
</table>
                                                                    </td>
                                                                </tr>
                                                            </table>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                        </s:iterator>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
    </body>
</html>
designSurvey.jsp

 

 实体设计：

package cn.itcast.surveypark.domain;

import cn.itcast.surveypark.util.StringUtil;

/**
 * 问题实体
 */
public class Question extends BaseEntity {
    private static final long serialVersionUID = 3670013447002809409L;
    private static final String RN = "\r\n" ;
    private Integer id;
    // 题型0-8
    private int questionType;
    // 标题
    private String title;
    // 选项
    private String options;
    private String[] optionArr ;
    // 其他项
    private boolean other;

    // 其他项样式:0-无 1-文本框 2-下拉列表
    private int otherStyle;
    // 其他项下拉选项
    private String otherSelectOptions;
    private String[] otherSelectOptionArr ;

    // 矩阵式行标题集
    private String matrixRowTitles;
    private String[] matrixRowTitleArr ;
    // 矩阵式列标题集
    private String matrixColTitles;
    private String[] matrixColTitleArr ;
    // 矩阵是下拉选项集
    private String matrixSelectOptions;
    private String[] matrixSelectOptionArr ;
    
    public String[] getOptionArr() {
        return optionArr;
    }

    public void setOptionArr(String[] optionArr) {
        this.optionArr = optionArr;
    }

    public String[] getOtherSelectOptionArr() {
        return otherSelectOptionArr;
    }

    public void setOtherSelectOptionArr(String[] otherSelectOptionArr) {
        this.otherSelectOptionArr = otherSelectOptionArr;
    }

    public String[] getMatrixRowTitleArr() {
        return matrixRowTitleArr;
    }

    public void setMatrixRowTitleArr(String[] matrixRowTitleArr) {
        this.matrixRowTitleArr = matrixRowTitleArr;
    }

    public String[] getMatrixColTitleArr() {
        return matrixColTitleArr;
    }

    public void setMatrixColTitleArr(String[] matrixColTitleArr) {
        this.matrixColTitleArr = matrixColTitleArr;
    }

    public String[] getMatrixSelectOptionArr() {
        return matrixSelectOptionArr;
    }

    public void setMatrixSelectOptionArr(String[] matrixSelectOptionArr) {
        this.matrixSelectOptionArr = matrixSelectOptionArr;
    }

    //建立从Question到Page之间多对一关联关系
    private Page page ;

    public Page getPage() {
        return page;
    }

    public void setPage(Page page) {
        this.page = page;
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public int getQuestionType() {
        return questionType;
    }

    public void setQuestionType(int questionType) {
        this.questionType = questionType;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getOptions() {
        return options;
    }

    public void setOptions(String options) {
        this.options = options;
        this.optionArr = StringUtil.str2Arr(options,RN);
    }

    public boolean isOther() {
        return other;
    }

    public void setOther(boolean other) {
        this.other = other;
    }

    public int getOtherStyle() {
        return otherStyle;
    }

    public void setOtherStyle(int otherStyle) {
        this.otherStyle = otherStyle;
    }

    public String getOtherSelectOptions() {
        return otherSelectOptions;
    }

    public void setOtherSelectOptions(String otherSelectOptions) {
        this.otherSelectOptions = otherSelectOptions;
        this.otherSelectOptionArr = StringUtil.str2Arr(otherSelectOptions,RN);
    }

    public String getMatrixRowTitles() {
        return matrixRowTitles;
    }

    public void setMatrixRowTitles(String matrixRowTitles) {
        this.matrixRowTitles = matrixRowTitles;
        this.matrixRowTitleArr = StringUtil.str2Arr(matrixRowTitles,RN);
    }

    public String getMatrixColTitles() {
        return matrixColTitles;
    }

    public void setMatrixColTitles(String matrixColTitles) {
        this.matrixColTitles = matrixColTitles;
        this.matrixColTitleArr = StringUtil.str2Arr(matrixColTitles,RN);
    }

    public String getMatrixSelectOptions() {
        return matrixSelectOptions;
    }

    public void setMatrixSelectOptions(String matrixSelectOptions) {
        this.matrixSelectOptions = matrixSelectOptions;
        this.matrixSelectOptionArr = StringUtil.str2Arr(matrixSelectOptions,RN);
    }

}
question.java

 

数据库设计：

 

posted @ 2017-04-12 17:25  SKYisLimit  阅读(874)  评论(0)    收藏  举报