Skip to content

Commit ea62893

Browse files
AdityaSingh-7AdityaSingh-7
committed
added survey form
1 parent 0c5de5e commit ea62893

File tree

8 files changed

+458
-0
lines changed

8 files changed

+458
-0
lines changed

‎public/responses/survey-response-2025-01-30T13-34-01-260Z.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"q3": "1-3 months ago",
3+
"q9": ""
4+
}

‎public/responses/survey-response-2025-01-30T13-34-20-912Z.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"q9": ""
3+
}

‎src/components/surveyForm.astro‎

Lines changed: 275 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,275 @@
1+
---
2+
import type { SurveyData } from '../types/survey';
3+
import surveyData from '../data/survey.json';
4+
5+
interface Props {
6+
data: SurveyData;
7+
}
8+
9+
const { data } = Astro.props;
10+
---
11+
12+
<div class="survey-container">
13+
<header class="survey-header">
14+
<h1>{data.surveyTitle}</h1>
15+
<p>{data.description}</p>
16+
</header>
17+
18+
<div class="questions-container">
19+
<form id="surveyForm" class="survey-form">
20+
{data.questions.map((question) => (
21+
<div class="question-card">
22+
<h3>{question.questionText}</h3>
23+
24+
{question.type === 'openEnded' ? (
25+
<textarea
26+
name={`q${question.id}`}
27+
class="textarea-input"
28+
rows="4"
29+
placeholder="Type your answer here..."
30+
></textarea>
31+
) : question.type === 'singleChoice' ? (
32+
<div class="options-group">
33+
{question.options?.map((option) => (
34+
<label class="option-label">
35+
<input
36+
type="radio"
37+
name={`q${question.id}`}
38+
value={option}
39+
class="radio-input"
40+
/>
41+
<span class="radio-text">{option}</span>
42+
</label>
43+
))}
44+
</div>
45+
) : (
46+
<div class="options-group">
47+
{question.options?.map((option) => (
48+
<label class="option-label">
49+
<input
50+
type="checkbox"
51+
name={`q${question.id}`}
52+
value={option}
53+
class="checkbox-input"
54+
/>
55+
<span class="checkbox-text">{option}</span>
56+
</label>
57+
))}
58+
</div>
59+
)}
60+
</div>
61+
))}
62+
63+
<div class="survey-controls">
64+
<button type="submit" class="submit-btn">Submit Survey</button>
65+
<button type="button" class="print-btn" id="printResults">Print Results</button>
66+
</div>
67+
</form>
68+
</div>
69+
</div>
70+
71+
<script>
72+
const surveyForm = document.getElementById('surveyForm');
73+
const printBtn = document.getElementById('printResults');
74+
75+
function collectFormData(form) {
76+
const formData = new FormData(form);
77+
const data = {};
78+
79+
formData.forEach((value, key) => {
80+
if (key in data) {
81+
if (Array.isArray(data[key])) {
82+
data[key].push(value);
83+
} else {
84+
data[key] = [data[key], value];
85+
}
86+
} else {
87+
data[key] = value;
88+
}
89+
});
90+
91+
return data;
92+
}
93+
94+
async function submitSurvey(event) {
95+
event.preventDefault();
96+
const formData = collectFormData(surveyForm);
97+
98+
console.log('Attempting to submit with data:', formData);
99+
100+
try {
101+
const response = await fetch('/api/survey', {
102+
method: 'POST',
103+
headers: { 'Content-Type': 'application/json' },
104+
body: JSON.stringify(formData),
105+
});
106+
107+
console.log('Response status:', response.status); // Add this line
108+
109+
const result = await response.json();
110+
console.log('Response data:', result); // Add this line
111+
112+
if (!response.ok) {
113+
throw new Error(`Failed to submit survey: ${result.message || response.statusText}`);
114+
}
115+
116+
alert('Survey submitted successfully!');
117+
// Optional: Reset form after successful submission
118+
surveyForm.reset();
119+
120+
} catch (error) {
121+
console.error('Error submitting survey:', error);
122+
alert(`Error submitting survey: ${error.message}`);
123+
}
124+
}
125+
126+
function generatePrintableResults(data) {
127+
let html = `
128+
<h1>${document.querySelector('.survey-header h1')?.textContent}</h1>
129+
<div class="results">
130+
`;
131+
132+
for (const [key, value] of Object.entries(data)) {
133+
const question = document.querySelector(`[name="${key}"]`)?.closest('.question-card')?.querySelector('h3')?.textContent;
134+
html += `
135+
<div class="result-item">
136+
<h3>${question}</h3>
137+
<p>${Array.isArray(value) ? value.join(', ') : value}</p>
138+
</div>
139+
`;
140+
}
141+
142+
html += '</div>';
143+
return html;
144+
}
145+
146+
function printResults() {
147+
if (!surveyForm) return;
148+
149+
const formData = collectFormData(surveyForm);
150+
const printWindow = window.open('', '_blank');
151+
if (!printWindow) return;
152+
153+
printWindow.document.write(`
154+
<html>
155+
<head>
156+
<title>Survey Results</title>
157+
<style>
158+
body { font-family: system-ui; padding: 2rem; }
159+
.result-item { margin-bottom: 1.5rem; }
160+
h3 { color: #2d3748; }
161+
p { color: #4a5568; }
162+
</style>
163+
</head>
164+
<body>
165+
${generatePrintableResults(formData)}
166+
</body>
167+
</html>
168+
`);
169+
printWindow.document.close();
170+
printWindow.print();
171+
}
172+
173+
surveyForm?.addEventListener('submit', submitSurvey);
174+
printBtn?.addEventListener('click', printResults);
175+
</script>
176+
177+
<style>
178+
/* Your CSS Styles for the form layout */
179+
.survey-container {
180+
max-width: 1200px;
181+
margin: 0 auto;
182+
padding: 2rem;
183+
}
184+
185+
.survey-header {
186+
text-align: center;
187+
margin-bottom: 3rem;
188+
}
189+
190+
.survey-header h1 {
191+
font-size: 2.5rem;
192+
color: #1a365d;
193+
}
194+
195+
.survey-header p {
196+
font-size: 1.1rem;
197+
color: #4a5568;
198+
}
199+
200+
.questions-container {
201+
max-height: 70vh;
202+
overflow-y: auto;
203+
padding: 1rem;
204+
background: #ffffff;
205+
border-radius: 1rem;
206+
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
207+
}
208+
209+
.question-card {
210+
background: #ffffff;
211+
border: 1px solid #e2e8f0;
212+
border-radius: 0.75rem;
213+
padding: 1.5rem;
214+
margin-bottom: 1.5rem;
215+
}
216+
217+
.question-card h3 {
218+
font-size: 1.1rem;
219+
color: #2d3748;
220+
}
221+
222+
.options-group {
223+
display: grid;
224+
gap: 1rem;
225+
}
226+
227+
.option-label {
228+
display: flex;
229+
align-items: center;
230+
gap: 0.75rem;
231+
padding: 0.75rem;
232+
border-radius: 0.5rem;
233+
background: #f8fafc;
234+
cursor: pointer;
235+
}
236+
237+
.radio-input,
238+
.checkbox-input {
239+
width: 1.25rem;
240+
height: 1.25rem;
241+
accent-color: #3b82f6;
242+
}
243+
244+
.survey-controls {
245+
display: flex;
246+
gap: 1rem;
247+
justify-content: center;
248+
margin-top: 2rem;
249+
padding: 1rem;
250+
}
251+
252+
.submit-btn {
253+
background: #3b82f6;
254+
color: white;
255+
padding: 0.75rem 2rem;
256+
border-radius: 0.5rem;
257+
border: none;
258+
}
259+
260+
.submit-btn:hover {
261+
background: #2563eb;
262+
}
263+
264+
.print-btn {
265+
background: white;
266+
color: #3b82f6;
267+
padding: 0.75rem 2rem;
268+
border-radius: 0.5rem;
269+
border: 1px solid #3b82f6;
270+
}
271+
272+
.print-btn:hover {
273+
background: #f8fafc;
274+
}
275+
</style>

‎src/data/survey.json‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
{
2+
"surveyTitle": "Supporting Your Child's Early Writing and Speaking",
3+
"description": "Help us understand your child's journey with early writing and speaking milestones. Your responses will guide us in creating better resources!",
4+
"questions": [
5+
{
6+
"id": 1,
7+
"questionText": "Do you have a handwritten sample of your child's first letters (A, B, C, etc.)?",
8+
"type": "singleChoice",
9+
"options": ["Yes", "No", "Not yet, but I plan to"]
10+
},
11+
{
12+
"id": 2,
13+
"questionText": "Have you captured your child’s first attempts at saying letters (A, B, C, etc.)?",
14+
"type": "singleChoice",
15+
"options": ["Yes", "No", "Not yet, but I plan to"]
16+
},
17+
{
18+
"id": 3,
19+
"questionText": "When did your child start writing or speaking their first letters?",
20+
"type": "singleChoice",
21+
"options": [
22+
"Less than a month ago",
23+
"1-3 months ago",
24+
"More than 3 months ago"
25+
]
26+
},
27+
{
28+
"id": 4,
29+
"questionText": "How long does your child spend practicing writing letters each day?",
30+
"type": "singleChoice",
31+
"options": [
32+
"Less than 15 minutes",
33+
"15-30 minutes",
34+
"30-60 minutes",
35+
"More than 60 minutes"
36+
]
37+
},
38+
{
39+
"id": 5,
40+
"questionText": "Would you be interested in setting your child’s handwriting as a personalized font for educational materials or keepsakes?",
41+
"type": "singleChoice",
42+
"options": ["Yes", "No", "Not sure"]
43+
},
44+
{
45+
"id": 6,
46+
"questionText": "Do you think that learning methods affect handwriting quality? For instance, if a child practices incorrectly, can it impact their writing?",
47+
"type": "singleChoice",
48+
"options": [
49+
"Yes, it can affect handwriting quality.",
50+
"No, I don’t think it has a big impact.",
51+
"Not sure"
52+
]
53+
},
54+
{
55+
"id": 7,
56+
"questionText": "What resources or tools have been most useful for your child’s early writing and speaking?",
57+
"type": "multiChoice",
58+
"options": [
59+
"Interactive apps or websites",
60+
"Handwriting practice sheets",
61+
"Educational toys",
62+
"Other (please specify)"
63+
]
64+
},
65+
{
66+
"id": 8,
67+
"questionText": "How often does your child practice writing or speaking letters?",
68+
"type": "singleChoice",
69+
"options": ["Daily", "Several times a week", "Weekly", "Occasionally"]
70+
},
71+
{
72+
"id": 9,
73+
"questionText": "Is there something specific you’d like to see in tools or resources for young children learning to write or speak?",
74+
"type": "openEnded"
75+
}
76+
]
77+
}

0 commit comments

Comments
 (0)