实现效果，答题，单选，多选，填空题
使用技术 layui(仅样式展示)，es6,jq。
效果图
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
<title>测试 - layui</title>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="layui/layui.js"></script>
<style>
h1 {
color: red;
}
h2,
.sure {
margin: 5px 0;
}
.inline {
display: inline-block;
}
.solution i {
color: orange;
}
</style>
</head>
<body>
<form
class="layui-form"
action=""
style="display: flex; justify-content: space-between"
>
<div>
<div class="box"></div>
<div class="sure layui-btn">确定</div>
</div>
<div class="solution">
<h1>这是答案</h1>
</div>
</form>
<script>
layui.use(['form', 'layedit', 'laydate'], function () {
//实例化element
var form = layui.form
// 后台返回的数据
var list = [
{
answer: 'A',
content: '标题0',
type: '0',
},
{
answer: 'B',
content: '标题1',
type: '0',
},
{
answer: 'A,B',
content: '标题2',
type: '1',
},
{
answer: 'D',
content: '标题3',
type: '1',
},
{
answer: 'D',
content: '标题4',
type: '1',
},
{
answer: '我是一道大题的答案',
content: '标题5',
type: '2',
},
{
answer: '我是一道大题的答案2222',
content: '标题6',
type: '2',
},
]
const zimu = ['A', 'B', 'C', 'D']
list.forEach((item, index) => {
const itemAnswer = [...item.answer.replace(/,/, '')]
var zifuchuan = `<div>
<h2>${item.content}</h2>`
for (let i = 0; i < zimu.length; i++) {
let taoZimu = zimu[i]
// 单选题
if (item.type === '0') {
zifuchuan += `<div class="inline inline2 dan">
<input type="radio" name="${index}" value="${taoZimu}" title="${taoZimu}" ${
itemAnswer.includes(taoZimu) ? 'checked' : ''
} />
</div>`
} else if (item.type === '1') {
// 多选题
zifuchuan += `<div class="inline inline2 shuang">
<input type="checkbox" name="${taoZimu}" value="${taoZimu}" lay-skin="primary" title="${taoZimu}" ${
itemAnswer.includes(taoZimu) ? 'checked' : ''
} />
</div>`
}
}
if (item.type === '2') {
// 填空题
zifuchuan += `<div class=" inline" data-name ="${item.type}">
<textarea placeholder="请输入内容" class="layui-textarea">${item.answer}</textarea>
</div>`
}
;`</div>`
// 动态渲染
$('.box').append(zifuchuan)
form.render('checkbox')
form.render('radio')
})
// 获取数据
$('.sure').click(function () {
$('.solution').find('div').html('')
var formData = [] //总数据
var ckAarray //input数据
var ckAarray2 //textarea数据
var num = 0 //判断是否未选择
$('.box>div').each(function () {
ckAarray = $(this).find('.inline2').find('input:checked')
ckAarray2 = $(this).find('.inline').find('textarea')
var ans = ''
// 单选题
ckAarray.each(function (i, item) {
ans += ckAarray.length == i + 1 ? item.value : item.value + ','
})
// 填空题
ckAarray2.each(function (i, item) {
ans += item.value
})
// 赋值到对象
forDan = {
answer: ans,
content: $(this).find('h2').html(),
}
formData.push(forDan)
})
// 判断多少题 没有做
formData.map((item) => {
if (item.answer.length == 0) {
num++
}
})
if (num != 0) {
alert(
'总共' +
formData.length +
'道题! 已做答:' +
(formData.length - num) +
'道题,还有' +
num +
'道题未完成'
)
} else {
console.log(formData)
alert('恭喜你,答题完成')
formData.forEach((item, index) => {
var soluData = `<div><i>${index + 1}、</i> ${item.answer}</div>`
$('.solution').append(soluData)
})
}
})
// 动态添加单选还是多选
var typeNum = null
var typeNum2 = null
list.forEach(function (item) {
if (item.type === '0') {
typeNum++
} else if (item.type === '1') {
typeNum2++
}
})
// 单选题
$('.box>div').eq(0).prepend('<h1>单选题</h1>')
// 多选题
$('.box>div')
.eq(typeNum2 - 1)
.prepend('<h1>多选题</h1>')
// 填空题
$('.box>div')
.eq(typeNum + typeNum2)
.prepend('<h1>填空题</h1>')
})
</script>
</body>
</html>
网友评论