要求

生成 101010 个单选，555 个双选，202020 个判断。

实现思路

1.通过 JS 的 document.createElement() 生成 input 标签；
2.通过 .innerHTML() 和 .setAttribute()生成用于单选和判断的 radio、用于双选的 checkbox；
3.通过在 form 里添加三组 div 并设置 id 使 JS 可以通过 document.getElementById() 和 .appendChild() 向 div 内部添加元素。

网页结构

主页：index.jsp
JS：客观题.js
判断答案正误的网页：result.jsp

实现代码

JS 端

// 客观题.js// single() 生成单选
function single(no, describe, a, b, c, d){        // no：题号；describe：题目描述；a：选项 1 的内容，b、c、d相同var dx = document.getElementById("danxuan");  // dx 代表存放单选题的 div 的 idvar desc = document.createElement("p");       // 生成 <p></p> 用来存放题号 + 题目描述desc.innerHTML = no +".&nbsp;" + describe;    // 生成题号 + “.” + 题目描述，例如 “1.下列属于动物的是”dx.appendChild(desc);                         // 向 dx 添加元素 desc// 选项 1var r1 = document.createElement("input");     // 生成 <input></input>var l1 = document.createElement("span");      // 生成 <span></span> 用来存放空格，使选项之间不那么拥挤l1.innerHTML = a + "&nbsp;";                  // 向 <span></span> 添加空格r1.setAttribute("type", "radio");             // 设置 input 类型为 radior1.setAttribute("name", no);                  // 设置 input 的 name 为题号r1.setAttribute("value", a);                  // 设置 input 的 value 为 a 的内容dx.appendChild(r1);                           // 向 dx 添加元素 r1dx.appendChild(l1);                           // 向 dx 添加元素 l1// 以下内容注释与选项 1 相同// 选项 2var r2 = document.createElement("input");var l2 = document.createElement("span");l2.innerHTML = b + "&nbsp;";r2.setAttribute("type", "radio");r2.setAttribute("name", no);r2.setAttribute("value", b);dx.appendChild(r2);dx.appendChild(l2);// 选项 3var r3 = document.createElement("input");var l3 = document.createElement("span");l3.innerHTML = c + "&nbsp;";r3.setAttribute("type", "radio");r3.setAttribute("name", no);r3.setAttribute("value", c);dx.appendChild(r3);dx.appendChild(l3);// 选项 4var r4 = document.createElement("input");var l4 = document.createElement("span");var br4 = document.createElement("br");var br5 = document.createElement("br");           // 题目之间的换行l4.innerHTML = d;r4.setAttribute("type", "radio");r4.setAttribute("name", no);r4.setAttribute("value", d);dx.appendChild(r4);dx.appendChild(l4);dx.appendChild(br4);dx.appendChild(br5);
}// multiple() 双选题
function multiple(no, describe, a, b, c, d){       // 与 single() 的参数含义相同var duo = document.getElementById("duoxuan");var desc = document.createElement("p");desc.innerHTML = no +".&nbsp;" + describe;duo.appendChild(desc);// 选项 Avar r1 = document.createElement("input");var l1 = document.createElement("span");l1.innerHTML = a + "&nbsp;";r1.setAttribute("type", "checkbox");r1.setAttribute("name", no);r1.setAttribute("value", a);duo.appendChild(r1);duo.appendChild(l1);// 选项 Bvar r2 = document.createElement("input");var l2 = document.createElement("span");l2.innerHTML = b + "&nbsp;";r2.setAttribute("type", "checkbox");r2.setAttribute("name", no);r2.setAttribute("value", b);duo.appendChild(r2);duo.appendChild(l2);// 选项 Cvar r3 = document.createElement("input");var l3 = document.createElement("span");l3.innerHTML = c + "&nbsp;";r3.setAttribute("type", "checkbox");r3.setAttribute("name", no);r3.setAttribute("value", c);duo.appendChild(r3);duo.appendChild(l3);// 选项 Dvar r4 = document.createElement("input");var l4 = document.createElement("span");var br4 = document.createElement("br");var br5 = document.createElement("br");l4.innerHTML = d;r4.setAttribute("type", "checkbox");r4.setAttribute("name", no);r4.setAttribute("value", d);duo.appendChild(r4);duo.appendChild(l4);duo.appendChild(br4);duo.appendChild(br5);
}// judge() 判断题
function judge(no, describe){                     // no：题号；describe：题目描述var dx = document.getElementById("panduan");var desc = document.createElement("p");desc.innerHTML = no +".&nbsp;" + describe;dx.appendChild(desc);// 选项 “是”var r1 = document.createElement("input");var l1 = document.createElement("span");l1.innerHTML = "是" + "&nbsp;";r1.setAttribute("type", "radio");r1.setAttribute("name", no);r1.setAttribute("value", "是");dx.appendChild(r1);dx.appendChild(l1);// 选项 “否”var r2 = document.createElement("input");var l2 = document.createElement("span");var br1 = document.createElement("br");var br2 = document.createElement("br");l2.innerHTML = "否";r2.setAttribute("type", "radio");r2.setAttribute("name", no);r2.setAttribute("value", "否");dx.appendChild(r2);dx.appendChild(l2);dx.appendChild(br1);dx.appendChild(br2);
}

网页端

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>答题系统</title>
<script language="javascript" src="客观题.js"></script>
</head>
<body><center><h3>2022 年第二学期 20 级计算机科学与技术期中考试题</h3><p>考试时长：100 分钟&nbsp;&nbsp;&nbsp;&nbsp;满分：100 分</p><hr></center><script type="text/javascript">// 自动加载试题window.onload = function question() {// 单选题single(1, '下列不是资本主义国家的是：', '中国', '美国', '英国', '法国');single(2, '1 + 1 = ', '1', '11', '2', '3');single(3, '斐波那契数列第 5 位是：', '1', '3', '5', '8');single(4, '下列哪项是食草动物？', '兔子', '老虎', '老鹰', '猎豹');single(5, '30 * 20 = ', '60', '600', '500', '50');single(6, '3 + 4 = ', '8', '7', '44', '5');single(7, '与地球相邻的星球是：', '水星', '金星', '木星', '土星');single(8, '英语字母表有多少个字母？', '26', '24', '27', '28');single(9, '此题答案选第三项', '一', '二', '三', '四');single(10, '这是第几题？', '5', '20', '10', '3');// 复选题multiple(11, '下列不是资本主义国家的是：', '中国', '朝鲜', '英国', '法国');multiple(12, '1 + 1 <= ', '-1', '-11', '2', '3');multiple(13, '下列属于金属盐的是：', '硝酸铵', '氧化亚铁', '硫酸铜', '氯化钾');multiple(14, '下列哪几项不是动物？', '英语', 'C++', '老鹰', '猎豹');multiple(15, '3 + 4 > ', '4', '600', '1', '55');// 判断题judge(16, '1 + 1 = 2');judge(17, '小狗是一个生物体');judge(18, '斐波那契数列第 5 位是 5');judge(19, '所有的蘑菇都没有毒');judge(20, '有的人眼睛是黑色的');judge(21, '地球上约 70% 是海洋');judge(22, '出题人是人类');judge(23, '谷歌旗下的深度学习框架包括 Tensorflow');judge(24, '这是第 24 题');judge(25, '手机需要电池才能工作');judge(26, '我们是地球人');judge(27, '牛顿是中国人');judge(28, '3 * 2 = 6');judge(29, '51 单片机采用 Intel 的指令标准');judge(30, '人体安全电压小于 36V');judge(31, '希腊位于印度洋');judge(32, '我国位于亚洲东部');judge(33, '大熊猫是我国国宝');judge(34, '此试题满分是 100 分');judge(35, 'Java 程序可以跨平台运行');}</script><form action="result.jsp" method="post"><b>一、单选题（每题 6 分，共 10 题）</b><div id="danxuan"></div><b>二、复选题（每题 4 分，共 5 题）</b><div id="duoxuan"></div><b>三、判断题（每题 1 分，共 20 题）</b><div id="panduan"></div><blockquote><input type="submit" value="提交" name="button1"><input type="reset" value="重置" name="button2"></blockquote></form>
</body>
</html>

result.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>结果</title>
</head>
<body><center><h3>2022 年第二学期 20 级计算机科学与技术期中考试题 —— 评测结果</h3><hr></center><%request.setCharacterEncoding("UTF-8");String dan_xuan[] = { "中国", "2", "5", "兔子", "600", "7", "金星", "26", "三", "10" };String duo_xuan[][] = { { "中国", "朝鲜" }, { "2", "3" }, { "硫酸铜", "氯化钾" }, { "老鹰", "猎豹" }, { "1", "4" } };String pan_duan[] = { "是", "是", "是", "否", "是", "是", "是", "是", "是", "是", "是", "否", "是", "是", "是", "否", "是", "是", "是","是" };%><b>一、单选题（每题 6 分，共 10 题）</b><br><%for (int i = 1; i <= 10; i++) {String num = Integer.toString(i);String s = request.getParameter(num);if ((s != null) && (s.equals(dan_xuan[i - 1]))) {out.println("第 " + i + " 题正确！<br>");} else if (s != null) {out.println("第 " + i + " 题错误！正确答案为：" + dan_xuan[i - 1] + "<br>");} else {out.println("第 " + i + " 题未解答！<br>");}}%><b>二、复选题（每题 4 分，共 5 题）</b><br><%for (int i = 11; i <= 15; i++) {String num = Integer.toString(i);String[] s = request.getParameterValues(num);int flag = 0;if (s == null) {out.println("第 " + i + " 题未解答！<br>");continue;}if (s != null) {for (int j = 0; j < s.length; j++) {for (int k = 0; k < 2; k++) {if (s[j].equals(duo_xuan[i - 11][k])) {flag++;}}}if (flag == 2) {out.println("第 " + i + " 题正确！<br>");} else {out.println("第 " + i + " 题错误！正确答案为：" + duo_xuan[i - 11][0] + " " + duo_xuan[i - 11][1] + "<br>");}}}%><b>三、判断题（每题 1 分，共 20 题）</b><br><%for (int i = 16; i <= 35; i++) {String num = Integer.toString(i);String s = request.getParameter(num);if ((s != null) && (s.equals(pan_duan[i - 16]))) {out.println("第 " + i + " 题正确！<br>");} else if (s != null) {out.println("第 " + i + " 题错误！正确答案为：" + pan_duan[i - 16] + "<br>");} else {out.println("第 " + i + " 题未解答！<br>");}}%>
</body>
</html>

效果预览

【前端】JS批量生成调查问卷选项相关推荐

风尚云网前端-js随机生成自定义位随机字符
风尚云网前端-js随机生成自定义位随机字符废话不多说: 上代码 // 随机生成随机数randomPassword(size) {var seed = new Array("A" ...
Vue.js学习笔记—调查问卷WebApp
参考<Vue,js>实战(梁灏编著) 基础篇的章节内容涵盖了Vue.js 2.x最常用的功能.如果不需要前端路由和自动化工程,已经可以利用这些内容做一些中小型项目了.在进入进阶篇之前,通过 ...
python依托Excel批量实现调查问卷数据的图表可视化
在学习工作中,会经常遇见需要制作很多图表,虽然Word里面也提供的有图表插入,问卷星的自带图表有点不喜欢,想自己做,但是手动处理几十个甚至几百个量化数据就很麻烦,所以尝试用python处理了这个问题. ...
Dynamics 365 CRM (online) 使用WebApi调用全局action（Plugin)执行批量更新操作，前端JS批量上传记录到CRM中
创建一个action process,如下图,分别有两个inputparameter 和一个outputparameter 2.使用visual studio 2019编写一个plugin dll, ...
前端工具批量生成NFT图片头像并下载
如图根据背景/身体/头等模块图层批量合并生成图片并下载: 演示效果Demo MFK-NFT生成工具主要代码部分一键生成下载 // 图片上传成功回调handleAvatarSucces ...
浏览器前端JS批量下载文件
代码 $('body').on('click', "#Download",function(){//点击下载按钮let triggerDelay = 100;let removeD ...
调查问卷生成json字符串
大家可能见到一些问卷调查网站,可以拖拽生成自己想要的调查问卷.本人自己完成一个基于按钮的生成调查问卷的功能(可以得到问卷中题目组成的json字符串),现在只有文本框.单选.段落描述三种类型.附下功大家 ...
Axure教程：用中继器制作调查问卷/考试试卷
今天教大家用中继器制作调查问卷或考试试卷,包括了单选.多选和填空题. 制作完成后,以后使用方便,仅需简单填写中继器的内容,即可自动生成调查问卷或考试问卷,所以强烈推荐给各位使用. 原型预览及下载地址: ...
前端js html转换成pdf可下载打印；前端js可批量生成条形码；前端js可批量生成二维码，生成letter标签
注意:本文调试的是letter纸尺寸前端js html转换成pdf可下载打印 html2canvas + jspdf 前端js生成条形码 Options · lindell/JsBarcode ...

【前端】JS批量生成调查问卷选项

目录

要求