PSP4则运算

四则运算

页面代码:

采用HTML + CSS 进行操作

字体则是采用Noto Sans SC、 open Sans
样式则是采用Bootstrap

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>四则运算测试</title>
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300&family=Open+Sans:wght@300&display=swap" rel="stylesheet">
        
        <link   href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

        <link rel="stylesheet" type="text/css" href="stylelalalalaqaq.css">
		</style>
	</head>
	<body>
		<!-- 头部信息 -->
		<div class="header">
			<span id="id_M">00</span>
			<span id="id_S">00</span>
		</div>
		<section id="tip">
		<div class="container">
			<div class="col-md-12 text-center">
				<div class="accordion" id="accordionExample">
					<div class="accordion-item">
					  <h2 class="accordion-header" id="headingOne">
						<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
						  这是一个四则运算小实验，祝你好运
						</button>
					  </h2>
					  <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
						<div class="accordion-body">
						  只有10小题，点击下一页即为直接开始
						</div>
					  </div>
					</div>
					<div class="accordion-item">
					  <h2 class="accordion-header" id="headingTwo">
						<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
						  重要提示1
						</button>
					  </h2>
					  <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
						<div class="accordion-body">
						  速算要点：冷静专注高度集中
						</div>
					  </div>
					</div>
					<div class="accordion-item">
					  <h2 class="accordion-header" id="headingThree">
						<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
						重要提示2
						</button>
					  </h2>
					  <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
						<div class="accordion-body">
						  错了没关系，人之常情
						</div>
					  </div>
					</div>
				  </div>
				</div>
			</div>
		</section>

		<!-- 出题内容 -->
        <section id="mark">
        <div class="container">
            <div class="content">
                <div class="col-md-12 text-center">
                    <ol class="list-group list-group-numbered">
                        <li class="list-group-item">
							<span class="sp">3 + 3 = </span>
							<input type="text" class="answer" value="" />
						</li>
						<li class="list-group-item">
							<span class="sp">3 + 3 = </span>
							<input type="text" class="answer" value="" />
						</li>
						<li class="list-group-item">
							<span class="sp">3 + 3 = </span>
							<input type="text" class="answer" value="" />
						</li>
						<li class="list-group-item">
							<span class="sp">3 + 3 = </span>
							<input type="text" class="answer" value="" />
						</li>
						<li class="list-group-item">
							<span class="sp">3 + 3 = </span>
							<input type="text" class="answer" value="" />
						</li>
						<li class="list-group-item">
							<span class="sp">3 + 3 = </span>
							<input type="text" class="answer" value="" />
						</li>
						<li class="list-group-item">
							<span class="sp">3 + 3 = </span>
							<input type="text" class="answer" value="" />
						</li>
						<li class="list-group-item">
							<span class="sp">3 + 3 = </span>
							<input type="text" class="answer" value="" />
						</li>
						<li class="list-group-item">
							<span class="sp">3 + 3 = </span>
							<input type="text" class="answer" value="" />
						</li>
						<li class="list-group-item">
							<span class="sp">3 + 3 = </span>
							<input type="text" class="answer" value="" />
						</li>
                    </ol>
                </div>
            </div>
        </div>
        </section>

		<!-- 底部标签 -->
		<div class="col-md-12 text-center">
		<form action="" method="">
			<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
				<button type="button" class="btn btn-outline-primary" id="bt1" >判断</button>
				<button type="button" class="btn btn-outline-secondary" id="bt2" >下一页</button>
			</div>
                </form>
	        </div>
	</body>
</html>

Css代码，对骨架进行调整

body{
    margin: 0;
    padding: 0;
}
.header{
    margin-top: -30px;
    height: 135px;
     40%;
    margin-left: auto;
    margin-right: auto;
    /* margin: 30px auto; */

    background-position:-30px -42px;
    /* border: red 1px solid; */
}

h1,h2,h3,h4,h5,h6,p{
    font-family: 'Noto Sans SC', sans-serif;
}



a,li,ul{
    font-family: 'Open Sans', sans-serif;
}



.content{
    height: 510px;
     40%;
    margin-left: auto;
    margin-right: auto;
    /* border: red 1px solid; */

}
.content-1{
     100%;
    height: 50px;
    /* border: red 1px solid; */
    line-height: 50px;
    margin-left: 250px;
}
.content-1 span{
    font-size: 18px;
}


form{
     25%;
    height: 20px;
    /* border: red 1px solid; */
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    position: relative;
}

#tip .container{
    padding: 35px;
}

.container,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl{
    max- 1060px;
}

input {
     outline:none; 
}

JS代码，出题逻辑脚本

题目逻辑
- 生成是产生随机数进行编写
- 通过空格连接形成字符串
用计时变量来计算做题时间
对题目计算
- 用“ ”（空格）切个字符串，逐个元素进行拆解
- 拆解后再进行逻辑判断

<!-- JS脚本 -->
		<script type="text/javascript">
			// 计时变量
			var c = 0
			var timer = null
			
			var oBt1 = document.getElementById("bt1")
			var oBt2 = document.getElementById("bt2")
			var oContent = document.getElementsByClassName("sp")
			var Answer = document.getElementsByClassName("answer")
			var id_S = document.getElementById("id_S")
			var id_M = document.getElementById("id_M")
			// console.log(Answer)
			// strs = str.split(",")
			// console.log(oContent)
			oBt1.onclick = function(){
				var count = 0
				for(var i = 0;i < oContent.length;i++){
					strs = oContent[i].innerHTML.split(" ")
					Ans = Answer[i].value
					// console.log(Ans)
					var add1 = strs[0]
					var operator = strs[1]
					var add2 = strs[2]
					// console.log(strs)
					// console.log(operator)
					if(operator == "+"){
						// alert(222)
						if(Number(add1) + Number(add2) == Number(Ans)){
							count++;
						}else{
							Answer[i].style.backgroundColor = "red";
						}
					}
					if(operator == "-"){
						if(Number(add1) - Number(add2) == Number(Ans)){
							count++;
						}else{
							Answer[i].style.backgroundColor = "red";
						}
					}
				}
				
				// 新增计时功能，结束计时
				c = 0
				//数据清零
				Min = id_M.innerText
				S = id_S.innerText
				id_S.innerHTML = "00"
				id_M.innerHTML = "00"
				
				alert("恭喜你答对了"+count+"题!"+"共用时"+Min+"分"+S+"秒！")
			}
			
			// 下一页 开始计时
			oBt2.onclick = function(){
				alert("success")
				for(var i = 0;i < oContent.length;i++){
					Answer[i].style.backgroundColor = "white";
					Answer[i].value = " "
					var add1 = parseInt(Math.random()*100)
					var add2 = parseInt(Math.random()*100)
					var ope = Math.round(Math.random())
					strs = oContent[i].innerHTML.split(" ")
					if(ope == 0){
						strs[1] = "+"
					}
					if(ope == 1){
						strs[1] = "-"
					}
					// console.log(oContent[i].innerText)
					// console.log(strs)
					strs[0] = add1
					strs[2] = add2
					// console.log(strs)
					oContent[i].innerText = strs[0]+" "+strs[1]+" "+strs[2]+" "+strs[3]+" "+strs[4]+" "
				}
				
				// 新增计时功能，开始计时
				timer = setInterval(function() {
				    c++;
				    // console.log(c)
				        // 需要改变页面上时分秒的值
				    // console.log($("id_S"))
				    id_S.innerHTML = showNum(c % 60)
				    id_M.innerHTML = showNum(parseInt(c / 60) % 60)
				},1000)
			}
			//封装一个处理单位数字的函数
			function showNum(num) {
			    if (num < 10) {
			        return '0' + num
			    }
			    return num
			}
		</script>

psp流程展示

		预计耗时（分钟）	实际耗时（分钟）
Planning	计划	20	20
Estimate	估计这个任务需要多少时间	90	90
Development	开发	120	90
Analysis	需求分析	10	10
Design Spec	生成设计文档	/	/
Design Review	设计复审（和同事审核设计文档）	/	/
Coding Standerd	代码规范（为目前的开发制定合适的规范）	/	/
Design	具体设计	30	30
Coding	具体编码	100	100
Code Review	代码复审	10	15
Text	测试（自测，修改代码，提交修改）	20	20
Reporting	报告	20	20
Text Report	测试报告	10	10
Size Measurement	计算工作量	5	5
Postmortem & Process Improvement Plan	事后总结，并提出过程改进计划	5	5
Sum	合计	440	415

总结

理论上来说，只是完成了一个试卷的编写以及判断对错，做起来并没有像什么试卷开发系统，更像一个小程序而已
本来想用gitee挂上gitee page服务的，但是我已经挂了博客网站，就不开放此服务了
阿里云的配置耗时耗力耗钱
Tomcat服务器又有点呆滞
暂时先这样吧
github链接