小学生口算题卡

结对项目：

项目地址：
https://dev.tencent.com/u/qingYinGuo/p/Arithmetic/git

后端部分博客：https://blog.csdn.net/qing_tian0070/article/details/89219510

前端部分

1.主要功能：
（1）主页选择出题范围：
主要描述：提交表单到后台接口，生成相应符合标准的运算式

js 表单验证部分：

//进行表单验证
    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;} 
        }

    };

主页主要部分截图如下：

（2）答题部分
主要描述：
获取后台生成的运算式，用户做题后点击判题进行判分；
若答案正确，后面打钩，若答案错误，则打叉 并显示相应的正确结果。

part 1. js 部分获取运算式和结果的数组：

 <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>

part 2.用input hidden将前台记录的属性值传入后台：

<form action="/TikaServlet" method="post">

        <input type="hidden" name="time" id="time_id"/><!-- 时间 -->
        <input type="hidden" name="corNum" id="numRight_id"/><!-- 正确个数 -->
        <input type="hidden" name="corRate" id="Rightrate"/><!-- 正确率 -->
       
        <input type="submit" id ="out" class=" chuan" value="上传">

    </form>

part3.判题部分

 //判卷
    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 传到后台 
            }


    }

相关实现截图如下：

https://blog.csdn.net/cimixian/article/details/89202883

（3）题卡部分 ：
主要描述：获取答对总数、正确率、总共用时；

<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>

相关实现截图如下：

2.开发大致进程：
4.6~4.7：学习博客，前端页面的大致构想和开发，部分js编写；
4.9：逻辑基本确定，js 编写完成，开始合项目，基本合完一半的内容；
4.10：进一步修改讨论，项目完成；
3.个人总结：

主要时间主要花费在答题部分，首先这一部分的构思不够明确，所以在开发的时候浪费了很多时间，而且布局不够完善，js有误，与后台合时表达式不够熟练，，这一部分修改较长时间，，其余两个页面都相对简单。另外，和队友结对时，感觉进度更明确，互相帮助更有效率，后半段过程中一起经历和解决了很多问题，但是自知技术太差，还是要努力努力努力！最后，感谢队友国庆同学的帮助。