1.3 Salīdzini spēles lapas un nosūti darbu uz GitHub
Šodien: Izvēlies saprotamu spēles pogu un nosūti savu lapu uz GitHub.
Īsā teorija
Pogas teksts pasaka, kas notiks pēc klikšķa. Raksti konkrētu darbību: Sākt spēli , Mēģināt vēlreiz .
Salīdzinot divus risinājumus, izmēģini vienu un to pašu darbību abos.
Publish to GitHub pirmoreiz nosūta projektu uz GitHub. Pēc tam lieto Commit un Sync Changes .
<button>Sākt spēli</button>
Sākuma kods un darba vieta
Vide: mācību lapa → VS Code
-
VS Code ar
File → Open Folder
atver
Desktop/datorika9-tema1. Ja mapes nav, izveido to darbvirsmā. - Šajā mācību lapā nospied Kopēt sākuma kodu .
- VS Code nospied Ctrl+N un ielīmē kodu ar Ctrl+V .
-
Saglabā ar
Ctrl+Shift+S
tēmas mapē kā
13.html.
Atvērt pilno sākuma kodu
<!DOCTYPE html>
<html lang="lv">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mana spēle</title>
<style>
body { font-family: Arial, sans-serif; max-width: 680px; margin: 24px auto; padding: 16px; line-height: 1.6; }
button, input { font: inherit; padding: 10px; margin: 4px; }
button { cursor: pointer; }
img { max-width: 100%; height: auto; }
[hidden] { display: none !important; }
</style>
</head>
<body>
<h1>Divi spēles pogas varianti</h1>
<section>
<h2>A variants</h2>
<button onclick="document.getElementById('atbilde').textContent='Spēle sākta!'">Spied šeit</button>
</section>
<section>
<h2>B variants</h2>
<button onclick="document.getElementById('atbilde').textContent='Spēle sākta!'">Sākt spēli</button>
</section>
<p id="atbilde">Izmēģini abas pogas.</p>
<h2>Mana izvēle</h2>
<p>Manai spēlei būs poga:</p>
</body>
</html>
1. uzdevums
Izmēģini divus variantus
Vide: VS Code → pārlūks
-
Sāc ar failu
13.html. Atver to pārlūkā. - Nospied katru pogu. Nosaki, kuras pogas teksts skaidrāk pasaka darbību.
- Pasaki savu izvēli klasesbiedram.
Gatavs, kad: Esi izmēģinājis abas pogas.
2. uzdevums
Izveido savu pogas variantu
Vide: VS Code
-
Sadaļā
Mana izvēlerindkopā ieraksti savas spēles nosaukumu. -
Nokopē visu B varianta
<button>...</button>rindu un ielīmē zem šīs rindkopas. -
Nomaini jaunās pogas tekstu atbilstoši savai spēlei, piemēram,
Sākt zvaigžņu medības.
Gatavs, kad: Lapā ir trešā poga ar paša izvēlētu, skaidru tekstu.
3. uzdevums
Publicē projekta failus
Vide: VS Code / Source Control → pārlūks
-
Pārbaudi savu pogu pārlūkā: pēc klikšķa redzams
Spēle sākta!. -
VS Code veic
Stage Changes (+)
un
Commit
ar ziņu
Pievienota spēles poga. - Spied Publish to GitHub . Pārlūkā pieslēdzies savam kontam un apstiprini VS Code piekļuvi, ja to prasa.
-
VS Code izvēlies
Publish to GitHub public repository
un nosaukumu
datorika9-tema1. Ja parādās failu atlase, atstāj savus mācību failus. Ja projekts jau publicēts, lieto Sync Changes . -
GitHub atver savu projektu un tajā
13.html. Pārbaudi, vai kodā ir jaunās pogas teksts.
Gatavs, kad: GitHub projektā ir tavs 13.html ar darbojošos pogu.
Iesniedz 3. uzdevuma rezultātu
Iesniedz pabeigto
13.html
skolotāja norādītajā vietā. Šo pašu versiju saglabā arī GitHub.
Stunda ir ieskaitīta, ja 3. uzdevuma rezultāts atbilst visiem šiem punktiem:
- Saglabāti abi salīdzināmie varianti.
- Paša izveidotās pogas teksts nosauc darbību, un poga parāda ziņu.
- GitHub projektā redzams atjaunotais fails.
1. un 2. uzdevums sagatavo šo rezultātu. Papildu uzdevums nav vajadzīgs ieskaitei.
Saglabā un nosūti uz GitHub — pogu atgādne
Vide: VS Code / Source Control → GitHub pārlūkā
- Ar File → Save All saglabā failus. Atver Source Control ar Ctrl+Shift+G .
- Pie Changes nospied + (Stage All Changes). Pārbaudi, ka vajadzīgie faili pārvietojas uz Staged Changes .
-
Ziņas laukā ieraksti īsu izmaiņu, piemēram,
Pabeigts 1.3 darbs. Spied Commit . -
Ja šī tēmas mape vēl nav GitHub, spied
Publish to GitHub
un izveido publisku projektu
datorika9-tema1. Jau publicētam projektam spied Sync Changes . Ja pogas nav, atver … → Push . - Pārlūkā atver savu GitHub projektu un pārbaudi faila pēdējās izmaiņas.
Ja Source Control rāda Initialize Repository , vispirms nospied to. Ja parādās kļūda vai sapludināšanas pieprasījums, izmanto palīdzību un palūdz skolotāja atbalstu.
Papildu uzdevums: Uzlabojums abiem variantiem
Sāc, kad 3. uzdevums ir gatavs un iesniegts. Ja vēlies paturēt obligāto versiju, saglabā kopiju ar citu nosaukumu.
- Nomaini arī A varianta pogas tekstu uz konkrētu darbību.
- Pārbaudi, vai abas pogas joprojām darbojas.
Ja kaut kas neizdodas
-
Neredzi izmaiņas?
VS Code nospied Ctrl+S. Pārlūkā nospied Ctrl+R. Pārbaudi, ka atvērts tieši
13.html. - Kods redzams kā teksts? Saglabā ar galotni .html. Windows ieslēdz View → Show → File name extensions un pārbaudi, ka beigās nav .txt.
- Poga nestrādā? Pārbaudi, vai neizdzēsi pēdiņu, iekavu vai elementa id. Salīdzini savu laboto vietu ar sākuma kodu.
- Nesaproti nākamo soli? Atrodi pirmo nepabeigto soli un parādi skolotājam tieši šo vietu.