四则运算

实验目标：

设计四则运算网页版：限定条件为：

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;
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 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;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=" 1333px; ">
<form id="form1" name="form1" method="post" action="zhengshushizi.jsp" style="height: 469px;  1353px; ">
  <p>
    <label for="textfield"></label>
  </p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p align="center" style=" 1242px; height: 78px"><br>
    要做多少道题呢？：<input type="text" name="geshu" autocomplete="off" id="geshu">
    <br>
  </p>
  <p>&nbsp;</p>
  
   <div align="center">
<input type="submit" value="开始喽" style="font-size:25px;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]+" = "+'
'); //输出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=" 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=" 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;  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=" 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=" 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	优化+用户体验