Canvas Gemini Ai

PERMAINAN BAHASA - APLIKASI

PROMPT MUDAH

PROMPT MUDAH

1.1 Ayat Prompt:

Saya guru Prasekolah yang mengajar murid berusia 5 tahun dan 6 tahun. Bantu saya untuk menghasilkan permainan bahasa 'object catcher'. Objek jatuh dari atas, murid perlu catch objek tersebut berdasarkan pop up perkataan yang keluar. Skor terkumpul disediakan. Senarai objek terdiri daripada kata nama am iaitu meja, buku, pensil, basikal, kereta, bas, beg sekolah, air, dan kasut sekolah. Objek-objek bukan daripada senarai kata nama tadi adalah pengganggu yang akan jatuh dari atas. Murid perlu catch objek yang betul. Aplikasi perlu berwarna warni dalam format 2D game.

1.2 Struktur Prompt R-T-F:

ROLE (PERANAN):

Saya guru Prasekolah yang mengajar murid berusia 5 tahun dan 6 tahun.

TASK (TUGASAN):

Bantu saya untuk menghasilkan permainan bahasa 'object catcher'.

FORMAT (FORMAT):

Objek jatuh dari atas, murid perlu catch objek tersebut berdasarkan pop up perkataan yang keluar. Skor terkumpul disediakan. Senarai objek terdiri daripada kata nama am iaitu meja, buku, pensil, basikal, kereta, bas, beg sekolah, air, dan kasut sekolah. Objek-objek bukan daripada senarai kata nama tadi adalah pengganggu yang akan jatuh dari atas. Murid perlu catch objek yang betul. Aplikasi perlu berwarna warni dalam format 2D game. Hasilkan kod yang sesuai dan tepat serta boleh diembed dan dimainkan dalam Google Site.

PROMPT KOMPLEKS

2. PROMPT KOMPLEKS:

1.1 Contoh Foto Reka bentuk Permainan Bahasa:

1.2 Ayat Prompt Kompleks:

Saya seorang guru prasekolah yang mengajar murid prasekolah berusia 5 tahun dan 6 tahun. Saya ingin menghasilkan sebuah permainan bahasa interaktif bertajuk “SIAPA SAYA?” seperti paparan gambar yang dilampirkan.

PAPARAN UTAMA:

BUTANG: MULA PERMAINAN

Peserta akan klik butang MULA PERMAINAN untuk memulakan permainan.

Kiraan masa permainan bermula sebaik sahaja peserta klik butang MULAKAN PERMAINAN.

PAPARAN PERMAINAN:

GAMBAR:

Kotak berwarna dengan kod warna: #000099.

Saiz kotak perlu sesuai dengan paparan kandungan permainan.

Sediakan BUTANG berwarna dengan label LIHAT GAMBAR SEBELUMNYA di sebelah kiri bahagian bawah kotak GAMBAR. Butang LIHAT GAMBAR SEBELUMNYA tidak muncul semasa paparan gambar pertama. Butang LIHAT GAMBAR SEBELUMNYA hanya akan mucul pada paparan gambar kedua hingga gambar terakhir.

Sediakan BUTANG berwarna dengan label LIHAT GAMBAR SETERUSNYA. Gambar akan dipaparkan bila peserta klik butang LIHAT GAMBAR SETERUSNYA. Butang LIHAT GAMBAR SETERUSNYA berada di sebelah kanan bahagian bawah kotak GAMBAR.

Senarai gambar adalah seperti berikut:

Terdapat 6 gambar berasingan. Sediakan gambar emoji bagi senarai perkataan berikut:

GAMBAR 1: BUKU

GAMBAR 2: KERUSI

GAMBAR 3: LAMPU

GAMBAR 4: KERETA

GAMBAR 5: JAM

GAMBAR 6: BEG

EJA PERKATAAN merupakan kotak kosong. Pada kotak kosong itu akan terpapar kotak-kotak huruf mengikut jumlah huruf bagi ejaan objek gambar yang terpapar. Murid mengeja perkataan dengan dengan klik huruf, seret dan letakkan pada ruang kotak-kotak huruf EJA PERKATAAN. Jumlah kotak-kotak huruf itu bergantung pada jumlah huruf bagi ejaan objek gambar yang terpapar. Ejaan dikira betul jika gambar yang menjadi rujukan adalah betul. Kod warna Kotak 3: #FFFFFF

PILIH HURUF DAN SUSUN DI RUANG EJA PERKATAAN merupakan ruang papan kekunci (keyboard) huruf “A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z”. Susunan huruf-huruf pada papan kekunci (keyboard) dalam 3 baris (10,10,6). Murid perlu pilih huruf yang betul, klik huruf, hold huruf, seret huruf dan masukkan

huruf (drag and drop) ke dalam kotak EJA PERKATAAN. Klik, seret huruf dan masukkan huruf (drag dan drop) ke dalam kotak tidak akan menghilangkan huruf pada papan kekunci (keyboard). Huruf-huruf pada papan kekunci (keyboard) itu masih kekal setiap kali peserta pilih huruf yang betul, klik huruf, hold huruf, seret huruf dan masukkan huruf (drag and drop) ke dalam kotak EJA PERKATAAN. Kod warna Kotak 4: #D9F2D0

BUTANG: Sediakan butang berwarna yang sesuai dengan warna LATAR bagi item berikut:

1. MARKAH memaparkan jumlah markah terkumpul. Kod warna kotak: #FFD9D9

2. KIRAAN MASA. Kod warna kotak: #D9F2D0

3. SEMAKAN JAWAPAN bagi ejaan sama ada betul atau salah berdasarkan objek yang dipaparkan.

Kod warna kotak: #CAEDFB.

4. GANJARAN: Jika jawapan betul dipaparkan “Tahniah! Jawapan anda betul.” Kod warna kotak jika jawapan betul: #CCFF66, jika jawapan salah dipaparkan “Jawapan salah. Sila cuba lagi.” Kod warna kotak jika jawapan salah: #F2CEED

5. CUBA LAGI: untuk memberi peluang murid mencuba semula. Kod warna kotak: #F2CEED

6. TAMAT PERMAINAN. Kod warna kotak: #FF6565

PAPARAN PERMAINAN TAMAT:

Bila peserta menekan butang TAMAT PERMAINAN di bahagian kawalan, skrin PERMAINAN TAMAT! akan muncul. Skrin PERMAINAN TAMAT! akan memaparkan markah akhir dan masa yang digunakan apabila peserta menekan butang tersebut. Terdapat juga butang MAIN SEMULA pada skrin tamat.

Hasilkan kod yang sesuai dan tepat serta boleh diembed dan dimainkan dalam Google Site.

1.3 Struktur Prompt R-T-F:

ROLE (PERANAN):

Saya seorang guru prasekolah yang mengajar murid prasekolah berusia 5 tahun dan 6 tahun.

TASK (TUGASAN):

Saya ingin menghasilkan sebuah permainan bahasa interaktif bertajuk “SIAPA SAYA?” seperti paparan gambar yang dilampirkan.

FORMAT (STRUKTUR FORMAT)

1) 3 Paparan Permainan:
a. Paparan Utama

b. Paparan Permainan

c. Paparan Permainan Tamat

2) Butang Permainan:

a. Mulakan Permainan.

b. Lihat Gambar Sebelumnya

c. Lihat Gambar Seterusnya

d. Mulakan Permainan

e. Markah. Kod warna kotak: #FFD9D9

f. Kiraan Masa. Kod warna kotak: #D9F2D0

g. Semakan Jawapan. Kod warna kotak: #CAEDFB

h. Ganjaran. Kod warna kotak jika jawapan betul: #CCFF66. Kod warna kotak jika jawapan salah: #F2CEED

i. Cuba Lagi. Kod warna kotak: #F2CEED

j. Tamat Permainan. Kod warna kotak: #FF6565

k. Main Semula

3) Gambar: Format gambar emoji

a. Buku

b. Kerusi

c. Lampu

d. Kereta

e. Jam

f. Beg

4) Kotak:

a. Kotak Gambar. Kotak berwarna dengan kod warna: #000099

b. Kotak Eja Perkataan. Kod warna Kotak 3: #FFFFFF

c. Kotak Pilih Huruf dan Susun Di Ruang Eja Perkataan (papan kekunci).Kod warna Kotak 4: #D9F2D0

5) Format coding:

Kod yang sesuai dan tepat serta boleh diembed dan dimainkan dalam Google Site.

FORMAT (FORMAT KOMPLEKS):

PAPARAN UTAMA:

BUTANG: MULA PERMAINAN

Peserta akan klik butang MULA PERMAINAN untuk memulakan permainan.

Kiraan masa permainan bermula sebaik sahaja peserta klik butang MULAKAN PERMAINAN.

PAPARAN PERMAINAN:

GAMBAR:

Kotak berwarna dengan kod warna: #000099.

Saiz kotak perlu sesuai dengan paparan kandungan permainan.

Sediakan BUTANG berwarna dengan label LIHAT GAMBAR SEBELUMNYA di sebelah kiri bahagian bawah kotak GAMBAR. Butang LIHAT GAMBAR SEBELUMNYA tidak muncul semasa paparan gambar pertama. Butang LIHAT GAMBAR SEBELUMNYA hanya akan mucul pada paparan gambar kedua hingga gambar terakhir.

Sediakan BUTANG berwarna dengan label LIHAT GAMBAR SETERUSNYA. Gambar akan dipaparkan bila peserta klik butang LIHAT GAMBAR SETERUSNYA. Butang LIHAT GAMBAR SETERUSNYA berada di sebelah kanan bahagian bawah kotak GAMBAR.

Senarai gambar adalah seperti berikut:

Terdapat 6 gambar berasingan. Sediakan gambar emoji bagi senarai perkataan berikut:

GAMBAR 1: BUKU

GAMBAR 2: KERUSI

GAMBAR 3: LAMPU

GAMBAR 4: KERETA

GAMBAR 5: JAM

GAMBAR 6: BEG

EJA PERKATAAN merupakan kotak kosong. Pada kotak kosong itu akan terpapar kotak-kotak huruf mengikut jumlah huruf bagi ejaan objek gambar yang terpapar. Murid mengeja perkataan dengan dengan klik huruf, seret dan letakkan pada ruang kotak-kotak huruf EJA PERKATAAN. Jumlah kotak-kotak huruf itu bergantung pada jumlah huruf bagi ejaan objek gambar yang terpapar. Ejaan dikira betul jika gambar yang menjadi rujukan adalah betul. Kod warna Kotak 3: #FFFFFF

PILIH HURUF DAN SUSUN DI RUANG EJA PERKATAAN merupakan ruang papan kekunci (keyboard) huruf “A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z”. Susunan huruf-huruf pada papan kekunci (keyboard) dalam 3 baris (10,10,6). Murid perlu pilih huruf yang betul, klik huruf, hold huruf, seret huruf dan masukkan

huruf (drag and drop) ke dalam kotak EJA PERKATAAN. Klik, seret huruf dan masukkan huruf (drag dan drop) ke dalam kotak tidak akan menghilangkan huruf pada papan kekunci (keyboard). Huruf-huruf pada papan kekunci (keyboard) itu masih kekal setiap kali peserta pilih huruf yang betul, klik huruf, hold huruf, seret huruf dan masukkan huruf (drag and drop) ke dalam kotak EJA PERKATAAN. Kod warna Kotak 4: #D9F2D0

BUTANG: Sediakan butang berwarna yang sesuai dengan warna LATAR bagi item berikut:

1. MARKAH memaparkan jumlah markah terkumpul. Kod warna kotak: #FFD9D9

2. KIRAAN MASA. Kod warna kotak: #D9F2D0

3. SEMAKAN JAWAPAN bagi ejaan sama ada betul atau salah berdasarkan objek yang dipaparkan.

Kod warna kotak: #CAEDFB.

4. GANJARAN: Jika jawapan betul dipaparkan “Tahniah! Jawapan anda betul.” Kod warna kotak jika jawapan betul: #CCFF66, jika jawapan salah dipaparkan “Jawapan salah. Sila cuba lagi.” Kod warna kotak jika jawapan salah: #F2CEED

5. CUBA LAGI: untuk memberi peluang murid mencuba semula. Kod warna kotak: #F2CEED

6. TAMAT PERMAINAN. Kod warna kotak: #FF6565

PAPARAN PERMAINAN TAMAT:

Bila peserta menekan butang TAMAT PERMAINAN di bahagian kawalan, skrin PERMAINAN TAMAT! akan muncul. Skrin PERMAINAN TAMAT! akan memaparkan markah akhir dan masa yang digunakan apabila peserta menekan butang tersebut. Terdapat juga butang MAIN SEMULA pada skrin tamat.

Hasilkan kod yang sesuai dan tepat serta boleh diembed dan dimainkan dalam Google Site.

3. CONTOH CODING CANVAS GEMINI Ai

<!DOCTYPE html>

<head>

<title>SIAPA SAYA? | Permainan Ejaan Bahasa</title>

<style>

/* Konfigurasi Custom Tailwind Colors */

.bg-color-markah { background-color: #FFD9D9; }

.bg-color-masa, .bg-color-keyboard { background-color: #D9F2D0; }

.bg-color-semak { background-color: #CAEDFB; }

.bg-color-betul { background-color: #CCFF66; }

.bg-color-salah, .bg-color-cuba { background-color: #F2CEED; }

.bg-color-tamat { background-color: #FF6565; }

.bg-color-gambar { background-color: #000099; }

body { font-family: 'Inter', sans-serif; background-color: #f0f4f8; }

/* Gaya Seret dan Lepas */

.letter-box {

width: 40px;

height: 50px;

line-height: 50px;

text-align: center;

font-size: 1.5rem;

border: 2px solid #374151;

cursor: pointer;

user-select: none;

transition: background-color 0.2s;

}

.drop-target {

min-width: 50px;

height: 60px;

border: 2px dashed #000099;

text-align: center;

font-size: 2rem;

font-weight: bold;

color: #000099;

transition: border-color 0.2s, background-color 0.2s;

}

.drop-target.filled {

border: 2px solid #10B981;

background-color: #EFF6FF;

}

.drop-target:hover {

border-color: #10B981;

}

/* Untuk mengelakkan masalah seret pada peranti sentuh */

.keyboard-letter {

touch-action: none;

}

</style>

</head>

<h1 class="text-4xl font-extrabold text-blue-800 mb-6">PERMAINAN SIAPA SAYA?</h1>

<p class="text-lg text-gray-600 mb-10">Uji pengetahuan ejaan anda dengan menyeret huruf ke kotak yang betul.</p>

MULA PERMAINAN

</button>

</div>

<h1 class="text-3xl font-bold text-center text-gray-800 mb-4">SIAPA SAYA?</h1>

<div class="bg-color-gambar p-4 text-white font-bold text-xl text-center">GAMBAR</div>

< LIHAT GAMBAR SEBELUMNYA

</button>

LIHAT GAMBAR SETERUSNYA >

</button>

</div>

<p class="text-lg font-bold text-gray-700 mb-3">EJA PERKATAAN:</p>

</div>

Sila lengkapkan ejaan di atas.

</div>

<p class="text-xs text-gray-600">MARKAH</p>

</div>

<p class="text-xs text-gray-600">KIRAAN MASA</p>

</div>

<span class="mr-1">✔</span> SEMAK JAWAPAN

</button>

<span class="mr-1">↻</span> CUBA LAGI

</button>

<span class="mr-1">◼</span> TAMAT PERMAINAN

</button>

</div>

<p class="text-lg font-bold text-gray-700 mb-3 text-center">PILIH HURUF DAN SUSUN DI RUANG EJA PERKATAAN</p>

</div>

<h2 class="text-5xl font-extrabold text-red-600 mb-4">PERMAINAN TAMAT!</h2>

<p class="text-2xl text-gray-700 mb-8">Keputusan Akhir Anda:</p>

<p class="text-lg text-gray-600">Markah Terkumpul:</p>

</div>

<p class="text-lg text-gray-600">Masa Digunakan:</p>

</div>

MAIN SEMULA

</button>

</div>

// Data Permainan

const WORDS = [

{ word: "BUKU", emoji: "📚" },

{ word: "KERUSI", emoji: "🪑" },

{ word: "LAMPU", emoji: "💡" },

{ word: "KERETA", emoji: "🚗" },

{ word: "JAM", emoji: "⌚" },

{ word: "BEG", emoji: "👜" },

];

const ALPHABET = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

// Pemalar DOM

const startScreen = document.getElementById('start-screen');

const gameScreen = document.getElementById('game-screen');

const endScreen = document.getElementById('end-screen');

const startGameBtn = document.getElementById('start-game-btn');

const restartGameBtn = document.getElementById('restart-game-btn');

const endGameBtn = document.getElementById('end-game-btn');

const prevImageBtn = document.getElementById('prev-image-btn');

const nextImageBtn = document.getElementById('next-image-btn');

const checkAnswerBtn = document.getElementById('check-answer-btn');

const tryAgainBtn = document.getElementById('try-again-btn');

const currentEmojiDisplay = document.getElementById('current-emoji');

const spellingArea = document.getElementById('word-spelling-area');

const keyboardArea = document.getElementById('keyboard');

const scoreDisplay = document.getElementById('score-display');

const timerDisplay = document.getElementById('timer-display');

const rewardBox = document.getElementById('reward-box');

const finalScoreDisplay = document.getElementById('final-score-display');

const finalTimeDisplay = document.getElementById('final-time-display');

// State Permainan

let currentWordIndex = 0;

let score = 0;

let gameTimer;

let timeElapsed = 0;

let currentSpelling = []; // Array of drop targets

/**

* Fungsi Utiliti

*/

// Fungsi untuk format masa dari saat ke MM:SS

function formatTime(seconds) {

const minutes = Math.floor(seconds / 60);

const remainingSeconds = seconds % 60;

return `${String(minutes).padStart(2, '0')}:${String(remainingSeconds).padStart(2, '0')}`;

}

// Fungsi pemasa

function startTimer() {

if (gameTimer) clearInterval(gameTimer);

gameTimer = setInterval(() => {

timeElapsed++;

timerDisplay.textContent = formatTime(timeElapsed);

}, 1000);

}

function stopTimer() {

clearInterval(gameTimer);

}

// Tukar warna kotak ganjaran

function setReward(message, isCorrect) {

rewardBox.textContent = message;

rewardBox.className = 'p-3 rounded-lg shadow-md min-h-[80px] flex items-center justify-center text-center text-gray-800 font-medium text-sm md:text-base';

rewardBox.classList.add(isCorrect ? 'bg-color-betul' : 'bg-color-salah');

}

/**

* Logik Seret dan Lepas (Drag and Drop)

*/

// Handler apabila seret bermula dari papan kekunci

function handleDragStart(e) {

// Tetapkan data yang diseret (huruf)

e.dataTransfer.setData('text/plain', e.target.textContent);

e.dataTransfer.effectAllowed = 'copy'; // Menunjukkan huruf akan disalin

}

// Handler apabila item diseret di atas kotak sasaran

function handleDragOver(e) {

e.preventDefault(); // Membenarkan melepaskan item

e.dataTransfer.dropEffect = 'copy';

}

// Handler apabila item dilepaskan ke kotak sasaran

function handleDrop(e) {

e.preventDefault();

const letter = e.dataTransfer.getData('text/plain');

const target = e.target.closest('.drop-target'); // Pastikan target adalah kotak drop

if (target && !target.textContent) {

target.textContent = letter;

target.classList.add('filled');

}

// Handler apabila huruf dalam kotak diklik (untuk memadam)

function handleBoxClick(e) {

const box = e.target.closest('.drop-target');

if (box && box.textContent) {

box.textContent = '';

box.classList.remove('filled');

setReward('Sila lengkapkan ejaan di atas.', false); // Reset feedback

}

/**

* Logik Permainan Utama

*/

// Jana kotak ejaan kosong

function generateSpellingBoxes(word) {

spellingArea.innerHTML = '';

currentSpelling = [];

for (let i = 0; i < word.length; i++) {

const box = document.createElement('div');

box.className = 'drop-target bg-white rounded-md flex items-center justify-center shadow-inner';

box.dataset.index = i; // Untuk rujukan

// Tambah event listeners untuk seret dan lepas

box.addEventListener('dragover', handleDragOver);

box.addEventListener('drop', handleDrop);

box.addEventListener('click', handleBoxClick);

spellingArea.appendChild(box);

currentSpelling.push(box);

}

// Jana papan kekunci huruf

function generateKeyboard() {

keyboardArea.innerHTML = '';

for (const char of ALPHABET) {

const button = document.createElement('button');

button.className = 'letter-box bg-white text-gray-800 font-bold rounded-md shadow-sm hover:bg-gray-200 keyboard-letter';

button.textContent = char;

button.setAttribute('draggable', 'true');

button.addEventListener('dragstart', handleDragStart);

keyboardArea.appendChild(button);

}

// Kemaskini paparan gambar dan kotak ejaan

function updateGameDisplay() {

const currentItem = WORDS[currentWordIndex];

currentEmojiDisplay.textContent = currentItem.emoji;

generateSpellingBoxes(currentItem.word);

scoreDisplay.textContent = score;

// Kawalan butang LIHAT GAMBAR SEBELUMNYA

if (currentWordIndex > 0) {

prevImageBtn.classList.remove('hidden');

} else {

prevImageBtn.classList.add('hidden');

}

// Kawalan butang LIHAT GAMBAR SETERUSNYA

if (currentWordIndex < WORDS.length - 1) {

nextImageBtn.textContent = 'LIHAT GAMBAR SETERUSNYA >';

nextImageBtn.disabled = false;

} else {

nextImageBtn.textContent = 'SELESAIKAN SEMUA';

nextImageBtn.disabled = true; // Tidak boleh teruskan

}

// Set semula ganjaran

setReward('Sila lengkapkan ejaan di atas.', false);

// Dayakan butang semak

checkAnswerBtn.disabled = false;

}

// Fungsi untuk membersihkan kotak ejaan

function tryAgain() {

currentSpelling.forEach(box => {

box.textContent = '';

box.classList.remove('filled');

});

setReward('Sila cuba lagi.', false);

checkAnswerBtn.disabled = false;

}

// Fungsi Semak Jawapan

function checkAnswer() {

const currentWord = WORDS[currentWordIndex].word;

let spelledWord = currentSpelling.map(box => box.textContent).join('');

if (spelledWord.length !== currentWord.length) {

setReward('Sila lengkapkan semua kotak huruf.', false);

return;

}

if (spelledWord === currentWord) {

score += 10;

scoreDisplay.textContent = score;

setReward('Tahniah! Jawapan anda betul.', true);

// Kunci jawapan betul

currentSpelling.forEach(box => {

box.classList.add('bg-color-betul', 'cursor-not-allowed');

box.removeEventListener('click', handleBoxClick);

});

// Lumpuhkan butang Semak dan Cuba Lagi selepas jawapan betul

checkAnswerBtn.disabled = true;

tryAgainBtn.disabled = true;

// Dayakan butang seterusnya jika belum tamat

if (currentWordIndex < WORDS.length - 1) {

nextImageBtn.disabled = false;

}

} else {

setReward('Jawapan salah. Sila cuba lagi.', false);

}

// Pindah ke gambar seterusnya

function nextImage() {

if (currentWordIndex < WORDS.length - 1) {

currentWordIndex++;

updateGameDisplay();

tryAgainBtn.disabled = false; // Reset butang

} else {

// Ini adalah gambar terakhir, butang ini sepatutnya lumpuh atau tidak digunakan.

}

// Pindah ke gambar sebelumnya

function prevImage() {

if (currentWordIndex > 0) {

currentWordIndex--;

updateGameDisplay();

tryAgainBtn.disabled = false; // Reset butang

}

// Tamat Permainan

function endGame() {

stopTimer();

gameScreen.classList.add('hidden');

endScreen.classList.remove('hidden');

finalScoreDisplay.textContent = score;

finalTimeDisplay.textContent = formatTime(timeElapsed);

}

// Mulakan Permainan

function initializeGame() {

currentWordIndex = 0;

score = 0;

timeElapsed = 0;

timerDisplay.textContent = formatTime(timeElapsed);

scoreDisplay.textContent = score;

startScreen.classList.add('hidden');

endScreen.classList.add('hidden');

gameScreen.classList.remove('hidden');

generateKeyboard();

updateGameDisplay();

startTimer();

// Set semula kawalan butang

tryAgainBtn.disabled = false;

checkAnswerBtn.disabled = false;

}

// Event Listeners

startGameBtn.addEventListener('click', initializeGame);

restartGameBtn.addEventListener('click', initializeGame);

endGameBtn.addEventListener('click', endGame);

prevImageBtn.addEventListener('click', prevImage);

nextImageBtn.addEventListener('click', nextImage);

checkAnswerBtn.addEventListener('click', checkAnswer);

tryAgainBtn.addEventListener('click', tryAgain);

// Tambah event listener untuk sentuhan pada peranti mudah alih (untuk simulasi drag)

// Logik seret dan lepas menggunakan 'drag' events mungkin tidak berfungsi secara konsisten pada semua peranti sentuh.

// Untuk penyelesaian yang ringkas dalam satu fail, kita akan bergantung pada 'drag' events standard,

// tetapi menambah arahan visual untuk membantu pengguna.

// Inisialisasi awal (jika perlu)

window.onload = () => {

// Pastikan paparan awal adalah skrin mula

startScreen.classList.remove('hidden');

gameScreen.classList.add('hidden');

endScreen.classList.add('hidden');

};

</script>

</body>

</html>

CONTOH PROSES CANVA GEMINI Ai

TERIMA KASIH