1081 lines
No EOL
33 KiB
Text
1081 lines
No EOL
33 KiB
Text
@model Response
|
|
|
|
@{
|
|
ViewData["Title"] = "Response Details";
|
|
}
|
|
|
|
<style>
|
|
/* Modern Design System */
|
|
@@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
|
|
|
|
:root {
|
|
--primary-color: #6366f1;
|
|
--primary-light: #8b5cf6;
|
|
--primary-dark: #4338ca;
|
|
--success-color: #10b981;
|
|
--success-light: #34d399;
|
|
--success-dark: #059669;
|
|
--info-color: #06b6d4;
|
|
--info-light: #22d3ee;
|
|
--info-dark: #0891b2;
|
|
--warning-color: #f59e0b;
|
|
--warning-light: #fbbf24;
|
|
--warning-dark: #d97706;
|
|
--danger-color: #ef4444;
|
|
--danger-light: #fca5a5;
|
|
--danger-dark: #dc2626;
|
|
--gray-50: #f8fafc;
|
|
--gray-100: #f1f5f9;
|
|
--gray-200: #e2e8f0;
|
|
--gray-300: #cbd5e1;
|
|
--gray-400: #94a3b8;
|
|
--gray-500: #64748b;
|
|
--gray-600: #475569;
|
|
--gray-700: #334155;
|
|
--gray-800: #1e293b;
|
|
--gray-900: #0f172a;
|
|
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
|
--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
|
|
--border-radius-sm: 8px;
|
|
--border-radius-md: 12px;
|
|
--border-radius-lg: 16px;
|
|
--border-radius-xl: 24px;
|
|
}
|
|
|
|
* {
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
}
|
|
|
|
body {
|
|
background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 2rem 1rem;
|
|
}
|
|
|
|
/* Response Header */
|
|
.response-header {
|
|
background: white;
|
|
border-radius: var(--border-radius-xl);
|
|
box-shadow: var(--shadow-xl);
|
|
overflow: hidden;
|
|
margin-bottom: 2rem;
|
|
position: relative;
|
|
}
|
|
|
|
.response-header::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
background: linear-gradient(90deg, var(--primary-color), var(--info-color), var(--success-color));
|
|
}
|
|
|
|
.header-main {
|
|
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
|
|
color: white;
|
|
padding: 2.5rem;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.header-main::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><defs><radialGradient id="a" cx="50%" cy="0%" r="100%"><stop offset="0%" stop-color="white" stop-opacity="0.1"/><stop offset="100%" stop-color="white" stop-opacity="0"/></radialGradient></defs><rect width="100" height="20" fill="url(%23a)"/></svg>');
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.header-content {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2rem;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.response-icon {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 2rem;
|
|
backdrop-filter: blur(10px);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.header-text h1 {
|
|
font-size: 2rem;
|
|
font-weight: 800;
|
|
margin: 0 0 0.5rem;
|
|
}
|
|
|
|
.user-badge {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
padding: 0.5rem 1rem;
|
|
border-radius: var(--border-radius-md);
|
|
backdrop-filter: blur(10px);
|
|
display: inline-block;
|
|
font-weight: 600;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.header-meta {
|
|
background: var(--gray-50);
|
|
padding: 1.5rem 2.5rem;
|
|
border-top: 1px solid var(--gray-200);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.meta-icon {
|
|
background: var(--success-color);
|
|
color: white;
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: var(--border-radius-sm);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.meta-text {
|
|
font-weight: 600;
|
|
color: var(--gray-800);
|
|
}
|
|
|
|
/* Question Cards */
|
|
.question-card {
|
|
background: white;
|
|
border-radius: var(--border-radius-xl);
|
|
box-shadow: var(--shadow-lg);
|
|
overflow: hidden;
|
|
margin-bottom: 2rem;
|
|
border: 1px solid var(--gray-200);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.question-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: var(--shadow-2xl);
|
|
}
|
|
|
|
.question-header {
|
|
background: linear-gradient(135deg, var(--gray-700) 0%, var(--gray-800) 100%);
|
|
color: white;
|
|
padding: 1.5rem 2rem;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.question-header::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><defs><radialGradient id="a" cx="50%" cy="0%" r="100%"><stop offset="0%" stop-color="white" stop-opacity="0.1"/><stop offset="100%" stop-color="white" stop-opacity="0"/></radialGradient></defs><rect width="100" height="20" fill="url(%23a)"/></svg>');
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.question-type {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
padding: 0.375rem 1rem;
|
|
border-radius: var(--border-radius-sm);
|
|
font-weight: 600;
|
|
font-size: 0.875rem;
|
|
display: inline-block;
|
|
margin-bottom: 1rem;
|
|
backdrop-filter: blur(10px);
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.question-title {
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
margin: 0;
|
|
position: relative;
|
|
z-index: 1;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.question-body {
|
|
padding: 2rem;
|
|
}
|
|
|
|
/* Response Types */
|
|
.text-response {
|
|
background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
|
|
border: 1px solid var(--gray-200);
|
|
border-radius: var(--border-radius-lg);
|
|
padding: 1.5rem;
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
color: var(--gray-800);
|
|
line-height: 1.6;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.text-response-label {
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
color: var(--gray-600);
|
|
margin-bottom: 1rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
/* Choice Options */
|
|
.choices-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.choice-option {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
padding: 1rem 1.25rem;
|
|
border-radius: var(--border-radius-md);
|
|
border: 2px solid var(--gray-200);
|
|
transition: all 0.3s ease;
|
|
background: white;
|
|
}
|
|
|
|
.choice-option.selected {
|
|
border-color: var(--primary-color);
|
|
background: linear-gradient(135deg, #fef2f2 0%, #fecaca 10%, white 100%);
|
|
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
|
|
}
|
|
|
|
.choice-input {
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 2px solid var(--gray-300);
|
|
border-radius: 4px;
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.choice-input.radio {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.choice-input.checked {
|
|
background: var(--primary-color);
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
.choice-input.checked::after {
|
|
content: '✓';
|
|
position: absolute;
|
|
color: white;
|
|
font-weight: bold;
|
|
font-size: 12px;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.choice-label {
|
|
font-weight: 500;
|
|
color: var(--gray-700);
|
|
}
|
|
|
|
.choice-option.selected .choice-label {
|
|
font-weight: 600;
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
/* Other option specific styling */
|
|
.choice-option .choice-label strong {
|
|
color: var(--warning-dark);
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
/* Make other responses more visually distinct */
|
|
.choice-option.other-option {
|
|
background: linear-gradient(135deg, #fef3c7 0%, #fef3c7 10%, white 100%);
|
|
border-color: var(--warning-color);
|
|
}
|
|
|
|
.choice-option.other-option.selected {
|
|
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
|
|
border-color: var(--warning-dark);
|
|
}
|
|
|
|
.choice-option.other-option.selected .choice-label {
|
|
color: white;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.choice-option.other-option.selected .choice-label strong {
|
|
color: white;
|
|
}
|
|
|
|
.choice-option.other-option.selected .choice-input.checked {
|
|
background: var(--warning-dark);
|
|
border-color: var(--warning-dark);
|
|
}
|
|
|
|
/* Rating Stars */
|
|
.rating-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 1.5rem;
|
|
justify-content: center;
|
|
padding: 2rem;
|
|
background: var(--gray-50);
|
|
border-radius: var(--border-radius-lg);
|
|
}
|
|
|
|
.rating-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 1rem;
|
|
border-radius: var(--border-radius-md);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.rating-item.selected {
|
|
background: linear-gradient(135deg, var(--warning-color) 0%, var(--warning-light) 100%);
|
|
color: white;
|
|
box-shadow: var(--shadow-md);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.rating-star {
|
|
font-size: 2rem;
|
|
color: var(--gray-300);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.rating-item.selected .rating-star {
|
|
color: white;
|
|
text-shadow: 0 2px 4px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.rating-label {
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
color: var(--gray-600);
|
|
}
|
|
|
|
.rating-item.selected .rating-label {
|
|
color: white;
|
|
}
|
|
|
|
/* Likert Scale */
|
|
.likert-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.likert-option {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
padding: 1rem 1.25rem;
|
|
border-radius: var(--border-radius-md);
|
|
border: 2px solid var(--gray-200);
|
|
transition: all 0.3s ease;
|
|
background: white;
|
|
}
|
|
|
|
.likert-option.selected {
|
|
border-color: var(--success-color);
|
|
background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
|
|
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
|
|
}
|
|
|
|
.likert-radio {
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 2px solid var(--gray-300);
|
|
border-radius: 50%;
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.likert-radio.checked {
|
|
background: var(--success-color);
|
|
border-color: var(--success-color);
|
|
}
|
|
|
|
.likert-radio.checked::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 8px;
|
|
height: 8px;
|
|
background: white;
|
|
border-radius: 50%;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.likert-label {
|
|
font-weight: 500;
|
|
color: var(--gray-700);
|
|
}
|
|
|
|
.likert-option.selected .likert-label {
|
|
font-weight: 600;
|
|
color: var(--success-color);
|
|
}
|
|
|
|
/* Matrix Table */
|
|
.matrix-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
background: white;
|
|
border-radius: var(--border-radius-lg);
|
|
overflow: hidden;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.matrix-table th {
|
|
background: linear-gradient(135deg, var(--gray-600) 0%, var(--gray-700) 100%);
|
|
color: white;
|
|
padding: 1rem;
|
|
font-weight: 600;
|
|
text-align: left;
|
|
}
|
|
|
|
.matrix-table td {
|
|
padding: 1rem;
|
|
border-bottom: 1px solid var(--gray-200);
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.matrix-table tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.matrix-table tr:hover {
|
|
background: var(--gray-50);
|
|
}
|
|
|
|
.matrix-option {
|
|
font-weight: 500;
|
|
color: var(--gray-700);
|
|
}
|
|
|
|
.matrix-option.selected {
|
|
font-weight: 600;
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.matrix-radio {
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 2px solid var(--gray-300);
|
|
border-radius: 50%;
|
|
position: relative;
|
|
}
|
|
|
|
.matrix-radio.checked {
|
|
background: var(--primary-color);
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
.matrix-radio.checked::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 8px;
|
|
height: 8px;
|
|
background: white;
|
|
border-radius: 50%;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
/* Ranking */
|
|
.ranking-container {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.ranking-section {
|
|
background: var(--gray-50);
|
|
border-radius: var(--border-radius-lg);
|
|
padding: 1.5rem;
|
|
border: 1px solid var(--gray-200);
|
|
}
|
|
|
|
.ranking-title {
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
color: var(--gray-800);
|
|
margin-bottom: 1.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.ranking-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.ranking-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
padding: 1rem;
|
|
background: white;
|
|
border-radius: var(--border-radius-md);
|
|
box-shadow: var(--shadow-sm);
|
|
border: 1px solid var(--gray-200);
|
|
}
|
|
|
|
.ranking-number {
|
|
background: var(--primary-color);
|
|
color: white;
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 600;
|
|
font-size: 0.875rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.ranking-text {
|
|
font-weight: 500;
|
|
color: var(--gray-700);
|
|
}
|
|
|
|
/* Image Selection */
|
|
.images-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 1.5rem;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.image-card {
|
|
background: white;
|
|
border-radius: var(--border-radius-lg);
|
|
overflow: hidden;
|
|
box-shadow: var(--shadow-md);
|
|
transition: all 0.3s ease;
|
|
border: 2px solid var(--gray-200);
|
|
}
|
|
|
|
.image-card.selected {
|
|
border-color: var(--success-color);
|
|
box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1), var(--shadow-lg);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.image-card.unselected {
|
|
filter: grayscale(100%);
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.card-image {
|
|
width: 100%;
|
|
height: 150px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.image-card-body {
|
|
padding: 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.view-image-btn {
|
|
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
|
|
color: white;
|
|
border: none;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: var(--border-radius-sm);
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
transition: all 0.3s ease;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.view-image-btn:hover {
|
|
background: linear-gradient(135deg, var(--primary-dark) 0%, #3730a3 100%);
|
|
transform: translateY(-1px);
|
|
color: white;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.selected-indicator {
|
|
position: absolute;
|
|
top: 0.75rem;
|
|
right: 0.75rem;
|
|
background: var(--success-color);
|
|
color: white;
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.25rem;
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
/* Slider */
|
|
.slider-container {
|
|
background: var(--gray-50);
|
|
border-radius: var(--border-radius-lg);
|
|
padding: 2rem;
|
|
border: 1px solid var(--gray-200);
|
|
}
|
|
|
|
.slider-item {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.slider-item:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.slider-label {
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
color: var(--gray-800);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.slider-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.slider-min, .slider-max {
|
|
background: var(--gray-600);
|
|
color: white;
|
|
padding: 0.375rem 0.75rem;
|
|
border-radius: var(--border-radius-sm);
|
|
font-weight: 600;
|
|
font-size: 0.875rem;
|
|
min-width: 40px;
|
|
text-align: center;
|
|
}
|
|
|
|
.custom-slider {
|
|
flex: 1;
|
|
height: 8px;
|
|
border-radius: 4px;
|
|
background: var(--gray-300);
|
|
outline: none;
|
|
-webkit-appearance: none;
|
|
position: relative;
|
|
}
|
|
|
|
.custom-slider::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
background: var(--primary-color);
|
|
cursor: pointer;
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.custom-slider::-moz-range-thumb {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
background: var(--primary-color);
|
|
cursor: pointer;
|
|
border: none;
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.slider-value {
|
|
background: var(--primary-color);
|
|
color: white;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: var(--border-radius-md);
|
|
font-weight: 600;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
/* Back Link */
|
|
.back-link {
|
|
background: linear-gradient(135deg, var(--gray-500) 0%, var(--gray-600) 100%);
|
|
color: white;
|
|
padding: 0.75rem 1.5rem;
|
|
border-radius: var(--border-radius-md);
|
|
text-decoration: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-weight: 600;
|
|
transition: all 0.3s ease;
|
|
box-shadow: var(--shadow-md);
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.back-link:hover {
|
|
background: linear-gradient(135deg, var(--gray-600) 0%, var(--gray-700) 100%);
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--shadow-lg);
|
|
color: white;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Responsive Design */
|
|
@@media (max-width: 768px) {
|
|
.container
|
|
|
|
{
|
|
padding: 1rem;
|
|
}
|
|
|
|
.header-content {
|
|
flex-direction: column;
|
|
text-align: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.header-meta {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.ranking-container {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.images-container {
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
}
|
|
|
|
.rating-container {
|
|
gap: 1rem;
|
|
}
|
|
|
|
.slider-wrapper {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
}
|
|
|
|
/* Animations */
|
|
.fade-in {
|
|
animation: fadeIn 0.6s ease-out;
|
|
}
|
|
|
|
@@keyframes fadeIn {
|
|
from
|
|
|
|
{
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
}
|
|
|
|
.stagger-animation {
|
|
animation: fadeIn 0.6s ease-out;
|
|
animation-fill-mode: both;
|
|
}
|
|
|
|
.stagger-animation:nth-child(1) {
|
|
animation-delay: 0.1s;
|
|
}
|
|
|
|
.stagger-animation:nth-child(2) {
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
.stagger-animation:nth-child(3) {
|
|
animation-delay: 0.3s;
|
|
}
|
|
|
|
.stagger-animation:nth-child(4) {
|
|
animation-delay: 0.4s;
|
|
}
|
|
|
|
.stagger-animation:nth-child(5) {
|
|
animation-delay: 0.5s;
|
|
}
|
|
|
|
.stagger-animation:nth-child(6) {
|
|
animation-delay: 0.6s;
|
|
}
|
|
</style>
|
|
|
|
@{
|
|
int numberindex = 0;
|
|
}
|
|
|
|
<div class="container">
|
|
<!-- Response Header -->
|
|
<div class="response-header fade-in">
|
|
<div class="header-main">
|
|
<div class="header-content">
|
|
<div class="response-icon">
|
|
<i class="bi bi-clipboard-check-fill"></i>
|
|
</div>
|
|
<div class="header-text">
|
|
<h1>Response Details</h1>
|
|
<div class="user-badge">@Model.UserName (@Model.UserEmail)</div>
|
|
<p style="margin: 0; opacity: 0.9; font-weight: 500;">Complete survey response review</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="header-meta">
|
|
<div class="meta-icon">
|
|
<i class="bi bi-calendar-check"></i>
|
|
</div>
|
|
<span class="meta-text">Submitted on: <span id="localTime">@Model.SubmissionDate.ToString("yyyy-MM-ddTHH:mm:ss")</span></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Questions and Responses -->
|
|
@foreach (var detail in Model.ResponseDetails)
|
|
{
|
|
<div class="question-card stagger-animation">
|
|
<div class="question-header">
|
|
<div class="question-type">@detail.QuestionType.ToString()</div>
|
|
<h3 class="question-title">Question @((numberindex = numberindex + 1)): @detail.Question.Text</h3>
|
|
</div>
|
|
<div class="question-body">
|
|
@switch (detail.QuestionType)
|
|
{
|
|
case QuestionType.Text:
|
|
case QuestionType.Open_ended:
|
|
<div class="text-response-label">Response:</div>
|
|
<div class="text-response">@detail.TextResponse</div>
|
|
break;
|
|
|
|
case QuestionType.Multiple_choice:
|
|
case QuestionType.CheckBox:
|
|
case QuestionType.TrueFalse:
|
|
<div class="text-response-label">Selected Answer@(detail.ResponseAnswers.Count > 1 ? "s" : ""):</div>
|
|
<div class="choices-container">
|
|
@foreach (var answer in detail.Question.Answers)
|
|
{
|
|
var isSelected = detail.ResponseAnswers.Any(ra => ra.AnswerId == answer.Id);
|
|
<div class="choice-option @(isSelected ? "selected" : "")">
|
|
<div class="choice-input @(detail.Question.Type == QuestionType.TrueFalse ? "radio" : "") @(isSelected ? "checked" : "")"></div>
|
|
<span class="choice-label">@answer.Text</span>
|
|
</div>
|
|
}
|
|
|
|
@* Display "Other" text response if it exists *@
|
|
@if (!string.IsNullOrEmpty(detail.TextResponse))
|
|
{
|
|
<div class="choice-option other-option selected">
|
|
<div class="choice-input checked"></div>
|
|
<span class="choice-label">
|
|
<strong>Other:</strong> @detail.TextResponse
|
|
</span>
|
|
</div>
|
|
}
|
|
</div>
|
|
break;
|
|
|
|
case QuestionType.Rating:
|
|
<div class="text-response-label">User Selected Rating:</div>
|
|
<div class="rating-container">
|
|
@foreach (var answer in detail.Question.Answers.OrderBy(a => a.Id))
|
|
{
|
|
var isSelected = detail.ResponseAnswers.Any(ra => ra.AnswerId == answer.Id);
|
|
<div class="rating-item @(isSelected ? "selected" : "")">
|
|
<div class="rating-star">
|
|
<i class="bi bi-star-fill"></i>
|
|
</div>
|
|
<div class="rating-label">@answer.Text</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
break;
|
|
|
|
case QuestionType.Likert:
|
|
<div class="text-response-label">Selected Response:</div>
|
|
<div class="likert-container">
|
|
@foreach (var answer in detail.Question.Answers.OrderBy(a => a.Id))
|
|
{
|
|
var isSelected = detail.ResponseAnswers.Any(ra => ra.AnswerId == answer.Id);
|
|
<div class="likert-option @(isSelected ? "selected" : "")">
|
|
<div class="likert-radio @(isSelected ? "checked" : "")"></div>
|
|
<span class="likert-label">@answer.Text</span>
|
|
</div>
|
|
}
|
|
</div>
|
|
break;
|
|
|
|
case QuestionType.Matrix:
|
|
<div class="text-response-label">Selected Response:</div>
|
|
<table class="matrix-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Option</th>
|
|
<th style="width: 100px; text-align: center;">Selected</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach (var answer in detail.Question.Answers)
|
|
{
|
|
var isSelected = detail.ResponseAnswers.Any(ra => ra.AnswerId == answer.Id);
|
|
<tr>
|
|
<td class="matrix-option @(isSelected ? "selected" : "")">@answer.Text</td>
|
|
<td style="text-align: center;">
|
|
<div class="matrix-radio @(isSelected ? "checked" : "")"></div>
|
|
</td>
|
|
</tr>
|
|
}
|
|
</tbody>
|
|
</table>
|
|
break;
|
|
|
|
case QuestionType.Ranking:
|
|
<div class="ranking-container">
|
|
<div class="ranking-section">
|
|
<div class="ranking-title">
|
|
<i class="bi bi-list-ol"></i>
|
|
Original Order
|
|
</div>
|
|
<div class="ranking-list">
|
|
@foreach (var answer in detail.Question.Answers)
|
|
{
|
|
var userIndex = detail.ResponseAnswers.FindIndex(ra => ra.AnswerId == answer.Id) + 1;
|
|
<div class="ranking-item">
|
|
<div class="ranking-number">@userIndex</div>
|
|
<div class="ranking-text">@answer.Text</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
<div class="ranking-section">
|
|
<div class="ranking-title">
|
|
<i class="bi bi-arrow-up-down"></i>
|
|
User's Ranking
|
|
</div>
|
|
<div class="ranking-list">
|
|
@for (int i = 0; i < detail.ResponseAnswers.Count; i++)
|
|
{
|
|
var ra = detail.ResponseAnswers[i];
|
|
var answer = detail.Question.Answers.FirstOrDefault(a => a.Id == ra.AnswerId);
|
|
<div class="ranking-item">
|
|
<div class="ranking-number">@(i + 1)</div>
|
|
<div class="ranking-text">@answer.Text</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
break;
|
|
|
|
case QuestionType.Image:
|
|
<div class="text-response-label">Image Selection:</div>
|
|
<div class="images-container">
|
|
@foreach (var answer in detail.Question.Answers)
|
|
{
|
|
var isSelected = detail.ResponseAnswers.Any(ra => ra.AnswerId == answer.Id);
|
|
<div class="image-card @(isSelected ? "selected" : "unselected")" style="position: relative;">
|
|
@if (isSelected)
|
|
{
|
|
<div class="selected-indicator">
|
|
<i class="bi bi-check"></i>
|
|
</div>
|
|
}
|
|
<img src="@answer.Text" class="card-image" alt="Response Image">
|
|
<div class="image-card-body">
|
|
<a href="@answer.Text" target="_blank" class="view-image-btn">
|
|
<i class="bi bi-eye"></i>
|
|
View Image
|
|
</a>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
break;
|
|
|
|
case QuestionType.Slider:
|
|
<div class="text-response-label">Slider Response:</div>
|
|
<div class="slider-container">
|
|
@foreach (var answer in detail.Question.Answers)
|
|
{
|
|
var responseAnswer = detail.ResponseAnswers.FirstOrDefault(ra => ra.AnswerId == answer.Id);
|
|
int sliderValue = 0;
|
|
Int32.TryParse(responseAnswer?.ResponseDetail.TextResponse, out sliderValue);
|
|
|
|
<div class="slider-item">
|
|
<div class="slider-label">@answer.Text</div>
|
|
<div class="slider-wrapper">
|
|
<span class="slider-min">0</span>
|
|
<input type="range" min="0" max="100" value="@sliderValue" class="custom-slider" disabled>
|
|
<span class="slider-max">100</span>
|
|
</div>
|
|
<div class="slider-value">User Response: @sliderValue</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
break;
|
|
|
|
default:
|
|
<div class="text-response">
|
|
<div class="text-response-label">Unsupported Question Type</div>
|
|
<p>This question type is not yet supported in the response viewer.</p>
|
|
</div>
|
|
break;
|
|
}
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
<!-- Back Link -->
|
|
<a asp-action="Index" class="back-link">
|
|
<i class="bi bi-arrow-left"></i>
|
|
Back to List
|
|
</a>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
var utcDate = document.getElementById('localTime').innerText;
|
|
var localDate = new Date(utcDate + 'Z'); // Add 'Z' to indicate UTC time
|
|
document.getElementById('localTime').innerText = localDate.toLocaleString();
|
|
});
|
|
</script> |