<!DOCTYPE html>
<html>
<head>
<title>HW 5 問卷設計</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#content{
width: 1000px;
height: 100vh;
margin: 0 auto;
}
.none{
display: none !important;
}
.block{
display: block !important;
}
.head,.question{
border-bottom: 1px black solid;
}
.head div{
width: 98%;
height: 44px;
margin: 9px;
position: relative;
}
.question-content{
width: 960px;
margin: 9px;
font-size: 15px;
padding:0 10px;
}
.question-content div{
line-height: 42px;
}
.question-content div span{
width: 90px;
height: 40px;
font-weight: 700;
display: inline-block;
}
.question-titiles{
display: flex;
}
.question-content div input[type="text"],textarea{
width: 720px;
height: 22px;
margin-left: 4px;
}
.question-content textarea{
display: none;
height: 62px;
/*顶部对齐*/
vertical-align: top;
}
select{
width: 200px;
height: 28px;
display: inline-block;
}
.question-need div{
display: inline-block;
}
.question-add {
float: right;
line-height: 1;
width: 95px;
height: 39px;
text-align: center;
white-space: nowrap;
cursor: pointer;
background-color: #409eff;
border-color: #409eff;
border: 1px solid #dcdfe6;
font-size: 14px;
border-radius: 4px;
color: #fff;
}
.fillin-content{
width: 980px;
margin: 9px;
font-size: 15px;
background-color: #eeeeee;
}
.submit{
display: inline-block;
margin-right: 20px;
float: right;
line-height: 1;
white-space: nowrap;
cursor: pointer;
background-color: #409eff;
border-color: #409eff;
border: 1px solid #dcdfe6;
padding: 12px 20px;
font-size: 14px;
border-radius: 4px;
color: #fff;
}
#question-size{
display: none;
}
#question-size input[type=number]{
margin-left:94px;
width: 200px;
height: 28px;
display: inline-block;
}
/*单选*/
#question-radio div{
display: inline-block;
vertical-align: top;
}
#question-radio div input[type=text]{
width: 694px;
}
.radio-add .radio-add-span{
width: 700px;
line-height: 28px;
height: 28px;
font-size: 14px;
font-weight: 100;
background-color: white;
margin-left: 4px !important;
border: 1px black solid;
color: #757575;
}
/*多选*/
#question-checkbox, #question-radio{
display: none;
}
#question-checkbox div{
display: inline-block;
vertical-align: top;
}
#question-checkbox div input[type=text]{
width: 694px;
}
.checkbox-add .checkbox-add-span{
width: 700px;
line-height: 28px;
height: 28px;
font-size: 14px;
font-weight: 100;
background-color: white;
margin-left: 4px !important;
border: 1px black solid;
color: #757575;
}
.group {
position: relative;
width: 980px;
height: auto;
box-sizing: border-box;
margin-bottom: 2px;
background-color: white;
padding: 5px;
border-radius: 2px;
}
.group:hover{
box-shadow: 0 0 10px rgba(140, 140, 140, 0.7);
}
.group:hover .group-hidden{
visibility: visible;
}
.group-hidden{
position: absolute;
top: 0px;
right:5px;
visibility: hidden;
}
.group .group-fuhao{
color: red;
margin-left: 5px;
}
.group input{
height: 26px;
}
.group input[type=text],input[type=password]{
width: 826px;
margin-left: 29px;
}
.group input[type=text],input[type=number]{
margin-left: 29px;
}
.group-radioddiv input[type=radio] {
margin-left: 29px;
}
.group-checkboxddiv input[type=checkbox] {
margin-left: 29px;
}
.group textarea{
width: 826px;
height: 60px;
margin-left: 29px;
}
#group-commit input{
width: 103px;
height: 26px;
font-size: 15px;
float: right;
line-height: 26px;
margin-right: 21px;
border-radius: 1px;
border: 1px black solid;
background-color: #f6f6f6;
}
.fillin-content div:first-child .moveup{
display: none !important;
}
.fillin-content div:last-child .down{
display: none !important;
}
</style>
</head>
<body>
<!--作業程式碼 開始-->
<div id="content">
<div class="head">
<h2>問卷管理-問卷設計</h2>
</div>
<div class="question">
<div class="question-content">
<div class="question-lei">
<span>問題類型 </span>
<select class="question-select">
<option value="text">文字框(Text)</option>
<option value="password">密碼框(Password)</option>
<option value="number">數字框(Number)</option>
<option value="textarea">文字方塊(Textarea)</option>
<option value="radio">單選題(Radio)</option>
<option value="checkbox">多選題(Checkbox)</option>
</select>
</div>
<div class="question-titiles" >
<span>題目</span>
<input type="text" class="question-titile" placeholder="请输入题目名称">
<textarea id="question-textarea" name="question-textarea" placeholder="请输入题目名称"></textarea>
</div>
<div id="question-size">
<span>最大值</span>
<input type="checkbox" class="size-max" value="size-max"><label for="size-max">设定为最大值</label><br/>
<input type="number" class="num-max" placeholder="最大数字"><br/>
<span>最小值</span>
<input type="checkbox" class="size-min" value="size-min"><label for="size-min">设定为最小值</label><br/>
<input type="number" placeholder="最小数字" class="num-min">
</div>
<div id="question-radio">
<span>选项</span>
<div>
<input type="radio"><input type="text" class="radio-name" placeholder="请输入选项名称"><br/>
<div class="radio-add"><input type="radio" ><span class="radio-add-span"> 点击新增选项</span> </div>
</div>
</div>
<div id="question-checkbox">
<span>选项</span>
<div>
<input type="checkbox"><input type="text" class="checkbox-name" placeholder="请输入选项名称"><br/>
<div class="checkbox-add"><input type="checkbox"><span class="checkbox-add-span" >点击新增选项</span></div>
</div>
</div>
<div class="question-need">
<div class="">
<input type="checkbox" id="ting" value="ting"><label for="ting">此題目為必填</label>
</div>
<div class="question-add">
新增問題
</div>
</div>
</div>
</div>
<form name="formname">
<div class="fillin-content"></div>
<input class="submit none" type="submit" value="完成問卷">
</form>
</div>
<script >
const select = document.querySelector('.question-select');
const options = document.querySelectorAll('option');
const questionSize = document.querySelector('#question-size');
const questionTitile = document.querySelector('.question-titile');
const questionTextarea = document.querySelector('#question-textarea');
const questionRadio = document.querySelector('#question-radio');
const radioAdd = document.querySelector('.radio-add');
const questionCheckbox = document.querySelector('#question-checkbox');
const checkboxAdd = document.querySelector('.checkbox-add');
const sizeMax = document.querySelector('.size-max');
const numeMax = document.querySelector('.num-max');
const sizeMin = document.querySelector('.size-min');
const numeMin = document.querySelector('.num-min');
const fillinContent = document.querySelector('.fillin-content');
const questionAdd = document.querySelector('.question-add');
//下拉框切换
select.onchange = function () {
questionSize.setAttribute('class', 'none');
questionRadio.setAttribute('class', 'none');
questionCheckbox.setAttribute('class', 'none');
questionTextarea.setAttribute('class', 'none');
questionTitile.classList.remove('none');
if (select.value === 'number') {
questionSize.setAttribute('class', 'block');
} else if (select.value === 'textarea') {
questionTitile.classList.add('none');
questionTextarea.setAttribute('class', 'block');
} else if (select.value === 'radio') {
questionRadio.setAttribute('class', 'block');
} else if (select.value === 'checkbox') {
questionCheckbox.setAttribute('class', 'block');
}
}
//单选新增
radioAdd.onclick = function () {
var divRadio = document.createElement("div");
var inputRadio = document.createElement("input");
inputRadio.type = 'radio';
var inputText = document.createElement("input");
inputText.className = 'radio-name';
inputText.type = 'text';
inputText.placeholder = "请输入选项名称";
var inputbr = document.createElement("br");
radioAdd.parentNode.insertBefore(inputRadio, radioAdd);
radioAdd.parentNode.insertBefore(inputText, radioAdd);
radioAdd.parentNode.insertBefore(inputbr, radioAdd);
}
//多选新增
checkboxAdd.onclick = function () {
var inputCheckbox = document.createElement("input");
inputCheckbox.type = 'checkbox';
var inputTextCheckbox = document.createElement("input");
inputTextCheckbox.className = 'checkbox-name';
inputTextCheckbox.type = "text";
console.log(checkboxAdd.parentNode)
inputTextCheckbox.placeholder = "请输入选项名称";
var inputbrCheckbox = document.createElement("br");
checkboxAdd.parentNode.insertBefore(inputCheckbox, checkboxAdd);
checkboxAdd.parentNode.insertBefore(inputTextCheckbox, checkboxAdd);
checkboxAdd.parentNode.insertBefore(inputbrCheckbox, checkboxAdd);
}
//上移 下移 删除创建
function createHiddenSpan (text, className, callback) {
const span = document.createElement('span');
span.className = 'hidden ' + className;
span.innerText = text;
span.addEventListener('click', callback);
return span;
}
//判断题目名称是否填写
function getText () {
if ((select.value === 'number' || select.value === 'password' || select.value === 'text') && questionTitile.value === '') {
alert('请输入题目名称');
return false;
} else if (select.value === 'textarea' && questionTextarea.value === '') {
alert('请输入题目名称');
return;
} else if (select.value === 'textarea' && questionTextarea.value === '') {
alert('请输入题目名称');
return;
} else if (select.value === 'radio' && questionTitile.value === '') {
alert('请输入题目/选项名称');
return;
} else {
return true;
}
}
//新增问题点击事件
questionAdd.onclick = function () {
if (getText() === true) {
//创建新增的div标签
var newdiv = document.createElement('div');
newdiv.className = 'group';
const titileSpan = document.createElement('span');
titileSpan.innerText = '*';
titileSpan.className = 'group-fuhao';
var titileText = document.querySelector('.question-titile').value;
const newBr = document.createElement('br');
const hiddenDiv = document.createElement('div');
hiddenDiv.className = 'group-hidden';
//上移功能
hiddenDiv.append(createHiddenSpan('▴上移', 'moveup', function () {
var groups = this.parentNode.parentNode;
if (groups.previousSibling) {
fillinContent.insertBefore(groups, groups.previousSibling);
}
}));
//下移功能
hiddenDiv.append(createHiddenSpan('▾下移', 'down', function () {
var groups = this.parentNode.parentNode;
fillinContent.insertBefore(groups, groups.nextSibling.nextSibling);
}));
//每个携带一个删除功能
hiddenDiv.append(createHiddenSpan('x删除', 'delete', function () {
var groups = this.parentNode.parentNode;
groups.remove();
}));
newdiv.append(titileText);
var xuanhzong = document.getElementById('ting');
var inputContrnt = document.createElement("input");
inputContrnt.type = select.value;
//选中添加一个参数
if (xuanhzong.checked === true) {
newdiv.append(titileSpan);
inputContrnt.required = true;
}
newdiv.append(newBr);
newdiv.append(hiddenDiv);
//根据不同的select类型显示不同的内容
if (select.value === 'number') {
if (sizeMax.checked === true) {
inputContrnt.max = numeMax.value;
}
if (sizeMin.checked === true) {
inputContrnt.min = numeMin.value;
}
newdiv.append(inputContrnt);
fillinContent.append(newdiv);
} else if (select.value === 'textarea') {
var textareaContrnt = document.createElement("textarea");
titileText = questionTextarea.value;
newdiv.append(titileText);
if (xuanhzong.checked === true) {
newdiv.append(titileSpan);
textareaContrnt.required = true;
}
newdiv.append(newBr);
newdiv.append(textareaContrnt);
fillinContent.append(newdiv);
} else if (select.value === 'radio') {
const radioName = document.querySelectorAll('.radio-name');
const radioddiv = document.createElement('div');
radioddiv.className = 'group-radioddiv';
var questionTitileName = questionTitile.name;
radioName.forEach((item, index) => {
questionTitileName = questionTitileName + index;
const radiodlabel = document.createElement('label');
radiodlabel.append(item.value);
var inputCentt = document.createElement("input");
inputCentt.type = 'radio';
inputCentt.id = questionTitileName + 'radio' + index;
inputCentt.name = questionTitile.value;
radiodlabel.htmlFor = inputCentt.id;
if (xuanhzong.checked === true) {
inputCentt.required = true;
}
radioddiv.append(inputCentt);
radioddiv.append(radiodlabel);
questionTitile.name = questionTitile.name + index;
})
newdiv.append(radioddiv);
fillinContent.append(newdiv);
} else if (select.value === 'checkbox') {
var checkboxName = document.querySelectorAll('.checkbox-name');
const checkboxddiv = document.createElement('div');
checkboxddiv.className = 'group-checkboxddiv';
var questionTitileName = questionTitile.name;
checkboxName.forEach((item, index) => {
const checkboxdlabel = document.createElement('label');
checkboxdlabel.append(item.value);
var inputCentt = document.createElement("input");
inputCentt.type = 'checkbox';
inputCentt.id = questionTitileName + index;
checkboxdlabel.htmlFor = inputCentt.id;
checkboxddiv.append(inputCentt);
checkboxddiv.append(checkboxdlabel);
questionTitile.name = questionTitile.name + index;
})
newdiv.append(checkboxddiv);
fillinContent.append(newdiv);
} else {
newdiv.append(inputContrnt);
fillinContent.append(newdiv);
}
}
const submits = document.querySelector('.submit');
const groups = document.querySelectorAll('.group');
if (groups.length > 0) {
submits.classList.add('block');
}
}
</script>
<!--作業程式碼 結束-->
</body>
</html>
hw5vhw5hw5hw5
于 2023-04-26 09:57:01 首次发布