基于JSP在线答题程序设计

最新推荐文章于 2024-12-03 11:02:48 发布

原创最新推荐文章于 2024-12-03 11:02:48 发布 · 5.6k 阅读

20 ·

CC 4.0 BY-SA版权

J2EE 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个简单的微信答题系统的实现过程，包括系统需求分析、技术选型、前后端交互设计及用户体验优化等内容。系统通过微信企业号接口实现用户身份验证，采用Tomcat部署，使用PHP进行数据转发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前几天做了一个很简单实用的答题系统，运行于微信企业号。

需求：

1、用户点击微信公众号下边的菜单，弹出有奖答题。

2、用户点击后，返回答题连接，并显示该微信用户名。

3、进入答题系统，显示题目数量，进度条，上一题下一题，并保留每次答题结果。

4、最后一道题打完可提交，并返回目前答题情况：答题人数，每道题正确率。

5、已答过的人不能答题。

6、不要求效率，实现即可。

答题系统用的Tomcat，并在sina云上用php做的转发答题连接和获取用户id。企业号是加密传输的，订阅号是明文的。这里有区别。

获取用户id需要权限是企业号。根据AppKey和AppSecret拼接url获取access，根据access和用户ObjectId获取用户信息的json数据。微信名就是从里面解析出来的。

微信界面下方的菜单更好办，照着官方demo，带着自己的access拼接一个url，发过去就生成好了。

最后用户答案保存到xml文件中。

写的不好还请指教。

jsp端

<%@ page language="java" import="java.util.*, java.sql.*" pageEncoding="utf-8"%>  
<%!	
	int curPage = 0;	
	int total;
	List<Question> questions;
	int percent;
	String username;
	
 %>
<%  
String path = request.getContextPath();  
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");

	//做上一题下一题的翻页
String tmp = request.getParameter("curPage");
username = request.getParameter("username");
        if(tmp==null){  
            tmp="0";  
        }  
	curPage = Integer.parseInt(tmp);  
	//if(curPage>=total) curPage = total; 
	//if(curPage<=0) curPage=0;
	
%> 
<%@ page import= "com.suny.bean.*"%>
<%@ page import= "java.util.*"%>
<% 
	//把所有的问题查出来。
	questions = (List<Question>)application.getAttribute("question");
	total =questions.size();
	Question question;
	
	//这里待优化，当前curPage=0时，questions.get(0) 返回的是第一道题
	if(curPage+1<=total  && curPage>=0){
		question = questions.get(curPage);
	}else {
		question = questions.get(0);
	}
	
	//控制进度条
	percent = (curPage)*100/total;
%>


<!doctype html>
<html>
<head>
    <title>登录</title>
    <meta charset="utf-8">
    
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <meta content="telephone=no" name="format-detection" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta content="" name="keywords">
    <meta content="" name="description">
    <link rel="stylesheet" type="text/css" href="css/public.css" />
    <link rel="stylesheet" type="text/css" href="css/phone.css" />

</head>

<body onload="check()">
  <!--头部开始-->
   <header class="ansfaces">
     在线答题，共100题
   </header>
  <!--头部结束-->
  
  <!--进度条开始-->
  <div class="progrbars">
    <div class="speedprogrs" style="width:<%=percent %>%;">
    </div>
  </div>
  <!--进度条结束-->
  
  <!--内容开始-->
  <div class="progreconts">
     
     <h1 id="h1"><%=question.getContent()%></h1>
     
     <ul>
       <li><label id="A">A:<input name="select" type="checkbox" value="A"> <%=question.getA()%></label></li>
       <li><label id="B">B:<input name="select" type="checkbox" value="B"> <%=question.getB()%></label></li>
       <li><label id="C">C:<input name="select" type="checkbox" value="C"> <%=question.getC()%></label></li>
       <li><label id="D">D:<input name="select" type="checkbox" value="D"> <%=question.getD()%></label></li>
     </ul>
     
  </div>
  <!--内容结束-->
  
  <!--按钮开始-->
  <div class="schebutons">
	<input name="" type="button" class="butinsides" id="forward" onclick="forward()" value="上一题" />
    <input name="" type="button" class="butinsides" id="next" onclick="next()" value="下一题" />
  </div>
  <!--按钮结束-->
</body>
<script>
	function next(){
		
		var vl = document.getElementById("next").value;
		if("提交"==vl){
		//取当前值
		//答案id和所选答案写到localStorage中
		var obj = document.getElementsByName("select"); // 获取多选框数组
		var objLen = obj.length;
		var objYN = false; // 是否有选择
		var tempAnswer="";
		for (var i = 0; i < objLen; i++) {
        	if (obj [i].checked == true) {
        		tempAnswer+=obj [i].parentNode.id;
				objYN = true;
       	 	}
    	}
    	
    	if (!objYN) {
			alert('请至少选择一项');
			return false;
		} else {
			//数据保存
			window.localStorage.setItem(<%=question.getId()%>,tempAnswer);
		}
			//提交到不同的servlet
			var usernickname="<%=request.getParameter("username")%>";
			sendToServer(usernickname);
			return;
		}
		
	

		//答案id和所选答案写到localStorage中
		var obj = document.getElementsByName("select"); // 获取多选框数组
		var objLen = obj.length;
		var objYN = false; // 是否有选择
		var tempAnswer="";
		for (var i = 0; i < objLen; i++) {
        	if (obj [i].checked == true) {
        		tempAnswer+=obj [i].parentNode.id;
				objYN = true;
       	 	}
    	}
    	
    	if (!objYN) {
			alert('请至少选择一项');
			return false;
		} else {
			//数据保存
			window.localStorage.setItem(<%=question.getId()%>,tempAnswer);
        	location.href="index.jsp?username=<%=username%>&curPage=<%=curPage+1%>";
		}
	}
	
	function forward(){
		if(<%=curPage%><1){
			location.href="index.jsp?username=<%=username%>&curPage=0";
				return;
		}
		alert(<%=username%>);
		location.href="index.jsp?username=<%=username%>&curPage=<%=curPage-1%>";
	}
	
	function check(){
		//检查历史的选项，并选中响应的复选框
		//alert("check");
		
		if(<%=curPage%>==(<%=total%>-1)){
			document.getElementById("next").value = "提交";
		}
		
		var boxes = document.getElementsByName("select");
		var ans = window.localStorage.getItem(<%=question.getId()%>);
		var s = ans.split("");
		for(i=0;i<boxes.length;i++){
			for(j=0;j<s.length;j++){
				if(boxes[i].value == s[j]){
					boxes[i].checked = true;
				}			
			}
		}
	}
	
	
	//将数据发送到服务器
	//当前题目为最后一题的时候，应该把“下一题”变成“提交”，并触发此方法。
	function sendToServer(usernickname){
	
		//这个名字是做个示例，适配微信后，从微信获取
		var name =usernickname;
		var data =[];
		//遍历localStroage
		for(var i=0;i<window.localStorage.length;i++){
			var key = window.localStorage.key(i);
			var value = window.localStorage.getItem(key);
			data[i]=key+":"+value;
		}
		var list = usernickname+"@"+data
		post(list);
	}
	
	//以post方式发送到服务器	
	function post(data) {        
	    var temp = document.createElement("form");        
	    temp.action = "formservlet";        
	    temp.method = "post";        
	    temp.style.display = "none";        
	    var opt = document.createElement("textarea");        
	    opt.name = "result";        
	    opt.value = data;        
	    temp.appendChild(opt);        
	    document.body.appendChild(temp); 
	    temp.submit();        
	    return temp;        
	}
	
</script>
</html>

然后是Servlet

public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		boolean flag=true;
		String msg = request.getParameter("result");
		String[] temp = msg.split("@");
		String username = temp[0];
		//如果这个人没打过题，就new，如果答过了就无效
		//遍历集合查找人
		if(users==null){
			users = new HashMap<User, Answer>();
		}else{
			for (Map.Entry<User, Answer> entry : users.entrySet()) {
				if(username.equals(entry.getKey().getName())){
					flag = false;
				}
			}
		}
		
		//for (Entry<User, Answer> entry : users.entrySet()) {
			if(flag){
				u = new User();
				u.setName(username);
				Answer a= new Answer();
				
				//获取的数据进行分割拼装，写到xml文件
				Map<String, String> answerdata = new HashMap<String, String>();
				String[] splitString = temp[1].split(",");
				for (int i = 0; i < splitString.length; i++) {
					String s[] = splitString[i].split(":");
					answerdata.put(s[0], s[1]);
					a.setAns(answerdata);
					System.out.println("第一次传过来的值:"+s[0]+"--->"+s[1]);
				}
				users.put(u, a);
				//System.out.println(users);
				String requestURI = request.getRequestURI();
				//System.out.println(requestURI);
		        WriteXML.getXML("sun",splitString);
		        subReturn.setTotalUser(users.size());
		        Map<String, Integer> subMap = new HashMap<String, Integer>();
		        //看看对错如何
		        //遍历每个用户每个题的答案
		        
		        //取得答案的id，然后根据id去遍历users找对应id对应的答案
		        for (Map.Entry<Integer,String> as : answers.entrySet()) {
		        	int count =0;
		        	int id = as.getKey();
		        	String ids = id+"";
		        	String ans = as.getValue();
		        	for (Entry<User, Answer> user : users.entrySet()) {
						//遍历每个用户的答案了
		        		Answer answer = user.getValue();	
		        		for (Entry<String, String> answerr : answer.getAns().entrySet()) {
		        			if(ids.equals(answerr.getKey())){
		        				if(ans.equals(answerr.getValue())){
		        					count++;
		        				}
		        			}
						}
					}
		        	//把题目id和count放到集合里
		        	subMap.put(ids, count);
		        }
		        
		        //排序，出现了一些用户查出来不按顺序返回的情况，所以做一下排序。
		        Map<String, Integer> resultMap = sortMapByKey(subMap);    //按Key进行排序  
		        
		        subReturn.setSubResult(resultMap);
		        for (Map.Entry<String,Integer> sk : subMap.entrySet()) {
					System.out.println("题目："+sk.getKey());
					System.out.println("正确的人数："+sk.getValue());
				}
		        
		        request.setAttribute("subReturn", subReturn);
		        request.getRequestDispatcher("/result.jsp").forward(request, response);
			}else{
				request.getRequestDispatcher("/error.jsp").forward(request, response);
			}		
		
	}
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
			doGet(request, response);
	}
    public static Map<String, Integer> sortMapByKey(Map<String, Integer> map) {  
        if (map == null || map.isEmpty()) {  
            return null;  
        }  
        Map<String, Integer> sortMap = new TreeMap<String, Integer>(new MapKeyComparator());  
        sortMap.putAll(map);  
        return sortMap;  
    }

第一次写这类程序，希望能得到宝贵意见，和思路上的指正。