ddmt/question
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ver1

Browse Source
This commit is contained in:
ddmt
2025-01-04 23:13:11 +08:00
parent dbab520f56
commit fffb706427
21 changed files with 2476 additions and 2490 deletions
Download Patch File Download Diff File Expand all files Collapse all files

583
view/createQuestion.html
View File

@@ -4,208 +4,8 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>创建问卷</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #C3C3C3;
}
header {
background-color: #CF9A30;
color: #EEE8E4;
text-align: start;
padding: 20px;
display: flex;
}
main {
padding: 30px 0;
display: flex;
align-items: center;
justify-content: center;
}
.box {
width: 90%;
padding: 14px;
background-color: #EBEBEB;
box-shadow: 1px 2px 2px rgba(0,0,0,0.4);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
a{
text-decoration: none;
}
.quesen{
width: 32px;
height: 32px;
font-size: 28px;
font-weight: bold;
text-align: center;
line-height: 24px;
color: #CF9A30;
border-radius: 50px;
padding-top: 5px;
background-color: #EBEBEB;
position: absolute;
font-style: normal;
top: 14px;
left: 60px;
}
.title{
margin-left: 80px;
font-size: 24px;
line-height: 20px;
font-weight: bold;
margin-right: 60px;
}
.nav-bar{
a{
line-height: 20px;
font-size: 20px;
color: #EEE8E4;
border: 2px solid #c78501;
padding: 2px;
}
}
.question-title{
width: 100%;
height: 68px;
text-align: center;
font-size: 24px;
font-weight: bold;
color: #000;
background: #CEEACA;
box-shadow: 1px 2px 2px rgba(0,0,0,0.4);
border-radius: 2px;
}
.question-title:hover{
background: #FCFF00;
}
.but{
width: 99%;
height: 40px;
background-color: #D3D3D3;
margin-bottom: 25px;
text-align: center;
line-height: 40px;
font-size: 20px;
font-weight: bold;
color: #000000;
padding: 10px 0 50px 0;
transition: margin-top 0.3s;
cursor: pointer;
}
hr{
width: 100%;
}
.ctrl-bar{
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin: 20px 0;
}
.endtime{
margin-left: 20%;
span{
margin-right: 16px;
}
}
.pushbut{
margin-right: 20%;
button{
margin-right: 10px;
}
}
.quetype{
margin-top: 20px;
padding: 20px 20%;
width: 99%;
border: 1px solid #b3b3b3;
display: flex;
justify-content: space-between;
button {
font-size: 16px;
line-height: 16px;
padding: 1px 25px;
};
}
.question-item {
width: 99%;
margin: 20px 0;
padding: 20px;
background: #fff;
border: 1px solid #ddd;
box-shadow: 1px 2px 2px rgba(0,0,0,0.1);
position: relative;
}
.question-header {
display: block;
margin-bottom: 15px;
}
.question-content input[type="text"] {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ddd;
}
.option-item {
display: flex;
align-items: center;
margin: 10px 0;
}
.option-item input[type="text"] {
margin-left: 10px;
width: 80%;
}
.delete-btn {
padding: 2px 8px;
background: #ff4d4f;
color: white;
border: none;
cursor: pointer;
}
.ctrl-btns {
display: none;
position: absolute;
bottom: 10px;
right: 10px;
gap: 10px;
background: rgba(255, 255, 255, 0.9);
padding: 5px;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.ctrl-btns button {
padding: 2px 8px;
cursor: pointer;
}
.quelist{
width: 100%;
}
.question-item:hover .ctrl-btns {
display: flex;
}
.question-content {
margin-bottom: 40px;
}
</style>
<link rel="stylesheet" href="../css/createQuestion.css">
<script src="../js/createQuestion.js"></script>
</head>
<body>
<header>
@@ -220,9 +20,9 @@
<input class="question-title" type="text" value="请在这里输入问卷的标题">
<div class="quelist"></div>
<div class="quetype" style="display: none;">
<button><img style="width: 16px; height: 16px;" src="/img/radio.svg" alt="">单选题</button>
<button><img style="width: 16px; height: 16px;" src="/img/checkbox.svg" alt="">多选题</button>
<button><img style="width: 16px; height: 16px;" src="/img/text.svg" alt="">文本题</button>
<button><img style="width: 16px; height: 16px;" src="../img/radio.svg" alt="">单选题</button>
<button><img style="width: 16px; height: 16px;" src="../img/checkbox.svg" alt="">多选题</button>
<button><img style="width: 16px; height: 16px;" src="../img/text.svg" alt="">文本题</button>
</div>
<a href="javascript:void(0)" class="but" onclick="toggleQueType()">+ 添加问题</a>
<hr>
@@ -238,378 +38,5 @@
</div>
</div>
</main>
<script>
let questionCount = 0;
function toggleQueType() {
const queType = document.querySelector('.quetype');
const addButton = document.querySelector('.but');
if (queType.style.display === 'none') {
queType.style.display = 'flex';
addButton.style.marginTop = '0';
}
// else {
// queType.style.display = 'none';
// addButton.style.marginTop = '20px';
// }
}
// 添加单选题
function addRadioQuestion() {
questionCount++;
const questionHtml = `
<div class="question-item" id="question-${questionCount}">
<div class="question-header">
<div class="question-title-area">
<span>${questionCount}. </span>
<input type="text" placeholder="请输入问题">
<button onclick="addOption(${questionCount})">添加选项</button>
<label style="margin-left: 20px;">
<input type="checkbox" class="required-checkbox"> 此题为必答题
</label>
</div>
</div>
<div class="question-content" id="options-${questionCount}">
<div class="option-item">
<input type="radio" name="question${questionCount}" disabled>
<input type="text" placeholder="选项内容">
<button class="delete-btn" onclick="deleteOption(this)">删除</button>
</div>
<div class="option-item">
<input type="radio" name="question${questionCount}" disabled>
<input type="text" placeholder="选项内容">
<button class="delete-btn" onclick="deleteOption(this)">删除</button>
</div>
<div class="option-item">
<input type="radio" name="question${questionCount}" disabled>
<input type="text" placeholder="选项内容">
<button class="delete-btn" onclick="deleteOption(this)">删除</button>
</div>
<div class="option-item">
<input type="radio" name="question${questionCount}" disabled>
<input type="text" placeholder="选项内容">
<button class="delete-btn" onclick="deleteOption(this)">删除</button>
</div>
</div>
<div class="ctrl-btns">
<button onclick="moveUp(${questionCount})">上移</button>
<button onclick="moveDown(${questionCount})">下移</button>
<button onclick="copyQuestion(${questionCount})">复用</button>
<button class="delete-btn" onclick="deleteQuestion(${questionCount})">删除</button>
</div>
</div>
`;
document.querySelector('.quelist').insertAdjacentHTML('beforeend', questionHtml);
toggleQueType();
}
// 添加选项
function addOption(questionId) {
const optionHtml = `
<div class="option-item">
<input type="radio" disabled>
<input type="text" placeholder="选项内容">
<button class="delete-btn" onclick="deleteOption(this)">删除</button>
</div>
`;
document.querySelector(`#options-${questionId}`).insertAdjacentHTML('beforeend', optionHtml);
}
// 删除选项
function deleteOption(btn) {
btn.parentElement.remove();
}
// 删除问题
function deleteQuestion(questionId) {
document.querySelector(`#question-${questionId}`).remove();
}
// 复用问题
function copyQuestion(questionId) {
const original = document.querySelector(`#question-${questionId}`);
const clone = original.cloneNode(true);
questionCount++;
clone.id = `question-${questionCount}`;
original.after(clone);
}
// 上移问题
function moveUp(questionId) {
const question = document.querySelector(`#question-${questionId}`);
const prev = question.previousElementSibling;
if (prev) {
prev.before(question);
}
}
// 下移问题
function moveDown(questionId) {
const question = document.querySelector(`#question-${questionId}`);
const next = question.nextElementSibling;
if (next) {
next.after(question);
}
}
// 添加多选题
function addCheckboxQuestion() {
questionCount++;
const questionHtml = `
<div class="question-item" id="question-${questionCount}">
<div class="question-header">
<div class="question-title-area">
<span>${questionCount}. </span>
<input type="text" placeholder="请输入问题">
<button onclick="addCheckboxOption(${questionCount})">添加选项</button>
<label style="margin-left: 20px;">
<input type="checkbox" class="required-checkbox"> 此题为必答题
</label>
</div>
</div>
<div class="question-content" id="options-${questionCount}">
<div class="option-item">
<input type="checkbox" name="question${questionCount}" disabled>
<input type="text" placeholder="选项内容">
<button class="delete-btn" onclick="deleteOption(this)">删除</button>
</div>
<div class="option-item">
<input type="checkbox" name="question${questionCount}" disabled>
<input type="text" placeholder="选项内容">
<button class="delete-btn" onclick="deleteOption(this)">删除</button>
</div>
<div class="option-item">
<input type="checkbox" name="question${questionCount}" disabled>
<input type="text" placeholder="选项内容">
<button class="delete-btn" onclick="deleteOption(this)">删除</button>
</div>
<div class="option-item">
<input type="checkbox" name="question${questionCount}" disabled>
<input type="text" placeholder="选项内容">
<button class="delete-btn" onclick="deleteOption(this)">删除</button>
</div>
</div>
<div class="ctrl-btns">
<button onclick="moveUp(${questionCount})">上移</button>
<button onclick="moveDown(${questionCount})">下移</button>
<button onclick="copyQuestion(${questionCount})">复用</button>
<button class="delete-btn" onclick="deleteQuestion(${questionCount})">删除</button>
</div>
</div>
`;
document.querySelector('.quelist').insertAdjacentHTML('beforeend', questionHtml);
toggleQueType();
}
// 添加多选题选项
function addCheckboxOption(questionId) {
const optionHtml = `
<div class="option-item">
<input type="checkbox" disabled>
<input type="text" placeholder="选项内容">
<button class="delete-btn" onclick="deleteOption(this)">删除</button>
</div>
`;
document.querySelector(`#options-${questionId}`).insertAdjacentHTML('beforeend', optionHtml);
}
// 添加文本题
function addTextQuestion() {
questionCount++;
const questionHtml = `
<div class="question-item" id="question-${questionCount}">
<div class="question-header">
<div class="question-title-area">
<span>${questionCount}. </span>
<input type="text" placeholder="请输入问题">
<label style="margin-left: 20px;">
<input type="checkbox" class="required-checkbox"> 此题为必答题
</label>
</div>
</div>
<div class="question-content" id="options-${questionCount}">
<textarea disabled placeholder="此处供填写者输入文本答案"
style="width: 100%; min-height: 100px; padding: 8px; margin-top: 10px; resize: vertical;"></textarea>
</div>
<div class="ctrl-btns">
<button onclick="moveUp(${questionCount})">上移</button>
<button onclick="moveDown(${questionCount})">下移</button>
<button onclick="copyQuestion(${questionCount})">复用</button>
<button class="delete-btn" onclick="deleteQuestion(${questionCount})">删除</button>
</div>
</div>
`;
document.querySelector('.quelist').insertAdjacentHTML('beforeend', questionHtml);
toggleQueType();
}
// 获取问卷数据
function getQuestionnaireData(isPublished = false) {
const now = new Date().getTime();
const questionnaire = {
title: document.querySelector('.question-title').value,
createTime: now,
endTime: document.querySelector('#endtime').value,
publishTime: isPublished ? now : null,
status: isPublished ? '已发布' : '未发布',
questions: []
};
const questionItems = document.querySelectorAll('.question-item');
questionItems.forEach((item, index) => {
let questionType;
if (item.querySelector('.question-content textarea')) {
questionType = 'text';
} else if (item.querySelector('input[type="radio"]')) {
questionType = 'radio';
} else {
questionType = 'checkbox';
}
const question = {
id: index + 1,
type: questionType,
title: item.querySelector('.question-title-area input[type="text"]').value,
required: item.querySelector('.required-checkbox').checked,
options: []
};
if (questionType === 'radio' || questionType === 'checkbox') {
const options = item.querySelectorAll('.option-item input[type="text"]');
options.forEach((option, optionIndex) => {
question.options.push({
id: optionIndex + 1,
content: option.value
});
});
}
questionnaire.questions.push(question);
});
return questionnaire;
}
// 保存问卷到 localStorage
function saveQuestionnaire() {
// 验证问卷
if (!validateQuestionnaire()) {
return;
}
const questionnaire = getQuestionnaireData(false);
const questionnaireId = `questionnaire_${questionnaire.createTime}`;
// 获取已有的问卷列表
let questionnaireList = JSON.parse(localStorage.getItem('questionnaireList') || '[]');
// 添加新问卷
questionnaireList.push({
id: questionnaireId,
title: questionnaire.title,
createTime: questionnaire.createTime,
publishTime: questionnaire.publishTime,
status: questionnaire.status,
data: questionnaire
});
// 保存更新后的问卷列表
localStorage.setItem('questionnaireList', JSON.stringify(questionnaireList));
alert('问卷保存成功！');
window.location.href = 'myQuestion.html'; // 添加返回功能
}
// 发布问卷
function publishQuestionnaire() {
// 验证问卷
if (!validateQuestionnaire()) {
return;
}
const questionnaire = getQuestionnaireData(true);
const questionnaireId = `questionnaire_${questionnaire.createTime}`;
// 获取已有的问卷列表
let questionnaireList = JSON.parse(localStorage.getItem('questionnaireList') || '[]');
// 添加新问卷
questionnaireList.push({
id: questionnaireId,
title: questionnaire.title,
createTime: questionnaire.createTime,
publishTime: questionnaire.publishTime,
status: questionnaire.status,
data: questionnaire
});
// 保存更新后的问卷列表
localStorage.setItem('questionnaireList', JSON.stringify(questionnaireList));
alert('问卷发布成功！');
window.location.href = 'myQuestion.html'; // 添加返回功能
}
// 添加问卷验证函数
function validateQuestionnaire() {
const title = document.querySelector('.question-title').value.trim();
if (!title) {
alert('请输入问卷标题！');
return false;
}
const endTime = document.querySelector('#endtime').value;
if (!endTime) {
alert('请设置问卷截止日期！');
return false;
}
const questions = document.querySelectorAll('.question-item');
if (questions.length === 0) {
alert('请至少添加一个问题！');
return false;
}
for (let question of questions) {
const questionTitle = question.querySelector('.question-title-area input[type="text"]').value.trim();
if (!questionTitle) {
alert('请填写所有问题的标题！');
return false;
}
const questionType = question.querySelector('input[type="radio"]') ? 'radio' :
question.querySelector('input[type="checkbox"]') ? 'checkbox' : 'text';
if (questionType !== 'text') {
const options = question.querySelectorAll('.option-item input[type="text"]');
for (let option of options) {
if (!option.value.trim()) {
alert('请填写所有选项的内容！');
return false;
}
}
}
}
return true;
}
// 初始化页面
window.onload = function() {
document.querySelector('.but').style.marginTop = '20px';
// 为题型按钮添加点击事件
const buttons = document.querySelectorAll('.quetype button');
buttons[0].onclick = addRadioQuestion;
buttons[1].onclick = addCheckboxQuestion;
buttons[2].onclick = addTextQuestion;
// 为保存和发布按钮添加点击事件
const pushbutButtons = document.querySelectorAll('.pushbut button');
pushbutButtons[0].onclick = saveQuestionnaire; // 保存按钮
pushbutButtons[1].onclick = publishQuestionnaire; // 发布按钮
}
</script>
</body>
</html>