html中如何能按照自己需求自由设计试卷

Question

固定内容的试卷我会，但是怎么弄才能自由设计？就是按照需求可以选择加一个选择题，加多选题，判断题等

Answer 1

其实模板都是一样的，单选，多选，判断（其实就是单选），根据类型问题类型生成radio（单选）还是checkbox（多选）就行了。
主要就是题型的设计和如何显示，然后前台根据后台生成的题目的type生成对应的内容就行了
简单示例如下

<script>
    var questions = [
        { type: 1,id:1, title: '单选问题1', answers: [{ id: '1', title: '单选问题1--选项1' }, { id: '2', title: '单选问题1--选项2' }, { id: '3', title: '单选问题1--选项3' }/*更多选项*/] },
        { type: 2, id: 2, title: '多选问题1', answers: [{ id: '1', title: '多选问题1--选项1' }, { id: '2', title: '多选问题1--选项2' }, { id: '3', title: '多选问题1--选项3' }/*更多选项*/] },
        { type: 3, id: 3, title: '判断题1' },
        { type: 2, id: 4, title: '多选问题2', answers: [{ id: '1', title: '单选问题2--选项1' }, { id: '2', title: '单选问题2--选项2' }, { id: '3', title: '单选问题2--选项3' }/*更多选项*/] },
        { type: 2, id: 5, title: '多选问题3', answers: [{ id: '1', title: '多选问题3--选项1' }, { id: '2', title: '多选问题3--选项2' }, { id: '3', title: '多选问题3--选项3' }/*更多选项*/] },
        { type: 3, id: 6, title: '判断题2' },
    ];
    var s = questions.map(q => {
        let s = '';
        switch (q.type) {
            case 1:
                s += `<li>${q.title}</li>`;
                s += '<ul>'
                s += q.answers.map(a => `<input type="radio" name="q${q.id}" value="${a.id}"/>${a.title}`).join('<br>')
                s += '</ul>'
                break;
            case 2:
                s += `<li>${q.title}</li>`;
                s += '<ul>'
                s += q.answers.map(a => `<input type="checkbox" name="q${q.id}" value="${a.id}"/>${a.title}`).join('<br>')
                s += '</ul>'
                break;
            case 3:
                s += `<li>${q.title}</li>`;
                s += '<ul>'
                s += `<input type="radio" name="q${q.id}" value="1"/>正确　<input type="radio" name="q${q.id}" value="0"/>错误`
                s += '</ul>'
                break;

        }
        return s;
    }).join('<br>');
    document.write(s);
</script>

有帮助或启发麻烦点下【采纳该答案】，谢谢~~有其他问题可以继续交流~