实现效果,答题,单选,多选,填空题
使用技术 layui(仅样式展示),es6,jq。
代码:
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
h1 {
color: red;
}
h2,
.sure {
margin: 5px 0;
}
.inline {
display: inline-block;
}
.solution i {
color: orange;
}
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 = `
${item.content}
`for (let i = 0; i < zimu.length; i++) {
let taoZimu = zimu[i]
// 单选题
if (item.type === '0') {
zifuchuan += `
itemAnswer.includes(taoZimu) ? 'checked' : ''
} />
} else if (item.type === '1') {
// 多选题
zifuchuan += `
itemAnswer.includes(taoZimu) ? 'checked' : ''
} />
}
}
if (item.type === '2') {
// 填空题
zifuchuan += `
}
;`
// 动态渲染
$('.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 = `
$('.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('
单选题
')// 多选题
$('.box>div')
.eq(typeNum2 - 1)
.prepend('
多选题
')// 填空题
$('.box>div')
.eq(typeNum + typeNum2)
.prepend('
填空题
')})