AI vam može napisati malu web-stranicu s kontrolnim popisom: označite dovršeni zadatak, brojač na vrhu pokaže koliko je ostalo, a gumbom „Kreni ispočetka” popis vraćate na početak za sljedeći put. Sve stane u jednu datoteku koja se otvara u pregledniku, bez instalacije i bez računa. Važno je odmah reći jedno ograničenje: popis iz ovog vodiča ne pamti oznake. Kad zatvorite ili osvježite stranicu, sve kreće od početka.
Što ćete dobiti
- popis zadataka podijeljen u skupine, s potvrdnim okvirom uz svaki zadatak;
- prekriženi tekst kad zadatak označite;
- brojač na vrhu, primjerice „Preostalo: 7 od 10”, i poruku „Sve je spremno!” kad sve označite;
- gumb „Kreni ispočetka” koji poništava sve oznake.
Za izradu je dovoljna besplatna verzija ChatGPT-a, Claudea ili Geminija te računalo s preglednikom i jednostavnim uređivačem teksta, kao što su Bilježnica u Windowsima ili TextEdit na Macu.
Upit za AI
Primjer je priprema rođendanske proslave. Zadatke u upitu zamijenite svojima, a broj u točkama 2 i 4 uskladite s brojem zadataka.
Napravi jednu HTML datoteku s interaktivnim kontrolnim popisom za pripremu rođendanske proslave.
Zadaci, točno ovim redom i u tri skupine:
Tjedan prije: Potvrditi broj gostiju; Naručiti tortu; Kupiti ukrase; Dogovoriti glazbu.
Dan prije: Kupiti piće i grickalice; Napuniti zvučnik i mobitel; Pripremiti tanjure i čaše.
Na dan proslave: Preuzeti tortu; Postaviti stol i ukrase; Osloboditi mjesto za kapute.
Zahtjevi:
1. Uz svaki zadatak potvrdni okvir. Kad ga označim, tekst zadatka neka bude prekrižen.
2. Na vrhu stalno prikazuj koliko je zadataka preostalo, u obliku “Preostalo: 7 od 10”.
3. Kad su svi zadaci označeni, umjesto brojača prikaži “Sve je spremno!”.
4. Dodaj gumb “Kreni ispočetka” koji poništava sve oznake i vraća brojač na 10 od 10.
5. Sav tekst na hrvatskom. Stranica mora biti čitljiva i na mobitelu.
6. Bez vanjskih biblioteka, fontova i poveznica. Sav CSS i JavaScript neka budu u istoj datoteci.
7. Napredak se ne mora spremati nakon zatvaranja stranice.
8. Kod neka bude kratak i jednostavan: jednostavan izgled, bez komentara, uvlačenje od dva razmaka.
9. Odgovori samo cijelim kodom u jednom bloku, bez objašnjenja.
Gotov primjer: preuzmite ga ili otvorite
Za vježbu je pripremljena jednostavna HTML datoteka s deset zadataka. Možete je preuzeti na računalo ili otvoriti primjer izravno u pregledniku.
Primjer sadrži stranicu s naslovom, tri skupine zadataka, brojačem koji ostaje na vrhu i kad se pomičete prema dolje te gumbom preko cijele širine. Na mobitelu su zadaci jedan ispod drugoga, a potvrdni okviri dovoljno veliki za prst. Napredak se ne sprema, kako je i traženo u točki 7.
Kako spremiti i otvoriti kod koji vam napravi AI
- Kopirajte cijeli kod. Koristite gumb za kopiranje u kutu bloka s kodom, a ne ručno označavanje, jer se tako lakše izgubi zadnji redak.
- Zalijepite ga u običan uređivač teksta. U Windowsima otvorite Bilježnicu. Na Macu u TextEditu dokument prije lijepljenja prebacite u običan tekst. Word i slični programi nisu prikladni jer dodaju vlastito oblikovanje.
- Spremite datoteku s nastavkom .html, primjerice
kontrolni-popis.html. Pri spremanju odaberite kodiranje UTF-8, a kao vrstu datoteke opciju za sve datoteke, kako uređivač ne bi dodao .txt na kraj imena. - Dvaput kliknite datoteku. Otvorit će se u zadanom pregledniku. Internetska veza za to nije potrebna.
Ako koristite Claude, isti kod možete pregledati i izravno u razgovoru, kao artefakt. Kako to izgleda, objasnili smo u tekstu Što su Claude Artifacts i što u njima možete napraviti?
Provjerite popis prije prve upotrebe
Datoteku koju napravi AI isprobajte prije nego što se na nju oslonite. Ovo su koraci i rezultat koji morate dobiti:
| Što napravite | Što mora pisati na vrhu | Što još provjeriti |
|---|---|---|
| Otvorite stranicu | Preostalo: 10 od 10 | Nijedan okvir nije označen |
| Označite tri zadatka | Preostalo: 7 od 10 | Označeni zadaci su prekriženi |
| Označite sve zadatke | Sve je spremno! | Svih deset okvira je označeno |
| Kliknite „Kreni ispočetka” | Preostalo: 10 od 10 | Nijedan okvir više nije označen |
| Označite dva zadatka, zatvorite i ponovno otvorite stranicu | Preostalo: 10 od 10 | Oznake se nisu spremile |
Provjerite svih pet koraka i u pregledniku koji sami koristite. Primjer nema ugrađeno spremanje oznaka; nakon ponovnog otvaranja provjerite vraća li se brojač na početak.
Ako nešto ne radi
- Umjesto popisa vidite kod. Datoteka je spremljena kao tekst. Provjerite završava li ime na .html, a ne na .html.txt.
- Umjesto č, ć, š, ž i đ vidite čudne znakove. Datoteku ponovno spremite i odaberite kodiranje UTF-8.
- Brojač se ne mijenja. Vratite se u isti razgovor i napišite: „Kad označim zadatak, brojač se ne mijenja. Pronađi pogrešku i vrati cijeli ispravljeni kod.” Zatim ponovite provjeru iz tablice.
- Nedostaje zadatak ili je promijenjen redoslijed. Usporedite popis na stranici s upitom i zatražite ispravak samo tog dijela.
Želite da popis pamti oznake?
U točki 7 možete zatražiti suprotno: „Spremaj oznake u preglednik, tako da ostanu i nakon zatvaranja stranice.” AI će tada najčešće upotrijebiti spremište preglednika, takozvani localStorage. Oznake se tada pamte samo u tom pregledniku na tom uređaju i nestaju ako obrišete podatke preglednika. Na drugom računalu ili mobitelu popis će opet biti prazan. Ako zatražite spremanje, ponovite zadnji redak iz tablice i provjerite jesu li oznake doista ostale.
Na isti način možete napraviti i druge male alate za sebe. Primjer s izračunom cijene donijeli smo u vodiču Napravite svoj kalkulator ponude uz AI.
Izvori
MDN Web Docs: Window.localStorage
OpenAI Help Center: Prompt engineering best practices for ChatGPT
