前台打开页面，向后端请求题目。
后端出题，返回给前台数据
前端收到数据，进行题目展现。
在前端做题。做好后题目提交给后台。
后端判卷，返回成绩数据
前端接收成绩，展现成绩。
大概这个流程。
单纯html来做的话，那么你的题库就要在前端，用js来弄，而且做题，判卷都要用js，相对有后台我个人感觉，只题库一项用js来维护就很难管理。
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<style>
* {
margin: 0 auto
padding: 0
}
body {
background-color: #8acff0
}
.zongjian {
width: 300px
margin: 0 auto
margin-top: 10%
}
.zongjian p {
width: 100%
float: left
line-height: 30px
}
.zongjian p span {
line-height: 30px
margin-right: 10px
}
.zongjian p input {
line-height: 20px
}
.zongjian p font {
color: red
font-size: 18px
line-height: 30px
margin-left: 5px
}
.zuce {
background-color: #7df9dd
float: right
font-size: 14px
padding: 2px 5px
box-shadow: 1px 0px 0px 2px rgba(79, 180, 190, 0.9686274509803922), 0px 0px 0px 2px rgba(79, 180, 190, 0.9686274509803922)
}
.tishi {
width: 100%
float: left
color: red
height: 16px
}
</style>
<body>
<div class="zongjian">
<p><span>会员账号:</span>
<input id="name" onblur="onname()">
<font>*</font></p>
<div class="tishi" id="namets"></div>
<p><span>邮箱地址:</span>
<input id="email" onblur="onemail()">
<font>*</font></p>
<div class="tishi" id="emailts"></div>
<p><span>登录密码:</span>
<input id="password" onblur="onpassword()">
<font>*</font></p>
<div class="tishi" id="passwordts"></div>
<p><span>确认密码:</span>
<input id="qrpassword" onblur="onqrpassword()" type="password">
<font>*</font></p>
<div class="tishi" id="qrpasswordts"></div>
<div class="zuce" onClick="tijiao()">注册</div>
</div>
<script>
function onname()
{
var name = document.getElementById('name').value
if(name=="")
{
document.getElementById('namets').innerText = "会员账号不能为空"
return false
}
else if(name.length < 9)
{
document.getElementById('namets').innerText = "账号不能少于9位！"
return false
}
else
{
document.getElementById('namets').innerText = ""
return true
}
}
function onemail()
{
var email = document.getElementById('email').value
if(email=="")
{
document.getElementById('emailts').innerText = "邮箱不能为空"
return false
}
else if(email.indexOf('@')<0)
{
document.getElementById('emailts').innerText = "邮箱必须存在@"
return false
}
else
{
document.getElementById('emailts').innerText = ""
return true
}
}
function onpassword()
{
var password = document.getElementById('password').value
if(password=="")
{
document.getElementById('passwordts').innerText = "密码不能为空"
return false
}
else if(password.length < 6)
{
document.getElementById('passwordts').innerText = "密码必须大于6位"
return false
}
else
{
document.getElementById('passwordts').innerText = ""
return true
}
}
function onqrpassword()
{
var password = document.getElementById('password').value
var qrpassword = document.getElementById('qrpassword').value
if(qrpassword=="")
{
document.getElementById('qrpasswordts').innerText = "确认密码不能为空"
return false
}
else if(password!=qrpassword)
{
document.getElementById('qrpasswordts').innerText = "两次输入不一致"
return false
}
else
{
document.getElementById('qrpasswordts').innerText = ""
return true
}
}
function tijiao()
{
if(onname()&&onemail()&&onpassword()&&onqrpassword())
{
alert("提交成功")
}
else
{
alert("提交失败！")
}
}
</script>
</body>
</html>
建立自己的个性化题库大致包含两大类：软件架构和题库解析。
一、先来说说软件架构，题库是给人看的，用什么看，或者打开浏览器，或者安装一个客户端软件，这是前端展示的部分，分别对应web前端开发，或者客户端开发。
Web前端的好处是跨平台，只要有浏览器就可以，缺点也比较明显，比如：浏览器的适配，防爬虫等等，安全性较差。
客户端的好处是可以充分利用操作系统的优势，性能会比较好，比如可以利用操作系统进行缓存；缺点也比较明显，无法跨平台，每个平台需要单独开发。
选择哪种前端方案，需要根据目标用户群去平衡。
前端的展示解决了，再来后端，后端的作用简单来说是存储，搜索，这就需要数据库以及公有云的支持，比如要保存图片，题目，如果要组卷的话，可能还需要专门的服务器来组卷。
如果用户多了，还需要考虑并发，采用集群，微服务等技术架构解决这些问题。
二、软件架构问题解决了，再来解决题目的构建
这有可以细分成下面几个部分：
题目源从哪里来？
如何把题库解析成前端能够展示的样子？
题目源可以从别人那里购买，买来的是word格式，一次性可能会有成百上千页的题目资源。另外一种就是雇大学生或者老师做教研，自己编写题目，当然后面这种方式耗时耗力，效率低下，所以一般倾向于购买。
购买到的是word格式，可能会有别人的水印，以及隐藏的一些标记，数学试题会有大量的公式（一般MathType格式比较流行，有多种工具支持）。
所以首先需要清洗，把涉及到知识产权的标记清除掉（包括去水印，去标记等等）。
清洗完毕后会得到干净的试题word文档，这些都是word类型的，但是题库软件一般都是html格式的，所以第二步要把这些word试题资源进行切分，转化，保存成一个一个的html格式的题目。
切分，转化过程会涉及到对公式的处理，对图片的处理，以及对表格的处理等等。
解析的过程，要能获取到关于题目的一些属性，比如：区域，年份，难易程度，属于哪个知识点等等。
因为题目比较多，所以一般都会做成能够成批处理的，输入一个大文档，程序能够自己在后台执行的。
因为word的规范比较复杂，解析过程会涉及很多细节，不断的测试，修改，才能达到一个满意的效果。
