-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
266 lines (244 loc) · 17.7 KB
/
index.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
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
<!DOCTYPE html>
<html lang="no-NB">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Klassekart</title>
<link rel="stylesheet" href="style.css" />
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" sizes="180x180" href="Klassekartbyggeren.png">
<link rel="icon" type="image/png" sizes="32x32" href="Klassekartbyggeren.png">
<link rel="icon" type="image/png" sizes="16x16" href="Klassekartbyggeren.png">
</head>
<body>
<button id="toggle-sidebar" class="button" type="button">☰</button>
<div id="menu-placeholder" role="navigation" aria-label="Main navigation" class="sidebar"></div>
<header role="banner">
<h1>Klassekartbyggeren 👷♂️</h1>
</header>
<main role="main">
<div id="toggle-fixed-settings-container">
<button id="toggle-fixed-settings" class="button" type="button">Lag klassekart manuelt</button> <!-- New button to toggle fixed-settings -->
</div>
<div id="fixed-settings" class="hidden"> <!-- Add hidden class initially -->
<!-- Removed settings-button -->
<!-- Move buttons from settings-section to fixed-settings -->
<div class="button-group">
<label for="num-rows">Antall rader:</label>
<br>
<input type="number" id="num-rows" min="1" value="10">
<br>
<label for="num-cols">Antall kolonner:</label>
<input type="number" id="num-cols" min="1" value="4">
</div>
<div class="button-group">
<button id="add-group-button" class="button" type="button">Legg til gruppe</button>
<button id="add-student-button" class="button" type="button">Legg til elev</button>
<button id="add-row-button" class="button hidden" type="button">Legg til boks</button>
<button id="remove-row-button" class="button hidden" type="button">Slett boks</button>
<button id="toggle-visibility-button" class="button hidden" type="button">Vis/skjul linjer</button>
<button id="groups-button" class="button" type="button">Hjelp</button>
</div>
</div>
<form id="student-form" aria-labelledby="student-form-heading">
<h2 id="student-form-heading">Slik gjør du</h2>
<h4>For å lage et klassekart må du gjøre følgende:</h4>
<p>1. Velg hvordan du ønsker å plassere elevene</p>
<p>2. Skriv inn navnene på elevene i tekstboksen eller hent elever fra en fil med filtypen .txt-</p>
<p>3. Juster klassekartet litt lenger ned på siden ved å bruke dra og slipp</p>
<p>4. Ta et skjermbilde eller skriv ut klassekartet ved å trykke på CTRL+P</p>
<br>
<h4>Du finner flere valg via "Manuelle innstillinger" øverst i høyre hjørne</h4>
<br>
<h2>Steg 1: Hvordan ønsker du å plassere elevene?</h2>
<p>Velg kun en av disse:</p>
<label for="sit-two-by-two"><input type="checkbox" id="sit-two-by-two"> Skal elevene sitte to og to</label><label for="seating-style">eller i grupper med </label><input type="number" id="seating-style" min="1" value="1"> elever pr gruppe?
<br>
<br>
<h2 id="student-form-heading">Steg 2: Elevenes navn</h2>
<br>
<label for="student-names"><h4>Skriv navnene til elevene (ett navn pr linje)</h4></label>
<textarea id="student-names" rows="5" placeholder="Skriv inn fornavnene på elevene, én per linje"></textarea>
<div class="button-group">
<button id="fetch-students" class="button" type="button">Hent elever</button>
<button id="fill-example-students" class="button" type="button">Fyll inn eksempelelever</button>
<button id="generate-button" class="button" type="button">Oppdater klassekart</button>
<button id="reset-button" class="button" type="button">Nullstill klassekart</button> <!-- Moved reset-button here -->
<input type="file" id="file-input" accept=".txt" style="display: none;">
<button id="toggle-pedagogical-considerations" class="button" type="button">Pedagogiske tips</button> <!-- New button -->
<button id="toggle-generate-seating-heading" class="button" type="button">Tekniske tips</button>
<button id="export-png" class="button" type="button">Last ned som bilde</button> <!-- Moved button here -->
</div>
</form>
<section id="settings-section" class="collapsible" aria-labelledby="settings-heading" aria-hidden="true">
<h2 id="settings-heading">Bygg dit eget klasserom</h2>
<!-- Remove buttons from here -->
<br>
<button id="apply-settings" class="button" type="button">Bruk</button>
</section>
<section id="generate-seating" class="hidden" aria-labelledby="generate-seating-heading"> <!-- Add hidden class initially -->
<h2 id="generate-seating-heading">Tekniske tips</h2>
<h4>Gjør manuelle tilpasninger i klassekartet, du finner klassekartet litt lenger ned på siden.</h4>
<p>OBS: Hvis du gjør manuelle endringer i klassekartet, vil knappen "Oppdater klassekart" endre oppsettet til det som er valgt i Steg 1.</p>
<br>
<h4>Valgmuligheter</h4>
<li>Flytt boksene ved å dra og slippe direkte i klassekartet</li>
<li>Legg til flere grupper, elever eller rader ved å bruke knappene under "Lag klassekart manuelt" (fungerer best dersom du legger elevene inn manuelt ved bruk av knappen Legg til elev)</li>
<li>Trykk på "Oppdater klassekart" for å generere klassekartet på nytt med valgte innstillinger</li>
<li>Teksten Klassekart, Romnummer, Elevens navn og Kateter kan endres ved å klikke på teksten</li>
<br>
<h4>Ta et skjermbilde for å lagre klassekartet
</h4>
<div class="button-group">
<a href="#advanced-requirements" id="toggle-advanced-requirements" class="button" aria-expanded="false" aria-controls="advanced-requirements">Avanserte krav</a>
</div>
<br>
</section>
<section id="groups-section" class="hidden" aria-labelledby="groups-heading"> <!-- Add hidden class initially -->
<h2 id="groups-heading">Hjelp</h2>
<br>
<h3>Lage en importfil</h3>
<p>For å lage en importfil, skriv inn navnene på elevene i Word og lagre filen med filtypen .txt</p>
<br>
<img src="LagreTXT.png" alt="lagre som .txt-fil i Word" width="400" height="350">
<br>
<h3>Kjente feil</h3>
<li>Når nettsiden oppdateres ved å bruke CTRL+F5 eller oppdaterknappen må klassekartet kan det være nødvendig å klikke på knappen "Nullstill klassekart"</li>
<li>Det er kun mulig å laste opp tekstfiler i filformatet .txt, se veiledning for hvordan du gjør dette via Word under knappen "Brukerveiledning" i venstremenyen</li>
<li>Utskrift av klassekartet fungerer ikke optimalt</li>
<li>Endring av antall rader og kolonner kan gjøre at klassekartet ikke ser så bra ut. Bruk knappen oppdater klassekart etter å ha gjort innstillinger slik at klassekartet blir oppdatert</li>
<li>Elever, grupper og bokser forsvinner fra klassekartet når du endrer antall rader og kolonner, trykk oppdater klassekart, da blir de synlige igjen, elever og grupper som er lagt inn manuelt forsvinner fra klassekartet</li>
</section>
<section id="advanced-requirements" class="collapsible" aria-labelledby="advanced-requirements-heading" aria-hidden="true">
<h2 id="advanced-requirements-heading">Avanserte krav</h2>
<label for="front-row-students">Elever som skal sitte foran:</label>
<textarea id="front-row-students" rows="3" placeholder="Skriv inn navnene på eleven, én per linje"></textarea>
<label for="back-row-students">Elever som skal sitte bak:</label>
<textarea id="back-row-students" rows="3" placeholder="Skriv inn navnene på elevene, én per linje"></textarea>
<label for="together-students">Elever som skal sitte sammen:</label>
<textarea id="together-students" rows="3" placeholder="Skriv inn navnene på elevene, én per linje"></textarea>
<label for="apart-students">Elever som ikke skal sitte sammen:</label>
<textarea id="apart-students" rows="3" placeholder="Skriv inn navnene på elevene, én per linje"></textarea>
</section>
<section id="export-section" class="hidden" aria-labelledby="export-heading"> <!-- Add hidden class initially -->
<div class="text" id="pedagogiske-tips"></div> <h1>Pedagogiske tips</h1> </div>
<p>Når vi skal plassere elevene i klasserommet eller dele inn i grupper er det flere ting vi bør tenke på.</p>
<br>
<p>Individuelle fokus, tilgang til læreren, behov for å sitte sammen med en venn eller sitte alene for å nevne noen områder.</p>
<p>Tenk spesielt på potensielle distrakasjoner, behov for personlig rom, samarbeid og balanse.
<p>Husk at elevene har varierte ferdigheter og preferanser knyttet til kommunikasjon</p>
<p>Du finner flere tips og råd under nedenfor</p>
<p>Skoleprogrammet VIP Makkerskap skal gjøre elever bedre rustet til å ta vare på egen psykisk helse og skape et godt og trygt læringsmiljø. <href="https://www.vestfoldfylke.no/no/meny/tjenester/folkehelse/barnehager-og-skoler/ungdomsskoler/">Les mer om VIP Makkerskap programmet her</a></p>
<br>
<h2>Områder å være oppmersome på</h2>
<p><strong>Individuelle fokus</strong>
<li>Plasser elever som trenger ekstra hjelp i nærheten av læreren</p></li>
<li>Plasser elever som lett blir distrahert, lengst unna vinduer og dører.</p></li>
<li>Gi hver elev nok plass til å føle seg komfortabel og unngå å føle seg "låst".</p></li>
<li>Sørg for at alle elever har tilgang til deg for spørsmål og veiledning tilpasset behov.</p></li>
<br>
<p><strong>Når elevene skal sitte to og to</strong></p>
<li>Ved å sitte to og to kan de hjelpe hverandre med å forstå vanskelige konsepter og gi tilbakemeldinger</p></li>
<li>Noen elever kan ha god nytte av å ha en makker som kan gi støtte og motivasjon, spesielt hvis de føler seg usikre eller trenger litt ekstra hjelp</li>
<li>Plasser elever sammen som kan samarbeide godt og støtte hverandre faglig.</p></li>
<li>Unngå å plassere to elever sammen som kan forstyrre hverandre eller som har en historie med konflikter, dette kan endre seg rask, vær oppmerksom på endringer i klassemiljøet.</p></li>
<li>Kombiner elever med ulike styrker for å fremme læring og samarbeid.</p></li>
<li>Forsøk å ha makkerpar med kommunikasjonsstiler som ikke forstyrrer andre. Kommunikasjonsstilene kan være svært annerledes når de er to og to enn når de jobber alene</p></li>
<br>
<p><strong>Når elevene skal sitte i grupper</strong></p>
<li>Grupper med 3-4 elever kan være en god størrelse for samarbeid og diskusjon.</p></li>
<li>Grupper med 5-6 elever kan være en god størrelse for gruppearbeid og prosjekter.</p></li>
<li>Plasser grupper slik at de har nok plass til å jobbe sammen uten å forstyrre andre grupper.</p></li>
<li>Lag grupper som kan få muligheten til å sette seg et annet sted enn i klasserommet, slik at de som trenger ekstra støtte fra lærer får mulighet til arbeidsro og unngår eksterne forstyrrelser</p></li>
<li>Sørg for at hver gruppe har en blanding av ferdigheter og personligheter for å fremme samarbeid og læring.</p></li>
<li>Oppmuntre til at hver elev i gruppen har en tydelig rolle for å sikre at alle bidrar.</p></li>
<li>Bytt på gruppene jevnlig for å gi elevene mulighet til å samarbeide med ulike personer og lære av hverandre.</p></li>
<li>Plasser grupper slik at læreren enkelt kan bevege seg rundt og gi veiledning.</p></li>
<br>
<h2>Tips til gruppeinndeling</h2>
<li>Bruk tilfeldige metoder som trekning eller digitale verktøy som for eksempel Klassekartbyggeren👷♂️ for å danne grupper. Dette kan fremme nye vennskap og samarbeid.</p></li>
<li>Del inn grupper basert på elevenes ferdigheter og interesser for å sikre at hver gruppe har en god balanse.</p></li>
<li>La elevene velge sine egne grupper av og til for å fremme trivsel og komfort.</p></li>
<li>Bytt på gruppene jevnlig for å gi elevene mulighet til å samarbeide med ulike personer og lære av hverandre.</p></li>
<li>Gi elevene mulighet til å gi tilbakemelding på gruppene og samarbeidet for å fremme læring og samarbeid.</p></li>
<li>Oppmuntre til at hver elev i gruppen har en tydelig rolle for å sikre at alle bidrar.</p></li>
<div class="button-group">
<button id="export-pdf" class="button" type="button">Eksporter som PDF</button>
<button id="export-png" class="button" type="button">Last ned som bilde</button> <!-- Ensure button is visible -->
</div>
</section>
<br>
<br>
<div class="editable-container">
<h2 id="editable-title" contenteditable="true" role="textbox" aria-multiline="true">Klassekart</h2>
<h3 id="editable-room-number" contenteditable="true" role="textbox" aria-multiline="true">Romnummer</h3>
</div>
<section id="seating-chart" aria-label="Seating chart">
<div id="kateter-cell" class="seating-cell kateter-row" draggable="true">
<input id="kateter-text" type="text" value="Kateter" aria-label="Kateter" readonly />
</div>
<!-- Seating chart grid will be generated here -->
</section>
</main>
<script src="script.js"></script>
<script src="jspdf.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
fetch('menu.html')
.then(response => response.text())
.then(data => {
document.getElementById('menu-placeholder').innerHTML = data;
});
const toggleSidebarButton = document.getElementById('toggle-sidebar');
const sidebar = document.getElementById('menu-placeholder');
toggleSidebarButton.addEventListener('click', () => {
sidebar.classList.toggle('hidden');
document.querySelector('header').classList.toggle('full-width');
document.querySelector('main').classList.toggle('full-width');
});
const groupsButton = document.getElementById('groups-button');
const groupsSection = document.getElementById('groups-section');
groupsButton.addEventListener('click', () => {
groupsSection.classList.toggle('hidden'); // Toggle visibility of groups-section
});
const fixedSettings = document.getElementById('fixed-settings');
const toggleFixedSettingsButton = document.getElementById('toggle-fixed-settings');
toggleFixedSettingsButton.addEventListener('click', () => {
fixedSettings.classList.toggle('hidden');
});
const toggleGenerateSeatingHeadingButton = document.getElementById('toggle-generate-seating-heading');
const generateSeatingSection = document.getElementById('generate-seating');
toggleGenerateSeatingHeadingButton.addEventListener('click', () => {
generateSeatingSection.classList.toggle('hidden');
});
const togglePedagogicalConsiderationsButton = document.getElementById('toggle-pedagogical-considerations');
const exportSection = document.getElementById('export-section');
togglePedagogicalConsiderationsButton.addEventListener('click', () => {
exportSection.classList.toggle('hidden');
});
const toggleVisibilityButton = document.getElementById('toggle-visibility-button');
toggleVisibilityButton.addEventListener('click', () => {
const elements = document.querySelectorAll('.grid-resizer.horizontal, .grid-resizer.vertical, #seating-cell');
elements.forEach(element => {
element.classList.toggle('hidden-lines');
});
const seatingCells = document.querySelectorAll('.seating-cell');
seatingCells.forEach(cell => {
cell.classList.toggle('hidden-border');
});
});
// Ensure elements are hidden by default
const elements = document.querySelectorAll('.grid-resizer.horizontal, .grid-resizer.vertical, #seating-cell');
elements.forEach(element => {
element.classList.add('hidden-lines');
});
const seatingCells = document.querySelectorAll('.seating-cell');
seatingCells.forEach(cell => {
cell.classList.add('hidden-border');
});
});
</script>
</body>
</html>