用html+JS代码写一个添加问题页面,页面分为左右两个盒子,在页面左侧盒子可以选择题型,能够实现添加单选题,多选题和问答题功能。页面右侧盒子有标题输入框、问卷说明输入框以及一个空白区域,使用左侧添加题型功
时间: 2023-08-31 20:31:27 浏览: 52
### 回答1：
能够动态向右侧空白区域添加问题。
HTML代码：
```html
<!DOCTYPE html>
<html>
<head>
<title>添加问题页面</title>
<meta charset="utf-8">
<style type="text/css">
.container {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 100%;
padding: 20px;
}
.left-box {
flex: 1;
display: flex;
flex-direction: column;
padding: 20px;
background-color: #f0f0f0;
}
.right-box {
flex: 3;
display: flex;
flex-direction: column;
padding: 20px;
background-color: #fff;
}
.question-type {
margin: 10px 0;
}
.question-type label {
margin-right: 10px;
}
.question {
margin: 10px 0;
}
.question input {
margin-right: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="left-box">
<div class="question-type">
<label><input type="radio" name="question-type" value="single-choice">单选题</label>
<label><input type="radio" name="question-type" value="multi-choice">多选题</label>
<label><input type="radio" name="question-type" value="short-answer">问答题</label>
</div>
<div class="question">
<button onclick="addQuestion()">添加问题</button>
</div>
</div>
<div class="right-box">
<div class="title">
<label for="title">标题：</label>
<input type="text" id="title">
</div>
<div class="description">
<label for="description">问卷说明：</label>
<textarea id="description"></textarea>
</div>
<div class="questions">
</div>
</div>
</div>
<script type="text/javascript">
function addQuestion() {
var questionType = document.querySelector('input[name="question-type"]:checked').value;
var questionBox = document.createElement('div');
questionBox.classList.add('question-box');
var questionTitle = document.createElement('div');
questionTitle.classList.add('question-title');
if (questionType === 'single-choice') {
questionTitle.innerText = '单选题';
} else if (questionType === 'multi-choice') {
questionTitle.innerText = '多选题';
} else if (questionType === 'short-answer') {
questionTitle.innerText = '问答题';
}
questionBox.appendChild(questionTitle);
var questionContent = document.createElement('div');
questionContent.classList.add('question-content');
var questionInput = document.createElement('input');
questionInput.type = 'text';
questionInput.classList.add('question-input');
questionContent.appendChild(questionInput);
if (questionType === 'single-choice' || questionType === 'multi-choice') {
var optionBox = document.createElement('div');
optionBox.classList.add('option-box');
var optionInput = document.createElement('input');
optionInput.classList.add('option-input');
optionInput.type = 'text';
optionBox.appendChild(optionInput);
var addOptionBtn = document.createElement('button');
addOptionBtn.innerText = '+';
addOptionBtn.onclick = function() {
var optionInput = document.createElement('input');
optionInput.classList.add('option-input');
optionInput.type = 'text';
optionBox.insertBefore(optionInput, addOptionBtn);
};
optionBox.appendChild(addOptionBtn);
questionContent.appendChild(optionBox);
}
questionBox.appendChild(questionContent);
var questionsBox = document.querySelector('.questions');
questionsBox.appendChild(questionBox);
}
</script>
</body>
</html>
```
JS代码实现了添加问题和添加选项的功能，可以根据实际需求进行修改。在页面左侧选择题型后，点击“添加问题”按钮即可添加问题。问题和选项的输入框均为文本框，可以根据实际需求进行修改。
### 回答2：
可以使用HTML和JavaScript编写一个添加问题页面，页面分为左右两个盒子。在页面左侧盒子可以选择题型，并能够实现添加单选题、多选题和问答题功能。页面右侧盒子有标题输入框、问卷说明输入框以及一个空白区域，使用左侧添加题型功能。
首先，我们可以使用HTML创建页面的基本结构，包括两个盒子、标题输入框、问卷说明输入框以及空白区域。
```html
<!DOCTYPE html>
<html>
<head>
<title>添加问题页面</title>
<script src="script.js"></script>
</head>
<body>
<div class="left-box">
<h3>选择题型：</h3>
<button onclick="addSingleChoice()">添加单选题</button>
<button onclick="addMultipleChoice()">添加多选题</button>
<button onclick="addEssay()">添加问答题</button>
</div>
<div class="right-box">
<h3>标题：</h3>
<input type="text" id="title" />
<h3>问卷说明：</h3>
<textarea id="description"></textarea>
<h3>问题：</h3>
<div id="questions"></div>
</div>
</body>
</html>
```
接下来，我们使用JavaScript编写相应的函数，实现添加单选题、多选题和问答题的功能。
```javascript
function addSingleChoice() {
var questionsContainer = document.getElementById("questions");
var question = document.createElement("div");
question.innerHTML = "单选题：<input type='text' /><button>删除</button>";
questionsContainer.appendChild(question);
}
function addMultipleChoice() {
var questionsContainer = document.getElementById("questions");
var question = document.createElement("div");
question.innerHTML = "多选题：<input type='text' /><button>删除</button>";
questionsContainer.appendChild(question);
}
function addEssay() {
var questionsContainer = document.getElementById("questions");
var question = document.createElement("div");
question.innerHTML = "问答题：<input type='text' /><button>删除</button>";
questionsContainer.appendChild(question);
}
```
在这段代码中，我们分别实现了添加单选题、多选题和问答题的功能。每次调用这些函数时，都会在右侧盒子的问题区域中添加一个新的题目输入框，并且包含一个删除按钮。
这样，通过选择题型并点击对应按钮，就可以在右侧盒子中添加相应类型的题目。页面左侧的盒子提供了选择题型的功能。对于每个题目，可以输入相应的问题文本，并且可以通过删除按钮来删除题目。
这样就实现了一个添加问题的页面，用户可以方便地添加单选题、多选题和问答题，并进行相关的编辑操作。
### 回答3：
一、HTML部分：
```html
<!DOCTYPE html>
<html>
<head>
<title>添加问题页面</title>
<script src="script.js"></script> <!-- 引入JS文件 -->
<style>
/* CSS样式可以自定义，根据UI设计来设置 */
.container {
display: flex;
justify-content: space-between;
}
.leftBox, .rightBox {
width: 45%;
margin: 30px;
padding: 20px;
border: 1px solid #ccc;
box-sizing: border-box;
}
textarea {
width: 100%;
height: 100px;
margin-bottom: 10px;
}
.blankArea {
width: 100%;
height: 200px;
border: 1px solid #ccc;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="container">
<div class="leftBox">
<h2>题型选择</h2>
<input type="radio" name="questionType" value="单选题">单选题<br>
<input type="radio" name="questionType" value="多选题">多选题<br>
<input type="radio" name="questionType" value="问答题">问答题<br>
<button onclick="addQuestion()">添加题目</button>
</div>
<div class="rightBox">
<h2>添加问题</h2>
<label for="questionTitle">标题：</label>
<input type="text" id="questionTitle"><br>
<label for="questionDesc">问卷说明：</label>
<textarea id="questionDesc"></textarea>
<div id="blankArea" class="blankArea"></div>
</div>
</div>
</body>
</html>
```
二、JS部分：
```javascript
function addQuestion() {
var questionType = document.querySelector('input[name="questionType"]:checked').value;
var questionTitle = document.getElementById('questionTitle').value;
var questionDesc = document.getElementById('questionDesc').value;
var blankArea = document.getElementById('blankArea');
if (questionType === "单选题") {
var radioQuestion = document.createElement('div');
radioQuestion.innerHTML = '<h3>单选题：' + questionTitle + '</h3>' + '<p>说明：' + questionDesc + '</p>' + '<ul><li>选项1</li><li>选项2</li><li>选项3</li></ul>';
blankArea.appendChild(radioQuestion);
} else if (questionType === "多选题") {
var checkboxQuestion = document.createElement('div');
checkboxQuestion.innerHTML = '<h3>多选题：' + questionTitle + '</h3>' + '<p>说明：' + questionDesc + '</p>' + '<ul><li>选项1</li><li>选项2</li><li>选项3</li></ul>';
blankArea.appendChild(checkboxQuestion);
} else if (questionType === "问答题") {
var textareaQuestion = document.createElement('div');
textareaQuestion.innerHTML = '<h3>问答题：' + questionTitle + '</h3>' + '<p>说明：' + questionDesc + '</p>' + '<textarea></textarea>';
blankArea.appendChild(textareaQuestion);
}
}
```
以上代码实现了一个简单的添加问题页面，左侧盒子提供了题型选择的选项，右侧盒子包含了标题输入框、问卷说明输入框以及一个空白区域。通过选择左侧盒子中的题型并点击“添加题目”按钮，可以动态地在右侧的空白区域中添加相应题型的问题，并显示题目的标题、说明和选项（或空白输入框）。
相关推荐
最新推荐
数据库系统概论题目带答案的，大家可以看看，有选择，填空，简答，综合等几种题型
数据库系统试卷，带答案的，大家可以看看，有选择，填空，简答，综合等几种题型
高二数学（经典题型）解决排列组合问题的方法技巧
高二数学（经典题型）解决排列组合问题的方法技巧，绝对超值！
使用Python的turtle库绘制心形并打印520表白文字.docx
使用Python的turtle库绘制心形并打印520表白文字.docx
zigbee-cluster-library-specification
最新的zigbee-cluster-library-specification说明文档。
管理建模和仿真的文件
管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
实现实时数据湖架构：Kafka与Hive集成
# 1. 实时数据湖架构概述**
实时数据湖是一种现代数据管理架构，它允许企业以低延迟的方式收集、存储和处理大量数据。与传统数据仓库不同，实时数据湖不依赖于预先定义的模式，而是采用灵活的架构，可以处理各种数据类型和格式。这种架构为企业提供了以下优势：
- **实时洞察：**实时数据湖允许企业访问最新的数据，从而做出更明智的决策。
- **数据民主化：**实时数据湖使各种利益相关者都可
云原生架构与soa架构区别？
云原生架构和SOA架构是两种不同的架构模式，主要有以下区别：
1. 设计理念不同：
云原生架构的设计理念是“设计为云”，注重应用程序的可移植性、可伸缩性、弹性和高可用性等特点。而SOA架构的设计理念是“面向服务”，注重实现业务逻辑的解耦和复用，提高系统的灵活性和可维护性。
2. 技术实现不同：
云原生架构的实现技术包括Docker、Kubernetes、Service Mesh等，注重容器化、自动化、微服务等技术。而SOA架构的实现技术包括Web Services、消息队列等，注重服务化、异步通信等技术。
3. 应用场景不同：
云原生架构适用于云计算环境下的应用场景，如容器化部署、微服务
JSBSim Reference Manual
JSBSim参考手册，其中包含JSBSim简介，JSBSim配置文件xml的编写语法，编程手册以及一些应用实例等。其中有部分内容还没有写完，估计有生之年很难看到完整版了，但是内容还是很有参考价值的。
"互动学习：行动中的多样性与论文攻读经历"
多样性她- 事实上SCI NCES你的时间表ECOLEDO C Tora SC和NCESPOUR l’Ingén学习互动，互动学习以行动为中心的强化学习学会互动，互动学习，以行动为中心的强化学习计算机科学博士论文于2021年9月28日在Villeneuve d'Asq公开支持马修·瑟林评审团主席法布里斯·勒菲弗尔阿维尼翁大学教授论文指导奥利维尔·皮耶昆谷歌研究教授：智囊团论文联合主任菲利普·普雷教授，大学。里尔/CRISTAL/因里亚报告员奥利维耶·西格德索邦大学报告员卢多维奇·德诺耶教授，Facebook /索邦大学审查员越南圣迈IMT Atlantic高级讲师邀请弗洛里安·斯特鲁布博士，Deepmind对于那些及时看到自己错误的人...3谢谢你首先，我要感谢我的两位博士生导师Olivier和Philippe。奥利维尔，"站在巨人的肩膀上"这句话对你来说完全有意义了。从科学上讲，你知道在这篇论文的（许多）错误中，你是我可以依
实现实时监控告警系统：Kafka与Grafana整合
# 1.1 Kafka集群架构
Kafka集群由多个称为代理的服务器组成，这