實現效果，答題，單選，多選，填空題
使用技術 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>
