574 lines
21 KiB
Text
574 lines
21 KiB
Text
@{
|
|
ViewData["Title"] = "Questionnaire Status Guide";
|
|
|
|
}
|
|
|
|
<style>
|
|
.status-guide-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
border-radius: 16px;
|
|
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.guide-header {
|
|
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
|
|
color: white;
|
|
padding: 2rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.guide-header h1 {
|
|
margin: 0;
|
|
font-size: 2.5rem;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.guide-header p {
|
|
margin: 0.5rem 0 0;
|
|
opacity: 0.9;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.status-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
|
gap: 0;
|
|
}
|
|
|
|
.status-card {
|
|
padding: 2rem;
|
|
border-right: 1px solid #e2e8f0;
|
|
position: relative;
|
|
}
|
|
|
|
.status-card:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
.status-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
}
|
|
|
|
.draft-card::before {
|
|
background: linear-gradient(90deg, #6b7280, #9ca3af);
|
|
}
|
|
|
|
.published-card::before {
|
|
background: linear-gradient(90deg, #10b981, #34d399);
|
|
}
|
|
|
|
.archived-card::before {
|
|
background: linear-gradient(90deg, #1f2937, #374151);
|
|
}
|
|
|
|
.status-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.status-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.5rem;
|
|
font-weight: bold;
|
|
color: white;
|
|
}
|
|
|
|
.draft-icon {
|
|
background: linear-gradient(135deg, #6b7280, #9ca3af);
|
|
}
|
|
|
|
.published-icon {
|
|
background: linear-gradient(135deg, #10b981, #34d399);
|
|
}
|
|
|
|
.archived-icon {
|
|
background: linear-gradient(135deg, #1f2937, #374151);
|
|
}
|
|
|
|
.status-title {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
margin: 0;
|
|
}
|
|
|
|
.status-subtitle {
|
|
color: #6b7280;
|
|
font-size: 0.9rem;
|
|
margin: 0;
|
|
}
|
|
|
|
.capabilities-section {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
color: #374151;
|
|
margin-bottom: 1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.capability-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.capability-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 0.5rem 0;
|
|
border-bottom: 1px solid #f1f5f9;
|
|
}
|
|
|
|
.capability-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.capability-icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.75rem;
|
|
font-weight: bold;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.can-do {
|
|
background: #10b981;
|
|
color: white;
|
|
}
|
|
|
|
.cannot-do {
|
|
background: #ef4444;
|
|
color: white;
|
|
}
|
|
|
|
.limited {
|
|
background: #f59e0b;
|
|
color: white;
|
|
}
|
|
|
|
.capability-text {
|
|
font-size: 0.9rem;
|
|
color: #374151;
|
|
}
|
|
|
|
.workflow-section {
|
|
background: #f8fafc;
|
|
padding: 2rem;
|
|
border-top: 1px solid #e2e8f0;
|
|
}
|
|
|
|
.workflow-title {
|
|
text-align: center;
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: #374151;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.workflow-steps {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 2rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.workflow-step {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.workflow-arrow {
|
|
font-size: 2rem;
|
|
color: #6b7280;
|
|
}
|
|
|
|
.step-icon {
|
|
width: 64px;
|
|
height: 64px;
|
|
border-radius: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.75rem;
|
|
color: white;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.step-title {
|
|
font-weight: 600;
|
|
color: #374151;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.step-description {
|
|
font-size: 0.8rem;
|
|
color: #6b7280;
|
|
max-width: 120px;
|
|
}
|
|
|
|
.tips-section {
|
|
background: #f0f9ff;
|
|
border: 1px solid #bae6fd;
|
|
border-radius: 12px;
|
|
padding: 1.5rem;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.tips-title {
|
|
color: #0369a1;
|
|
font-weight: 600;
|
|
margin-bottom: 1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.tip-item {
|
|
color: #0c4a6e;
|
|
font-size: 0.9rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.back-button {
|
|
position: fixed;
|
|
top: 20px;
|
|
right: 20px;
|
|
z-index: 1000;
|
|
}
|
|
|
|
@@media (max-width: 768px) {
|
|
.status-grid
|
|
|
|
{
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.status-card {
|
|
border-right: none;
|
|
border-bottom: 1px solid #e2e8f0;
|
|
}
|
|
|
|
.status-card:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.workflow-steps {
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.workflow-arrow {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
}
|
|
</style>
|
|
|
|
<!-- Back Button -->
|
|
|
|
|
|
<div class="container mt-4">
|
|
<div class="status-guide-container">
|
|
<div class="guide-header">
|
|
<h1><i class="bi bi-clipboard-check"></i> Questionnaire Status Guide</h1>
|
|
<p>Complete breakdown of what you can do in each status</p>
|
|
</div>
|
|
|
|
<div class="status-grid">
|
|
<!-- DRAFT STATUS -->
|
|
<div class="status-card draft-card">
|
|
<div class="status-header">
|
|
<div class="status-icon draft-icon"><i class="bi bi-pencil"></i></div>
|
|
<div>
|
|
<h2 class="status-title">Draft</h2>
|
|
<p class="status-subtitle">Full editing freedom</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="capabilities-section">
|
|
<h3 class="section-title"><i class="bi bi-check-circle text-success"></i> What You CAN Do</h3>
|
|
<ul class="capability-list">
|
|
<li class="capability-item">
|
|
<div class="capability-icon can-do">✓</div>
|
|
<span class="capability-text">Edit questionnaire title and description</span>
|
|
</li>
|
|
<li class="capability-item">
|
|
<div class="capability-icon can-do">✓</div>
|
|
<span class="capability-text">Add new questions</span>
|
|
</li>
|
|
<li class="capability-item">
|
|
<div class="capability-icon can-do">✓</div>
|
|
<span class="capability-text">Edit existing questions (text, type)</span>
|
|
</li>
|
|
<li class="capability-item">
|
|
<div class="capability-icon can-do">✓</div>
|
|
<span class="capability-text">Delete questions completely</span>
|
|
</li>
|
|
<li class="capability-item">
|
|
<div class="capability-icon can-do">✓</div>
|
|
<span class="capability-text">Add/edit/delete answers</span>
|
|
</li>
|
|
<li class="capability-item">
|
|
<div class="capability-icon can-do">✓</div>
|
|
<span class="capability-text">Reorder questions</span>
|
|
</li>
|
|
<li class="capability-item">
|
|
<div class="capability-icon can-do">✓</div>
|
|
<span class="capability-text">Delete entire questionnaire</span>
|
|
</li>
|
|
<li class="capability-item">
|
|
<div class="capability-icon can-do">✓</div>
|
|
<span class="capability-text">Publish questionnaire</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="capabilities-section">
|
|
<h3 class="section-title"><i class="bi bi-x-circle text-danger"></i> What You CANNOT Do</h3>
|
|
<ul class="capability-list">
|
|
<li class="capability-item">
|
|
<div class="capability-icon cannot-do">✗</div>
|
|
<span class="capability-text">Send to respondents (must publish first)</span>
|
|
</li>
|
|
<li class="capability-item">
|
|
<div class="capability-icon cannot-do">✗</div>
|
|
<span class="capability-text">Collect responses (not live yet)</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="tips-section">
|
|
<h4 class="tips-title"><i class="bi bi-lightbulb"></i> Best Practices</h4>
|
|
<div class="tip-item">• Perfect your questions before publishing</div>
|
|
<div class="tip-item">• Test question flow and logic</div>
|
|
<div class="tip-item">• Review with team members</div>
|
|
<div class="tip-item">• Preview how it looks to respondents</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PUBLISHED STATUS -->
|
|
<div class="status-card published-card">
|
|
<div class="status-header">
|
|
<div class="status-icon published-icon"><i class="bi bi-broadcast"></i></div>
|
|
<div>
|
|
<h2 class="status-title">Published</h2>
|
|
<p class="status-subtitle">Live & accepting responses</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="capabilities-section">
|
|
<h3 class="section-title"><i class="bi bi-check-circle text-success"></i> What You CAN Do</h3>
|
|
<ul class="capability-list">
|
|
<li class="capability-item">
|
|
<div class="capability-icon can-do">✓</div>
|
|
<span class="capability-text">Edit questionnaire title and description</span>
|
|
</li>
|
|
<li class="capability-item">
|
|
<div class="capability-icon can-do">✓</div>
|
|
<span class="capability-text">Edit question text (preserve meaning)</span>
|
|
</li>
|
|
<li class="capability-item">
|
|
<div class="capability-icon can-do">✓</div>
|
|
<span class="capability-text">Add new questions</span>
|
|
</li>
|
|
<li class="capability-item">
|
|
<div class="capability-icon can-do">✓</div>
|
|
<span class="capability-text">Send questionnaire to respondents</span>
|
|
</li>
|
|
<li class="capability-item">
|
|
<div class="capability-icon can-do">✓</div>
|
|
<span class="capability-text">View responses and analytics</span>
|
|
</li>
|
|
<li class="capability-item">
|
|
<div class="capability-icon can-do">✓</div>
|
|
<span class="capability-text">Archive questionnaire</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="capabilities-section">
|
|
<h3 class="section-title"><i class="bi bi-exclamation-triangle text-warning"></i> Limited Actions</h3>
|
|
<ul class="capability-list">
|
|
<li class="capability-item">
|
|
<div class="capability-icon limited">⚠</div>
|
|
<span class="capability-text">Remove questions (hidden, not deleted)</span>
|
|
</li>
|
|
<li class="capability-item">
|
|
<div class="capability-icon limited">⚠</div>
|
|
<span class="capability-text">Edit answers (only for questions without responses)</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="capabilities-section">
|
|
<h3 class="section-title"><i class="bi bi-x-circle text-danger"></i> What You CANNOT Do</h3>
|
|
<ul class="capability-list">
|
|
<li class="capability-item">
|
|
<div class="capability-icon cannot-do">✗</div>
|
|
<span class="capability-text">Delete questionnaire (has responses)</span>
|
|
</li>
|
|
<li class="capability-item">
|
|
<div class="capability-icon cannot-do">✗</div>
|
|
<span class="capability-text">Permanently delete questions with responses</span>
|
|
</li>
|
|
<li class="capability-item">
|
|
<div class="capability-icon cannot-do">✗</div>
|
|
<span class="capability-text">Change answers for questions with responses</span>
|
|
</li>
|
|
<li class="capability-item">
|
|
<div class="capability-icon cannot-do">✗</div>
|
|
<span class="capability-text">Change question types that affect existing responses</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="tips-section">
|
|
<h4 class="tips-title"><i class="bi bi-lightbulb"></i> Best Practices</h4>
|
|
<div class="tip-item">• Make only essential text changes</div>
|
|
<div class="tip-item">• Add new questions at the end</div>
|
|
<div class="tip-item">• Monitor response data regularly</div>
|
|
<div class="tip-item">• Consider creating a new version for major changes</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ARCHIVED STATUS -->
|
|
<div class="status-card archived-card">
|
|
<div class="status-header">
|
|
<div class="status-icon archived-icon"><i class="bi bi-archive"></i></div>
|
|
<div>
|
|
<h2 class="status-title">Archived</h2>
|
|
<p class="status-subtitle">Read-only & complete</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="capabilities-section">
|
|
<h3 class="section-title"><i class="bi bi-check-circle text-success"></i> What You CAN Do</h3>
|
|
<ul class="capability-list">
|
|
<li class="capability-item">
|
|
<div class="capability-icon can-do">✓</div>
|
|
<span class="capability-text">View questionnaire details</span>
|
|
</li>
|
|
<li class="capability-item">
|
|
<div class="capability-icon can-do">✓</div>
|
|
<span class="capability-text">View all responses and data</span>
|
|
</li>
|
|
<li class="capability-item">
|
|
<div class="capability-icon can-do">✓</div>
|
|
<span class="capability-text">Export response data</span>
|
|
</li>
|
|
<li class="capability-item">
|
|
<div class="capability-icon can-do">✓</div>
|
|
<span class="capability-text">Generate reports and analytics</span>
|
|
</li>
|
|
<li class="capability-item">
|
|
<div class="capability-icon can-do">✓</div>
|
|
<span class="capability-text">Duplicate questionnaire as new draft</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="capabilities-section">
|
|
<h3 class="section-title"><i class="bi bi-exclamation-triangle text-warning"></i> Limited Actions</h3>
|
|
<ul class="capability-list">
|
|
<li class="capability-item">
|
|
<div class="capability-icon limited">⚠</div>
|
|
<span class="capability-text">Revert to draft (only if no responses)</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="capabilities-section">
|
|
<h3 class="section-title"><i class="bi bi-x-circle text-danger"></i> What You CANNOT Do</h3>
|
|
<ul class="capability-list">
|
|
<li class="capability-item">
|
|
<div class="capability-icon cannot-do">✗</div>
|
|
<span class="capability-text">Edit any questionnaire content</span>
|
|
</li>
|
|
<li class="capability-item">
|
|
<div class="capability-icon cannot-do">✗</div>
|
|
<span class="capability-text">Add or remove questions</span>
|
|
</li>
|
|
<li class="capability-item">
|
|
<div class="capability-icon cannot-do">✗</div>
|
|
<span class="capability-text">Send to new respondents</span>
|
|
</li>
|
|
<li class="capability-item">
|
|
<div class="capability-icon cannot-do">✗</div>
|
|
<span class="capability-text">Collect new responses</span>
|
|
</li>
|
|
<li class="capability-item">
|
|
<div class="capability-icon cannot-do">✗</div>
|
|
<span class="capability-text">Delete questionnaire (permanent archive)</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="tips-section">
|
|
<h4 class="tips-title"><i class="bi bi-lightbulb"></i> Best Practices</h4>
|
|
<div class="tip-item">• Export all data before long-term storage</div>
|
|
<div class="tip-item">• Create final analysis reports</div>
|
|
<div class="tip-item">• Document key insights and findings</div>
|
|
<div class="tip-item">• Use as template for future questionnaires</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="workflow-section">
|
|
<h2 class="workflow-title"><i class="bi bi-arrow-repeat"></i> Status Workflow</h2>
|
|
<div class="workflow-steps">
|
|
<div class="workflow-step">
|
|
<div class="step-icon draft-icon"><i class="bi bi-pencil"></i></div>
|
|
<div class="step-title">Draft</div>
|
|
<div class="step-description">Create & perfect your questionnaire</div>
|
|
</div>
|
|
<div class="workflow-arrow">→</div>
|
|
<div class="workflow-step">
|
|
<div class="step-icon published-icon"><i class="bi bi-broadcast"></i></div>
|
|
<div class="step-title">Published</div>
|
|
<div class="step-description">Live & collecting responses</div>
|
|
</div>
|
|
<div class="workflow-arrow">→</div>
|
|
<div class="workflow-step">
|
|
<div class="step-icon archived-icon"><i class="bi bi-archive"></i></div>
|
|
<div class="step-title">Archived</div>
|
|
<div class="step-description">Complete & preserved</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4 text-center">
|
|
<div class="alert alert-info d-inline-block">
|
|
<i class="bi bi-info-circle"></i>
|
|
<strong>Key Benefit:</strong> This status system completely eliminates foreign key constraint errors while providing professional survey management!
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|