队员: 信1505-1 20153144 毛松林
信1505-1 20153304 张浩
程序设计思想
这次的任务是团队开发一个能实现自动生成算术题,并且能够检查结果和将结果存放到数据库中的四则运算网站。程序的业务逻辑已经在前面的实验中完成了,现在只需要实现应用的控制逻辑和界面显示就行了。我和我的伙伴选择用MVC结构构建Web应用程序。网页的设计思路大致为首先显示一个数据设置界面,让用户控制需要的到的表达式的各种参数,然后将参数传递给后台运行的servlet,servlet接受到参数后调用JavaBean的相关类,生成符合参数要求的表达式,并且将表达式存放到数据库中,接着servlet将表达式存放到jsp页面的请求对象中并且转发请求到显示表达式的界面。然后提交的答案会再次传送到后台然servlet判断回答是否正确,最后跳转到界面显示答题的结果。
程序源代码:
showEquation.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.onload = initFunction;
function initFunction(){
document.getElementById("handin").onclick = checkFill;
}
function checkFill(){
var inputTags = document.getElementsByTagName("INPUT");
for(var i = 0; i < inputTags.length; i++){
var thisTag = inputTags[i];
if(thisTag.value.length==0)
{
alert("未回答的题目!");
thisTag.focus();
return false;
}
}
document.form2.submit();
return true;
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="resultDiv">
<form name="form2" action="CheckAnswerServlet" οnsubmit=""method="post">
<table>
<c:forEach items="${list }" var="cur" varStatus="curStatus">
<tr>
<td>${curStatus.index+1 }. </td>
<td>${cur.express } = </td>
<td>
<input type="text"name="${curStatus.index }"size="8">
</td>
</tr>
</c:forEach>
<tr>
<td colspan="2">
<input type="reset" value="重置">
<input id="handin" type="button"value="提交">
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
showResult.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>check your answer</title>
</head>
<body>
<div>
<c:out value="共${questionsum }道计算题,正确${correctsum }道,错误${wrongsum }道。"/>
<a href="thirdpage.jsp">返回首页</a>
<table border="1" cellspacing="0">
<tr>
<th>题号</th><th>题目</th><th>回答</th><th>正确答案</th><th>批改</th>
</tr>
<%! int i; String str;%>
<% i=0; %>
<c:forEach items="${list}" var="currentObject" varStatus="statusTag">
<tr>
<td>${statusTag.index+1 }</td>
<td>${currentObject.express }</td>
<td>
<%
str = (String)request.getAttribute("answer"+i);
out.print(str);
i++;
request.setAttribute("str", str);
%>
</td>
<td>${currentObject.value }</td>
<td>
<c:if test="${currentObject.value==str }">正确</c:if>
<c:if test="${currentObject.value!=str }">错误</c:if>
</td>
</tr>
</c:forEach>
</table>
</div>
</body>
</html>
thirdpage.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body{
font-fimaly:宋体;
background-color:rgba(0,0,20,0.5);
}
#inputDiv{
width:50%;
position:relative;
top:2cm;
align:center;
border-style:solid;
border-color:#ff00dd;
border-radius:14px;
background-color:rgba(0,20,20,0.3);
border-width:5px;
padding:15px;
margin:5px;
}
#inputDiv input[type="text"]{
background-color:white;
border-radius:4px;
border-width:3px;
width:5Cm;
hight:1Cm;
}
#inputDiv input[type="text"]:focus{
background-color:#100203;
border-radius:4px;
border-width:3px;
width:5Cm;
hight:1Cm;
}
#inputDiv input[type="radio"]:checked{
outline:1px solid red;
border:medium none;
}
</style>
<title>算术题</title>
</head>
<body>
<div id = "inputDiv">
<form name="form1" action="EquationServlet" method="post">
<table>
<caption>表达式参数设置</caption>
<tr>
<th>选项</th><th>设置</th>
</tr>
<tr>
<td><label for="name">表达式个数:</label></td>
<td><input type="number" name="sum"size="3"></td>
</tr>
<tr>
<td><label for="operandsum">操作数个数:</label></td>
<td><input type="number" name="operandsum"size="3"></td>
</tr>
<tr>
<td><label for="maxinteger">整数最大值:</label></td>
<td><input type="number"name="maxinteger"size="3"></td>
</tr>
<tr>
<td><label for="maxnumerator">分子最大值:</label></td>
<td><input type="number"name="maxnumerator"size="3"></td>
</tr>
<tr>
<td><label for="maxdenominator">分母最大值:</label></td>
<td><input type="number"name="maxdenominator"size="3"></td>
</tr>
<tr>
<td><label for="includemultiply">是否包含乘除法:</label></td>
<td><input type="radio" name="includemultiply"value="true">是<input type="radio" name="includemultiply"value="false">否</td>
</tr>
<tr>
<td><label for="withbracket">是否包含括号:</label></td>
<td><input type="radio" name="withbracket"value="true">是<input type="radio" name="withbracket"value="false">否</td>
</tr>
<tr>
<td colspan="2"><input type="reset" value="重设"><input type="submit"value="确定"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
程序结果截图:
参数设置界面:
答题界面:
结果验证界面:
编程总结
这次结对开发程序对于性格有点内向的我来说挑战很大,本来就不怎么喜欢跟人交流,幸好这次开发跟队友的思路相差不大,分配了任务之后就自己开发自己的,没怎么交流。代码的逻辑结构都差不多,很相似,只是页面设计方面有点不同。
PSP记录表格。
开发前的估计:
PSP2.1 | Personal Software Process Stages | Time |
Planning | 计划 | 20h |
· Estimate | · 估计这个任务需要多少时间 | 20h |
Development | 开发 | 15h |
· Analysis | · 需求分析 (包括学习新技术) | 2h |
· Design Spec | · 生成设计文档 | 1h |
· Design Review | · 设计复审 (和同事审核设计文档) | 1h |
· Coding Standard | · 代码规范 (为目前的开发制定合适的规范) | 1h |
· Design | · 具体设计 | 2h |
· Coding | · 具体编码 | 4h |
· Code Review | · 代码复审 | 1h |
· Test | · 测试(自我测试,修改代码,提交修改) | 3h |
Reporting | 报告 | 5h |
· Test Report | · 测试报告 | 2h |
| 合计 | 20h |