-
Notifications
You must be signed in to change notification settings - Fork 0
/
report.html
226 lines (199 loc) · 7.92 KB
/
report.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Independent Study Weekly Report</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
padding: 20px;
background-color: #f4f4f9;
color: #000;
}
label {
display: block;
margin-top: 10px;
}
input, textarea {
width: 100%;
padding: 10px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #fff;
color: #000;
}
button {
margin-top: 20px;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
.instructions {
font-size: 0.9em;
color: #555;
margin-bottom: 10px;
}
/* Dark Mode Styles */
.dark-mode {
background-color: #222; /* Darker background */
color: #f1f1f1; /* Lighter text */
}
.dark-mode input, .dark-mode textarea {
background-color: #333; /* Darker input fields */
color: #f1f1f1; /* Lighter text inside input */
border: 1px solid #444; /* Better contrast for input border */
}
.dark-mode button {
background-color: #5a9e5a; /* Lighter green for visibility */
color: #fff; /* White text for button */
}
.dark-mode button:hover {
background-color: #4CAF50;
}
/* Toggle Switch */
.toggle-switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: 0.4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: 0.4s;
border-radius: 50%;
}
input:checked + .slider {
background-color: #4CAF50;
}
input:checked + .slider:before {
transform: translateX(26px);
}
</style>
</head>
<body>
<!-- Dark Mode Toggle Switch -->
<label class="toggle-switch">
<input type="checkbox" id="darkModeToggle" onclick="toggleDarkMode()">
<span class="slider"></span>
</label>
<span>Enable Dark Mode</span>
<h2>Independent Study Weekly Report</h2>
<p class="instructions">Please fill out the following fields and download the PDF report. Once downloaded, send the report to <strong>trevor.tomesh@uwrf.edu</strong> with the email subject "<strong>Weekly Report</strong>".</p>
<form id="weekly-report-form">
<label for="student-name">Student Name:</label>
<p class="instructions">Enter your full name.</p>
<input type="text" id="student-name" name="student-name" required>
<label for="course-title">Course Title:</label>
<p class="instructions">Enter the title of your course (e.g., Independent Study in Computer Science).</p>
<input type="text" id="course-title" name="course-title" required>
<label for="week">Week:</label>
<p class="instructions">Specify the week number you are reporting for (e.g., Week 1).</p>
<input type="text" id="week" name="week" required>
<label for="overview">1. Overview of Work Done:</label>
<p class="instructions">Provide a summary of the work you completed during this week.</p>
<textarea id="overview" name="overview" rows="4" required></textarea>
<label for="deliverables">2. Deliverables:</label>
<p class="instructions">List any deliverables submitted during the week.</p>
<textarea id="deliverables" name="deliverables" rows="4"></textarea>
<label for="challenges">3. Challenges or Issues:</label>
<p class="instructions">Describe any challenges or issues you encountered this week.</p>
<textarea id="challenges" name="challenges" rows="4"></textarea>
<label for="action-items">4. Action Items for Next Week:</label>
<p class="instructions">Outline the tasks you plan to work on next week.</p>
<textarea id="action-items" name="action-items" rows="4"></textarea>
<label for="feedback">5. Feedback or Questions:</label>
<p class="instructions">Include any feedback or questions for your instructor.</p>
<textarea id="feedback" name="feedback" rows="4"></textarea>
<label for="reflection">6. Reflection:</label>
<p class="instructions">Reflect on your progress this week. What went well? What could be improved?</p>
<textarea id="reflection" name="reflection" rows="4"></textarea>
<button type="button" onclick="generatePDF()">Download PDF</button>
</form>
<script>
function toggleDarkMode() {
document.body.classList.toggle('dark-mode');
}
function generatePDF() {
const { jsPDF } = window.jspdf;
const doc = new jsPDF();
// Get form values
const studentName = document.getElementById('student-name').value;
const courseTitle = document.getElementById('course-title').value;
const week = document.getElementById('week').value;
const overview = document.getElementById('overview').value;
const deliverables = document.getElementById('deliverables').value;
const challenges = document.getElementById('challenges').value;
const actionItems = document.getElementById('action-items').value;
const feedback = document.getElementById('feedback').value;
const reflection = document.getElementById('reflection').value;
// Add Title and Student Info
doc.setFontSize(16);
doc.setTextColor(40, 40, 40);
doc.text("Independent Study Weekly Report", 20, 20);
doc.setFontSize(12);
doc.text(`Student Name: ${studentName}`, 20, 30);
doc.text(`Course Title: ${courseTitle}`, 20, 40);
doc.text(`Week: ${week}`, 20, 50);
// Add section headers and content with some line spacing
doc.setFontSize(12);
doc.text("1. Overview of Work Done:", 20, 60);
doc.setFont("times", "normal");
doc.text(doc.splitTextToSize(overview, 170), 20, 70);
doc.setFont("times", "bold");
doc.text("2. Deliverables:", 20, 90);
doc.setFont("times", "normal");
doc.text(doc.splitTextToSize(deliverables, 170), 20, 100);
doc.setFont("times", "bold");
doc.text("3. Challenges or Issues:", 20, 120);
doc.setFont("times", "normal");
doc.text(doc.splitTextToSize(challenges, 170), 20, 130);
doc.setFont("times", "bold");
doc.text("4. Action Items for Next Week:", 20, 150);
doc.setFont("times", "normal");
doc.text(doc.splitTextToSize(actionItems, 170), 20, 160);
doc.setFont("times", "bold");
doc.text("5. Feedback or Questions:", 20, 180);
doc.setFont("times", "normal");
doc.text(doc.splitTextToSize(feedback, 170), 20, 190);
doc.setFont("times", "bold");
doc.text("6. Reflection:", 20, 210);
doc.setFont("times", "normal");
doc.text(doc.splitTextToSize(reflection, 170), 20, 220);
// Save the PDF with a filename
doc.save(`Weekly_Report_${courseTitle}_Week_${week}.pdf`);
}
</script>
</body>
</html>