一.前提

(1)GitHub地址:https://github.com/mingbiaoleung/FourOperationWeb

(2)调试环境:IntelliJ IDEA ,CHORME浏览器

二.作业要求

(1)基本要求

  • 自动生成题目,单个题目最多不能超过4个运算符,操作数小于100。
  • 用户可以输入答案。
  • 若用户输入答案正确,则提示正确;若答案错误,则提示错误,并要提示正确答案是多少。

(2)扩展要求

  1. 可以出表达式里含有负整数(负整数最小不小于-100)的题目,且负数需要带括号,用户输入的结果不用带括号。如: 2 *(-4) = -8。
  2. 用户可以选择出题的个数(最多不能超过5个题目),答题结束可以显示用户答错的题目个数和答对的题目个数。
  3. 用户答题结束以后,程序可以显示用户答题所用的时间。
  4. 程序可以设置答题时间,时间设置为整数,单位为秒,最大不能超过120秒,若超过了答题时间未答题,则提示:时间已到,不能答题。

(3)结对成员

       姓名:梁铭标 学号:201606120031  博客园地址:https://www.cnblogs.com/luengmingbiao/

       姓名:刘杰  学号:201606120029  博客园地址:http://www.cnblogs.com/Winslow-liujie/

三.时间估算

        结对项目软件过程耗时估计表与统计表

       (时间单位:小时)

PSP2.1

个人软件实现阶段

预计时间

实际时间

Planning

计划

1

2

· Estimate

估计这个任务需要多少时间

10

20

Development

开发

10

10

· Analysis

需求分析 (包括学习新技术)

1

1

· Design Spec

生成设计文档

1

1

· Design Review

设计复审

0.5

0.5

· Coding Standard

代码规范

1

1

· Design

具体设计

1

1

· Coding

具体编码

1

1

· Code Review

代码复审

0.5

0.5

· Test

测试(自我测试,修改代码,提交修改)

1

1

Reporting

报告

1

1

Test Report

测试报告

1

1

·workload

计算工作量

0.5

0.5

·correction

并提出过程改进计划

2

2

 

四:工作详情

    (一)工作:

               刘杰:             设计和编写界面交互部分、设计计时器。

               梁铭标:          后台代码随机生成题目、前后端数据交互、判断正误。

    (二) 部分功能代码介绍:

(1)题目获取功能:通过ajax异步获取一定数量的四则运算习题(前台)

$.ajax({
            type: "POST",
            url: "GetTitleInfoServlet",
            dataType: "json",
            data: jsonDate,
            async:false,
            contentType:"application/json;charset=UTF-8",
            success: function (returnedData) {
                var titleInfoJson = JSON.stringify(returnedData);
                sessionStorage.setItem("title", titleInfoJson);
            }
         });

         题目获取功能:通过ajax异步获取一定数量的四则运算习题(后台)

 /**
     *   响应前端ajax生成一定数量的四则运算习题并返回到前台
     * @param request    
     * @param response
     * @throws ServletException
     * @throws IOException
     */
    protected  void service(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // 设置请求与响应的编码
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/x-javascript;charset=utf-8");
        response.setHeader("Cache-Control", "no-cache");

        // 获取从页面中提交过来的JSON格式数据数据
        String titleInfo = JsonService.readJSONData(request);
        JSONObject titleInfoJson = JSONObject.parseObject(titleInfo);

        // 根据前台传来的数据进行解析后生成相应的题目,并以JsonArray格式存储
        JSONArray titleJsonArray = generateTitleJsonArray(titleInfoJson);

        // 把生成的题目返回到前台
        PrintWriter printWriter = response.getWriter();
        printWriter.write(titleJsonArray.toJSONString());
        printWriter.flush();
        printWriter.close();
    }

(2)用户提交功能:首先经过校验机制判断是否输入答案,之后进行答案的比对运算出答对题数量。

//用户点击按钮提交题目答案并计算用户的正确数以及错误数
    $(\'#summitUserAnswer\').click(function () {
        $(\'#summitUserAnswer\').addClass(\'disabled\'); // Disables visually
        $(\'#summitUserAnswer\').prop(\'disabled\', true); // Disables visually + functionally
        //初始化用户做对题目的数目
        var trueNum = 0;
        for (var i = 0; i < titleJsonLength; i++) {
            var userAnswer = document.getElementById("input" + i).value;
            if (userAnswer == correctAnswerArray[i]) {
                var code = "<p class=\"card-text text-danger col-sm-4\">正确</p>";
                $(\'#title\' + i).append(code);
                trueNum++;
            }else{
                var code = "<p class=\"card-text text-danger\">你答错了,正确答案为"+ correctAnswerArray[i] +"</p>";
                $(\'#title\' + i).append(code);
            }

        }
        //做错的题目数量
        var falseNum = titleJsonLength - trueNum;

        // var count = "<p class=\"text-danger\">恭喜你完成,你用了"+statisticalTime()/1000+"秒</p>"
        var submitCode = "<div class=\"col-md-13\">\n" +
            "<div class=\"card\">\n" +
            "<div class=\"card-body\">\n" +
            "<span><h5 class=\"card-title\">答题结束</h5></span>\n" +
            "<p class=\"text-danger\">恭喜你完成,你用了" + statisticalTime() / 1000 +
            "秒, 你答对了" + trueNum + "道题, 答错了" + falseNum + "道题!请继续加油!" + "</p>\n" +
            "<div class=\'row\' style=\"margin: 0px auto;display: table;\">" +
            "<a href=\"Title.html\" class=\"btn btn-primary\">重新生成题目</a>\n" +
                "</div>" +
            "</div>\n" +
            "</div>\n" +
            "</div>";
         $(\'#TitleCard\').append(submitCode);
    });

 

五.软件演示

软件入口地址:http://119.23.205.157:8888/SimpleFourOperationWeb_war/Title.html

1.首先进行选择题目类型以及题目个数

 

 

 

2.点击做题等待跳转到做题页面

 

 

3.计算题目后点击提交

 

六:结对照片

 

 

七:收获与感悟

          在这一次结对小项目中,明确分工和一定的团队交流是非常重要的,可以达到事半功倍的效果。团队工作能增加成员的工作积极性。因为在面对问题的时候,会有人一起分担,共同尝试新的策略。两个人一起工作需要互相配合,如果想偷懒去干别的,就会拖延工作进度。在编程中,如果双方遇到一些问题,可以相互讨论,可以更快更有效地解决问题,互补双方的一些不足。本次结对子编程收益良多,感谢搭档刘杰的支持与帮助。

版权声明:本文为luengmingbiao原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/luengmingbiao/p/9846403.html