您的位置：首页 > Web前端 > JavaScript

基于JSP在线答题程序设计

2016-04-04 23:00 447 查看

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

需求：

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;
}

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航