ddmt
c3494cf792
- Changed links in index.html and myQuestion.html to point to the correct pages for better navigation. - Added new styles and JavaScript functions in createQuestion.html for dynamic question management, including adding, editing, and deleting questions and options. - Implemented local storage functionality for saving and managing questionnaires, including validation and publishing features. - Improved user interface elements for better interaction and usability.
327 lines
11 KiB
HTML
327 lines
11 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<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;
|
||
}
|
||
.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;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.question-title {
|
||
width: 100%;
|
||
padding: 20px;
|
||
text-align: center;
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
background: #CEEACA;
|
||
margin-bottom: 20px;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.question-info {
|
||
width: 100%;
|
||
padding: 10px;
|
||
margin-bottom: 20px;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
background: #fff;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.question-item {
|
||
width: 100%;
|
||
margin: 10px 0;
|
||
padding: 20px;
|
||
background: #fff;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.question-item-title {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.option-item {
|
||
margin: 10px 0;
|
||
padding: 5px 0;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.option-item input[type="radio"],
|
||
.option-item input[type="checkbox"] {
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.option-item label {
|
||
cursor: pointer;
|
||
flex: 1;
|
||
}
|
||
|
||
.text-answer {
|
||
width: 100%;
|
||
min-height: 100px;
|
||
padding: 10px;
|
||
margin-top: 10px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 2px;
|
||
resize: vertical;
|
||
}
|
||
|
||
.submit-button {
|
||
margin-top: 20px;
|
||
padding: 8px 24px;
|
||
background: #CF9A30;
|
||
color: #fff;
|
||
border: none;
|
||
border-radius: 2px;
|
||
cursor: pointer;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.submit-button:hover {
|
||
background: #c78501;
|
||
}
|
||
|
||
.error-message {
|
||
color: #ff4d4f;
|
||
margin-top: 5px;
|
||
font-size: 14px;
|
||
display: none;
|
||
}
|
||
.question-list{
|
||
width: 100%;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<header>
|
||
<i class="quesen">?</i>
|
||
<div class="title">问卷管理</div>
|
||
<div class="nav-bar">
|
||
<a href="myQuestion.html">我的问卷</a>
|
||
</div>
|
||
</header>
|
||
<main>
|
||
<div class="box">
|
||
<div class="question-title"></div>
|
||
<div class="question-info" style="display: none;">
|
||
<span>截止日期：<span class="end-time"></span></span>
|
||
<span>问卷状态：<span class="status"></span></span>
|
||
</div>
|
||
<form id="questionForm" class="question-list"></form>
|
||
<button class="submit-button" onclick="submitQuestionnaire()">提交问卷</button>
|
||
</div>
|
||
</main>
|
||
|
||
<script>
|
||
let currentQuestionnaire = null;
|
||
|
||
function formatDate(timestamp) {
|
||
if (!timestamp) return '-';
|
||
const date = new Date(timestamp);
|
||
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
|
||
}
|
||
|
||
function renderQuestion(question, index) {
|
||
const questionHtml = `
|
||
<div class="question-item">
|
||
<div class="question-item-title">
|
||
${index + 1}. ${question.title}
|
||
${question.required ? '<span style="color: red; margin-left: 5px;">*</span>' : ''}
|
||
</div>
|
||
${
|
||
question.type === 'text' ?
|
||
`<div class="question-content">
|
||
<textarea class="text-answer" name="question_${question.id}"
|
||
style="width: 100%; min-height: 100px; padding: 8px; margin-top: 10px; resize: vertical;"
|
||
placeholder="请在此输入您的答案"></textarea>
|
||
</div>` :
|
||
`<div class="options">
|
||
${question.options.map(option => `
|
||
<div class="option-item">
|
||
<input type="${question.type}"
|
||
id="option_${question.id}_${option.id}"
|
||
name="question_${question.id}"
|
||
value="${option.id}">
|
||
<label for="option_${question.id}_${option.id}">${option.content}</label>
|
||
</div>
|
||
`).join('')}
|
||
</div>`
|
||
}
|
||
<div class="error-message" id="error_${question.id}">此题为必答题</div>
|
||
</div>
|
||
`;
|
||
return questionHtml;
|
||
}
|
||
|
||
function loadQuestionnaire() {
|
||
const urlParams = new URLSearchParams(window.location.search);
|
||
const questionnaireId = urlParams.get('id');
|
||
|
||
if (!questionnaireId) {
|
||
alert('问卷ID不存在！');
|
||
window.location.href = 'myQuestion.html';
|
||
return;
|
||
}
|
||
|
||
const questionnaireList = JSON.parse(localStorage.getItem('questionnaireList') || '[]');
|
||
const questionnaire = questionnaireList.find(q => q.id === questionnaireId);
|
||
|
||
if (!questionnaire) {
|
||
alert('问卷不存在！');
|
||
window.location.href = 'myQuestion.html';
|
||
return;
|
||
}
|
||
|
||
if (questionnaire.status !== '已发布') {
|
||
alert('该问卷尚未发布！');
|
||
window.location.href = 'myQuestion.html';
|
||
return;
|
||
}
|
||
|
||
currentQuestionnaire = questionnaire;
|
||
|
||
// 填充问卷信息
|
||
document.querySelector('.question-title').textContent = questionnaire.title;
|
||
document.querySelector('.end-time').textContent = formatDate(questionnaire.data.endTime);
|
||
document.querySelector('.status').textContent = questionnaire.status;
|
||
|
||
// 渲染问题列表
|
||
const questionListHtml = questionnaire.data.questions
|
||
.map((question, index) => renderQuestion(question, index))
|
||
.join('');
|
||
document.querySelector('.question-list').innerHTML = questionListHtml;
|
||
}
|
||
|
||
function validateAnswers() {
|
||
let isValid = true;
|
||
currentQuestionnaire.data.questions.forEach(question => {
|
||
if (!question.required) return; // 如果不是必答题，跳过验证
|
||
|
||
const errorElement = document.getElementById(`error_${question.id}`);
|
||
if (question.type === 'text') {
|
||
const answer = document.querySelector(`textarea[name="question_${question.id}"]`).value.trim();
|
||
if (!answer) {
|
||
errorElement.style.display = 'block';
|
||
isValid = false;
|
||
} else {
|
||
errorElement.style.display = 'none';
|
||
}
|
||
} else {
|
||
const checked = document.querySelector(`input[name="question_${question.id}"]:checked`);
|
||
if (!checked) {
|
||
errorElement.style.display = 'block';
|
||
isValid = false;
|
||
} else {
|
||
errorElement.style.display = 'none';
|
||
}
|
||
}
|
||
});
|
||
return isValid;
|
||
}
|
||
|
||
function submitQuestionnaire() {
|
||
if (!validateAnswers()) {
|
||
alert('请回答所有问题！');
|
||
return;
|
||
}
|
||
|
||
const answers = {
|
||
questionnaireId: currentQuestionnaire.id,
|
||
submitTime: new Date().getTime(),
|
||
answers: currentQuestionnaire.data.questions.map(question => {
|
||
if (question.type === 'text') {
|
||
return {
|
||
questionId: question.id,
|
||
type: question.type,
|
||
answer: document.querySelector(`textarea[name="question_${question.id}"]`).value.trim()
|
||
};
|
||
} else {
|
||
const selectedOptions = Array.from(
|
||
document.querySelectorAll(`input[name="question_${question.id}"]:checked`)
|
||
).map(input => parseInt(input.value));
|
||
return {
|
||
questionId: question.id,
|
||
type: question.type,
|
||
answer: selectedOptions
|
||
};
|
||
}
|
||
})
|
||
};
|
||
|
||
// 保存答案到 localStorage
|
||
let answersList = JSON.parse(localStorage.getItem('questionnaireAnswers') || '[]');
|
||
answersList.push(answers);
|
||
localStorage.setItem('questionnaireAnswers', JSON.stringify(answersList));
|
||
|
||
alert('问卷提交成功！');
|
||
window.location.href = 'myQuestion.html';
|
||
}
|
||
|
||
window.onload = loadQuestionnaire;
|
||
</script>
|
||
</body>
|
||
</html> |