Senin, 21 September 2026

7.2

 

Introduction And Descriptive Text

Perkenalan Dan Teks Deskriptif

 

 

 

 

Rina :

Hello, Dinda. Can you tell me about your house?

 

 

Dinda:

Sure. My house is not very big, but it is comfortable and clean.

 

 

Rina:

How many rooms are there in your house?

 

Dinda:

There are two bedrooms, one living room, one kitchen, and one bathroom.

 

 

Rina:

Which room do you like the most?

 

 

Dinda:

I like my bedroom the most because it is cozy and quiet. I usually study and read books there.

 

 

Rina:

Do you have a garden?

 

 Dinda:

Yes, I do. There are many flowers and small plants in front of my house.

 

Rina:

That sounds beautiful.

 

Dinda:

Thank you. I love my house very much because my family and I feel happy there.

 

 

 

 

 

Tentu. Berikut *salinan semua kata dan kalimat yang terlihat pada gambar*:

 

 

 

 

 

## Task 6

 

*Task 6.* Scan the following QR-Code. Listen to the audio and complete the blanks using the correct words. After that pronounce each sentence.

 

 

 

 

### Dialogue

 

 

 

 

---

 

# Task 2

 

*Task 2.* Answer the questions based on the text.

 

*What are Rina and Dinda?*

 

 

*What are they talking about?*

 

.

 

*“…it is cozy and quiet.”*

 

The similar meaning of the underlined word is ....

 

 

*“…I feel happy there.”*

 

The underlined word refers to ....

 

 

*Why does Dinda like her bedroom?*

 

 

*Bahasa Inggris Kelas VII Smt 1 — 25*

 

 

 

### Words to Use:

 

* Big

* Large

* small

* narrow

* clean

 

1. My house is very ____. It has many rooms.

2. The living room is ____ enough for all family members.

3. My bedroom is ____, but it is comfortable.

4. The alley beside my house is very ____.

5. Our kitchen is always ____ because we clean it every day.

 

 

 

Part B

My School

 

Paragraph 1

My school is Sunshine Junior High School. 

It is a large, clean, and beautiful school. 

It is located in the center of my town. 

There are many facilities in my school, 

such as classrooms, a library, a science laboratory, 

a computer room, a teachers' room, a canteen, 

and a school yard. 

The students and teachers are friendly, 

and the learning environment is comfortable.

 

Paragraph 2

My classroom is on the second floor. 

It is bright and tidy. 

There are many desks, chairs, and a whiteboard 

in the classroom. 

I like studying there with my friends. 

The library is my favourite place 

because I enjoy reading books. 

To get to the library from my classroom, 

go straight along the corridor and turn left. 

The library is next to the computer room.

 

Paragraph 3

 

The science laboratory is on the first floor. 

From the library, go back to the stairs and go downstairs. 

Then, turn right and walk past the teachers' room. 

The laboratory is at the end of the corridor. 

Students usually do science experiments there.

 

Paragraph 4

 

The canteen is behind the main building. 

To get there, go outside and walk across the school yard. 

Then, turn left and walk toward the garden. 

The canteen is beside the garden. 

Many students buy snacks, meals, and drinks there 

during break time.

 

Paragraph 5

 

I love my school because it has complete facilities 

and a pleasant atmosphere. 

The school is always clean, 

and everyone helps keep it tidy. 

My school is not only a place to study 

but also a place where I can learn new things and make good friends.

 

---

 

Paragraph 1

  1. My school is Sunshine Junior High School.
    Sekolah saya adalah Sekolah Menengah Pertama Sunshine.
  2. It is a large, clean, and beautiful school.
    Sekolah itu besar, bersih, dan indah.
  3. It is located in the center of my town.
    Sekolah itu terletak di pusat kota saya.
  4. There are many facilities in my school,
    Ada banyak fasilitas di sekolah saya,
  5. such as classrooms, a library, a science laboratory,
    seperti ruang kelas, perpustakaan, laboratorium sains,
  6. a computer room, a teachers' room, a canteen,
    ruang komputer, ruang guru, kantin,
  7. and a school yard.
    dan halaman sekolah.
  8. The students and teachers are friendly,
    Para siswa dan guru ramah,
  9. and the learning environment is comfortable.
    dan lingkungan belajarnya nyaman.

 

Paragraph 2

  1. My classroom is on the second floor.
    Ruang kelas saya berada di lantai dua.
  2. It is bright and tidy.
    Ruang itu terang dan rapi.
  3. There are many desks, chairs, and a whiteboard in the classroom.
    Ada banyak meja, kursi, dan sebuah papan tulis putih di dalam kelas.
  4. I like studying there with my friends.
    Saya suka belajar di sana bersama teman-teman saya.
  5. The library is my favourite place
    Perpustakaan adalah tempat favorit saya
  6. because I enjoy reading books.
    karena saya senang membaca buku.
  7. To get to the library from my classroom,
    Untuk pergi ke perpustakaan dari ruang kelas saya,
  8. go straight along the corridor and turn left.
    berjalan lurus sepanjang koridor dan belok kiri.
  9. The library is next to the computer room.
    Perpustakaan berada di sebelah ruang komputer.

 

Paragraph 3

  1. The science laboratory is on the first floor.
    Laboratorium sains berada di lantai satu.
  2. From the library, go back to the stairs and go downstairs.
    Dari perpustakaan, kembali ke tangga dan turun ke bawah.
  3. Then, turn right and walk past the teachers' room.
    Kemudian, belok kanan dan berjalan melewati ruang guru.
  4. The laboratory is at the end of the corridor.
    Laboratorium berada di ujung koridor.
  5. Students usually do science experiments there.
    Para siswa biasanya melakukan percobaan sains di sana.

 

Paragraph 4

  1. The canteen is behind the main building.
    Kantin berada di belakang gedung utama.
  2. To get there, go outside and walk across the school yard.
    Untuk pergi ke sana, keluarlah dan berjalan melintasi halaman sekolah.
  3. Then, turn left and walk toward the garden.
    Kemudian, belok kiri dan berjalan menuju taman.
  4. The canteen is beside the garden.
    Kantin berada di samping taman.
  5. Many students buy snacks, meals, and drinks there
    Banyak siswa membeli makanan ringan, makanan, dan minuman di sana
  6. during break time.
    selama waktu istirahat.

 

Paragraph 5

  1. I love my school because it has complete facilities
    Saya menyukai sekolah saya karena sekolah itu memiliki fasilitas yang lengkap
  2. and a pleasant atmosphere.
    dan suasana yang menyenangkan.
  3. The school is always clean,
    Sekolah itu selalu bersih,
  4. and everyone helps keep it tidy.
    dan semua orang membantu menjaganya tetap rapi.
  5. My school is not only a place to study
    Sekolah saya bukan hanya tempat untuk belajar
  6. but also a place where I can learn new things and make good friends.
    tetapi juga tempat di mana saya dapat mempelajari hal-hal baru dan mendapatkan teman-teman yang baik.

 

 

Terjemahkan kalimat diatas , terjemahan di tulis miring dibawahny

 

# QUESTIONS:

 

### 1.

 

*What is the intention of the text?*

 

*What is the name of the writer's school?*

*What facilities can you find in the writer's school?*

*Why is the library the writer's favourite place?*

*How do you get to the canteen from the classroom? Explain the directions based on the text.*

*Why does the writer love his/her school?*

*Why do you think the writer likes the library more than other places in the school?*

*If a new student wants to go from the classroom to the science laboratory, what directions would you give?*

 

 

*According to the text, what would happen if students did not help keep the school clean?*

 

 

*Which facility in the school do you think is the most important for students?*

 

 

*Bahasa Inggris Kelas VII Smt 1 — 33*

 

 

Part C\hal 38

 

My Junior High School

My junior high school is one of the best in town.It's close to my house, and I usually ride my bike there. It takes me about 10-15 minutes to get to school.

 

The school is really big, covering about 4 hectares, and it's surrounded by tall fences. There are 21 classrooms, a large teacher's room, the principal's office, 21 bathrooms, an auditorium, a library, two science labs, three computer labs, a football field, a basketball court, a mosque, a health clinic (UKS), fiye canteens, and a big parking lot for teachers, students, and visitors. All

the buildings are aranged in a rectangle, with a field in the middle, which we use for sports and school ceremonies.

 

When you enter the school through the gate, the first thing you see is the security post. Two

security guards are always there to keep the school safe. Next to the security post is a large fish

pond, which makes the school look even more beautiful. After passing the parking area, you'll see

the main building. It's big and is where the teachers, the principal, and other staff have their offices.

Further in, you'll reach the classroom buildings. On the right, there are 7 classrooms for the

7th grade, 7 for the 9th grade, 8 bathrooms, the science labs, the UKS, and the library. On the

left, there are 7 classrooms for the 8th grade, more bathrooms, the auditorium, a computer lab,

and the mosque. The canteens are behind the auditorium.

In front of each classroom, there are small flower gardens where students like to hang out

and sometimes study. There are also lots of big trees, which make the air feel fresh and clean

around the school. My favorite place is the fish pond. During breaks, I love sitting by the pond and

watching the fish swim- it helps me relax and get inspired.

Which following statement are in line with the text? (You may choose more than one correct answer.)

The writer's school is spacious.

There is a swimming pool in the writer's school.

The canteen is located in front of the auditorium and behind the mosque.

There are headmaster and staffs' room in the main building of the writer's school.

How many rooms are there on the right side of classroom building?

A. 26

C. 14

B. 25

D. 22

What benefit will the readers get after reading the text?

A. Get detailed description about the writer's school.

B. Get general description about the writer's school.

C. Know the description of the writers' teacher.

D. Know about the writer activities at school.

 

 

Part D

 

My house is small but comfortable. It is located in a quiet neighborhood near a park. My family

and I live happily in this house.

There are five rooms in my house: a living room, two bedrooms, a kitchen, and a bathroom.

The living room is clean and bright. My family usually watches television and spends time together

there. The kitchen is next to the bathroom. My mother cooks delicious meals in the kitchen every day.

My favourite room is my bedroom. It has a bed, a desk, and a bookshelf. I usually study,.read

books, and sleep there. There is also a small garden in front of my house. It has beautiful flowers

and green plants that make the house look fresh and beautiful.

I love my house because it is comfortable, clean, and full of happy memories.

38) Bahasa Inggris Kelas VN Smt 1

 

Part E

Hi Rafa! Have you finished the

English assignment?

801AM

Hi Maya. Yes, I have.

902 AM

Do we submit it in the classroom?

902 AM

No, we submit it in the teachers room.

903 AM

Oh, where is the teachers room? 9-03 AM

It is on the first oor, across from

the administration office. so AM

Should we go there during break time? a5 AM

Yes, that's better. 05 A

We can go together at break time. A v

Okay. Should we knock before entering? 06 Ab

Yes, knock first and greet the teacher palitely.

9:06 AM

Alright. I will bring mty assignment o AM

Great! See you later. goT AM

See you. 908 AM

Type a message

What are Maya and Rafa talking about?

A. Submitting an English assignment

B. Borrowing a book from the library

C. Buying food in the canteen

D. Joining a school clubl

 

Text 3 is for question number 13- 15.

 

 

Part F

My name is Alya, and lam a seventh-grade student at Nusantara Junior High School. I really

like my school because it is clean, friendly, and comfortable for learning. It is not the biggest school

in my city, but it has many useful rooms and facilities for students.

My classroom is on the second floor. It is bright because there are large windows on one

side of the room. There are thirty-two students in my class. We have a whiteboard, a bookshelf,

a clock, and several posters on the wall. My favourite poster says, "Respect others and do your

best." I like this poster because it reminds us to be kind and responsible.

There is a library near my classroom. The library is quiet and tidy Students can read books,

borrow novels, or do homework there. Sometimes, my friends and I go to the library during break

time when we want to study or finish group assignments.

My school also has a science laboratory anda computer room. We use the science laboratory

for experiments, especially during science lessons. The computer room is used for learning

technology and practicing typing. I enjoy learning in these rooms because the lessons feel more

interesting and practical.

Behind the main building, there is a canteen and a small garden. The canteen is usually

crowded during break time because many students buy food and drinks there. Students must

throw rubbish into the bins to keep the canteen clean. The garden is my favourite place to relax

It has flowers, small trees, and benches. Some students sit there while talking with their friends.

I think Nusantara Junior High School is a good place to study. The rooms and facilities help

students learn, work together, and enjoy their school life.

13. What does the text tell us about?

A. Alya's favourite food in the school canteen.

B. Alya's school. Its rooms and facilities.

C. Alya's daily schedule at school.

D. Alya's friends in Grade 7.

14. What is the main idea of paragraph 2?

A. Alya explains the school rules.

B. Alya describes her classrooms.

C. Alya describes the school garden.

D. Alya talks about the canteen menu

15. Which statements describe the school garden?

A. It has benches, students can relax there, and it is behind the main building.

B. It has small trees, it is on the second floor, students do homework there.

C. It is on the second floor, it has small trees, students can relax there

D. It has flowers, benches, it is crowded.

 

 

 

 

 

Alamat kami :

 

Gadjah Mada English School ( GMES)

 

Jl. Kadipaten Kulon No. 27 B, Kraton , Yogyakarta

 

Phone/WA :     0812 274 7050

 

Website : gmesenglish.blogspot.com

 

Bantuan Transportasi :

 

Google Map : tulis “gmes english”

Gojek              : tulis “ gmes english”

Grab                : tulis “gmes english”

 

 

----  

 

Belajar     Bahasa Inggris bisa juga dengan jarak jauh /on line / internet menggunakan aplikasi “ Zoom Meeting ” dan “ Google Meet “ 

 

 

Kls 7

 

Bab 1  ( hal 4 sd 22 )

Test Kosa kata 1     ( hal 4-10 )

Test Kosa kata 2 ( hal 11-18 )

Ulangan Materi 1     ( dari website Pak Joko)

 

Bab 2  ( hal 23 sd 41  )

Test Kosa kata 1     ( hal 23 -30)

Test Kosa kata 2 ( hal 31– 37 )

Ulangan Materi 2     ( dari website Pak Joko)

 

Bab 3  ( hal 42 sd 68 )

Test Kosa kata 1     ( hal 42 - 53)

Test Kosa kata 2 ( hal 54 - 64 )

Ulangan Materi 3     ( dari website Pak Joko)

 

 

 

 

 

Kode gs susun kata sentence order

 

function doGet() {

  return HtmlService.createHtmlOutputFromFile('index')

    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)

    .setTitle('Game Susun Kata')

    .addMetaTag('viewport', 'width=device-width, initial-scale=1');

}

 

function getQuestions() {

  const sheet = SpreadsheetApp

    .openById("1OEPppb6Prrf7u3rwqBUBT6pelF1flbLf81sW09P3ZF4")

    .getSheetByName("soal");

  

  const data = sheet.getDataRange().getValues();

  let questions = [];

  

  for (let i = 1; i < data.length; i++) {

    let row = data[i];

    if (!row[0]) continue; 

    

    let indonesianText = row[0];

    let englishCorrect = row[1].trim();

    let wordsArray = row[2].split(',').map(item => item.trim());

    

    wordsArray = shuffle(wordsArray);

    

    questions.push({

      id: i,

      indonesian: indonesianText,

      englishCorrect: englishCorrect,

      words: wordsArray

    });

  }

  

  return shuffle(questions);

}

 

// Menyimpan identitas awal siswa ke Google Sheets (6 Kolom)

function simpanDataSiswa(nama, kelas, presensi) {

  const sheet = SpreadsheetApp

    .openById("16xNlQTa4IjHNqOS9mKpvJ34Xg7s5LEbJc4ZN_uwHjck")

    .getSheetByName("Log_Siswa");

  

  // Kolom A: Waktu, B: Nama, C: Kelas, D: No Presensi, E: Skor(0), F: Nilai(0)

  sheet.appendRow([new Date(), nama, kelas, presensi, 0, 0]);

  

  return sheet.getLastRow();

}

 

// Memperbarui data Skor (Jumlah Benar) di Kolom E dan Nilai (Skala 0-100) di Kolom F

function updateSkorSiswa(rowId, skorAkhir, nilaiAkhir) {

  const sheet = SpreadsheetApp

    .openById("16xNlQTa4IjHNqOS9mKpvJ34Xg7s5LEbJc4ZN_uwHjck")

    .getSheetByName("Log_Siswa");

  

  sheet.getRange(rowId, 5).setValue(skorAkhir);   // Kolom E (Skor)

  sheet.getRange(rowId, 6).setValue(nilaiAkhir);  // Kolom F (Nilai)

}

 

function shuffle(arr) {

  for (let i = arr.length - 1; i > 0; i--) {

    let j = Math.floor(Math.random() * (i + 1));

    [arr[i], arr[j]] = [arr[j], arr[i]];

  }

  return arr;

}

 

 

 

 

 

 

Kode index

 

<!DOCTYPE html>

<html>

<head>

  <base target="_top">

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-select=no">

  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">

  <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>

  <style>

    * { box-sizing: border-box; font-family: 'Poppins', sans-serif; margin: 0; padding: 0; }

    

    body { 

      background-color: #0b224e; 

      color: #2c3e50; 

      display: flex; 

      flex-direction: column; 

      align-items: center; 

      justify-content: flex-start; 

      min-height: 100vh; 

      padding: 15px;

      overflow-y: auto;

      overflow-x: hidden;

    }

 

    @media (min-width: 768px) {

      body {

        justify-content: center;

        padding: 30px 20px;

      }

    }

    

    .login-container {

      width: 100%;

      max-width: 500px;

      text-align: center;

      padding: 10px 5px;

      margin-top: auto;

      margin-bottom: auto;

    }

    

    .login-title {

      font-size: clamp(1.4rem, 5vw, 2rem);

      font-weight: 700;

      color: #ffd700; 

      margin-bottom: 25px;

      text-transform: uppercase;

      letter-spacing: 1px;

      text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);

      animation: kedipLembut 2s infinite alternate;

    }

 

    @keyframes kedipLembut {

      0% {

        opacity: 1;

        text-shadow: 0 0 15px rgba(255, 215, 0, 0.6), 0 0 25px #ffaa00;

      }

      100% {

        opacity: 0.4;

        text-shadow: 0 0 2px rgba(255, 215, 0, 0.1);

      }

    }

 

    .input-group {

      width: 100%;

      margin-bottom: 15px;

    }

 

    .input-group input {

      width: 100%;

      padding: clamp(14px, 3vw, 18px) 20px;

      font-size: 16px;

      border-radius: 14px;

      border: 2px solid #fef3c7; 

      background-color: #ffffff;

      color: #333333;

      outline: none;

      box-shadow: 0 4px 6px rgba(0,0,0,0.1);

      -webkit-appearance: none;

    }

 

    .btn-mulai {

      width: 100%;

      padding: 15px;

      font-size: clamp(18px, 4vw, 22px);

      font-weight: 700;

      background-color: #2ba375; 

      border: none;

      border-radius: 35px;

      cursor: pointer;

      box-shadow: 0 6px 12px rgba(0,0,0,0.2);

      transition: background 0.2s, transform 0.1s;

      margin-top: 10px;

    }

 

    .btn-mulai:hover { background-color: #218c61; }

 

    /* Pengaturan teks gradasi yang berkedip */

    .text-kedip-gradient {

      background: linear-gradient(45deg, #ffd700, #ff6a00);

      -webkit-background-clip: text;

      -webkit-text-fill-color: transparent;

      display: inline-block;

      animation: kedipTulisanGradient 1.2s infinite alternate;

    }

 

    @keyframes kedipTulisanGradient {

      0% {

        opacity: 1;

        filter: drop-shadow(0 0 2px rgba(255, 106, 0, 0.6));

      }

      100% {

        opacity: 0.25;

        filter: drop-shadow(0 0 0px transparent);

      }

    }

 

    .footer-text { color: rgba(255,255,255,0.6); font-size: 12px; margin-top: 30px; text-align: center; }

 

    .game-container { 

      display: none; 

      width: 100%;

      max-width: 900px; 

      background: #ffffff; 

      padding: clamp(15px, 4vw, 30px); 

      border-radius: 16px; 

      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); 

      border: 1px solid #e1e8ed; 

      text-align: center; 

      margin-top: 10px;

      margin-bottom: 20px;

    }

    

    .progress { 

      color: #d97706; 

      font-size: 13px; 

      font-weight: bold; 

      margin-bottom: 15px; 

      background: #fef3c7; 

      padding: 6px 18px; 

      border-radius: 20px; 

      display: inline-block; 

    }

    

    .instruction-box { 

      background: #f8fafc; 

      color: #1e293b;

      padding: clamp(12px, 3vw, 20px); 

      border-radius: 12px; 

      font-size: clamp(15px, 3.5vw, 19px); 

      font-weight: 600; 

      margin-bottom: 20px; 

      border-left: 5px solid #3b82f6; 

      text-align: left; 

    }

    

    .word-pool, .answer-zone { 

      display: flex; 

      flex-wrap: wrap; 

      gap: 10px; 

      justify-content: center; 

      align-content: center;

      padding: clamp(10px, 3vw, 20px); 

      border-radius: 12px; 

      width: 100%;

    }

 

    .word-pool { 

      min-height: 90px; 

      background: #f1f5f9; 

      margin-bottom: 20px; 

    }

    

    .answer-zone { 

      min-height: 110px; 

      background: #fafafa; 

      border: 2.5px dashed #cbd5e1; 

      margin-bottom: 25px; 

    }

    

    .word-card { 

      padding: 12px 20px; 

      border-radius: 10px; 

      font-weight: 600; 

      font-size: clamp(14px, 3.2vw, 18px); 

      color: white; 

      cursor: pointer; 

      transition: transform 0.1s; 

      user-select: none; 

      box-shadow: 0 4px 6px rgba(0,0,0,0.08); 

      display: flex; 

      align-items: center; 

      justify-content: center; 

      touch-action: manipulation; 

    }

    

    .word-card:active { transform: scale(0.95); }

    

    .c-0 { background: #84cc16; }

    .c-1 { background: #8b5cf6; }

    .c-2 { background: #f97316; }

    .c-3 { background: #0ea5e9; }

    .c-4 { background: #475569; }

    

    .btn-group { display: flex; justify-content: flex-end; gap: 10px; }

    button.action-btn { 

      flex: 1; 

      max-width: 150px;

      padding: 12px 20px; 

      font-size: 15px; 

      font-weight: bold; 

      border: none; 

      border-radius: 10px; 

      cursor: pointer; 

    }

    @media (min-width: 768px) {

      button.action-btn { flex: none; width: 130px; }

    }

    .btn-reset { background: #94a3b8; color: white; }

    .btn-submit { background: #10b981; color: white; }

    

    .score-window {

      display: none;

      width: 100%;

      max-width: 450px;

      text-align: center;

      margin-top: auto;

      margin-bottom: auto;

    }

 

    .score-title {

      font-size: clamp(24px, 6vw, 32px);

      font-weight: 700;

      color: #ffffff;

      margin-bottom: 20px;

      letter-spacing: 1px;

      text-transform: uppercase;

    }

 

    .score-card {

      background-color: rgba(255, 255, 255, 0.1);

      border: 1px solid rgba(255, 255, 255, 0.15);

      border-radius: 24px;

      padding: clamp(20px, 6vw, 35px) 20px;

      width: 100%;

      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);

      margin-bottom: 20px;

    }

 

    .info-line { font-size: clamp(18px, 4.5vw, 22px); color: #ffffff; margin-bottom: 10px; }

    .info-line strong { color: #ffd700; font-weight: 700; }

    .score-line { font-size: clamp(15px, 3.8vw, 18px); color: #ffffff; margin-bottom: 20px; font-weight: 600; }

 

    .divider { height: 1px; background-color: rgba(255, 255, 255, 0.25); width: 90%; margin: 0 auto 20px auto; }

    .label-nilai { font-size: 14px; color: #ffffff; letter-spacing: 2px; margin-bottom: 5px; text-transform: uppercase; }

    .huge-grade { font-size: clamp(55px, 15vw, 80px); font-weight: 700; color: #00ffcc; line-height: 1; margin-bottom: 10px; }

 

    .btn-keluar {

      width: 100%;

      padding: 15px;

      font-size: 20px;

      font-weight: 700;

      background-color: #2ba375; 

      border: none;

      border-radius: 35px;

      cursor: pointer;

      box-shadow: 0 6px 12px rgba(0,0,0,0.2);

      text-transform: uppercase;

    }

  </style>

</head>

<body>

 

  <div class="login-container" id="loginWindow">

    <h1 class="login-title">🎯 TAKE CARE OF OUR PLANET 🎯</h1>

    

    <div class="input-group">

      <input type="text" id="studentName" placeholder="Nama Lengkap..." autocomplete="off">

    </div>

    <div class="input-group">

      <input type="text" id="studentClass" placeholder="Kelas..." autocomplete="off">

    </div>

    <div class="input-group">

      <input type="text" id="studentAttendance" placeholder="No Presensi..." autocomplete="off">

    </div>

    <div class="input-group">

      <input type="text" id="quizToken" placeholder="Token..." autocomplete="off">

    </div>

    

    <button class="btn-mulai" onclick="startQuiz()">

      <span class="text-kedip-gradient">MULAI</span>

    </button>

    <p class="footer-text">Created by Joko W © GMES English Jogja</p>

  </div>

 

  <div class="game-container" id="gameWindow">

    <div class="progress" id="questionNum">Loading...</div>

    <div class="instruction-box" id="instruction">Memuat pertanyaan game...</div>

    

    <div class="word-pool" id="wordPool"></div>

    <hr style="opacity: 0.2; margin-bottom: 20px; border: 0; border-top: 1px solid #cbd5e1;">

    <div class="answer-zone" id="answerZone"></div>

    

    <div class="btn-group">

      <button class="action-btn btn-reset" onclick="resetCurrentQuestion()">Reset</button>

      <button class="action-btn btn-submit" onclick="checkAnswer()">Submit</button>

    </div>

  </div>

 

  <div class="score-window" id="scoreWindow">

    <h1 class="score-title">HASIL AKHIR</h1>

    

    <div class="score-card">

      <div class="info-line">Nama: <strong id="displayStudentName">Siswa</strong></div>

      <div class="score-line">Skor: <span id="displayScoreCount">0</span></div>

       

      <div class="divider"></div>

       

      <div class="label-nilai">NILAI</div>

      <div class="huge-grade" id="displayFinalGrade">0</div>

    </div>

    

    <button class="btn-keluar" onclick="exitQuiz()">

      <span class="text-kedip-gradient">MAIN LAGI</span>

    </button>

    <p class="footer-text">Created by Joko W © GMES English Jogja</p>

  </div>

 

  <script>

    let questions = [];

    let currentIndex = 0;

    let score = 0;

    let studentRowId = null; 

    let globalStudentName = "";

    

    const CORRECT_TOKEN = "170419"; 

 

    window.onload = function() {

      google.script.run.withSuccessHandler(function(data) {

        questions = data;

        shuffleArray(questions);

      }).getQuestions();

    };

 

    function shuffleArray(array) {

      if (!array || array.length === 0) return;

      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 playSound(type){

      let audio = new Audio();

      if(type==="correct") audio.src="https://actions.google.com/sounds/v1/cartoon/wood_plank_flicks.ogg";

      if(type==="wrong") audio.src="https://actions.google.com/sounds/v1/alarms/beep_short.ogg";

      if(type==="win") audio.src="https://actions.google.com/sounds/v1/cartoon/slide_whistle_to_drum.ogg";

      audio.play().catch(function(e) { console.log("Audio play diblokir browser"); });

    }

 

    function startQuiz() {

      let name = document.getElementById('studentName').value.trim();

      let sClass = document.getElementById('studentClass').value.trim();

      let attendance = document.getElementById('studentAttendance').value.trim();

      let token = document.getElementById('quizToken').value.trim();

 

      if(!name || !sClass || !attendance || !token) {

        alert("Harap lengkapi semua data formulir terlebih dahulu!");

        return;

      }

 

      if(token.toUpperCase() !== CORRECT_TOKEN) {

        alert("Token yang Anda masukkan salah!");

        return;

      }

 

      if(questions.length === 0) {

        alert("Soal sedang dimuat, silakan klik tombol MULAI kembali.");

        return;

      }

 

      globalStudentName = name; 

 

      google.script.run.withSuccessHandler(function(rowId) {

        studentRowId = rowId; 

        document.getElementById('loginWindow').style.display = 'none';

        document.getElementById('gameWindow').style.display = 'block';

        loadQuestion();

      }).simpanDataSiswa(name, sClass, attendance);

    }

 

    function loadQuestion() {

      let q = questions[currentIndex];

      document.getElementById('questionNum').innerText = `${currentIndex + 1} / ${questions.length}`;

      document.getElementById('instruction').innerText = q.indonesian;

       

      let pool = document.getElementById('wordPool');

      let zone = document.getElementById('answerZone');

      pool.innerHTML = '';

      zone.innerHTML = '';

       

      q.words.forEach((word, idx) => {

        let card = document.createElement('div');

        card.className = `word-card c-${idx % 5}`;

        card.innerText = word;

        card.setAttribute('data-word', word);

        card.onclick = function() { toggleCard(this); };

        pool.appendChild(card);

      });

    }

 

    function toggleCard(card) {

      let pool = document.getElementById('wordPool');

      let zone = document.getElementById('answerZone');

      if (card.parentElement.id === 'wordPool') {

        zone.appendChild(card);

      } else {

        pool.appendChild(card);

      }

    }

 

    function resetCurrentQuestion() {

      loadQuestion();

    }

 

    function checkAnswer() {

      let zone = document.getElementById('answerZone');

      let cards = zone.getElementsByClassName('word-card');

       

      let userWords = [];

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

        userWords.push(cards[i].getAttribute('data-word'));

      }

       

      let userAnswer = userWords.join(' ');

      let correctAnswer = questions[currentIndex].englishCorrect;

       

      if(userAnswer === correctAnswer) {

        playSound("correct");

        alert("Benar sekali! 👍");

        score++;

      } else {

        playSound("wrong");

        alert(`Kurang tepat! \nJawaban benar:\n"${correctAnswer}"`);

      }

       

      currentIndex++;

      if(currentIndex < questions.length) {

        loadQuestion();

      } else {

        let finalGrade = Math.round((score / questions.length) * 100);

 

        google.script.run.withSuccessHandler(function() {

          document.getElementById('gameWindow').style.display = 'none';

          document.getElementById('displayStudentName').innerText = globalStudentName;

          document.getElementById('displayScoreCount').innerText = score;

          document.getElementById('displayFinalGrade').innerText = finalGrade;

          document.getElementById('scoreWindow').style.display = 'block';

          playSound("win");

          

          launchCelebrationConfetti();

        }).updateSkorSiswa(studentRowId, score, finalGrade);

      }

    }

 

    function launchCelebrationConfetti() {

      let duration = 3 * 1000; 

      let end = Date.now() + duration;

 

      (function frame() {

        confetti({

          particleCount: 3,

          angle: 60,

          spread: 55,

          origin: { x: 0, y: 0.8 }

        });

        

        confetti({

          particleCount: 3,

          angle: 120,

          spread: 55,

          origin: { x: 1, y: 0.8 }

        });

 

        if (Date.now() < end) {

          requestAnimationFrame(frame);

        }

      }());

    }

 

    function exitQuiz() {

      location.reload(); 

    }

  </script>

</body>

</html>