实验目标:
设计四则运算网页版:限定条件为:
1. 整数加减法:加法结果在1-100之间,减法根据加法设定
2. 整数乘除法:乘法结果限定在10以内,除法根据乘法设定
实验设计思路:
1. 随机数产生两个数字和一个四则运算符号。
2. 把产生的数字和符号添加到数据库
3. 再从数据库将所需要的表达式与结果调用,结果存到数组中与实际的输入答案进行比对
实现代码:
欢迎界面:
<%@ page contentType = "text/html; charset=utf-8" import = "java.sql.*" errorPage = "error.jsp" %><%//java.sql %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<embed src="05.mp3" loop="11" autostar="true" hidden="true"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>选择</title>
<style>
body {
background: #222;
margin: auto;
width: 960px;
}
.arc-text {
font: 16px sans-serif;
}
.arc-center {
fill: none;
}
#credit {
position: absolute;
font: 10px sans-serif;
right: 10px;
bottom: 10px;
color: #ddd;
}
#credit a {
color: inherit;
}
</style>
<div id="credit">Inspired by <a href="http://blog.pixelbreaker.com/polarclock/">pixelbreaker</a>.</div>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
height = 800,
radius = Math.min(width, height) / 1.9,
spacing = .09;
var formatSecond = d3.time.format("%-S seconds"),
formatMinute = d3.time.format("%-M minutes"),
formatHour = d3.time.format("%-H hours"),
formatDay = d3.time.format("%A"),
formatDate = function(d) { d = d.getDate();
switch (10 <= d && d <= 19 ? 10 : d % 10) { case 1: d += "st"; break; case 2: d += "nd"; break; case 3: d += "rd"; break; default: d += "th"; break; } return d; },
formatMonth = d3.time.format("%B");
var color = d3.scale.linear()
.range(["hsl(-180,60%,50%)", "hsl(180,60%,50%)"])
.interpolate(function(a, b) { var i = d3.interpolateString(a, b); return function(t) { return d3.hsl(i(t)); }; });
var arcBody = d3.svg.arc()
.startAngle(0)
.endAngle(function(d) { return d.value * 2 * Math.PI; })
.innerRadius(function(d) { return d.index * radius; })
.outerRadius(function(d) { return (d.index + spacing) * radius; })
.cornerRadius(6);
var arcCenter = d3.svg.arc()
.startAngle(0)
.endAngle(function(d) { return d.value * 2 * Math.PI; })
.innerRadius(function(d) { return (d.index + spacing / 2) * radius; })
.outerRadius(function(d) { return (d.index + spacing / 2) * radius; });
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var field = svg.selectAll("g")
.data(fields)
.enter().append("g");
field.append("path")
.attr("class", "arc-body");
field.append("path")
.attr("id", function(d, i) { return "arc-center-" + i; })
.attr("class", "arc-center");
field.append("text")
.attr("dy", ".35em")
.attr("dx", ".75em")
.style("text-anchor", "start")
.append("textPath")
.attr("startOffset", "50%")
.attr("class", "arc-text")
.attr("xlink:href", function(d, i) { return "#arc-center-" + i; });
tick();
d3.select(self.frameElement).style("height", height + "px");
function tick() {
if (!document.hidden) field
.each(function(d) { this._value = d.value; })
.data(fields)
.each(function(d) { d.previousValue = this._value; })
.transition()
.ease("elastic")
.duration(500)
.each(fieldTransition);
setTimeout(tick, 1000 - Date.now() % 1000);
}
function fieldTransition() {
var field = d3.select(this).transition();
field.select(".arc-body")
.attrTween("d", arcTween(arcBody))
.style("fill", function(d) { return color(d.value); });
field.select(".arc-center")
.attrTween("d", arcTween(arcCenter));
field.select(".arc-text")
.text(function(d) { return d.text; });
}
function arcTween(arc) {
return function(d) {
var i = d3.interpolateNumber(d.previousValue, d.value);
return function(t) {
d.value = i(t);
return arc(d);
};
};
}
function fields() {
var now = new Date;
return [
{index: .7, text: formatSecond(now), value: now.getSeconds() / 60},
{index: .6, text: formatMinute(now), value: now.getMinutes() / 60},
{index: .5, text: formatHour(now), value: now.getHours() / 24},
{index: .3, text: formatDay(now), value: now.getDay() / 7},
{index: .2, text: formatDate(now), value: (now.getDate() - 1) / (32 - new Date(now.getYear(), now.getMonth(), 32).getDate())},
{index: .1, text: formatMonth(now), value: now.getMonth() / 12}
];
}
</script>
<style type="text/css">
body,td,th {
font-size: 24px;
}
body {
background-image:url("../images/0.gif");
background-repeat:no-repeat;
background-size:100% 100%;
}
<style>
<div {
background-image:url("../images/0.gif");
background-repeat:no-repeat;
background-size:100% 100%;
}
</style>
</style>
</head>
<body>
<form id="form1" name="form1" method="post" action="zhengshu.jsp">
<% /*<form id="myForm" name="myForm"*>*/%>
<div align="center">
<input type="submit" value="一起做题吧!" onClick="zhengshu.jsp" style="font-size:25px;width:180px;height:40px"></p><br><br>
</div>
</form>
<script>
function check(){
var input = document.getElementsByName("RadioGroup1");
for(var i=0; i< input.length; i++ ){
if(input[i].checked == true ){
//window.open(input[i].value,null); //新窗口打开
window.location=input[i].value; //当前窗口打开,注释一种方法
}
}
}
</script>
</body>
</html>
题目数量设置:
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" import="java.sql.Connection,java.sql.DriverManager"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <style type="text/css"> body,td,th { font-size: 24px; } body { background-image:url("../images/1.gif"); background-repeat:no-repeat; background-size:100% auto; } </style> <head> <embed src="02.mp3" loop="11" autostar="true" hidden="true"/> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>整数</title> </head> <body style="width: 1333px; "> <form id="form1" name="form1" method="post" action="zhengshushizi.jsp" style="height: 469px; width: 1353px; "> <p> <label for="textfield"></label> </p> <p> </p> <p> </p> <p> </p> <p align="center" style="width: 1242px; height: 78px"><br> 要做多少道题呢?:<input type="text" name="geshu" autocomplete="off" id="geshu"> <br> </p> <p> </p> <div align="center"> <input type="submit" value="开始喽" style="font-size:25px;width:180px;height:40px"value="zhengshushizi.jsp"> </div> </form> </body> </html>
产生随机数:
1 <%@ page language="java" contentType="text/html; charset=utf-8" 2 pageEncoding="utf-8" import="java.sql.Connection,java.sql.DriverManager,java.sql.ResultSet"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 7 <title>整数式子</title> 8 <style type="text/css"> 9 body,td,th { 10 font-size: 24px; 11 } 12 body { 13 background-color: #0CF; 14 15 } 16 </style> 17 </head> 18 <body> 19 <div align="center"> 20 <%! 21 int i=0; 22 String Array[]=new String[1000];//array 表达式 23 class Zhengshu//整数类 24 { 25 String re1="";//初始化 “结果” String类型的 26 int re; 27 String function(int r ,int q, int fun)// r最小值,q最大值,fun 选择 28 { 29 //1有乘除法 2加减无负数 3除法无余数(12,1,0) 30 String fu =""; 31 String shizi=""; 32 int a=(int)(Math.random()*(r)%(r-q+1)+q); 33 int b=(int)(Math.random()*(r)%(r-q+1)+q); 34 int c=(int)(Math.random()*4); 35 if(fun==1) 36 { 37 if(c==0) 38 { 39 while(a+b>100){ 40 a=(int)(Math.random()*(r)%(r-q+1)+q); 41 b=(int)(Math.random()*(r)%(r-q+1)+q); 42 } 43 fu="+"; 44 shizi=a+" "+fu+" "+b; 45 re=a+b; 46 re1=String.valueOf(re); 47 } 48 if(c==1) 49 { 50 fu="-"; 51 //排除负数可能性 52 while(a-b<0) 53 { 54 a=(int)(Math.random()*(r)%(r-q+1)+q); 55 b=(int)(Math.random()*(r)%(r-q+1)+q); 56 } 57 shizi=a+" "+fu+" "+b; 58 re=a-b; 59 re1=String.valueOf(re); 60 } 61 if(c==2) 62 { 63 while(a>10||b>10){ 64 a=(int)(Math.random()*(r)%(r-q+1)+q); 65 b=(int)(Math.random()*(r)%(r-q+1)+q); 66 } 67 fu="×"; 68 shizi=a+" "+fu+" "+b; 69 re=a*b; 70 re1=String.valueOf(re); 71 } 72 if(c==3) 73 { 74 while(a>10||b>10){ 75 a=(int)(Math.random()*(r)%(r-q+1)+q); 76 b=(int)(Math.random()*(r)%(r-q+1)+q); 77 } 78 fu="÷"; 79 //排除分母为0的可能性和余数的可能性 80 while(b==0||a==0) 81 { 82 a=(int)(Math.random()*(r)%(r-q+1)+q); 83 b=(int)(Math.random()*(r)%(r-q+1)+q); 84 } 85 re=a; 86 shizi=a*b+" "+fu+" "+b; 87 re1=String.valueOf(re); 88 } 89 } 90 return shizi;//返回字符串 91 } 92 } 93 %> 94 <% 95 96 Connection con = null; //定义一个MYSQL链接对象 97 Class.forName("com.mysql.jdbc.Driver").newInstance(); //MYSQL驱动 98 con = DriverManager.getConnection("jdbc:mysql://localhost:3306/jaovo_msg","root","LQYroot"); //链接本地MYSQL 99 java.sql.Statement stmt; //创建声明 100 stmt = con.createStatement();//创建传输对象 101 stmt.executeUpdate("delete from 四则运算题目2"); 102 // stmt.executeUpdate("delete from 四则运算题目2"); 103 /* int max=Integer.parseInt(String.valueOf(session.getAttribute("max")));//转换max为int 104 int min=Integer.parseInt(String.valueOf(session.getAttribute("min")));//转换min为int 105 int choose=Integer.parseInt(String.valueOf(session.getAttribute("choose")));//转choose*/ 106 /*int geshu=Integer.parseInt(String.valueOf(session.getAttribute("geshu")));//转换geshu 107 session.setAttribute("geshu1", geshu);//获得session的值*/ 108 //String daan=request.getParameter("daan"); 109 /* int zhengque1=0;//对答案正确性作标记 110 int cuowu1=0;//对答案错误作标记*/ 111 /** 112 疑问: 113 114 *表示正确的数组的长度是个数+10 115 *表示错误的数组的长度是个数+10 116 117 */ 118 int geshu=Integer.parseInt(request.getParameter("geshu")); 119 int zhengque4[]=new int[geshu+10];//? 120 int cuowu4[]=new int[geshu+10]; 121 Zhengshu a = new Zhengshu();//整数类制造对象,可以返回表达试 122 //for(int i=0;i<geshu;i++) 123 %> 124 125 126 <% 127 //if(i<geshu)//i的初值为零,满足条件 128 for(int j=0;j<geshu;j++) 129 { 130 131 Array[i]=a.function(100,1,1);//返回第一个字符串(字符串) 132 133 /*if(i>0)//不满足条件,i的初值为零 134 { 135 for(int z=0;z<i;z++) 136 { 137 if((Array[z].equals(Array[i]))) 138 { 139 Array[i]=a.function(100,1,1); 140 z=-1; 141 } 142 } 143 }*/ 144 145 //out.println(i+1+": "+Array[i]+" = "+'\n'); //输出i+1表示第几道题;输出表达式加上“=” 1+1 = 146 147 %> 148 <% //将题目和答案写入数据库表 149 String sql="INSERT INTO 四则运算题目2(shizi,result) VALUES ('"+Array[i]+" = "+"','"+a.re1+"')"; 150 //out.println("<script language = 'javaScript'> alert('"+shi+"');</script>"); 151 stmt.executeUpdate(sql);//执行sql语句、 152 153 i++; 154 } 155 156 157 response.setHeader("refresh","0;url =disanjiemian.jsp"); 158 %> 159 160 <br> 161 162 </div> 163 164 165 166 167 168 </body> 169 </html>
做题页面:
1 <%@ page language="java" contentType="text/html; charset=utf-8" 2 pageEncoding="utf-8" import="java.sql.Connection,java.sql.DriverManager,java.sql.ResultSet"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <style type="text/css"> 6 body,td,th { 7 font-size: 24px; 8 } 9 body { 10 background-image:url("../images/4.jpg"); 11 background-repeat:no-repeat; 12 background-attachment:fixed; 13 background-size:130% auto; 14 } 15 </style> 16 <head> 17 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 18 <title>整数式子</title> 19 </head> 20 21 <body> 22 <form action="chakan.jsp" method="post"> 23 24 <% 25 Connection con = null; //定义一个MYSQL链接对象 26 Class.forName("com.mysql.jdbc.Driver").newInstance(); //MYSQL驱动 27 28 con = DriverManager.getConnection("jdbc:mysql://localhost:3306/jaovo_msg","root","LQYroot"); //链接本地MYSQL 29 java.sql.Statement stmt; //创建声明 30 stmt = con.createStatement();//创建传输对象 <br> 31 String sql2 = "select shizi from 四则运算题目2"; 32 ResultSet resultSet = null; 33 resultSet= stmt.executeQuery(sql2); 34 //String array[]=new String[1000]; 35 %> 36 <table align="center" border="1"width="600" style="width: 624px;"> 37 <tr> 38 <td width="250"><%="题目"%></td> 39 <td width="150"><%="输入你的答案"%></td> 40 <td width="150"><%="正确答案"%></td> 41 <td width="50"><%="得分"%></td> 42 </tr> 43 </table> 44 <% 45 while(resultSet.next()){ 46 String anwser=""; 47 int i=0; 48 String ar; 49 ar=resultSet.getString("shizi"); 50 i++; 51 52 %> 53 <table align="center" border="1" width="600" style="width: 624px;"> 54 <tr> 55 <td width="250"><%=ar %></td> 56 <td width="150"><input type="text" name="anwser" autocomplete="off" /></td> 57 <td width="150"></td> 58 <td width="50"></td> 59 </tr> 60 </table> 61 <% 62 } 63 %> 64 <tr align="center"> 65 <td colspan="2"> 66 67 </td> 68 </tr> 69 <div align="center"> 70 <input type="submit" value="做好了吗?点这里看看得分" style="font-size:25px;height: 41px; width: 350px;"></div> 71 </body> 72 </html>
结果查看:
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8" import="java.sql.Connection,java.sql.DriverManager,java.sql.ResultSet"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<style type="text/css">
body,td,th {
font-size: 24px;
}
body {
background-image:url("../images/8.gif");
background-repeat:no-repeat;
background-attachment:fixed;
background-size:130% auto;
}
</style>
<html>
<head>
<embed src="04.mp3" loop="11" autostar="true" hidden="true"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>整数式子</title>
</head>
<body>
<table align="center" border="1" width="600" style="width: 624px;">
<tr>
<td width="250"><%="题目"%></td>
<td width="150"><%="你的答案"%></td>
<td width="150"><%="正确答案"%></td>
<td width="50"><%="得分"%></td>
</tr>
</table>
<%
Connection con = null; //定义一个MYSQL链接对象
Class.forName("com.mysql.jdbc.Driver").newInstance(); //MYSQL驱动
con = DriverManager.getConnection("jdbc:mysql://localhost:3306/jaovo_msg","root","LQYroot"); //链接本地MYSQL
java.sql.Statement stmt; //创建声明
stmt = con.createStatement();//创建传输对象 <br>
String sql2 = "select result from 四则运算题目2";
ResultSet resultSet = null;
resultSet= stmt.executeQuery(sql2);
String anw[]=new String[1000];
int p=0;
while(resultSet.next()){
anw[p]=resultSet.getString("result");
p++;
}
String an[]=request.getParameterValues("anwser");
Connection conn = null; //定义一个MYSQL链接对象
Class.forName("com.mysql.jdbc.Driver").newInstance(); //MYSQL驱动
conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/jaovo_msg","root","LQYroot"); //链接本地MYSQL
java.sql.Statement stmtn; //创建声明
stmtn = conn.createStatement();//创建传输对象 <br>
String sql3 = "select shizi from 四则运算题目2";
ResultSet resultSetn = null;
resultSetn= stmtn.executeQuery(sql3);
int i=0;
int jud1=0;//判断对的式子个数
int jud2=0;//判断错的式子个数
while(resultSetn.next()){
String anwser="";
String ar;
String jud;
ar=resultSetn.getString("shizi");
if(an[i].equals(anw[i]))
{
jud="√";
jud1++;
}
else{
jud="×";
jud2++;
}
%>
<table align="center" border="1" width="600" style="width: 624px; ">
<tr>
<td width="250"><%=ar %></td>
<td width="150"><%=an[i]%></td>
<td width="150"><%=anw[i]%></td>
<td width="50"><%=jud%></td>
</tr>
</table>
<%
i++;
}
%>
<font face="楷体_GB2312" color="blue" size="+3">你一共对了<a><%=jud1 %></a>道题!!!</font><br>
</body>
</html>
总结:
1. 没用考虑到用户的实际体验,面向的用户是二年级的学生,和大学生有着不同的审美观
2.随机表达式条件限定,排除重复,数据库的链接使用了他人的模板,主要原因在于数据库不能熟练运用,今后要加强对数据库操作练习
姓名:李奇原 2017年11月28日 |
| ||||||||||
题目1 日期 | 分析 | 设计思路 | 伪代码,流程图 | 代码实现 | 调试 | 总计 |
| ||||
周二 | 5 | 10 | 15 | 50 | 15 | 95 |
| ||||
周二、周三 | 60 | 50 | 30 | 360 | 500 | 1000 | |||||
|
|
|
|
|
|
| |||||
|
|
|
|
|
|
| |||||
|
|
|
|
|
|
| |||||
|
|
|
|
|
|
|
|
|
|
|
|
时间记录日志:
日期 | 开始 | 结束 | 中断时间 | 净时间 | 活动 | 备注 |
周二 | 8:00 | 10:00 | 0 | 120 | 上课 | 课堂测试 |
| 10:10 | 11:50 | 0 | 100 | 上课 | 上机 |
| 15:00 | 16:00 | 0 | 60 | 开会 | 学习 |
周二 | 10:00 | 23:00 | 120分 | 11小时 | 写代码 | 无 |
周三 | 14:00 | 23 | 50分 | 8小时 | 写代码+调试 | 无 |
|
|
|
|
|
|
|
缺陷记录日志
日期 | 编号 | 类型 | 引入阶段 | 排除阶段 | 修复时间 | 修复缺陷 |
11/28 | 1 | 思路 | 设计思路 | 设计思路 | 10 | 分装 |
| 2 | 代码实现 | 代码实现 | 代码实现 | 25 | 语法,书写错误 |
| 3 | 调试 | 调试阶段 | 调试阶段 | 25 | 数据库表设计 |
12/5 | 4 | 代码 | 书写 | 书写 | 100 | 语法问题 |
| 5 | 设计 | 设计 | 设计 | 120 | 技术问题 |
12/6 | 6 | 优化 | 优化 | 优化 | 100 | 优化+用户体验 |