小学生口算题卡——孙瑞瑞

1.需求设计：获取生成的运算式，学生做题后点击判题进行判分；若答案正确，后面打钩，若答案错误，则打叉 并显示相应的正确结果。

（1）出题：随机生成十个四则运算题

（2）答题：界面显示10个题，进行作答，作答中进行计时

（3）统计：统计对错，若答案正确，后面打钩，若答案错误，则打叉 并显示相应的正确结果。

2.设计

（1）用js表单生成符合标准的运算式，获取运算式和结果的数组，设计题卡部分，获取答对总数，总共用时。

（2）通过jsp Servlet Spring实现接口设计，controller 负责前后台的交互控制，service负责业务逻辑的实现，entity负责对实体类的封装。

3.主要代码展示

//加减乘除和括号结合
 if (fourArith.equals("1") &&  bracket.equals("1")) {
                Limit limit = new Limit();
                limit.setSymCount(symCount);
                limit.setMaxNum(maxNum);
                limit.setMinNum(minNum);
                limit.setCount(count);
                lists = arithmeticService.twoLimits1(limit);
                formulaList = lists.get(0);
                resultList = lists.get(1);
                request.getSession().setAttribute("formulaList",formulaList);
                request.getSession().setAttribute("resultList",resultList);
                request.getRequestDispatcher("dati.jsp").forward(request,response);
                 try {
//                     request.getRequestDispatcher("/DownloadServlet").forward(request,response);
        
                 }catch (Exception e){
                     e.printStackTrace();
                 }
//只有括号
else if (!fourArith.equals("1") && bracket.equals("1")) {
                Limit limit = new Limit();
                limit.setSymCount(symCount);
                limit.setMaxNum(maxNum);
                limit.setMinNum(minNum);
                limit.setCount(count);
                lists = arithmeticService.addBracketToFront(limit);
                formulaList = lists.get(0);
                resultList = lists.get(1);
                request.getSession().setAttribute("formulaList",formulaList);
                request.getSession().setAttribute("resultList",resultList);
                request.getRequestDispatcher("dati.jsp").forward(request,response);
//只有乘除
else if (fourArith.equals("1")  && !bracket.equals("1")) {
                Limit limit = new Limit();
                limit.setSymCount(symCount);
                limit.setMaxNum(maxNum);
                limit.setMinNum(minNum);
                limit.setCount(count);
                lists = arithmeticService.fourArithToFront(limit);
                formulaList = lists.get(0);
                resultList = lists.get(1);
                request.getSession().setAttribute("formulaList",formulaList);
                request.getSession().setAttribute("resultList",resultList);
                request.getRequestDispatcher("dati.jsp").forward(request,response);
                
            }
//只有加减
else {
                Limit limit = new Limit();
                limit.setSymCount(symCount);
                limit.setMaxNum(maxNum);
                limit.setMinNum(minNum);
                limit.setCount(count);
                lists = arithmeticService.twoArithToFront(limit);
                formulaList = lists.get(0);
                resultList = lists.get(1);
                request.getSession().setAttribute("formulaList",formulaList);
                request.getSession().setAttribute("resultList",resultList);
                //request.getSession().setAttribute("email",req.getParameter("email"));
                request.getRequestDispatcher("dati.jsp").forward(request,response);
                
            }
            request.setAttribute("formulaList",formulaList);
            request.setAttribute("resultList",resultList);
        }catch (Exception e){
            e.printStackTrace();
            request.setAttribute("errMsg",e.toString());
        }
        
                
                
            }

public List<List> addBracketToFront(Limit limit){
        List<String> formulaList=new ArrayList<>();
        List<String> resultList=new ArrayList<>();
        List<List> allList=new ArrayList<>();
        for (int i=0;i<limit.getCount();i++){
            
            List<String> list=addBracket(limit);
            String formula=list.get(0);
            String result=list.get(1);
            formulaList.add(formula);
            resultList.add(result);
            allList.add(formulaList);
            allList.add(resultList);
        }
        return allList;
}

//进行表单验证
    var myCheck = document.getElementById('sub');
    myCheck.onclick=function(){
        var Biaodan=document.getElementById('Biaodan');//表单对象
        var num=document.getElementById('num');//题目个数
        var min=document.getElementById('min');//最小值
        var max=document.getElementById('max');//最大值
        var ope=document.getElementById('ope');//运算符个数
        var cheng=document.getElementById('cheng');//是否乘除
        var kuohao=document.getElementById('kuohao');//是否括号
        if(num.value==""){//题目个数
            Biaodan.onsubmit=function(){
                return false;
            } 
        }
        if(num.value<1||num.value>10000){//题目个数范围在1--10000
            Biaodan.onsubmit=function(){return false;} 
        }
        if(min.value==""||min.value<1||min.value>100){//最小值设置范围1--100
            Biaodan.onsubmit=function(){return false;} 
        }
        if(max.value==""||max.value<50||max.value>1000){//最小值设置范围50--1000
            Biaodan.onsubmit=function(){return false;} 
        }

    };

<c:forEach items="${sessionScope.formulaList}" var="c" varStatus="status">
    //遍历运算式数组
        <div class="Ti">
            
            <div class="mu a">${c}=</div>//运算式
            <div class="mu b">
                <input name="c" type="text" class="c">//用户答题框
            </div>
            <div class="yesno"></div>//打钩或打叉

            <div class="ans" ></div><!-- 答案为: -->
            <div class="duide"></div><!-- 正确的结果 -->

        </div>

    </c:forEach>


    <c:forEach items="${sessionScope.resultList}" var="d" varStatus="status">
        <input style="display:none;" class="daan" value="${d}">//对应的正确答案
    </c:forEach>

//判卷
    function check(){

        var duide = document.getElementsByClassName("duide");//要显示的正确答案
        var daan=document.getElementsByClassName('daan');//后台获取的正确答案
       var c = document.getElementsByClassName('c');//用户作答
       var time=document.getElementById("time_id");
        var x = document.getElementById('startShow');
        //总计时间

        var yesno = document.getElementsByClassName("yesno");//钩或叉
        var ans = document.getElementsByClassName("ans");//“答案为：”

        var numRight=document.getElementById("numRight_id");//正确的个数
        var rate = document.getElementById("Rightrate");//正确率

        var yes = 0;//正确个数
        var no =0;
        var count = 0;//总个数

        for(var i=0;i<daan.length;i++){
           if(daan[i].value==c[i].value){//若答对了
                yesno[i].innerHTML="√";
                yesno[i].style.color="#1DF126";
                yes++;
                count++;
            }else{
                yesno[i].innerHTML="×";
                yesno[i].style.color="red";
               //若错误，显示 "答案：正确的答案"
                ans[i].innerHTML = "答案：";
                ans[i].style.display="inline-block";
                duide[i].innerHTML = daan[i].value;
                duide[i].style.display="inline-block";
                console.log(duide[0].innerHTML);

                no++;
                count++;
            }


            numRight.value=yes;
           time.value = x.innerHTML;
           var str = Number(yes/count*100).toFixed(2);
           str +="%";
           rate.value = str;
            //将相应值通过input hidden 传到后台 
            }


    }

<div class="ka">
    <div class="titl">答题卡</div>
    <div class="line">
        <div class="left">答对总数</div>
        <div class="mid">:</div>
        <div class="right"><%=request.getSession().getAttribute("corNum")%></div>
    </div>
    <div class="line">
        <div class="left">正确率为</div>
        <div class="mid">:</div>
        <div class="right"><%=request.getSession().getAttribute("corRate")%></div>
    </div>
    <div class="line">
        <div class="left">总共用时</div>
        <div class="mid">:</div>
        <div class="right"><%=request.getSession().getAttribute("time")%></div>
    </div>

</div>

4.运行结果

 

 

 

 

 5.PSP对照表

 

 6.总结

主要时间主要花费在答题部分，首先这一部分的构思不够明确，所以在开发的时候浪费了很多时间，而且布局不够完善，js有误，与后台合时表达式不够熟练，，这一部分修改较长时间。写代码的过程太过艰难，代码检测耗费时长太多，写的过程磕磕绊绊，遇到了许多的问题。但是自知技术太差，还是要努力努力努力！