English
Készíts saját, számítógépen használható szótanuló kártyajátékot a következők segítségével.
További ötletek hamarosan a könyvtár MI oldalán lesznek elérhetők.
A ChatGPT-nek a következő utasítást adtam, amely kiegészíthető lenne a használni kívánt szavak párosaival, amelynek felhasználásával pontosabb és a tanulásra jobban használható kártyákat hoznánk létre. Hasonló módon, ha megvannak pl. a magyar és/vagy angol szavak akkor hasonló szókártyákat tudna létrehozni
1) Angol szavak tanulása
A prompt:
“Készíts nekem egy html kódot, amely az alábbi magyar szavak éa angol párjuk gyakorlására szolgál magyar nyelven flashcard formában. Véletlenszerű sorrendben jelenjenek meg a magyar elnevezések, de közben számolja, hogy mind sorra kerüljön és ha mind volt, akkor kezdje elölről.”
A prompt alapján kapott kódot kimásolva és akár egy jegyzettömbbe másolva, majd elnevezve és .html kiterjesztéssel elmentve egy böngészőben megjeleníthető “játékot” kapunk: Angol szavak
A kód:
2) Kutya csontok
A prompt
“Készíts nekem egy html kódot, amely a kutya csontjainak magyar és latin nyelvű és elnevezéseinek gyakorlására szolgál magyar nyelven flashcard formában. A magyar kifejezések legyenek kék hátterű kártyán, a latinok zöld hátterű kártyákon. Véletlenszerű sorrendben jelenjenek meg a magyar elnevezések, de közben számolja, hogy mind sorra kerüljön és ha mind volt, akkor kezdje elölről.”
A prompt alapján kapott kódot kimásolva és akár egy jegyzettömbbe másolva, majd elnevezve és .html kiterjesztéssel elmentve egy böngészőben megjeleníthető “játékot” kapunk: A kutya csontjai – példa játék
A kapott kód – amely a jegyzettömbben akár módosítható is, hogy további szópárokat adjunk hozzá:
<!DOCTYPE html>
<html lang=”hu”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Kutya csontjai flashcardok</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
}
.card {
width: 300px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
color: white;
font-size: 24px;
cursor: pointer;
transition: transform 0.3s;
}
.card:hover {
transform: scale(1.05);
}
.hungarian {
background-color: blue;
}
.latin {
background-color: green;
}
</style>
</head>
<body>
<div id=”flashcard” class=”card hungarian” onclick=”showLatin()”></div>
<script>
const bones = [
{ hungarian: “Koponya”, latin: “Cranium” },
{ hungarian: “Állkapocs”, latin: “Mandibula” },
{ hungarian: “Nyakcsigolyák”, latin: “Vertebrae cervicales” },
{ hungarian: “Lapocka”, latin: “Scapula” },
{ hungarian: “Felkarcsont”, latin: “Humerus” },
{ hungarian: “Alkarcsontok”, latin: “Ulna et Radius” },
{ hungarian: “Csigolyák”, latin: “Vertebrae” },
{ hungarian: “Medencecsont”, latin: “Os coxae” },
{ hungarian: “Combcsont”, latin: “Femur” },
{ hungarian: “Sípcsont”, latin: “Tibia” },
{ hungarian: “Szárkapocscsont”, latin: “Fibula” },
{ hungarian: “Bordák”, latin: “Costae” }
];
let currentIndex = 0;
let showingHungarian = true;
const flashcard = document.getElementById(‘flashcard’);
function shuffle(array) {
for (let i = array.length – 1; i > 0; i–) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
}
function showHungarian() {
if (currentIndex >= bones.length) {
shuffle(bones);
currentIndex = 0;
}
flashcard.className = ‘card hungarian’;
flashcard.textContent = bones[currentIndex].hungarian;
showingHungarian = true;
}
function showLatin() {
if (showingHungarian) {
flashcard.className = ‘card latin’;
flashcard.textContent = bones[currentIndex].latin;
showingHungarian = false;
} else {
currentIndex++;
showHungarian();
}
}
shuffle(bones);
showHungarian();
</script>
</body>
</html>