简易的考试系统设计（Web实验）
- 1.实验内容与设计思想
- （一）实验需求
- （二）设计思路
- 2.代码展示
- 3.实验小结
1.实验内容与设计思想
（一）实验需求
1.编写两个页面程序，一个HTML页面作为准化考试页面（含有单选、多选、判断题），另一个是JSP评分页面，用于呈现最终的成绩以及其它答题信息反馈。
2.编写后台程序，基于Servlet类，处理提交的答题信息，并返回给评分页面。
（二）设计思路
一、考试页面
1.h1标签设置标题，添加居中样式
2.h3标签显示题型
3.form标签用来创建表单，指明action=‘./result’，method=‘post’
4.label标签显示题目以及选项，添加for=‘id’，使其点击label标签等于点击对应的单选（复选）框，能够增大点击范围
5.input标签，设置type值为radio、checkbox，创建单选框以及复选框，设置name以及id
6.button标签，用来提交表单
效果：
二、后台数据处理
1.获取所有题目的正确答案：创建一维数组(String[] sum)来存储正确答案
2.获取提交的答案：创建String[] 型变量s1，通过request.getParameter()获取用户选择的答案赋值给s1
3.统计总分以及答对总数：创建变量score以及一维数组n[4]（n数组的1~3下标用来存放各个题型的答对题数），遍历sum以及s1，判断二者是否相等。若相等，则score累加10（默认每题10分）,n[0]++,用来统计答对的总提数。并且对于不同的题型，进行不同的累加
4.通过request.setAttribute()，将score以及n数组存储起来，并通过请求转发给评分页面，使得评分页面能够获取这些数据
通过
三、评分页面
使用el表达式${}，将后台传来的数据嵌入Html代码中，展示出来
使用ul列表，将各种题型答对的总数展示出来
效果：
2.代码展示
考试页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>C引言考试</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: #716969;
}
.divs{
background-color: rgba(255,255,255,0.4);;
margin: auto;
width: 600px;
padding: 15px;
}
.d1{
margin-top: 10px;
margin-bottom: 10px;
}
h1{
text-align: center;
}
label{
margin-right: 35px;
}
button{
display: block;
margin: auto;
margin-bottom: 7px;
}
</style>
</head>
<body>
<!--单选题-->
<!--多选题-->
<!--判断题-->
<div class="divs">
<h1>C语言测试</h1>
<form action="./result" method="post">
<h3>单选题（共三道，30分）</h3>
<div class="d1">
<label>1. 什么是构成C语言程序的基本单位</label><br>
<input type="radio" name="q1" id="l11" value="A"><label for="l11">A. 函数</label>
<input type="radio" name="q1" id="l12" value="B"><label for="l12">B. 过程</label>
<input type="radio" name="q1" id="l13" value="C"><label for="l13">C. 子程序</label>
<input type="radio" name="q1" id="l14" value="D"><label for="l14">D. 子例程</label>
</div>
<div class="d1">
<label>2. C语言表达式（ ）的值不等于1。</label><br>
<input type="radio" name="q2" id="l21" value="A"><label for="l21">A. 123/100</label>
<input type="radio" name="q2" id="l22" value="B"><label for="l22">B. 901%10</label>
<input type="radio" name="q2" id="l23" value="C"><label for="l23">C. 76%3</label>
<input type="radio" name="q2" id="l24" value="D"><label for="l24">D. 625%5</label>
</div>
<div class="d1">
<label>3. C语言表达式（ ）的值不等于1。</label><br>
<input type="radio" name="q3" id="l31" value="A"><label for="l31">A. *</label>
<input type="radio" name="q3" id="l32" value="B"><label for="l32">B. ==</label>
<input type="radio" name="q3" id="l33" value="C"><label for="l33">C. =</label>
<input type="radio" name="q3" id="l34" value="D"><label for="l34">D. %</label>
</div>
<h3>多选题（共两道，20分，全选对才有分）</h3>
<div class="d1">
<label>4. C语言表达式（ ）的值不等于1。</label><br>
<input type="checkbox" name="q4" id="l41" value="A"><label for="l41">A. *</label>
<input type="checkbox" name="q4" id="l42" value="B"><label for="l42">B. ==</label>
<input type="checkbox" name="q4" id="l43" value="C"><label for="l43">C. =</label>
<input type="checkbox" name="q4" id="l44" value="D"><label for="l44">D. %</label>
</div>
<div class="d1">
<label>5. C语言表达式（ ）的值不等于1。</label><br>
<input type="checkbox" name="q5" id="l51" value="A"><label for="l51">A. *</label>
<input type="checkbox" name="q5" id="l52" value="B"><label for="l52">B. ==</label>
<input type="checkbox" name="q5" id="l53" value="C"><label for="l53">C. =</label>
<input type="checkbox" name="q5" id="l54" value="D"><label for="l54">D. %</label>
</div>
<h3>判断题（共五道，50分）</h3>
<div class="d1">
<label>6. 如果变量已经正确定义，则表达式fahr ++ 与fahr + 1等价。</label><br>
<input type="radio" name="q6" id="l61" value="A"><label for="l61"> T</label>
<input type="radio" name="q6" id="l62" value="B"><label for="l62"> F</label>
</div>
<div class="d1">
<label>7. C程序中，用一对大括号{}括起来的多条语句称为复合语句，复合语句在语法上被认为是一条语句。 </label><br>
<input type="radio" name="q7" id="l71" value="A"><label for="l71"> T</label>
<input type="radio" name="q7" id="l72" value="B"><label for="l72"> F</label>
</div>
<div class="d1">
<label>8. 循环体如包括有一个以上的语句，则必须用一对大括号{}括起来，组成复合语句，复合语句在语法上被认为是一条语句。 </label><br>
<input type="radio" name="q8" id="l81" value="A"><label for="l81"> T</label>
<input type="radio" name="q8" id="l82" value="B"><label for="l82"> F</label>
</div>
<div class="d1">
<label>9. 在C语言中，仅由一个分号（;）构成的语句称为空语句，它什么也不做。 </label><br>
<input type="radio" name="q9" id="l91" value="A"><label for="l91"> T</label>
<input type="radio" name="q9" id="l92" value="B"><label for="l92"> F</label>
</div>
<div class="d1">
<label>10. 调用输入输出库函数时，编译预处理命令为#include <stdio.h>。 </label><br>
<input type="radio" name="q10" id="l101" value="A"><label for="l101"> T</label>
<input type="radio" name="q10" id="l102" value="B"><label for="l102"> F</label>
</div>
<button>提交</button>
</form>
</div>
</body>
</html>
后台数据处理：
package com;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
@WebServlet("/result")
public class result extends HttpServlet {
protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, java.io.IOException {
response.setContentType("text/plain;charset=UTF-8");
// 存放前端答案
String[] s1=new String[10];
// 应该将答案放在数据库中，需要时读取
String[] sum={"A","D","C","AB","CD","A","A","A","A","A"};
String s2="q";
for(int i=0;i<10;i++){
int t=i+1;
s1[i]=request.getParameter(s2+t);
}
int[] n=new int[4];
double score=0;
// 多选，单选，判断没分开
for(int i=0;i<10;i++){
int yy=0;
if(s1[i]==null){
i++;
continue;
}
for(int j=0;j<s1[i].length();j++){
if(s1[i].charAt(j)!=sum[i].charAt(j)){
yy=1;
break;
}
}
if(yy==0){
n[0]++;
score+=10;
if(i<3){
n[1]++;
}else if(i<5){
n[2]++;
}else{
n[3]++;
}
}
}
request.setAttribute("score",score);
request.setAttribute("n",n);
request.getRequestDispatcher("result.jsp").forward(request, response);
}
}
评分页面：
<%--
Created by IntelliJ IDEA.
User: 86135
Date: 2025/5/8
Time: 19:56
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<style>
.tc{
color: green;
}
h1{
text-align: center;
}
div{
font-size: 20px;
}
</style>
</head>
<body>
<%
int[] n=(int[]) request.getAttribute("n");
int yy=0;
if(n[0]==10){
yy=1;
out.println("<h1 class=\"tc\" >恭喜你，全部答题正确</h1>");
}
%>
<h1>本次得分为${score}，共答对${n[0]}道题</h1>
<div>
<label>各类题型答对题数：</label><br>
<ul>
<li>单选题：${n[1]}</li>
<li>多选题：${n[2]}</li>
<li>判断题：${n[3]}</li>
</ul>
</div>
</body>
</html>
3.实验小结
（一）在Jsp中，将数据嵌套在html代码中，可以通过out.print()将html代码与数据拼接，在页面中展示；也可以通过el表达式${}，直接在html代码嵌入。
（二）使用请求转发 request.getRequestDispatcher(“page”).forward(request, response)，可以共享request以及response，实现数据的共享，并且页面的url不会发生改变。
（三）将正确答案以及选项的顺序写死，会带来安全隐患。需要改进，使其每次访问页面，题目的顺序以及选项的顺序都会随机改变。
