Spesifikasi Kebutuhan Pengguna dan Teknik
86 Questions
0 Views

Choose a study mode

Play Quiz
Study Flashcards
Spaced Repetition
Chat to Lesson

Podcast

Play an AI-generated podcast conversation about this lesson

Questions and Answers

Apa tujuan utama dari User Requirement Specification (URS)?

  • Menghasilkan kode untuk pengembangan aplikasi
  • Mendefinisikan acceptance criteria untuk legalitas
  • Memberikan pemahaman yang sama mengenai kebutuhan pengguna (correct)
  • Menyimpan detail teknis dari aplikasi

Mengapa dokumen URS tidak boleh menggunakan jargon teknis?

  • Karena jargon teknis membuat dokumen lebih rumit
  • Supaya seluruh stakeholder dapat memahaminya (correct)
  • Agar lebih menarik bagi pengembang
  • Untuk mengurangi ukuran dokumen

Apa saja prinsip yang perlu diperhatikan dalam pembuatan spesifikasi teknis aplikasi?

  • Clear, unambiguous, mudah dipahami, dan konsisten (correct)
  • Lengthy, technical, vague, dan variable
  • Clear, ambiguous, user-friendly, dan complete
  • Ambiguity, complexity, clarity, dan redundancy

Dari sisi mana stakeholder diharapkan untuk memahami spesifikasi teknis?

<p>Dari berbagai macam pemangku kepentingan (B)</p> Signup and view all the answers

Apa itu acceptance criteria dalam konteks spesifikasi teknis?

<p>Kriteria apakah suatu fitur telah diterapkan dengan baik (D)</p> Signup and view all the answers

Apa yang dimaksud dengan contingency plan dalam pengembangan aplikasi?

<p>Rencana alternatif yang dipersiapkan jika rencana utama gagal (A)</p> Signup and view all the answers

Manakah yang bukan termasuk teknik pengumpulan kebutuhan (requirement gathering)?

<p>Code Review (A)</p> Signup and view all the answers

Apa yang diharapkan dari sisi client/user terkait spesifikasi teknis?

<p>Memahami isi spesifikasi dengan istilah teknis sesederhana mungkin (B)</p> Signup and view all the answers

Apa yang harus dilakukan pertama kali saat mengumpulkan semua todo?

<p>Mengidentifikasi todo yang urgent dan important (A)</p> Signup and view all the answers

Apa yang bisa menyebabkan program gagal dijalankan dalam banyak bahasa pemrograman?

<p>Kesalahan sintaksis (A)</p> Signup and view all the answers

Dalam struktur variabel, apa saja yang harus diperhatikan?

<p>Nama variabel tidak boleh ada spasi dan tidak diawali angka (D)</p> Signup and view all the answers

Keyword dalam pemrograman memiliki fungsi apa?

<p>Merupakan kata kunci dalam bahasa pemrograman (C)</p> Signup and view all the answers

Apa yang menjadi dasar dari logika perbandingan dalam pemrograman?

<p>Membandingkan dua nilai dengan kondisi tertentu (D)</p> Signup and view all the answers

Apa yang menjadi alasan utama melakukan langkah penghapusan todo?

<p>Efisiensi waktu dan energi (A)</p> Signup and view all the answers

Mengapa pseudocode penting dalam pemrograman?

<p>Meningkatkan pemahaman pendekatan dalam algoritma (D)</p> Signup and view all the answers

Apa yang harus dilakukan sebelum menyelesaikan todo yang paling membutuhkan usaha besar?

<p>Menilai dampak setiap todo jika terselesaikan (B)</p> Signup and view all the answers

Apa yang dibutuhkan untuk mengurutkan todo berdasarkan usaha dan urgensi?

<p>Mengumpulkan semua todo dalam satu tempat (C)</p> Signup and view all the answers

Apa yang terjadi jika seorang programmer melanggar aturan sintaksis?

<p>Program gagal atau error untuk dijalankan (D)</p> Signup and view all the answers

Apa peran dari logika perulangan dalam pemrograman?

<p>Menyederhanakan pengulangan kode yang sama (D)</p> Signup and view all the answers

Tipe data manakah yang memiliki dua nilai saja?

<p>Boolean (D)</p> Signup and view all the answers

Ketika menggunakan operator '==' dalam pemrograman, kita melakukan apa?

<p>Perbandingan nilai dari dua variabel (D)</p> Signup and view all the answers

Apa yang menjadi ciri utama dari JavaScript?

<p>Digunakan untuk membuat tampilan web interaktif (D)</p> Signup and view all the answers

Apa yang sebaiknya dilakukan sebelum mengomunikasikan dokumentasi teknis?

<p>Membaca kembali dokumentasi untuk memastikan kebenarannya (B)</p> Signup and view all the answers

Mengapa penting untuk memiliki outline saat membuat dokumentasi teknis?

<p>Agar semua informasi tertulis dengan rapi dan terstruktur (D)</p> Signup and view all the answers

Apa yang harus dipastikan setelah menyelesaikan dokumentasi teknis?

<p>Semua informasi harus dikonfirmasi dan tidak ada typo (A)</p> Signup and view all the answers

Siapa yang sebaiknya menjadi fokus dalam penulisan dokumentasi teknis?

<p>Semua pemangku kepentingan yang membutuhkan informasi (C)</p> Signup and view all the answers

Apa salah satu risiko ketika tidak memperhatikan keamanan dokumentasi teknis?

<p>Kebocoran informasi penting dapat terjadi (D)</p> Signup and view all the answers

Apa yang sebaiknya dilakukan ketika deadline pembuatan dokumentasi mendekat?

<p>Segera menyelesaikan dokumentasi dan menepati deadline (C)</p> Signup and view all the answers

Mengapa etika dan adab penting saat mengomunikasikan dokumentasi teknis?

<p>Sopan santun diperlukan untuk menghindari masalah hubungan (A)</p> Signup and view all the answers

Apa yang dapat digunakan untuk membantu membuat dokumentasi teknis dalam Javascript?

<p>JSDoc (D)</p> Signup and view all the answers

Apa tujuan utama dari dokumen Spesifikasi Kebutuhan Aplikasi Perangkat Lunak?

<p>Menggambarkan kebutuhan fungsional dan non-fungsional aplikasi (D)</p> Signup and view all the answers

Dalam menulis dokumen Spesifikasi Kebutuhan Perangkat Lunak, bagian apa yang menjelaskan istilah teknis?

<p>Glosarium (C)</p> Signup and view all the answers

Apa yang menjadi fokus utama dari kebutuhan non-fungsional dalam dokumen SKPL?

<p>Dukungan terhadap kebutuhan fungsional (B)</p> Signup and view all the answers

Apa yang dihasilkan oleh compiler setelah mengonversi source code?

<p>Berkas executable (D)</p> Signup and view all the answers

Apa kekurangan utama dari penggunaan interpreter dibandingkan compiler?

<p>Lambat dalam eksekusi program (B)</p> Signup and view all the answers

Apa yang dimaksud dengan kebutuhan fungsional dalam spesifikasi kebutuhan perangkat lunak?

<p>Fitur-fitur yang ditawarkan aplikasi (B)</p> Signup and view all the answers

Bagaimana sebuah aplikasi berinteraksi dengan perangkat keras atau perangkat lunak lain dijelaskan dalam dokumen?

<p>Antarmuka Eksternal (D)</p> Signup and view all the answers

Apa yang terjadi jika sebuah program yang menggunakan compiler memiliki kesalahan penulisan kode?

<p>Program tidak akan dijalankan (C)</p> Signup and view all the answers

Apa tujuan dari teknik decomposition dalam penyelesaian masalah?

<p>Membagi masalah besar menjadi bagian yang lebih kecil (D)</p> Signup and view all the answers

Dalam konteks dokumen SKPL, apa fungsi dari Rencana Pengembangan Sistem?

<p>Menjelaskan asumsi pengembangan sistem di masa depan (B)</p> Signup and view all the answers

Mengapa pattern recognition penting dalam penyelesaian masalah?

<p>Untuk mempelajari pola dan memprediksi solusi (A)</p> Signup and view all the answers

Apa yang akan dijelaskan pada bagian Deskripsi Umum dalam SKPL?

<p>Fitur dan fungsi utama aplikasi (A)</p> Signup and view all the answers

Apa yang dimaksud dengan abstraksi dalam berpikir komputasional?

<p>Menyaring informasi yang tidak perlu dan fokus pada data umum (C)</p> Signup and view all the answers

Apa yang membuat dokumen SKPL penting bagi pihak investor?

<p>Memberikan gambaran umum terkait fitur aplikasi (B)</p> Signup and view all the answers

Bahasa pemrograman mana yang memerlukan compiler?

<p>C# (C)</p> Signup and view all the answers

Langkah apa yang termasuk dalam pembuatan algoritma?

<p>Menyusun instruksi yang jelas dari titik awal ke titik akhir (A)</p> Signup and view all the answers

Apa manfaat dari penggunaan glosarium dalam dokumen SKPL?

<p>Membantu dalam memahami istilah-istilah teknis (A)</p> Signup and view all the answers

Mengapa evaluasi solusi penting dalam proses penyelesaian masalah?

<p>Untuk memastikan solusi yang diperoleh efektif sebelum melanjutkan (A)</p> Signup and view all the answers

Apa karakteristik khas dari bahasa pemrograman yang berjalan dengan interpreter?

<p>Dapat dijalankan di banyak platform (C)</p> Signup and view all the answers

Apa fungsi dari simbol terminator dalam flowchart?

<p>Menunjukkan titik awal atau akhir dari sebuah proses (B)</p> Signup and view all the answers

Apa yang terjadi jika komunikasi tim tidak efektif dalam kolaborasi?

<p>Informasi tidak tersampaikan dengan baik (B)</p> Signup and view all the answers

Mengapa semangat dalam tim penting selama kolaborasi?

<p>Mempengaruhi mental anggota tim (A)</p> Signup and view all the answers

Apa yang harus dilakukan saat menghadapi banyak tugas yang harus dikerjakan?

<p>Menentukan prioritas tugas (D)</p> Signup and view all the answers

Apa yang harus dilakukan untuk menghindari sikap tidak tanggap dalam kerja jarak jauh?

<p>Saling berkomunikasi secara jarak jauh (D)</p> Signup and view all the answers

Simbol mana yang digunakan untuk menunjukkan adanya pemilihan keputusan dalam flowchart?

<p>Decision (B)</p> Signup and view all the answers

Bagaimana seharusnya anggota tim bersikap dalam diskusi?

<p>Mendengarkan dan menghargai pendapat anggota lain (D)</p> Signup and view all the answers

Apa yang dimaksud dengan flowchart?

<p>Penggambaran langkah-langkah dan keputusan secara visual (C)</p> Signup and view all the answers

Apa yang perlu dilakukan sebelum melanjutkan ke permasalahan baru?

<p>Melakukan evaluasi terhadap solusi yang telah diperoleh (A)</p> Signup and view all the answers

Apa yang sebaiknya digunakan untuk menyimpan nilai yang tidak akan berubah setelah diinisialisasi dalam JavaScript?

<p>const (D)</p> Signup and view all the answers

Tipe data mana yang tidak termasuk dalam lima tipe data umum yang digunakan di JavaScript?

<p>Array (B)</p> Signup and view all the answers

Apa yang dimaksud dengan proses yang dilakukan secara berulang dalam pemrograman?

<p>Looping (A)</p> Signup and view all the answers

Mengapa penting untuk memperhatikan kondisi tempat belajar saat belajar pemrograman?

<p>Karena otak berasosiasi dengan konteks pembelajaran (B)</p> Signup and view all the answers

Apa keuntungan dari menggunakan CSS dalam mendesain website?

<p>Mengontrol layout dengan presisi (A)</p> Signup and view all the answers

Apa fungsi utama dari Version Control System?

<p>Mengatur perubahan dan konfigurasi aplikasi (C)</p> Signup and view all the answers

Apa yang perlu diperhatikan untuk meningkatkan kemampuan belajar programming?

<p>Berlatih berdasarkan topik yang diminati (D)</p> Signup and view all the answers

Apa yang dimaksud dengan commit dalam penggunaan Git?

<p>Menyimpan perubahan dalam repository (A)</p> Signup and view all the answers

Apa yang dihasilkan dari penggunaan let dalam JavaScript?

<p>Variabel yang dapat diubah nilainya (A)</p> Signup and view all the answers

Mengapa penting untuk mengikuti style guide dalam pengembangan perangkat lunak?

<p>Menjaga konsistensi penulisan kode (D)</p> Signup and view all the answers

Apa yang menjadi fungsi utama dari HTML?

<p>Merancang tampilan website (A)</p> Signup and view all the answers

Apa yang diatur oleh CSS pada elemen HTML?

<p>Penampilan visual (C)</p> Signup and view all the answers

Apa keuntungan dari menggunakan komentar dalam kode?

<p>Membantu menjelaskan kode kepada pembaca (B)</p> Signup and view all the answers

Apa tujuan dari dokumentasi teknis aplikasi?

<p>Membantu pengguna memahami produk (C)</p> Signup and view all the answers

Apa yang perlu diperhatikan saat melakukan pengarsipan perangkat lunak?

<p>Proses mengarsipkan berkas sebagai cadangan (A)</p> Signup and view all the answers

Jenis komentar apa yang dapat digunakan untuk menonaktifkan sebuah perintah?

<p>Singleline Comment (C)</p> Signup and view all the answers

Mana di antara berikut yang merupakan contoh dari statement dalam pemrograman?

<p>Menampilkan output ke layar (D)</p> Signup and view all the answers

Mengapa penting untuk menetapkan target belajar saat mempelajari pemrograman?

<p>Agar lebih terarah dan terukur (A)</p> Signup and view all the answers

Apa karakter yang umum digunakan untuk menandai akhir pernyataan dalam banyak bahasa pemrograman?

<p>; (B)</p> Signup and view all the answers

Apa yang dimaksud dengan Code Convention?

<p>Aturan penulisan kode yang disepakati oleh banyak developer (A)</p> Signup and view all the answers

Manakah dari pernyataan berikut yang benar mengenai CSS?

<p>CSS merupakan standard W3C untuk styling (A)</p> Signup and view all the answers

Apa saja yang termasuk dalam dokumentasi teknis untuk pengguna?

<p>Panduan cara instalasi dan catatan rilis (A)</p> Signup and view all the answers

Apa yang dimaksud dengan selection dalam konsep dasar pemrograman?

<p>Logika pemilihan berdasarkan kondisi (A)</p> Signup and view all the answers

Apa yang akan dimudahkan dengan adanya style guide?

<p>Menjaga kejelasan kode (D)</p> Signup and view all the answers

Apa yang menjadi fokus dari marketing support dalam dokumentasi teknis?

<p>Memasarkan produk perusahaan (C)</p> Signup and view all the answers

Apa yang dapat terjadi jika dokumentasi disimpan secara offline?

<p>Informasi sulit didapatkan saat dibutuhkan (C)</p> Signup and view all the answers

Mengapa komentari pada kode harus bijak?

<p>Karena tidak semua kode perlu dikomentari (D)</p> Signup and view all the answers

Apa yang dimaksud dengan end-user support dalam dokumentasi teknis?

<p>Dokumen untuk mendukung pengguna memahami produk (A)</p> Signup and view all the answers

Flashcards

User Requirement Specification (URS)

Dokumen yang berisi kebutuhan pengguna sebelum pengembangan software.

Interview

Teknik pengumpulan kebutuhan pengguna melalui tanya jawab.

User Stories

Menuliskan kebutuhan pengguna berdasarkan peran dan keinginannya.

Spesifikasi Teknis Aplikasi

Dokumen berisi informasi detail tentang fungsionalitas sistem/aplikasi.

Signup and view all the flashcards

Jelas dan Tidak Ambigu

Prinsip penting dalam membuat spesifikasi teknis yang mudah dipahami.

Signup and view all the flashcards

Acceptance Criteria

Klausul kriteria yang menentukan apakah suatu fitur sudah berfungsi dengan baik.

Signup and view all the flashcards

Contingency Plan

Rencana alternatif yang disiapkan jika rencana utama gagal.

Signup and view all the flashcards

Kebutuhan Stakeholder

Pentingnya mempertimbangkan kebutuhan berbagai pihak dalam pengembangan aplikasi.

Signup and view all the flashcards

Dekomposisi

Teknik memecah masalah besar menjadi bagian-bagian kecil yang lebih mudah dipahami dan diselesaikan.

Signup and view all the flashcards

Pengenalan Pola

Menemukan pola atau kesamaan dalam masalah untuk membantu memprediksi solusi.

Signup and view all the flashcards

Abstraksi

Mengabaikan detail yang tidak penting untuk fokus pada informasi yang relevan.

Signup and view all the flashcards

Algoritma

Urutan langkah-langkah yang jelas dan terstruktur untuk menyelesaikan masalah.

Signup and view all the flashcards

Evaluasi

Memeriksa apakah solusi yang ditemukan sudah benar dan efektif.

Signup and view all the flashcards

Flowchart

Diagram yang menggambarkan alur proses dengan simbol-simbol tertentu.

Signup and view all the flashcards

Terminator

Menunjukkan awal atau akhir dari sebuah proses.

Signup and view all the flashcards

Proses

Menunjukkan aktivitas, langkah, atau proses dalam flowchart.

Signup and view all the flashcards

Data

Menunjukkan input atau output data dalam flowchart.

Signup and view all the flashcards

Decision

Menunjukkan titik keputusan atau percabangan dalam flowchart.

Signup and view all the flashcards

Arrow

Menunjukkan hubungan dan arah alur dalam flowchart.

Signup and view all the flashcards

Database

Merepresentasikan penyimpanan data dalam flowchart.

Signup and view all the flashcards

Document

Merepresentasikan dokumen atau laporan dalam flowchart.

Signup and view all the flashcards

Efektifitas Komunikasi

Pentingnya komunikasi yang jelas dan terbuka dalam tim.

Signup and view all the flashcards

Bertanggung Jawab

Menunjukkan kemampuan dan kepercayaan antar anggota tim.

Signup and view all the flashcards

Spesifikasi Kebutuhan Aplikasi Perangkat Lunak (SKPL)

Dokumen yang berisi kebutuhan pengguna sebelum pengembangan aplikasi perangkat lunak.

Signup and view all the flashcards

Manfaat SKPL: Desain UI/UX

Membantu tim desainer UI/UX memahami kebutuhan aplikasi dan mencocokkan desain dengannya.

Signup and view all the flashcards

Manfaat SKPL: Tim Pengujian

Memberikan panduan bagi tim penguji untuk membuat studi kasus pengujian aplikasi.

Signup and view all the flashcards

Manfaat SKPL: Pengguna (End User)

Memberikan gambaran umum aplikasi yang akan dibuat kepada pengguna.

Signup and view all the flashcards

Manfaat SKPL: Investor

Membantu investor memahami fitur yang ditawarkan aplikasi sebelum memutuskan investasi.

Signup and view all the flashcards

Elemen SKPL: Tujuan Aplikasi

Keterangan tentang tujuan utama aplikasi yang akan dibuat.

Signup and view all the flashcards

Elemen SKPL: Deskripsi Umum Aplikasi

Penjelasan umum mengenai aplikasi, seperti fungsinya dan target penggunanya.

Signup and view all the flashcards

Elemen SKPL: Kebutuhan Fungsional

Fitur yang harus dimiliki aplikasi agar dapat berfungsi dengan baik.

Signup and view all the flashcards

Elemen SKPL: Kebutuhan Non-Fungsional

Aspek aplikasi yang tidak berhubungan langsung dengan fitur utama, tetapi mempengaruhi pengalaman pengguna.

Signup and view all the flashcards

Standar Penulisan SKPL: IEEE 1998

Struktur penulisan dokumen SKPL yang dapat disesuaikan dengan kebutuhan.

Signup and view all the flashcards

Bab SKPL: Pengantar

Bab dalam SKPL yang menjelaskan fungsi dan cara kerja aplikasi.

Signup and view all the flashcards

Bab SKPL: Glosarium

Bab SKPL yang berisi definisi istilah-istilah teknis yang digunakan dalam dokumen.

Signup and view all the flashcards

Bab SKPL: Kebutuhan Pengguna

Bab SKPL yang menjelaskan layanan yang disediakan aplikasi untuk pengguna.

Signup and view all the flashcards

Bab SKPL: Sistem Arsitektur

Bab SKPL yang menjelaskan arsitektur sistem aplikasi tingkat tinggi.

Signup and view all the flashcards

Bab SKPL: Spesifikasi Kebutuhan Sistem

Bab SKPL yang menjelaskan kebutuhan fungsional dan non-fungsional serta interaksi dengan sistem lain.

Signup and view all the flashcards

Bab SKPL: Model Sistem

Bab SKPL yang menjelaskan model data dan aliran data yang digunakan dalam aplikasi.

Signup and view all the flashcards

Bab SKPL: Rencana Pengembangan Sistem

Bab SKPL yang menjelaskan asumsi tentang rencana pengembangan sistem di masa depan.

Signup and view all the flashcards

Bab SKPL: Apendiks

Bab SKPL yang berisi informasi tambahan yang mendukung pengembangan aplikasi.

Signup and view all the flashcards

Sintaksis

Aturan-aturan yang ada dalam bahasa pemrograman. Harus dipatuhi agar kode berjalan dengan benar.

Signup and view all the flashcards

Statement

Kode komputer yang terdiri dari instruksi tunggal yang saling berkaitan dan membentuk program.

Signup and view all the flashcards

Pseudocode

Kode semu, ditulis dalam bahasa manusia untuk menggambarkan sintaks, statement, atau algoritma.

Signup and view all the flashcards

Keyword

Kata kunci yang disediakan oleh bahasa pemrograman, tidak bisa berdiri sendiri untuk menjalankan program.

Signup and view all the flashcards

Variabel

Simbol yang digunakan untuk menyimpan nilai data dalam program. Memiliki nama, tipe data, dan nilai.

Signup and view all the flashcards

Operator Penugasan

Sintaks "=" yang digunakan untuk menugaskan nilai ke variabel.

Signup and view all the flashcards

Tipe Data Numerik

Data yang berbentuk angka, contohnya integer (bilangan bulat) dan float (bilangan desimal).

Signup and view all the flashcards

Tipe Data Boolean

Data yang hanya memiliki dua nilai, yaitu true atau false.

Signup and view all the flashcards

Tipe Data Teks

Data yang berbentuk teks atau karakter, contohnya char (satu karakter) dan string (banyak karakter).

Signup and view all the flashcards

Logika Perbandingan

Logika yang digunakan untuk membandingkan dua nilai dengan kondisi tertentu, seperti operator "==" (sama dengan).

Signup and view all the flashcards

Logika Perbandingan Sederhana

Logika perbandingan sederhana, mengecek suatu kondisi menggunakan IF/Else, menghasilkan dua kemungkinan.

Signup and view all the flashcards

Logika Perbandingan Kompleks

Logika perbandingan kompleks yang menggabungkan IF/Else dengan AND dan OR.

Signup and view all the flashcards

Logika Perulangan

Logika yang digunakan untuk mengulangi kode secara berulang, bisa menggunakan While atau For.

Signup and view all the flashcards

Perulangan While

Perulangan yang digunakan ketika belum mengetahui berapa kali perulangan akan berjalan.

Signup and view all the flashcards

JavaScript

Bahasa pemrograman yang digunakan untuk membuat tampilan web dinamis dan interaktif.

Signup and view all the flashcards

String

Tipe data yang digunakan untuk menyimpan teks dan karakter.

Signup and view all the flashcards

Number

Tipe data yang digunakan untuk menyimpan angka.

Signup and view all the flashcards

Boolean

Tipe data yang merepresentasikan nilai benar atau salah.

Signup and view all the flashcards

Undefined

Tipe data yang menyatakan bahwa nilai belum didefinisikan atau belum tersedia.

Signup and view all the flashcards

Null

Tipe data yang menyatakan bahwa nilai tidak tersedia atau tidak valid.

Signup and view all the flashcards

let

Kata kunci untuk mendeklarasikan variabel yang nilainya dapat berubah.

Signup and view all the flashcards

const

Kata kunci untuk mendeklarasikan variabel yang nilainya tidak dapat berubah setelah diinisialisasi.

Signup and view all the flashcards

HTML

Bahasa pemrograman yang digunakan untuk merancang tampilan website.

Signup and view all the flashcards

CSS

Bahasa pemrograman yang digunakan untuk mengatur visualisasi elemen HTML.

Signup and view all the flashcards

Pengarsipan Perangkat Lunak

Proses untuk menyimpan perangkat lunak atau aplikasi sebagai cadangan.

Signup and view all the flashcards

Sequences

Serangkaian instruksi yang dieksekusi secara berurutan.

Signup and view all the flashcards

Selection

Memilih jalur program sesuai kondisi tertentu.

Signup and view all the flashcards

Looping

Proses pengulangan suatu blok kode secara berulang.

Signup and view all the flashcards

Mengatur Waktu

Menentukan tujuan belajar dan mengalokasikan waktu.

Signup and view all the flashcards

Perhatikan Kondisi Tempat Belajar

Memilih lingkungan belajar yang nyaman dan mendukung fokus.

Signup and view all the flashcards

Dokumentasi untuk Semua

Dokumentasi teknis yang baik harus dapat dipahami oleh semua orang, termasuk tim Anda, pengguna aplikasi, dan stakeholder lainnya.

Signup and view all the flashcards

Kerangka Dokumentasi

Sebelum Anda mulai menulis dokumentasi teknis, rancang kerangka atau outline terlebih dahulu agar isi penulisan Anda terstruktur dan mudah dipahami.

Signup and view all the flashcards

Jelas dan Tepat

Dokumentasi teknis harus akurat dan mudah dipahami. Hindari bahasa yang terlalu teknis atau ambigu.

Signup and view all the flashcards

Media Dokumentasi

Dokumentasi teknis yang efektif bisa ditulis dengan menggunakan berbagai media, termasuk gambar, ilustrasi, dan teks. Gunakan media yang paling tepat untuk menyampaikan pesan Anda.

Signup and view all the flashcards

Revisi Dokumentasi

Pastikan Anda memeriksa kembali dokumentasi teknis Anda sebelum dipublikasikan. Periksa kesalahan penulisan, kejelasan, dan kelengkapan informasi.

Signup and view all the flashcards

Aksesibilitas Dokumentasi

Dokumentasi teknis yang baik harus jelas, ringkas, dan mudah ditemukan. Pertimbangkan bagaimana pembaca Anda akan menemukan dan menggunakan informasi yang Anda berikan.

Signup and view all the flashcards

Etika Komunikasi

Ketika Anda berkomunikasi mengenai dokumentasi teknis, lakukan dengan sopan dan santun. Hormati waktu dan kebutuhan stakeholder.

Signup and view all the flashcards

Dokumentasi Online

Simpan dokumentasi teknis aplikasi Anda secara online agar mudah diakses dan diupdate. Namun, perhatikan keamanan informasi yang bersifat rahasia.

Signup and view all the flashcards

Version Control System (VCS)

Sistem yang digunakan untuk melacak perubahan dalam kode dan file proyek, memungkinkan pengembang untuk berkolaborasi, membatalkan perubahan, dan menyimpan berbagai versi proyek.

Signup and view all the flashcards

GitHub

Platform online yang populer untuk hosting repositori Git, yang digunakan untuk menyimpan dan mengelola kode proyek.

Signup and view all the flashcards

Style Guide

Serangkaian aturan dan panduan untuk menulis kode dengan cara yang konsisten, mudah dibaca, dan dipelihara.

Signup and view all the flashcards

Code Convention

Aturan standar penulisan kode yang diterima luas, yang membantu memastikan konsistensi dan kualitas kode di seluruh proyek.

Signup and view all the flashcards

Komentar Satu Baris

Jenis komentar satu baris dalam kode program, dimulai dengan tanda //.

Signup and view all the flashcards

Komentar Multi-baris

Jenis komentar di blok kode yang dapat mencakup beberapa baris, diapit oleh tanda /* dan */.

Signup and view all the flashcards

Dokumentasi Teknis

Dokumentasi yang berisi informasi komprehensif tentang perangkat lunak, termasuk persyaratan, desain, penggunaan, dan pemeliharaan.

Signup and view all the flashcards

Dokumentasi Dukungan Pengguna

Jenis dokumentasi yang fokus pada dukungan bagi akhir pengguna, seperti panduan pengguna, bantuan online, atau tutorial.

Signup and view all the flashcards

Dokumentasi Dukungan Pemasaran

Jenis dokumentasi yang digunakan untuk memasarkan produk dan perusahaan, seperti video demo atau presentasi.

Signup and view all the flashcards

Dokumentasi Dukungan Pengembangan

Jenis dokumentasi yang berisi informasi teknis dan fungsional untuk pengembang, seperti spesifikasi desain atau panduan pengembangan.

Signup and view all the flashcards

Dokumentasi Dukungan Organisasi

Jenis dokumentasi yang memberikan informasi tentang struktur organisasi, kebijakan, dan prosedur kerja internal.

Signup and view all the flashcards

Menyimpan Versi Kode

Kemampuan untuk menyimpan berbagai versi kode proyek, memungkinkan pengembang untuk mengakses versi sebelumnya jika diperlukan.

Signup and view all the flashcards

Membatalkan Perubahan

Fitur yang memungkinkan pengembang untuk kembali ke versi kode tertentu di masa lalu.

Signup and view all the flashcards

Meningkatkan Komunikasi

Meningkatkan pemahaman dan komunikasi antar pengembang dengan menggunakan aturan penulisan kode yang konsisten.

Signup and view all the flashcards

Meningkatkan Kualitas Kode

Mempromosikan penggunaan praktik terbaik penulisan kode, yang meminimalkan potensi kesalahan dan membuat kode lebih mudah dipelihara.

Signup and view all the flashcards

Study Notes

Spesifikasi Kebutuhan Aplikasi

  • User Requirement Specification (URS) adalah dokumen kebutuhan pengguna untuk perangkat lunak sebelum pengembangan.
  • Tujuan URS adalah memastikan pemahaman yang sama tentang kebutuhan pengguna di antara semua stakeholder.
  • URS harus menggunakan bahasa yang dimengerti semua pihak, bukan jargon teknis.
  • Teknik pengumpulan kebutuhan (requirement gathering): wawancara (interview), cerita pengguna (user stories), demonstrasi konsep (straw man), dan prototipe.
  • Spesifikasi Teknis Aplikasi berisi detail fungsionalitas, layanan, dan batasan sistem/aplikasi.
  • Prinsip spesifikasi teknis: jelas, tidak ambigu, mudah dipahami, lengkap, konsisten.
  • Pertimbangan stakeholder dalam spesifikasi teknis: detail dan kejelasan bagi pengembang, mudah dipahami oleh klien/pengguna, kriteria penerimaan yang jelas untuk pihak legal.
  • Plan B (contingency plan) penting untuk dipertimbangkan dalam pengembangan aplikasi sebagai tindakan alternatif saat rencana utama menghadapi kendala.

Spesifikasi Kebutuhan Perangkat Lunak

  • Spesifikasi Kebutuhan Aplikasi Perangkat Lunak adalah dokumen berisi cara kerja dan kebutuhan fungsional dan non-fungsional aplikasi.
  • Manfaat dokumen SKPL:
    • Panduan desainer UI/UX
    • Panduan bagi pengembang aplikasi untuk menguji aplikasi
    • Gambaran umum aplikasi bagi pengguna akhir
    • Gambaran umum fitur aplikasi bagi investor
  • Elemen dokumen SKPL:
    • Tujuan aplikasi
    • Deskripsi umum aplikasi
    • Kebutuhan fungsional dan non-fungsional
    • Performa aplikasi
    • Antarmuka eksternal
    • Batasan sistem aplikasi
  • Kebutuhan fungsional: fitur aplikasi yang membantu pengguna menyelesaikan tugas.
  • Kebutuhan non-fungsional: mendukung kebutuhan fungsional, memengaruhi user experience (misalnya kinerja, keandalan, keamanan, kegunaan).
  • Standar penulisan SKPL dapat mengacu pada standar IEEE 1998 yang dapat disesuaikan dengan kebutuhan aplikasi.
  • Struktur dokumen SKPL:
    • Pengantar: fungsi, cara kerja, tujuan
    • Glosarium: definisi istilah teknis
    • Kebutuhan pengguna: layanan sistem
    • Sistem arsitektur: gambaran umum arsitektur
    • Spesifikasi kebutuhan sistem: fungsional dan non-fungsional
    • Model sistem: model objek, data-flow, data
    • Rencana pengembangan: pertimbangan masa depan
    • Lampiran: detail tambahan

Komunikasi Aplikasi dengan Komputer

  • Bahasa pemrograman tidak langsung diinterpretasikan oleh komputer, memerlukan compiler atau interpreter.
  • Compiler: mengubah source code ke machine code langsung, eksekusi cepat, hasil berupa file executable.
  • Interpreter: membaca dan eksekusi baris per baris, lebih mudah digunakan pemula, tidak menghasilkan file executable, eksekusi lambat, cross-platform.
  • Bahasa yang menggunakan compiler (C, C++, C#, Swift, Java) dan Interpreter (JavaScript, Python, PHP, Ruby).

Cara Berpikir Komputasional

  • Decomposition: memecah masalah besar menjadi bagian kecil.
  • Pattern recognition: mempelajari pola permasalahan untuk memprediksi solusi.
  • Abstraction: menyaring data, mengesampingkan detail untuk fokus pada inti masalah.
  • Algorithm: merangkai instruksi terstruktur untuk menyelesaikan masalah.
  • Evaluation: mengevaluasi solusi yang didapatkan sebelum melangkah ke tugas baru.

Flowchart

  • Flowchart (diagram alur): representasi visual langkah-langkah, keputusan, dan alur kerja.
  • Jenis flowchart: proses, workflow, program.
  • Simbol-simbol flowchart:
    • Terminator: awal/akhir
    • Proses: aktivitas, langkah
    • Data: input/output
    • Decision: pengambilan keputusan
    • Arrow: arah proses
    • Database: penyimpanan data
    • Document: dokumen/laporan

Sikap Kerja dalam Kolaborasi Perencanaan Aplikasi

  • Efektifkan komunikasi.
  • Bertanggung jawab pada tugas.
  • Berikan semangat pada tim.
  • Utamakan diskusi.
  • Hindari sikap tidak tanggap.
  • Tentukan prioritas kerja:
    • Kumpulkan semua todo
    • Identifikasi urgent vs important
    • Perhitungkan nilai tiap todo
    • Urutkan berdasarkan usaha yang dibutuhkan
    • Hapus yang tidak perlu.
  • Fleksibel dan mudah beradaptasi.

Konsep Dasar Pemrograman

  • Sintaksis: aturan penulisan dalam bahasa pemrograman (case sensitive).
  • Statement: instruksi dalam program (menggunakan semicolon ; sebagai penutup di beberapa bahasa pemrograman).
  • Pseudocode: penulisan sintaks, statement, dan algoritma dalam bahasa manusia.
  • Whitespace: spasi atau tab untuk indentasi (sensitif di beberapa bahasa, misalnya Python).
  • Keyword: kata kunci dalam bahasa pemrograman.

Dasar Pemrograman Secara Umum

  • Variabel: menyimpan data.
  • Operator sama dengan (=): assignment operator.
  • Tipe data: numerik (int, float), boolean (true/false), teks/karakter (char, string).
  • Logika perbandingan: membandingkan dua nilai, IF/Else (sederhana), IF/Else dengan AND/OR (kompleks).
  • Logika perulangan: While/For (mengulangi statement).

Dasar Pemrograman JavaScript

  • Variabel: let/const untuk mendefinisikan variabel.
  • Tipe data: undefined, number, string, boolean, null.
  • Konsep dasar pemrograman: urutan, pemilihan kondisi, perulangan (sequence, selection, loop).

Tips Sikap Kerja untuk Belajar Pemrograman

  • Atur waktu belajar.
  • Perhatikan kondisi tempat belajar.
  • Mulai dari yang sederhana.

Modifikasi Aplikasi Perangkat Lunak

  • HTML: bahasa markup untuk tampilan website.
  • Tag HTML: untuk memformat teks, membuat heading, paragraf, link.
  • Contoh tag HTML:, , , <body>,<h1>, <p>, <a></li> <li>CSS: mengatur visualisasi elemen HTML.</li> <li>CSS: declarative language, tidak berlogika, mengatur tampilan HTML.</li> <li>Keuntungan penggunaan CSS: layout presisi,hindari pengulangan styling, dukungan oleh banyak browser.</li> </ul> <h3 id="tips-sikap-kerja-untuk-meningkatkan-keahlian-bahasa-pemrograman" class="contents-heading">Tips Sikap Kerja untuk Meningkatkan Keahlian Bahasa Pemrograman</h3> <ul> <li>Banyak berlatih.</li> <li>Berlatih berdasarkan topik yang diminati.</li> </ul> <h3 id="dokumentasi-pemrograman-dan-pengembangan-aplikasi-perangkat-lunak" class="contents-heading">Dokumentasi Pemrograman dan Pengembangan Aplikasi Perangkat Lunak</h3> <ul> <li>Pengarsipan versi Perangkat Lunak: penyimpanan cadangan program/data.</li> <li>Version Control System (Git): alat pengaturan perubahan & konfigurasi, backup, dan sejarah perubahan.</li> <li>GitHub: layanan hosting repository Git berbasis web, banyak fitur, contoh pengarsipan.</li> <li>Commit: menyimpan perubahan dalam Git.</li> <li>Revert: kembali ke versi sebelumnya.</li> <li>Style Guide: aturan penulisan kode yang baik (Code Convention).</li> <li>Alasan pentingnya style guide: konsistensi, onboarding, wawasan, dan code review.</li> <li>Komentar kode: penjelasan kode (singleline/multiline, non-aktif baris kode).</li> <li>Dokumentasi Teknis Aplikasi: deskripsi komprehensif perangkat lunak.</li> <li>Jenis dokumentasi teknis: <ul> <li>End-user support: panduan pengguna, bantuan online, tutorial.</li> <li>Marketing support: presentasi, video pelatihan, info produk.</li> <li>Development support: spesifikasi teknis, panduan pengembangan, glosarium.</li> <li>Organization support: struktur organisasi, kebijakan perusahaan.</li> </ul> </li> <li>JSDoc: tools untuk mendokumentasikan kode Javascript.</li> <li>Manfaat dokumentasi teknis: retensi pengguna, penghematan waktu, peningkatan penjualan.</li> <li>Cara membuat dokumentasi teknis: tentukan target, gunakan outline, ilustrasi, dan periksa kembali.</li> </ul> </div> </div> </div> <div class="mt-12"> <div class="rounded-2xl border transition-shadow transition-border transition-colors duration-200 bg-gradient-to-t from-primary-0 to-primary-1 border-0 dark:border-primary-3 text-surface-0 sm:p-0 p-0 border-surface-4 dark:border-elevated-4 overflow-hidden"> <div class="flex flex-col md:flex-row relative"> <div class="w-full md:w-1/2 rounded-t-3xl md:rounded-l-3xl p-8 flex items-center relative z-10"> <div class="space-y-4 mr-4 text-center md:text-left"> <h2 class="text-2xl font-semibold text-white"> Studying That Suits <span class="text-secondary-1"> You </span> </h2> <p class="text-white text-md"> Use AI to generate personalized quizzes and flashcards to suit your learning preferences. </p> <div class="relative z-20 flex justify-center md:justify-start"> <button class="px-4 py-2.5 text-md rounded-xl w-auto bg-secondary-1 border-secondary-0 hover:bg-secondary-2 hover:border-secondary-1 active:bg-secondary-0 focus:shadow-outline-yellow text-elevated-4 disabled:bg-surface-4 disabled:text-elevated-0 disabled:border-surface-6 inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 items-center register-modal-button" x-data="" @click="$dispatch('open-modal', 'register')" color="highlight" type="button"> Get started for free </button> </div> </div> </div> <div class="w-full md:w-1/2 -mt-16 md:mt-0 relative z-0 md:z-10"> <img src="https://imagedelivery.net/1wpWmoOF0K-Y_NxLJO3e2w/9386c9f5-826e-486e-a4a1-ba6708215800/default" alt="Quiz Team" class="w-full h-56 sm:h-full object-cover object-top rounded-t-[2.5rem] md:rounded-r-2xl md:rounded-l-none"> </div> </div> </div> </div> <div class="dark:bg-elevated-4 mt-12"> <h2 class="text-xl font-bold contents-heading" id="study-notes"> Description </h2> <div class="rounded-2xl border transition-shadow transition-border transition-colors duration-200 bg-surface-0 dark:bg-elevated-3 border-surface-4 dark:border-elevated-4 sm:p-4 p-4 border-surface-4 dark:border-elevated-4 mt-6"> <div class="prose dark:prose-dark max-w-4xl"> <p>Quiz ini menguji pemahaman Anda tentang spesifikasi kebutuhan pengguna (URS) dan aspek penting dalam pembuatan spesifikasi teknis aplikasi. Akan ada pertanyaan mengenai prinsip spesifikasi, pemahaman stakeholder, kriteria penerimaan, dan teknik pengumpulan kebutuhan. Siapkan diri Anda untuk menjawab dengan baik.</p> </div> </div> </div> </article> </main> <aside class="lg:col-span-1 hidden lg:block"> <div class="sticky top-6"> <div class="rounded-2xl border transition-shadow transition-border transition-colors duration-200 bg-surface-0 dark:bg-elevated-3 border-surface-4 dark:border-elevated-4 sm:p-0 p-0 border-surface-4 dark:border-elevated-4"> <div x-data="visibleNavHighlighter" class="flex flex-col gap-6 items-start justify-start w-full flex-shrink-0 relative overflow-y-auto pl-4 pb-4 pt-4 max-h-[calc(100vh-3rem)]"> <div class="flex flex-col gap-4 items-start justify-start w-full flex-shrink-0 relative"> <div class="px-3 flex flex-row gap-2 items-start justify-center w-full flex-shrink-0 relative"> <div x-cloak class="w-1 h-6 bg-primary-1 dark:bg-primary-1 rounded-lg" :class="{ 'opacity-100': visibleHeadingId === 'introduction', 'opacity-0': visibleHeadingId !== 'introduction' }"> </div> <div class="text-elevated-3 dark:text-surface-4 text-left font-semibold text-base leading-6 flex-1" :class="{ 'text-primary-1 dark:text-primary-1': visibleHeadingId === 'introduction' }"> <a href="#introduction"> Introduction </a> </div> </div> <div class="px-3 flex flex-row gap-2 items-start justify-center w-full flex-shrink-0 relative"> <div x-cloak class="w-1 h-6 bg-primary-1 dark:bg-primary-1 rounded-lg" :class="{ 'opacity-100': visibleHeadingId === 'podcast', 'opacity-0': visibleHeadingId !== 'podcast' }"> </div> <div class="text-elevated-3 dark:text-surface-4 text-left font-semibold text-base leading-6 flex-1" :class="{ 'text-primary-1 dark:text-primary-1': visibleHeadingId === 'podcast' }"> <a href="#podcast"> Podcast </a> </div> </div> <div class="px-3 flex flex-row gap-2 items-start justify-center w-full flex-shrink-0 relative"> <div x-cloak class="w-1 h-6 bg-primary-1 dark:bg-primary-1 rounded-lg" :class="{ 'opacity-100': visibleHeadingId === 'questions-and-answers', 'opacity-0': visibleHeadingId !== 'questions-and-answers' }"> </div> <div class="text-elevated-3 dark:text-surface-4 text-left font-semibold text-base leading-6 flex-1" :class="{ 'text-primary-1 dark:text-primary-1': visibleHeadingId === 'questions-and-answers' }"> <a href="#questions-and-answers"> Questions and Answers </a> </div> </div> <div class="px-3 flex flex-row gap-2 items-start justify-center w-full flex-shrink-0 relative"> <div x-cloak class="w-1 h-6 bg-primary-1 dark:bg-primary-1 rounded-lg" :class="{ 'opacity-100': visibleHeadingId === 'flashcards', 'opacity-0': visibleHeadingId !== 'flashcards' }"> </div> <div class="text-elevated-3 dark:text-surface-4 text-left font-semibold text-base leading-6 flex-1" :class="{ 'text-primary-1 dark:text-primary-1': visibleHeadingId === 'flashcards' }"> <a href="#flashcards"> Flashcards </a> </div> </div> <div class="px-3 flex flex-row gap-2 items-start justify-center w-full flex-shrink-0 relative"> <div x-cloak class="w-1 h-6 bg-primary-1 dark:bg-primary-1 rounded-lg" :class="{ 'opacity-100': visibleHeadingId === 'study-notes', 'opacity-0': visibleHeadingId !== 'study-notes' }"> </div> <div class="text-elevated-3 dark:text-surface-4 text-left font-semibold text-base leading-6 flex-1 flex items-center justify-between" :class="{ 'text-primary-1 dark:text-primary-1': visibleHeadingId === 'study-notes' }"> <a href="#study-notes"> Study Notes </a> <button @click.prevent.stop="studyNotesExpanded = !studyNotesExpanded" class="transform transition-transform duration-200" :class="{ 'rotate-180': studyNotesExpanded }"> <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg> </button> </div> </div> <div x-cloak x-show="studyNotesExpanded" x-transition.duration.200ms class="space-y-3"> <div class="px-6 flex flex-row gap-2 items-start justify-center w-full flex-shrink-0 relative"> <div x-cloak class="w-1 h-6 bg-primary-1 dark:bg-primary-1 rounded-lg" :class="{ 'opacity-100': visibleHeadingId === 'spesifikasi-kebutuhan-aplikasi', 'opacity-0': visibleHeadingId !== 'spesifikasi-kebutuhan-aplikasi' }"> </div> <div class="text-elevated-1 dark:text-surface-5 text-left font-regular text-base leading-6 flex-1" :class="{ 'text-primary-1 dark:text-primary-1': visibleHeadingId === 'spesifikasi-kebutuhan-aplikasi' }"> <a href="#spesifikasi-kebutuhan-aplikasi"> Spesifikasi Kebutuhan Aplikasi </a> </div> </div> <div class="px-6 flex flex-row gap-2 items-start justify-center w-full flex-shrink-0 relative"> <div x-cloak class="w-1 h-6 bg-primary-1 dark:bg-primary-1 rounded-lg" :class="{ 'opacity-100': visibleHeadingId === 'spesifikasi-kebutuhan-perangkat-lunak', 'opacity-0': visibleHeadingId !== 'spesifikasi-kebutuhan-perangkat-lunak' }"> </div> <div class="text-elevated-1 dark:text-surface-5 text-left font-regular text-base leading-6 flex-1" :class="{ 'text-primary-1 dark:text-primary-1': visibleHeadingId === 'spesifikasi-kebutuhan-perangkat-lunak' }"> <a href="#spesifikasi-kebutuhan-perangkat-lunak"> Spesifikasi Kebutuhan Perangkat Lunak </a> </div> </div> <div class="px-6 flex flex-row gap-2 items-start justify-center w-full flex-shrink-0 relative"> <div x-cloak class="w-1 h-6 bg-primary-1 dark:bg-primary-1 rounded-lg" :class="{ 'opacity-100': visibleHeadingId === 'komunikasi-aplikasi-dengan-komputer', 'opacity-0': visibleHeadingId !== 'komunikasi-aplikasi-dengan-komputer' }"> </div> <div class="text-elevated-1 dark:text-surface-5 text-left font-regular text-base leading-6 flex-1" :class="{ 'text-primary-1 dark:text-primary-1': visibleHeadingId === 'komunikasi-aplikasi-dengan-komputer' }"> <a href="#komunikasi-aplikasi-dengan-komputer"> Komunikasi Aplikasi dengan Komputer </a> </div> </div> <div class="px-6 flex flex-row gap-2 items-start justify-center w-full flex-shrink-0 relative"> <div x-cloak class="w-1 h-6 bg-primary-1 dark:bg-primary-1 rounded-lg" :class="{ 'opacity-100': visibleHeadingId === 'cara-berpikir-komputasional', 'opacity-0': visibleHeadingId !== 'cara-berpikir-komputasional' }"> </div> <div class="text-elevated-1 dark:text-surface-5 text-left font-regular text-base leading-6 flex-1" :class="{ 'text-primary-1 dark:text-primary-1': visibleHeadingId === 'cara-berpikir-komputasional' }"> <a href="#cara-berpikir-komputasional"> Cara Berpikir Komputasional </a> </div> </div> <div class="px-6 flex flex-row gap-2 items-start justify-center w-full flex-shrink-0 relative"> <div x-cloak class="w-1 h-6 bg-primary-1 dark:bg-primary-1 rounded-lg" :class="{ 'opacity-100': visibleHeadingId === 'flowchart', 'opacity-0': visibleHeadingId !== 'flowchart' }"> </div> <div class="text-elevated-1 dark:text-surface-5 text-left font-regular text-base leading-6 flex-1" :class="{ 'text-primary-1 dark:text-primary-1': visibleHeadingId === 'flowchart' }"> <a href="#flowchart"> Flowchart </a> </div> </div> <div class="px-6 flex flex-row gap-2 items-start justify-center w-full flex-shrink-0 relative"> <div x-cloak class="w-1 h-6 bg-primary-1 dark:bg-primary-1 rounded-lg" :class="{ 'opacity-100': visibleHeadingId === 'sikap-kerja-dalam-kolaborasi-perencanaan-aplikasi', 'opacity-0': visibleHeadingId !== 'sikap-kerja-dalam-kolaborasi-perencanaan-aplikasi' }"> </div> <div class="text-elevated-1 dark:text-surface-5 text-left font-regular text-base leading-6 flex-1" :class="{ 'text-primary-1 dark:text-primary-1': visibleHeadingId === 'sikap-kerja-dalam-kolaborasi-perencanaan-aplikasi' }"> <a href="#sikap-kerja-dalam-kolaborasi-perencanaan-aplikasi"> Sikap Kerja dalam Kolaborasi Perencanaan Aplikasi </a> </div> </div> <div class="px-6 flex flex-row gap-2 items-start justify-center w-full flex-shrink-0 relative"> <div x-cloak class="w-1 h-6 bg-primary-1 dark:bg-primary-1 rounded-lg" :class="{ 'opacity-100': visibleHeadingId === 'konsep-dasar-pemrograman', 'opacity-0': visibleHeadingId !== 'konsep-dasar-pemrograman' }"> </div> <div class="text-elevated-1 dark:text-surface-5 text-left font-regular text-base leading-6 flex-1" :class="{ 'text-primary-1 dark:text-primary-1': visibleHeadingId === 'konsep-dasar-pemrograman' }"> <a href="#konsep-dasar-pemrograman"> Konsep Dasar Pemrograman </a> </div> </div> <div class="px-6 flex flex-row gap-2 items-start justify-center w-full flex-shrink-0 relative"> <div x-cloak class="w-1 h-6 bg-primary-1 dark:bg-primary-1 rounded-lg" :class="{ 'opacity-100': visibleHeadingId === 'dasar-pemrograman-secara-umum', 'opacity-0': visibleHeadingId !== 'dasar-pemrograman-secara-umum' }"> </div> <div class="text-elevated-1 dark:text-surface-5 text-left font-regular text-base leading-6 flex-1" :class="{ 'text-primary-1 dark:text-primary-1': visibleHeadingId === 'dasar-pemrograman-secara-umum' }"> <a href="#dasar-pemrograman-secara-umum"> Dasar Pemrograman Secara Umum </a> </div> </div> <div class="px-6 flex flex-row gap-2 items-start justify-center w-full flex-shrink-0 relative"> <div x-cloak class="w-1 h-6 bg-primary-1 dark:bg-primary-1 rounded-lg" :class="{ 'opacity-100': visibleHeadingId === 'dasar-pemrograman-javascript', 'opacity-0': visibleHeadingId !== 'dasar-pemrograman-javascript' }"> </div> <div class="text-elevated-1 dark:text-surface-5 text-left font-regular text-base leading-6 flex-1" :class="{ 'text-primary-1 dark:text-primary-1': visibleHeadingId === 'dasar-pemrograman-javascript' }"> <a href="#dasar-pemrograman-javascript"> Dasar Pemrograman JavaScript </a> </div> </div> <div class="px-6 flex flex-row gap-2 items-start justify-center w-full flex-shrink-0 relative"> <div x-cloak class="w-1 h-6 bg-primary-1 dark:bg-primary-1 rounded-lg" :class="{ 'opacity-100': visibleHeadingId === 'tips-sikap-kerja-untuk-belajar-pemrograman', 'opacity-0': visibleHeadingId !== 'tips-sikap-kerja-untuk-belajar-pemrograman' }"> </div> <div class="text-elevated-1 dark:text-surface-5 text-left font-regular text-base leading-6 flex-1" :class="{ 'text-primary-1 dark:text-primary-1': visibleHeadingId === 'tips-sikap-kerja-untuk-belajar-pemrograman' }"> <a href="#tips-sikap-kerja-untuk-belajar-pemrograman"> Tips Sikap Kerja untuk Belajar Pemrograman </a> </div> </div> <div class="px-6 flex flex-row gap-2 items-start justify-center w-full flex-shrink-0 relative"> <div x-cloak class="w-1 h-6 bg-primary-1 dark:bg-primary-1 rounded-lg" :class="{ 'opacity-100': visibleHeadingId === 'modifikasi-aplikasi-perangkat-lunak', 'opacity-0': visibleHeadingId !== 'modifikasi-aplikasi-perangkat-lunak' }"> </div> <div class="text-elevated-1 dark:text-surface-5 text-left font-regular text-base leading-6 flex-1" :class="{ 'text-primary-1 dark:text-primary-1': visibleHeadingId === 'modifikasi-aplikasi-perangkat-lunak' }"> <a href="#modifikasi-aplikasi-perangkat-lunak"> Modifikasi Aplikasi Perangkat Lunak </a> </div> </div> <div class="px-6 flex flex-row gap-2 items-start justify-center w-full flex-shrink-0 relative"> <div x-cloak class="w-1 h-6 bg-primary-1 dark:bg-primary-1 rounded-lg" :class="{ 'opacity-100': visibleHeadingId === 'tips-sikap-kerja-untuk-meningkatkan-keahlian-bahasa-pemrograman', 'opacity-0': visibleHeadingId !== 'tips-sikap-kerja-untuk-meningkatkan-keahlian-bahasa-pemrograman' }"> </div> <div class="text-elevated-1 dark:text-surface-5 text-left font-regular text-base leading-6 flex-1" :class="{ 'text-primary-1 dark:text-primary-1': visibleHeadingId === 'tips-sikap-kerja-untuk-meningkatkan-keahlian-bahasa-pemrograman' }"> <a href="#tips-sikap-kerja-untuk-meningkatkan-keahlian-bahasa-pemrograman"> Tips Sikap Kerja untuk Meningkatkan Keahlian Bahasa Pemrograman </a> </div> </div> <div class="px-6 flex flex-row gap-2 items-start justify-center w-full flex-shrink-0 relative"> <div x-cloak class="w-1 h-6 bg-primary-1 dark:bg-primary-1 rounded-lg" :class="{ 'opacity-100': visibleHeadingId === 'dokumentasi-pemrograman-dan-pengembangan-aplikasi-perangkat-lunak', 'opacity-0': visibleHeadingId !== 'dokumentasi-pemrograman-dan-pengembangan-aplikasi-perangkat-lunak' }"> </div> <div class="text-elevated-1 dark:text-surface-5 text-left font-regular text-base leading-6 flex-1" :class="{ 'text-primary-1 dark:text-primary-1': visibleHeadingId === 'dokumentasi-pemrograman-dan-pengembangan-aplikasi-perangkat-lunak' }"> <a href="#dokumentasi-pemrograman-dan-pengembangan-aplikasi-perangkat-lunak"> Dokumentasi Pemrograman dan Pengembangan Aplikasi Perangkat Lunak </a> </div> </div> </div> </div> </div> <script> document.addEventListener('alpine:initializing', () => { Alpine.data('visibleNavHighlighter', () => ({ headings: [], visibleHeadingId: null, studyNotesExpanded: false, init() { this.headings = Array.from(document.querySelectorAll('.contents-heading')); this.assignHeadingIds(); this.highlightVisibleHeading(); window.addEventListener('scroll', () => this.highlightVisibleHeading()); }, assignHeadingIds() { this.headings.forEach(heading => { if (!heading.id) { heading.id = heading.textContent.trim().toLowerCase().replace( /\s+/g, '-'); } }); }, highlightVisibleHeading() { const scrollPosition = window.scrollY; const windowHeight = window.innerHeight; for (let heading of this.headings) { const rect = heading.getBoundingClientRect(); if (rect.top >= 0 && rect.top <= windowHeight * 0.3) { this.visibleHeadingId = heading.id; // console.log('Current visible heading:', this.visibleHeadingId); return; } } // If no heading is found in the top 30% of the viewport, highlight none this.visibleHeadingId = null; } })); }); </script> </div> </div> </aside> </div> </div> <div class="mx-auto max-w-screen-xl mb-4"> <div class="mt-12"> <h2 class="text-xl font-bold text-elevated-5 dark:text-surface-5"> More Like This </h2> </div> <div class="rounded-2xl border transition-shadow transition-border transition-colors duration-200 bg-surface-0 dark:bg-elevated-3 border-surface-4 dark:border-elevated-4 sm:p-4 p-4 border-surface-4 dark:border-elevated-4 mt-8"> <div class=""> <div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-4"> <div class="rounded-2xl border transition-shadow transition-border transition-colors duration-200 bg-surface-0 dark:bg-elevated-3 border-surface-4 dark:border-elevated-4 sm:p-0 p-0 border-surface-4 dark:border-elevated-4 max-w-sm"> <a href="https://quizgecko.com/learn/put-your-knowledge-to-the-test-gtTIim"> <img class="rounded-t-lg xl:h-48" src="https://images.unsplash.com/photo-1711413994156-8230132c4de3?ixid=M3w0MjA4MDF8MHwxfHNlYXJjaHw4fHxRdWl6R2Vja28lMkMlMjByZWdpc3RyYXRpb24lMjBwcm9jZXNzJTJDJTIwYWNjb3VudCUyMGNyZWF0aW9uJTJDJTIwcXVpenplc3xlbnwxfDB8fHwxNzExNTI5NzYwfDA&ixlib=rb-4.0.3&w=300&fit=crop&h=200&q=75&fm=webp" alt="Put Your Knowledge to the Test" loading="lazy" /> </a> <div class="p-3 -mt-12 flex justify-end"> <div class="font-semibold bg-elevated-3 text-surface-0 text-xs p-[0.3em] rounded-md opacity-80 dark:bg-elevated-3 dark:text-surface-0"> <div>3 questions</div> </div> </div> <div class="p-4 flex-col flex "> <a href="https://quizgecko.com/learn/put-your-knowledge-to-the-test-gtTIim"> <h4 class="mb-2 text-xl font-bold tracking-tight text-gray-900 dark:text-surface-4"> Put Your Knowledge to the Test: Quiz & Flashcards </h4> </a> <div class="flex user-holder"> <img class="w-7 h-7 rounded-full" src="https://quizgecko.com/images/avatars/avatar-19.webp" alt="SprightlySard7208 avatar"> <div class="font-medium ml-2 text-sm flex items-center truncate"> <div>SprightlySard7208</div> </div> </div> </div> </div> <div class="rounded-2xl border transition-shadow transition-border transition-colors duration-200 bg-surface-0 dark:bg-elevated-3 border-surface-4 dark:border-elevated-4 sm:p-0 p-0 border-surface-4 dark:border-elevated-4 max-w-sm"> <a href="https://quizgecko.com/learn/srs-on-library-management-system-u79scd"> <img class="rounded-t-lg xl:h-48" src="https://images.unsplash.com/photo-1692014956575-e5a6fd973fc6?crop=entropy&cs=srgb&fm=jpg&ixid=M3w0MjA4MDF8MHwxfHNlYXJjaHwyOHx8TGludXglMjBkaXN0cmlidXRpb25zJTJDJTIwTGludXglMjBrZXJuZWwlMkMlMjBzeXN0ZW0lMjBsaWJyYXJpZXMlMkMlMjBwYWNrYWdlJTIwbWFuYWdlbWVudCUyMHN5c3RlbXxlbnwxfDB8fHwxNzEwNzA1ODUwfDA&ixlib=rb-4.0.3&q=85&w=300&fit=crop&h=200&q=75&fm=webp" alt="SRS on Library Management System" loading="lazy" /> </a> <div class="p-3 -mt-12 flex justify-end"> <div class="font-semibold bg-elevated-3 text-surface-0 text-xs p-[0.3em] rounded-md opacity-80 dark:bg-elevated-3 dark:text-surface-0"> <div>10 questions</div> </div> </div> <div class="p-4 flex-col flex "> <a href="https://quizgecko.com/learn/srs-on-library-management-system-u79scd"> <h4 class="mb-2 text-xl font-bold tracking-tight text-gray-900 dark:text-surface-4"> SRS on Library Management System </h4> </a> <div class="flex user-holder"> <img class="w-7 h-7 rounded-full" src="https://quizgecko.com/images/avatars/avatar-15.webp" alt="HearteningParticle avatar"> <div class="font-medium ml-2 text-sm flex items-center truncate"> <div>HearteningParticle</div> </div> </div> </div> </div> <div class="rounded-2xl border transition-shadow transition-border transition-colors duration-200 bg-surface-0 dark:bg-elevated-3 border-surface-4 dark:border-elevated-4 sm:p-0 p-0 border-surface-4 dark:border-elevated-4 max-w-sm"> <a href="https://quizgecko.com/learn/-vzvxck"> <img class="rounded-t-lg xl:h-48" src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?crop=entropy&cs=srgb&fm=jpg&ixid=M3w0MjA4MDF8MHwxfHNlYXJjaHw0fHxyZXF1aXJlbWVudCUyMGFuYWx5c2lzJTJDJTIwcHJvZHVjdCUyMGRldmVsb3BtZW50JTJDJTIwdXNlciUyMHNhdGlzZmFjdGlvbnxlbnwxfDB8fHwxNzI0OTAyMTEzfDA&ixlib=rb-4.0.3&q=85&w=300&fit=crop&h=200&q=75&fm=webp" alt="需求分析基础" loading="lazy" /> </a> <div class="p-3 -mt-12 flex justify-end"> <div class="font-semibold bg-elevated-3 text-surface-0 text-xs p-[0.3em] rounded-md opacity-80 dark:bg-elevated-3 dark:text-surface-0"> <div>5 questions</div> </div> </div> <div class="p-4 flex-col flex "> <a href="https://quizgecko.com/learn/-vzvxck"> <h4 class="mb-2 text-xl font-bold tracking-tight text-gray-900 dark:text-surface-4"> 需求分析基础 </h4> </a> <div class="flex user-holder"> <img class="w-7 h-7 rounded-full" src="https://quizgecko.com/images/avatars/avatar-8.webp" alt="LoyalPhiladelphia avatar"> <div class="font-medium ml-2 text-sm flex items-center truncate"> <div>LoyalPhiladelphia</div> </div> </div> </div> </div> <div class="rounded-2xl border transition-shadow transition-border transition-colors duration-200 bg-surface-0 dark:bg-elevated-3 border-surface-4 dark:border-elevated-4 sm:p-0 p-0 border-surface-4 dark:border-elevated-4 max-w-sm"> <a href="https://quizgecko.com/learn/requirements-engineering-and-srs-overview-esn93g"> <img class="rounded-t-lg xl:h-48" src="https://assets.quizgecko.com/cdn-cgi/image/width=300,height=200,fit=crop,quality=75,format=webp/quiz/c08dbdba2efa813cbce5678ee00151ce.jpg" alt="Requirements Engineering and SRS Overview" loading="lazy" /> </a> <div class="p-3 -mt-12 flex justify-end"> <div class="font-semibold bg-elevated-3 text-surface-0 text-xs p-[0.3em] rounded-md opacity-80 dark:bg-elevated-3 dark:text-surface-0"> <div>15 questions</div> </div> </div> <div class="p-4 flex-col flex "> <a href="https://quizgecko.com/learn/requirements-engineering-and-srs-overview-esn93g"> <h4 class="mb-2 text-xl font-bold tracking-tight text-gray-900 dark:text-surface-4"> Requirements Engineering and SRS Overview </h4> </a> <div class="flex user-holder"> <img class="w-7 h-7 rounded-full" src="https://quizgecko.com/images/avatars/avatar-15.webp" alt="ThriftyWalrus4441 avatar"> <div class="font-medium ml-2 text-sm flex items-center truncate"> <div>ThriftyWalrus4441</div> </div> </div> </div> </div> </div> </div> <div class="flex flex-col gap-24 justify-center flex-1 overflow-hidden mt-3 mb-6 p-4"> <div class="text-left font-medium text-sm leading-5 font-weight-500 block md:hidden"> <nav aria-label="breadcrumb"> <ol itemscope itemtype="https://schema.org/BreadcrumbList" class="flex flex-wrap space-x-2"> <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="flex items-center"> <a itemprop="item" href="https://quizgecko.com/discover" class="text-primary-1 hover:underline"> <span itemprop="name">Discover</span> </a> <meta itemprop="position" content="1" /> <span class="ml-1">></span> </li> <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="flex items-center"> <span itemprop="name"> <a itemprop="item" href="https://quizgecko.com/discover/business" class="text-primary-1 hover:underline"> Business </a> </span> <meta itemprop="position" content="2" /> <span class="ml-1">></span> </li> <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="flex items-center"> <span itemprop="name"> <a itemprop="item" href="https://quizgecko.com/discover/business/management" class="text-primary-1 hover:underline"> Management </a> </span> <meta itemprop="position" content="3" /> <span class="ml-1">></span> </li> <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="flex items-center"> <span itemprop="name">Spesifikasi Kebutuhan Pengguna dan Teknik</span> <meta itemprop="position" content="4" /> </li> </ol> </nav> </div> </div> </div> </div> <div id="modal-share-lesson" x-data="{ show: false, focusables() { // All focusable element types... let selector = 'a, button, input:not([type=\'hidden\']), textarea, select, details, [tabindex]:not([tabindex=\'-1\'])' return [...$el.querySelectorAll(selector)] // All non-disabled elements... .filter(el => !el.hasAttribute('disabled')) }, firstFocusable() { return this.focusables()[0] }, lastFocusable() { return this.focusables().slice(-1)[0] }, nextFocusable() { return this.focusables()[this.nextFocusableIndex()] || this.firstFocusable() }, prevFocusable() { return this.focusables()[this.prevFocusableIndex()] || this.lastFocusable() }, nextFocusableIndex() { return (this.focusables().indexOf(document.activeElement) + 1) % (this.focusables().length + 1) }, prevFocusableIndex() { return Math.max(0, this.focusables().indexOf(document.activeElement)) - 1 }, closeModal() { window.dispatchEvent(new CustomEvent('close-modal', { detail: 'share-lesson' })); this.show = false; } }" x-init="$watch('show', value => { if (value) { document.body.classList.add('overflow-y-hidden'); } else { document.body.classList.remove('overflow-y-hidden'); } })" x-on:open-modal.window="$event.detail == 'share-lesson' ? show = true : null" x-on:close.stop="closeModal()" x-on:close-modal.window="$event.detail == 'share-lesson' ? show = false : null" x-on:keydown.escape.window="closeModal()" x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()" x-on:keydown.shift.tab.prevent="prevFocusable().focus()" x-show="show" class="relative z-30" aria-labelledby="modal-title" role="dialog" aria-modal="true" style="display: none;"> <div x-show="show" class="fixed inset-0 transform transition-all" x-on:click="closeModal()" x-transition:enter="ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"> <div class="absolute inset-0 bg-elevated-0 dark:bg-elevated-4 opacity-80"></div> </div> <div x-show="show" class="fixed inset-0 z-40 overflow-y-auto"> <div class="flex min-h-full items-center justify-center sm:p-0"> <div @click.stop x-on:click.outside=closeModal() class="relative transform overflow-hidden bg-surface-0 dark:bg-elevated-3 text-left shadow-xl dark:shadow-none dark:border dark:border-elevated-3 transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:rounded-xl w-full h-full sm:h-auto min-h-screen sm:min-h-0"> <div class="absolute right-0 top-0 pr-3 pt-3 block"> <button class="px-4 py-2.5 text-md rounded-xl w-auto border-transparent text-primary-1 dark:text-surface-4 hover:text-primary-1 dark:hover:text-surface-5 disabled:text-surface-6 hover:bg-primary-6 disabled:hover:bg-transparent focus:border-primary-6 focus:border-primary-6 active:bg-primary-6 dark:hover:bg-primary-1 dark:hover:text-surface-1 disabled:dark:hover:bg-transparent inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 items-center" type="button" x-on:click="closeModal()" color="tertiary" type="button"> <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg> </button> </div> <div> <div class="p-8 min-h-80 space-y-6 flex flex-col items-center" x-data="{ copied: false }"> <h3 class="text-3xl font-semibold text-elevated-5 dark:text-surface-0 text-center"> Share this lesson </h3> <div class="text-center text-elevated-1 dark:text-surface-5 -mt-2"> Copy the link or share on socials below </div> <div class="flex items-center justify-center space-x-2"> <input class="flex-1 block w-full min-w-0 text-elevated-3 dark:text-surface-4 bg-surface-3 dark:bg-elevated-4 px-4 py-3 rounded-xl mt-1 dark:bg-elevated-3 focus:ring-0 border border-surface-5 dark:border-elevated-1 focus:border-primary-1 block w-full mt-1 lg:min-w-[410px]" id="lessonLink" type="text" value="https://quizgecko.com/learn/spesifikasi-kebutuhan-pengguna-dan-teknik-akmu6e" readonly="readonly"> <button class="px-4 py-2.5 text-md rounded-xl w-auto border-2 bg-surface-1 dark:bg-elevated-3 border-surface-5 dark:border-elevated-1 hover:border-primary-1 dark:hover:border-primary-1 active:bg-surface-3 dark:active:bg-elevated-2 focus:border-primary-0 focus:shadow-outline-gray dark:focus:shadow-outline-gray text-primary-1 dark:text-surface-4 hover:text-primary-1 dark:hover:text-surface-5 dark:disabled:elevated-3 disabled:text-surface-6 dark:disabled:border-elevated-1 disabled:hover:border-surface-5 disabled:active:bg-surface-1 dark:disabled:active:bg-elevated-2 inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 items-center" color="secondary" type="button" @click="navigator.clipboard.writeText(document.getElementById('lessonLink').value); copied = true; setTimeout(() => copied = false, 2000)" type="button"> <span x-show="!copied">Copy Link</span> <span x-show="copied">Copied!</span> </button> </div> <div class="flex items-center justify-center space-x-2"> <!-- resources/views/components/social-share-button.blade.php --> <a class="px-4 py-2.5 text-md rounded-xl w-auto border-2 bg-surface-1 dark:bg-elevated-3 border-surface-5 dark:border-elevated-1 hover:border-primary-1 dark:hover:border-primary-1 active:bg-surface-3 dark:active:bg-elevated-2 focus:border-primary-0 focus:shadow-outline-gray dark:focus:shadow-outline-gray text-primary-1 dark:text-surface-4 hover:text-primary-1 dark:hover:text-surface-5 dark:disabled:elevated-3 disabled:text-surface-6 dark:disabled:border-elevated-1 disabled:hover:border-surface-5 disabled:active:bg-surface-1 dark:disabled:active:bg-elevated-2 inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 items-center" href="https://wa.me/?text=https%3A%2F%2Fquizgecko.com%2Flearn%2Fspesifikasi-kebutuhan-pengguna-dan-teknik-akmu6e" target="_blank" color="secondary"> <img src="https://imagedelivery.net/1wpWmoOF0K-Y_NxLJO3e2w/0fbf9eba-b371-4b2a-b6a7-29413d275f00/w=50" alt="whatsapp icon" class="w-6 h-6"> </a> <!-- resources/views/components/social-share-button.blade.php --> <a class="px-4 py-2.5 text-md rounded-xl w-auto border-2 bg-surface-1 dark:bg-elevated-3 border-surface-5 dark:border-elevated-1 hover:border-primary-1 dark:hover:border-primary-1 active:bg-surface-3 dark:active:bg-elevated-2 focus:border-primary-0 focus:shadow-outline-gray dark:focus:shadow-outline-gray text-primary-1 dark:text-surface-4 hover:text-primary-1 dark:hover:text-surface-5 dark:disabled:elevated-3 disabled:text-surface-6 dark:disabled:border-elevated-1 disabled:hover:border-surface-5 disabled:active:bg-surface-1 dark:disabled:active:bg-elevated-2 inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 items-center lg:hidden" href="fb-messenger://share?link=https%3A%2F%2Fquizgecko.com%2Flearn%2Fspesifikasi-kebutuhan-pengguna-dan-teknik-akmu6e" target="_blank" color="secondary"> <img src="https://imagedelivery.net/1wpWmoOF0K-Y_NxLJO3e2w/1c156636-b4f7-4ff7-77b6-83b1a6ef0e00/w=50" alt="messenger icon" class="w-6 h-6"> </a> <!-- resources/views/components/social-share-button.blade.php --> <a class="px-4 py-2.5 text-md rounded-xl w-auto border-2 bg-surface-1 dark:bg-elevated-3 border-surface-5 dark:border-elevated-1 hover:border-primary-1 dark:hover:border-primary-1 active:bg-surface-3 dark:active:bg-elevated-2 focus:border-primary-0 focus:shadow-outline-gray dark:focus:shadow-outline-gray text-primary-1 dark:text-surface-4 hover:text-primary-1 dark:hover:text-surface-5 dark:disabled:elevated-3 disabled:text-surface-6 dark:disabled:border-elevated-1 disabled:hover:border-surface-5 disabled:active:bg-surface-1 dark:disabled:active:bg-elevated-2 inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 items-center" href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fquizgecko.com%2Flearn%2Fspesifikasi-kebutuhan-pengguna-dan-teknik-akmu6e" target="_blank" color="secondary"> <img src="https://imagedelivery.net/1wpWmoOF0K-Y_NxLJO3e2w/50948a16-05a8-4b29-2f74-85a8d61be100/w=50" alt="x icon" class="w-6 h-6"> </a> <!-- resources/views/components/social-share-button.blade.php --> <a class="px-4 py-2.5 text-md rounded-xl w-auto border-2 bg-surface-1 dark:bg-elevated-3 border-surface-5 dark:border-elevated-1 hover:border-primary-1 dark:hover:border-primary-1 active:bg-surface-3 dark:active:bg-elevated-2 focus:border-primary-0 focus:shadow-outline-gray dark:focus:shadow-outline-gray text-primary-1 dark:text-surface-4 hover:text-primary-1 dark:hover:text-surface-5 dark:disabled:elevated-3 disabled:text-surface-6 dark:disabled:border-elevated-1 disabled:hover:border-surface-5 disabled:active:bg-surface-1 dark:disabled:active:bg-elevated-2 inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 items-center" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fquizgecko.com%2Flearn%2Fspesifikasi-kebutuhan-pengguna-dan-teknik-akmu6e" target="_blank" color="secondary"> <img src="https://imagedelivery.net/1wpWmoOF0K-Y_NxLJO3e2w/55f85fb3-9222-4f5e-53f5-514c58715c00/w=50" alt="fb icon" class="w-6 h-6"> </a> </div> </div> </div> <div class="absolute bottom-0 left-0"> <svg width="235" height="104" viewBox="0 0 235 104" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_878_3668)"> <path d="M36.1298 79.0358C42.68 83.8622 40.8211 93.9832 40.8211 93.9832L34.4038 90.869C34.4038 90.869 35.0833 79.1206 26.3422 74.1404L36.1298 79.0358Z" fill="#FDF151" /> <path d="M26.1774 73.7554C26.2261 73.7291 26.2792 73.715 26.3331 73.714C26.3871 73.7131 26.4405 73.7254 26.4898 73.7501L36.2772 78.6454C36.2956 78.6547 36.3134 78.6656 36.3303 78.6779C43.0187 83.6061 41.2038 93.9661 41.1847 94.0703C41.1733 94.1322 41.15 94.1904 41.1165 94.2408C41.083 94.2911 41.04 94.3325 40.9907 94.3617C40.9413 94.3904 40.887 94.4065 40.8315 94.409C40.776 94.4114 40.7208 94.4001 40.6696 94.3758L34.2523 91.2616C34.1059 91.1907 34.015 91.022 34.0253 90.8418C34.0318 90.7268 34.5799 79.3135 26.1699 74.5223C26.1071 74.4865 26.0544 74.4313 26.0178 74.3631C25.9812 74.2949 25.9622 74.2163 25.963 74.1364C25.9638 74.0565 25.9843 73.9784 26.0222 73.911C26.0601 73.8437 26.1139 73.7898 26.1774 73.7554ZM35.9465 79.4126L29.8009 76.3388C32.1695 78.8281 33.3848 81.8504 34.0072 84.2514C34.7771 87.2214 34.8032 89.7399 34.7853 90.5919L40.5238 93.3769C40.7806 91.2855 41.3406 83.413 35.9465 79.4129L35.9465 79.4126Z" fill="#271A79" /> <path d="M20.3269 88.0047C22.643 83.8067 29.7051 76.4713 36.129 79.0344C36.129 79.0344 31.0388 75.7033 26.3414 74.1391C26.3414 74.1391 19.1398 72.5364 13.701 80.528L20.3269 88.0047Z" fill="#FDF151" /> <path d="M18.9084 75.1246C22.874 72.9856 26.3628 73.7116 26.4137 73.7229C26.4249 73.7254 26.436 73.7285 26.447 73.7321C31.1332 75.2923 36.265 78.6333 36.3164 78.667C36.3975 78.72 36.4582 78.8055 36.4866 78.9068C36.515 79.0081 36.5091 79.1179 36.4699 79.2145C36.431 79.3113 36.3616 79.3881 36.2754 79.4297C36.1892 79.4714 36.0924 79.4749 36.0041 79.4396C29.9187 77.0114 22.9978 83.9692 20.6447 88.2337C20.6149 88.2881 20.5746 88.3341 20.527 88.3684C20.4793 88.4026 20.4255 88.4243 20.3695 88.4316C20.3135 88.439 20.2568 88.4319 20.2035 88.4109C20.1503 88.3899 20.1019 88.3555 20.062 88.3103L13.436 80.8334C13.371 80.7601 13.3319 80.6623 13.3259 80.5585C13.32 80.4547 13.3476 80.3519 13.4037 80.2696C15.1458 77.7096 17.0779 76.1117 18.9082 75.1245L18.9084 75.1246ZM26.2543 74.5572C25.8994 74.4878 19.2872 73.3155 14.2029 80.4955L20.2652 87.3359C21.4216 85.4094 23.6353 82.6597 26.488 80.625C28.3575 79.2922 30.9694 77.9464 33.7683 78.0899C31.8633 76.9928 28.9795 75.4673 26.2543 74.5572Z" fill="#271A79" /> </g> <g clip-path="url(#clip1_878_3668)"> <path d="M208.87 107.758C201.247 105.798 199.867 95.5703 199.867 95.5703L206.838 95.9747C206.838 95.9747 209.824 107.267 219.546 108.511L208.87 107.758Z" fill="#FDF151" /> <path d="M219.818 108.81C219.78 108.854 219.735 108.888 219.685 108.91C219.635 108.932 219.581 108.941 219.527 108.938L208.851 108.184C208.831 108.183 208.811 108.179 208.791 108.174C201.007 106.174 199.513 95.7386 199.498 95.6333C199.49 95.5708 199.494 95.5071 199.51 95.4466C199.526 95.3862 199.553 95.3305 199.59 95.2838C199.628 95.2374 199.674 95.2009 199.725 95.1769C199.776 95.1528 199.831 95.1418 199.887 95.1445L206.857 95.5489C207.016 95.5581 207.153 95.6807 207.199 95.8539C207.229 95.9643 210.235 106.891 219.589 108.087C219.658 108.096 219.725 108.127 219.78 108.177C219.835 108.227 219.877 108.293 219.901 108.368C219.925 108.444 219.93 108.525 219.915 108.603C219.901 108.681 219.867 108.753 219.818 108.81ZM208.924 107.334L215.628 107.807C212.642 106.401 210.572 104.041 209.248 102.032C207.611 99.5466 206.81 97.1933 206.564 96.3867L200.331 96.0247C200.736 98.0884 202.638 105.697 208.924 107.334L208.924 107.334Z" fill="#271A79" /> <path d="M220.906 93.1396C220.032 97.9883 215.679 107.644 208.872 107.759C208.872 107.759 214.667 108.888 219.549 108.513C219.549 108.513 226.788 107.191 229.418 97.5564L220.906 93.1396Z" fill="#FDF151" /> <path d="M226.207 104.671C223.152 108.235 219.661 108.923 219.61 108.932C219.598 108.934 219.587 108.936 219.576 108.936C214.706 109.311 208.869 108.189 208.81 108.178C208.718 108.16 208.635 108.104 208.577 108.02C208.519 107.936 208.491 107.83 208.498 107.724C208.504 107.618 208.546 107.519 208.614 107.446C208.682 107.373 208.771 107.332 208.865 107.33C215.313 107.221 219.65 97.9752 220.538 93.0496C220.55 92.9868 220.573 92.9278 220.607 92.8769C220.641 92.8261 220.685 92.7847 220.735 92.7558C220.785 92.7269 220.841 92.7113 220.897 92.7101C220.953 92.7089 221.009 92.7222 221.061 92.749L229.572 97.166C229.655 97.2093 229.722 97.2857 229.76 97.3808C229.797 97.4759 229.803 97.5832 229.776 97.6825C228.934 100.769 227.617 103.027 226.207 104.671L226.207 104.671ZM219.502 108.086C219.855 108.012 226.41 106.518 228.958 97.7841L221.171 93.7432C220.682 96.005 219.456 99.4544 217.412 102.483C216.072 104.468 214.04 106.756 211.375 107.72C213.497 108.002 216.669 108.302 219.502 108.086Z" fill="#271A79" /> </g> <g clip-path="url(#clip2_878_3668)"> <path d="M117.949 107.011C113.273 114.126 118.096 122.885 118.096 122.885L123.168 117.428C123.168 117.428 118.956 106.677 125.64 98.5518L117.949 107.011Z" fill="#FDF151" /> <path d="M125.67 98.1269C125.616 98.1215 125.562 98.1292 125.511 98.1496C125.461 98.1701 125.414 98.2027 125.375 98.2453L117.684 106.704C117.67 106.72 117.657 106.737 117.644 106.755C112.87 114.021 117.724 123.021 117.774 123.111C117.803 123.165 117.843 123.21 117.89 123.244C117.936 123.278 117.989 123.3 118.044 123.308C118.099 123.315 118.155 123.309 118.208 123.289C118.261 123.27 118.309 123.237 118.35 123.194L123.422 117.738C123.537 117.613 123.571 117.419 123.507 117.254C123.466 117.149 119.48 106.66 125.91 98.8433C125.959 98.7848 125.991 98.7123 126.005 98.6338C126.018 98.5554 126.012 98.4742 125.987 98.3995C125.962 98.3249 125.919 98.2597 125.863 98.2115C125.807 98.1633 125.74 98.134 125.67 98.1269ZM118.228 107.293L123.057 101.982C121.593 105.252 121.372 108.567 121.519 111.065C121.7 114.155 122.442 116.528 122.718 117.32L118.183 122.2C117.306 120.339 114.385 113.176 118.228 107.293L118.228 107.293Z" fill="#271A79" /> <path d="M135.497 109.18C132.047 106.158 123.192 102.067 117.946 107.01C117.946 107.01 121.707 101.874 125.637 98.5509C125.637 98.5509 131.905 94.2022 139.437 99.5493L135.497 109.18Z" fill="#FDF151" /> <path d="M132.909 96.5382C128.539 96.0986 125.487 98.1581 125.443 98.1887C125.433 98.1956 125.424 98.2028 125.415 98.2105C121.494 101.525 117.697 106.687 117.659 106.739C117.599 106.82 117.568 106.925 117.572 107.031C117.576 107.137 117.615 107.238 117.681 107.313C117.747 107.388 117.836 107.433 117.929 107.438C118.023 107.443 118.114 107.408 118.187 107.34C123.156 102.658 131.764 106.45 135.269 109.52C135.313 109.559 135.365 109.587 135.42 109.6C135.475 109.613 135.532 109.612 135.587 109.597C135.642 109.582 135.693 109.553 135.736 109.512C135.78 109.471 135.815 109.42 135.839 109.362L139.779 99.7308C139.818 99.6364 139.825 99.5292 139.799 99.4295C139.773 99.3297 139.715 99.2443 139.638 99.1892C137.225 97.4763 134.927 96.7408 132.909 96.538L132.909 96.5382ZM125.846 98.9084C126.158 98.703 132.004 94.991 138.957 99.7169L135.352 108.528C133.681 107.178 130.768 105.474 127.473 104.692C125.314 104.181 122.455 103.95 119.873 105.191C121.326 103.409 123.567 100.839 125.846 98.9084Z" fill="#271A79" /> </g> <g clip-path="url(#clip3_878_3668)"> <path d="M103.326 72.7614C102.689 72.1827 102.028 71.6556 101.343 71.1824C97.4141 68.4645 92.8664 67.706 88.8666 69.1013C85.5503 70.2582 82.8494 72.7907 81.2609 76.2323C79.5997 79.832 79.2479 84.1755 80.2435 88.7934C80.6646 90.7477 81.3672 92.5276 82.3313 94.0842C83.5241 96.0098 85.8658 96.4702 87.5616 95.1122C89.2571 93.7541 89.6648 91.0921 88.4718 89.1661C88.0482 88.4825 87.7334 87.6707 87.5355 86.7535C86.3137 81.0864 88.5562 78.1332 91.062 77.259C93.0123 76.5785 95.3353 77.0212 97.4351 78.4736C99.3662 79.8095 102.071 82.6422 103.989 88.552C104.706 90.7619 106.865 91.8909 108.81 91.0731C110.755 90.2555 111.75 87.8008 111.033 85.5909C109.264 80.1419 106.624 75.7594 103.325 72.7614L103.326 72.7614Z" fill="#C084FC" /> <path d="M101.087 70.5159C101.239 70.6143 101.39 70.7153 101.54 70.8193C102.243 71.3067 102.918 71.8445 103.561 72.4295C106.903 75.4668 109.609 79.9671 111.387 85.4441C112.175 87.8712 111.078 90.5764 108.941 91.4745C108.433 91.6901 107.892 91.7889 107.35 91.7653C106.808 91.7417 106.275 91.5961 105.783 91.3369C105.29 91.0808 104.846 90.716 104.478 90.2637C104.11 89.8113 103.825 89.2803 103.638 88.7015C101.758 82.9074 99.1215 80.1404 97.2412 78.8397C95.2331 77.4503 93.0212 77.0236 91.1733 77.6684C88.8314 78.4853 86.7421 81.2747 87.9016 86.6531C88.0881 87.5184 88.3837 88.2816 88.7803 88.9217C90.0903 91.0367 89.641 93.9708 87.779 95.4624C85.9166 96.9537 83.3358 96.4464 82.0258 94.3314C81.0345 92.7309 80.3127 90.9025 79.8803 88.8967C78.8625 84.1763 79.2256 79.729 80.9299 76.0359C82.5653 72.4925 85.3453 69.8854 88.7581 68.6949C92.7069 67.3175 97.1717 67.9836 101.087 70.5159ZM105.834 90.4079C105.92 90.4634 106.008 90.5148 106.098 90.5618C106.5 90.7739 106.936 90.893 107.379 90.9123C107.823 90.9316 108.265 90.8507 108.681 90.6742C110.429 89.9394 111.327 87.726 110.682 85.7402C108.952 80.4088 106.327 76.0365 103.092 73.0961C102.469 72.5298 101.815 72.0091 101.149 71.5483C97.3101 68.8941 92.8749 68.1509 88.9775 69.5105C85.758 70.6338 83.1359 73.0917 81.5945 76.4314C79.9765 79.9375 79.6359 84.1773 80.6092 88.6927C81.0192 90.5947 81.7024 92.3265 82.6395 93.8394C83.7113 95.5696 85.8231 95.9848 87.3467 94.7647C88.8703 93.5445 89.2377 91.1438 88.1658 89.4133C87.7152 88.6859 87.381 87.8257 87.1721 86.8568C85.8882 80.9011 88.2835 77.7839 90.9535 76.8523C93.0062 76.1362 95.441 76.5955 97.6317 78.1104C99.6139 79.4818 102.387 82.3809 104.342 88.4052C104.615 89.2526 105.143 89.9621 105.833 90.4076L105.834 90.4079Z" fill="#271A79" /> <path d="M82.3353 94.0862C84.7878 98.0446 88.8366 100.272 92.6505 99.7602C95.4668 99.3823 97.7302 97.5015 98.7046 94.7294C99.6481 92.0457 99.7855 87.4989 95.0834 81.0788C94.4431 80.2036 93.7265 79.4042 92.9446 78.693C89.0184 75.1247 83.712 74.0634 78.7222 76.0323C72.4416 78.5105 68.2631 85.0757 68.0772 92.7581C68.0421 94.2135 68.1369 95.6141 68.3594 96.9214C68.7532 99.2346 70.7224 100.745 72.7578 100.295C74.7932 99.8445 76.1241 97.6047 75.7305 95.2915C75.612 94.5942 75.5619 93.8177 75.5821 92.9833C75.7025 88.0091 78.5512 85.1298 81.1773 84.0937C84.2571 82.8783 87.2977 83.7941 89.3111 86.5431C91.0884 88.9699 91.7432 90.5821 91.7061 91.2995C91.6427 92.526 89.6789 91.2708 88.4752 89.168" fill="#C084FC" /> <path d="M91.2308 76.8564C91.9081 77.2945 92.5592 77.7953 93.1789 78.3587C93.9804 79.0881 94.715 79.9075 95.3716 80.8047C100.192 87.3859 100.034 92.0948 99.0526 94.8862C98.0263 97.8062 95.649 99.7862 92.6936 100.183C88.745 100.713 84.5584 98.4158 82.0278 94.3312C81.9705 94.2388 81.9479 94.1242 81.965 94.0126C81.9821 93.9011 82.0374 93.8018 82.1188 93.7366C82.2003 93.6714 82.3011 93.6456 82.3992 93.6649C82.4973 93.6842 82.5846 93.747 82.6419 93.8395C85.0164 97.672 88.9277 99.8291 92.6065 99.3355C95.2838 98.9762 97.433 97.195 98.3556 94.5706C99.2611 91.9945 99.3784 87.61 94.7943 81.3513C94.17 80.4983 93.4716 79.7191 92.7096 79.0255C88.8368 75.5054 83.6534 74.5368 78.8444 76.4344C72.7128 78.8538 68.6335 85.2654 68.452 92.7686C68.4176 94.1933 68.5103 95.5628 68.7275 96.8392C69.0814 98.9176 70.8572 100.28 72.6861 99.8751C74.515 99.4707 75.7152 97.4508 75.3615 95.3723C75.2378 94.6446 75.1856 93.8368 75.2065 92.9713C75.3322 87.7799 78.3095 84.7727 81.0541 83.6897C84.2873 82.414 87.4817 83.3779 89.5994 86.269C91.2274 88.4919 92.1318 90.3341 92.0806 91.3234C92.0578 91.7642 91.854 92.0747 91.5214 92.1751C90.6175 92.4482 89.0538 90.9607 88.1603 89.4001C88.1328 89.3532 88.1137 89.3005 88.1042 89.2451C88.0947 89.1898 88.095 89.1328 88.105 89.0775C88.1151 89.0222 88.1346 88.9697 88.1626 88.923C88.1906 88.8764 88.2265 88.8365 88.2681 88.8056C88.3097 88.7748 88.3563 88.7537 88.4052 88.7435C88.454 88.7333 88.5041 88.7342 88.5526 88.7461C88.6012 88.7581 88.6471 88.7809 88.6878 88.8132C88.7285 88.8454 88.7631 88.8866 88.7897 88.9342C89.753 90.6168 91.029 91.4471 91.3197 91.3543C91.3236 91.3413 91.329 91.3163 91.3312 91.2742C91.3602 90.7115 90.773 89.2061 89.0222 86.8154C87.1127 84.2083 84.2257 83.3413 81.2998 84.4958C78.7925 85.4852 76.0722 88.2372 75.9571 92.9937C75.9376 93.7969 75.9853 94.5425 76.0987 95.2091C76.531 97.7497 75.0641 100.218 72.8287 100.713C70.5932 101.207 68.4228 99.5422 67.9905 97.0021C67.7628 95.665 67.6657 94.233 67.7016 92.7461C67.8919 84.8846 72.1694 78.1656 78.599 75.6284C82.8844 73.9374 87.4553 74.4145 91.2307 76.8566L91.2308 76.8564Z" fill="#271A79" /> <path d="M68.3578 96.9225C69.2879 102.388 72.6101 106.421 76.8216 107.197C80.19 107.818 83.3842 106.174 84.9592 103.007C86.2392 100.434 87.4481 94.8584 81.1598 86.4317C79.9086 84.7549 78.6771 83.3988 77.4804 82.311C70.9462 76.3719 65.4274 78.4219 63.1187 79.7821C59.9875 81.6271 57.4804 85.0753 56.0595 89.4917C54.7005 93.7152 54.4819 98.3812 55.4437 102.63C55.9603 104.911 58.0064 106.283 60.0144 105.694C62.0221 105.104 63.2312 102.777 62.7148 100.495C61.4358 94.8444 63.719 89.036 66.5681 87.3573C67.9774 86.527 71.0027 86.0203 75.4318 91.9555C78.4235 95.9648 78.62 98.2939 78.4413 98.764C78.2544 99.2561 77.8028 99.4531 77.369 99.227C76.4703 98.7579 76.0081 96.9346 75.7287 95.2926" fill="#C084FC" /> <path d="M75.2293 80.0469C76.0392 80.5708 76.8692 81.2077 77.7151 81.9764C78.9805 83.1265 80.2359 84.5322 81.4461 86.1543C87.8814 94.7783 86.614 100.546 85.2856 103.216C83.6322 106.539 80.2861 108.267 76.7609 107.617C72.3922 106.812 68.949 102.645 67.9889 97.0027C67.9714 96.8923 67.9929 96.7785 68.0487 96.6859C68.1045 96.5933 68.1902 96.5293 68.2871 96.5079C68.384 96.4865 68.4844 96.5093 68.5665 96.5714C68.6486 96.6335 68.7059 96.7299 68.7259 96.8398C69.6258 102.127 72.827 106.027 76.8818 106.775C80.0932 107.367 83.1353 105.805 84.6322 102.796C85.8642 100.32 87.0141 94.9358 80.8732 86.7066C79.6941 85.1263 78.4736 83.7591 77.2456 82.643C70.7962 76.7808 65.3382 78.9534 63.2911 80.1595C60.2437 81.955 57.8006 85.3208 56.412 89.6366C55.0789 93.7796 54.864 98.3559 55.8072 102.522C56.2715 104.573 58.1168 105.809 59.9208 105.28C61.7249 104.75 62.8152 102.651 62.3512 100.601C61.0282 94.7562 63.4207 88.7302 66.3955 86.9775C67.9039 86.0888 71.1208 85.5177 75.7182 91.6784C78.5493 95.4726 79.1039 98.0949 78.7859 98.932C78.6552 99.2757 78.4239 99.5347 78.1341 99.6614C77.8426 99.7889 77.515 99.772 77.2122 99.6142C76.3656 99.1721 75.7772 97.8249 75.36 95.3732C75.3425 95.2628 75.364 95.1489 75.4198 95.0563C75.4756 94.9637 75.5613 94.8998 75.6582 94.8784C75.7551 94.8569 75.8555 94.8797 75.9376 94.9418C76.0198 95.004 76.0771 95.1004 76.0971 95.2102C76.4543 97.3092 76.9347 98.5297 77.5258 98.8384C77.6451 98.9006 77.7625 98.9097 77.8653 98.8649C77.9662 98.8209 78.0462 98.7273 78.0966 98.5944C78.2039 98.2628 78.0186 96.0814 75.1454 92.231C70.8843 86.5209 68.0506 86.9634 66.7404 87.7353C64.0169 89.34 61.843 94.9309 63.0783 100.388C63.6455 102.893 62.3129 105.459 60.1077 106.106C57.903 106.754 55.6474 105.242 55.0799 102.736C54.0994 98.4042 54.3221 93.6485 55.7068 89.3449C57.1601 84.8278 59.7311 81.2968 62.946 79.4026C64.8524 78.2794 69.5343 76.3636 75.2291 80.0473L75.2293 80.0469Z" fill="#271A79" /> </g> <g clip-path="url(#clip4_878_3668)"> <path d="M19.815 30.9695C19.8538 30.9719 19.8925 30.975 19.9312 30.9788C21.993 31.1803 23.5157 33.2469 23.3324 35.5945C22.9612 40.3497 21.2912 44.7062 18.5029 48.1922C16.0109 51.3078 12.7471 53.6098 9.0644 54.849C1.7708 57.3032 -5.54182 55.0682 -9.56546 49.1548C-10.831 47.2947 -10.5292 44.6143 -8.89148 43.1681C-7.25325 41.7218 -4.89964 42.0575 -3.6343 43.9172C-1.51065 47.0386 2.64854 48.1178 6.95972 46.667C10.9245 45.333 15.346 41.5321 15.8665 34.8647C16.0462 32.5614 17.8017 30.843 19.815 30.9695Z" fill="#38BDF8" /> <path d="M-10.2944 44.4615C-10.0178 43.8241 -9.61727 43.2665 -9.12329 42.8313C-7.32436 41.243 -4.73019 41.6127 -3.34047 43.6553C-1.31162 46.6373 2.68888 47.6588 6.85175 46.2579C10.6977 44.9638 14.9868 41.2815 15.4904 34.8281C15.6888 32.2851 17.5966 30.403 19.8339 30.5435C20.3962 30.5767 20.9461 30.7415 21.4493 31.0277C21.9524 31.314 22.3979 31.7155 22.7581 32.2071C23.1067 32.6777 23.3698 33.2226 23.5319 33.8103C23.694 34.398 23.752 35.0168 23.7026 35.631C23.3244 40.4803 21.6209 44.923 18.7769 48.4789C16.2385 51.6527 12.9154 53.9967 9.16686 55.2582C1.72403 57.7624 -5.74636 55.4696 -9.86464 49.4169C-10.8601 47.9538 -10.9718 46.0229 -10.2944 44.4615ZM15.0764 39.6883C13.3559 43.6539 10.0805 46.0603 7.06209 47.076C2.60126 48.5772 -1.71503 47.4401 -3.93373 44.1789C-5.07073 42.5078 -7.19325 42.2053 -8.66527 43.5048C-10.1369 44.8043 -10.4089 47.2215 -9.27179 48.8929C-5.34346 54.6665 1.81156 56.8437 8.95626 54.4397C12.573 53.2227 15.7775 50.9632 18.2231 47.9054C20.9557 44.4893 22.5923 40.2196 22.9561 35.5578C22.9966 35.0554 22.9492 34.549 22.8166 34.0682C22.6839 33.5873 22.4687 33.1415 22.1834 32.7565C21.8887 32.3542 21.5241 32.0257 21.1123 31.7915C20.7006 31.5573 20.2506 31.4224 19.7904 31.3954C17.9601 31.2804 16.3995 32.8202 16.237 34.9009C16.097 36.6954 15.6834 38.2893 15.0764 39.6883Z" fill="#271A79" /> <path d="M-9.56805 49.1558C-13.0166 44.0873 -13.4194 38.4939 -10.6456 34.1938C-8.29142 30.5438 -3.95782 28.5055 0.212518 28.767C1.40883 28.842 2.5907 29.1062 3.70948 29.576C8.40848 31.5486 10.9525 36.5571 10.5151 42.9739C10.0849 49.2811 6.942 54.6874 1.66483 58.1968C-2.69768 61.0981 -8.39818 62.5602 -13.9772 62.21L-13.9974 62.2087C-16.0637 62.0773 -17.64 60.0635 -17.5183 57.7111C-17.3967 55.3596 -15.6244 53.5594 -13.5594 53.6891C-13.5528 53.6897 -13.5474 53.6899 -13.5413 53.6902C-9.39326 53.9507 -5.2245 52.9095 -2.10133 50.8325C1.0714 48.7225 2.81055 45.8657 3.04231 42.3393C3.23344 39.4319 2.34878 38.2488 1.09776 37.583C-0.913953 36.5121 -3.62664 37.1561 -4.60857 39.2308C-5.18239 40.4433 -4.99771 41.9181 -3.63681 43.9184" fill="#38BDF8" /> <path d="M-11.8668 35.6601C-11.6105 35.0691 -11.3039 34.4953 -10.9467 33.9415C-8.57338 30.2618 -4.18433 28.0634 0.234962 28.3405C1.49708 28.4197 2.71018 28.7005 3.8408 29.1752C8.70565 31.2173 11.3405 36.3873 10.8894 43.0052C10.4494 49.4565 7.24053 54.9823 1.85378 58.5643C-2.57017 61.5062 -8.34794 62.99 -13.9984 62.6351L-14.0188 62.6339C-15.118 62.564 -16.1263 62.0109 -16.8579 61.0765C-17.5895 60.142 -17.9567 58.9382 -17.8919 57.6865C-17.7583 55.1047 -15.8048 53.1198 -13.5371 53.2623C-9.44282 53.5193 -5.34966 52.499 -2.28918 50.4635C0.779397 48.4228 2.44766 45.6788 2.66912 42.308C2.86039 39.3979 1.90174 38.4816 0.938582 37.9687C-0.986642 36.9439 -3.42464 37.6273 -4.27829 39.4314C-4.61915 40.1516 -4.89275 41.3731 -3.33971 43.6556C-3.28252 43.7452 -3.2583 43.8568 -3.27216 43.9666C-3.28602 44.0765 -3.33688 44.176 -3.41397 44.2441C-3.49106 44.3122 -3.58832 44.3435 -3.68515 44.3315C-3.78198 44.3194 -3.87078 44.2649 -3.93272 44.1795C-5.29902 42.1714 -5.62721 40.4856 -4.93784 39.0285C-3.90444 36.8453 -1.00937 35.9887 1.25788 37.1957C2.92766 38.0847 3.59348 39.6803 3.41653 42.3693C3.17533 46.0377 1.3824 49.0089 -1.91264 51.2001C-5.09708 53.3178 -9.34344 54.3805 -13.5626 54.1155L-13.5875 54.1139C-15.4361 53.9978 -17.0344 55.6216 -17.1437 57.7342C-17.1966 58.7582 -16.8963 59.7432 -16.2978 60.5077C-15.6993 61.2722 -14.8743 61.7249 -13.975 61.7819L-13.9769 62.2092L-13.9551 61.7833C-8.44782 62.1291 -2.82309 60.6876 1.47689 57.8279C6.64431 54.3916 9.72154 49.1049 10.1419 42.9417C10.5657 36.726 8.1124 31.8789 3.57943 29.9758C2.51873 29.5305 1.37877 29.2669 0.191176 29.1925C-3.98143 28.9309 -8.1164 30.9926 -10.3434 34.445C-13.0122 38.5821 -12.6114 43.9838 -9.27103 48.8932C-9.24015 48.9373 -9.2173 48.988 -9.20381 49.0424C-9.19031 49.0967 -9.18644 49.1536 -9.19243 49.2097C-9.19841 49.2658 -9.21413 49.3201 -9.23866 49.3693C-9.2632 49.4185 -9.29606 49.4617 -9.33535 49.4964C-9.37463 49.5311 -9.41956 49.5566 -9.46752 49.5713C-9.51547 49.5861 -9.5655 49.5899 -9.6147 49.5825C-9.66389 49.5751 -9.71128 49.5567 -9.7541 49.5282C-9.79692 49.4998 -9.83432 49.4619 -9.86413 49.4168C-12.9794 44.8378 -13.6767 39.8307 -11.8671 35.6597L-11.8668 35.6601Z" fill="#271A79" /> </g> <g clip-path="url(#clip5_878_3668)"> <path d="M185.876 102.322C186.651 104.521 185.909 107.086 184.048 108.31C180.087 110.914 174.875 111.744 170.771 110.423C167.829 109.477 165.593 107.538 164.306 104.817C161.171 98.1852 163.46 93.2223 164.975 89.9376C166.318 87.0256 166.48 85.7778 165.465 84.4441C164.48 83.1486 160.42 81.9155 152.192 84.7506C149.926 85.5312 147.528 84.0841 146.834 81.5195C146.142 78.9541 147.417 76.2417 149.684 75.4609C164.8 70.253 170.558 75.526 172.644 79.1325C176.539 85.8643 174.15 91.2851 172.584 94.4382C170.999 97.6295 170.654 100.063 173.109 101.083C174.947 101.847 177.777 101.197 179.729 99.9129C181.777 98.5663 184.404 99.3543 185.596 101.673C185.704 101.882 185.797 102.098 185.876 102.322Z" fill="#F5C433" /> <path d="M165.802 73.4162C169.751 74.5327 171.883 76.9329 173.001 78.8661C177.203 86.1269 174.227 92.1176 172.957 94.6756C171.905 96.7926 171.551 98.3021 171.873 99.2898C172.067 99.8835 172.519 100.321 173.255 100.627C174.839 101.286 177.528 100.797 179.512 99.4923C180.602 98.7759 181.871 98.5826 183.092 98.9485C183.692 99.1265 184.255 99.4374 184.748 99.8631C185.242 100.289 185.655 100.821 185.966 101.429C186.084 101.658 186.186 101.896 186.273 102.142C187.133 104.579 186.268 107.41 184.262 108.729C180.206 111.396 174.864 112.245 170.652 110.889C167.596 109.906 165.27 107.885 163.927 105.044C160.684 98.1861 163.037 93.0863 164.593 89.7116C165.975 86.7153 165.938 85.8094 165.139 84.7595C164.179 83.4974 159.971 82.5767 152.316 85.2142C149.828 86.071 147.185 84.4768 146.423 81.6602C146.054 80.2952 146.177 78.8504 146.769 77.5916C147.361 76.3328 148.351 75.4108 149.557 74.9955C156.948 72.4491 162.151 72.384 165.802 73.4162ZM173.43 101.701C173.269 101.655 173.112 101.601 172.96 101.538C171.987 101.134 171.35 100.49 171.068 99.6251C170.648 98.3362 171.01 96.612 172.208 94.1989C173.504 91.5908 176.199 86.1641 172.284 79.3971C170.263 75.9043 164.657 70.8087 149.808 75.9242C148.821 76.2641 148.011 77.0185 147.527 78.0483C147.043 79.078 146.942 80.2603 147.243 81.377C147.867 83.6813 150.03 84.9861 152.065 84.285C160.724 81.3017 164.766 82.7817 165.789 84.1264C167.033 85.7608 166.64 87.3747 165.354 90.1616C163.881 93.3551 161.655 98.1816 164.683 104.587C165.914 107.189 168.059 109.046 170.886 109.955C174.886 111.242 179.966 110.43 183.831 107.889C185.471 106.81 186.179 104.493 185.476 102.5C185.406 102.3 185.321 102.104 185.225 101.916C184.971 101.419 184.632 100.983 184.228 100.635C183.824 100.286 183.364 100.032 182.873 99.8864C182.383 99.7377 181.871 99.7004 181.369 99.7768C180.866 99.8532 180.382 100.042 179.944 100.331C178.181 101.491 175.467 102.276 173.43 101.701L173.43 101.701Z" fill="#271A79" /> </g> <defs> <clipPath id="clip0_878_3668"> <rect width="24.4432" height="26.823" fill="white" transform="matrix(-0.853824 0.460541 -0.395578 -0.948615 43.9531 92.7666)" /> </clipPath> <clipPath id="clip1_878_3668"> <rect width="25.3222" height="25.8606" fill="white" transform="matrix(0.634844 -0.740648 0.687666 0.762409 197.309 97.9424)" /> </clipPath> <clipPath id="clip2_878_3668"> <rect width="23.3528" height="27.9201" fill="white" transform="matrix(0.984913 0.0990542 0.0792183 -1.00497 114.785 122.981)" /> </clipPath> <clipPath id="clip3_878_3668"> <rect width="49.2896" height="54.505" fill="white" transform="matrix(-0.853707 -0.552251 0.441916 -0.881407 91.707 128.071)" /> </clipPath> <clipPath id="clip4_878_3668"> <rect width="46.0044" height="33.6993" fill="white" transform="matrix(-0.393594 0.907219 -0.884393 -0.494938 26.0625 33.6123)" /> </clipPath> <clipPath id="clip5_878_3668"> <rect width="44.9665" height="34.8095" fill="white" transform="matrix(-0.962276 -0.272077 0.214733 -0.976673 184.406 114.786)" /> </clipPath> </defs> </svg> </div> </div> </div> </div> </div> </div> <script> document.addEventListener('alpine:init', () => { Alpine.data('showQuiz', () => ({ loading: false, showStudyNotes: true, hideFlashcards: false, user: window.user, openQuestions: [], openedQuestions: null, audioLoading: false, quizId: 1177331, init: function() { // maybe not best long term approach, but a quick fix to an odd issue this.slug = window.location.pathname.split('/').pop(); }, openQuestion(id) { if (!this.user && this.openQuestions.length >= 2) { this.$store.ui.modals.registerModal.toggle(); return; } if (!this.user && !this.openedQuestions) { this.openedQuestions = new Set(); } if (!this.user && this.openedQuestions.size >= 2) { this.$store.ui.modals.registerModal.toggle(); return; } if (this.openQuestions.includes(id)) { this.openQuestions.splice(this.openQuestions.indexOf(id), 1); } else { this.openQuestions.push(id); if (!this.user) { this.openedQuestions.add(id); } } }, playFlashcards: function() { if (!window.user) { this.$store.ui.modals.registerModal.toggle(); return; } if (this.hideFlashcards) { return; } window.location.href = 'https://quizgecko.com/learn/' + this.slug + '/flashcards/start?mode=review'; }, playSpacedRepetitionFlashcards: function() { if (!window.user) { this.$store.ui.modals.registerModal.toggle(); return; } if (!window.user.is_paid) { this.$store.ui.modals.plansModal.toggle( "Please upgrade to use spaced repetition flashcards" ); return; } window.location.href = 'https://quizgecko.com/learn/' + this.slug + '/flashcards/start?mode=spaced-repetition'; }, playQuiz: function() { if (!window.user) { this.$store.ui.modals.registerModal.toggle(); return; } window.location.href = 'https://quizgecko.com/learn/' + this.slug + '/play/start'; }, playChat: function() { if (!this.user) { this.$store.ui.modals.registerModal.toggle(); return; } if (!window.user.is_paid) { this.$store.ui.modals.plansModal.toggle( "Please upgrade to use chat to lesson" ); return; } window.location.href = 'https://quizgecko.com/chat/assistant?quiz_ids=' + this.quizId; }, duplicate: function() { if (!this.user) { this.$store.ui.modals.registerModal.toggle(); return; } if (!this.user?.is_paid) { this.$store.ui.modals.plansModal.toggle(); return; } if (this.user && this.user.is_paid) { let url = 'https://quizgecko.com/learn/1177331/duplicate'; return window.location.href = url; } }, downloadPdf: function(quizId, withAnswers) { if (!this.user) { this.$store.ui.modals.registerModal.toggle(); return; } if (!this.user?.is_paid) { this.$store.ui.modals.plansModal.toggle(); return; } const url = `/generate/${quizId}/export/pdf` + (withAnswers ? '?answers=true' : ''); window.location.href = url; }, deleteQuiz(quizId) { if (!confirm("Are you sure you want to delete this quiz?")) { return; } axios.delete(`/api/v1/quiz/${quizId}`) .then(() => { window.location.href = '/library?deleted=true'; }) .catch(error => { console.error("Failed to delete quiz:", error); }); }, })); }); </script> </div> </main> <div x-data="bottomBannerMobile()" class="sm:hidden" x-show="open" x-cloak> <div class="fixed bottom-0 start-0 z-40 w-full"> <div id="bottom-banner" tabindex="-1" class="flex justify-between py-4 px-5 border-t bg-surface-0 rounded-t-[20px] z-20"> <!-- Banner content --> <div class="relative w-full box-border text-center px-md pt-md pb-xl text-elevated-3"> <div class="mx-auto"> <span class="font-bold text-lg text-elevated-2 ">Use Quizgecko on... </span> </div> <div slot="ctas" class="mt-6 space-y-6"> <div class="flex justify-between box-border mb-md"> <div class="flex items-center space-x-4"> <div class="w-[48px] h-[48px] flex items-center justify-center border border-solid border-neutral-border-weak rounded-lg"> <img class="w-[48px] h-[48px] text-[48px] rounded-lg" src="https://quizgecko.com/images/icon-small.png" alt="Browser" /> </div> <span class="text-16 font-bold text-neutral-content-strong ml-xs" x-text="appName"></span> </div> <a :href="appUrl" class="min-w-[120px] px-[var(--rem14)] items-center justify-center inline-flex bg-primary-1 rounded-lg text-surface-0 font-bold" id="primary-button" rel="nofollow"> <span class="flex items-center justify-center"> <span class="flex items-center gap-xs">Open</span></span> </a> </div> <div class="flex justify-between box-border"> <div class="flex items-center space-x-4"> <div class="w-[48px] h-[48px] flex items-center justify-center border border-solid border-neutral-border-weak rounded-lg"> <img class="w-[40px] h-[40px] text-[40px] rounded-full" src="https://imagedelivery.net/1wpWmoOF0K-Y_NxLJO3e2w/f6dbf467-b532-444e-7df3-ba798d577a00/thumb" alt="Browser" /> </div> <span id="continue-label" class="text-16 font-bold text-neutral-content-strong ml-xs"> Browser </span> </div> <button @click="toggle()" class="min-w-[120px] px-[var(--rem14)] items-center justify-center inline-flex bg-surface-3 rounded-lg text-elevated-3 font-bold" id="secondary-button"> <span class="flex items-center justify-center"> <span class="flex items-center gap-xs">Continue</span> </span> </button> </div> </div> </div> </div> </div> </div> <script> document.addEventListener("alpine:init", () => { Alpine.data("bottomBannerMobile", (quiz) => ({ open: false, os: null, init() { const closedTimestamp = localStorage.getItem('bottomMobileBannerClosedTimestamp'); const currentTimestamp = Date.now(); const oneWeekInMilliseconds = 7 * 24 * 60 * 60 * 1000; // Check if we're on the mobile route if (window.location.pathname === '/mobile') { this.open = false; return; } this.open = true; if (closedTimestamp && currentTimestamp - closedTimestamp < oneWeekInMilliseconds) { this.open = false; } else { localStorage.removeItem('bottomMobileBannerClosedTimestamp'); } this.os = this.getOS(); this.setAppDetails(); }, setAppDetails() { if (this.os === 'iOS') { this.appUrl = 'https://apps.apple.com/gb/app/quizgecko-ai-study-quizzes/id6473546188'; this.appName = 'iPhone App'; } else if (this.os === 'Android') { this.appUrl = 'https://play.google.com/store/apps/details?id=com.quizgecko'; this.appName = 'Android App'; } else { this.appUrl = 'https://quizgecko.com/mobile'; this.appName = 'Mobile App'; } }, toggle() { this.open = !this.open; if (!this.open) { localStorage.setItem('bottomMobileBannerClosedTimestamp', Date.now()); } else { localStorage.removeItem('bottomMobileBannerClosedTimestamp'); } }, getOS() { const userAgent = window.navigator.userAgent, platform = window.navigator.platform, iosPlatforms = ['iPhone', 'iPad', 'iPod'], androidPlatforms = ['Android']; if (iosPlatforms.indexOf(platform) !== -1) { return 'iOS'; } else if (androidPlatforms.some(substring => userAgent.includes(substring))) { return 'Android'; } else { return 'other'; } } })); }); </script> <div id="modal-help" x-data="{ show: false, focusables() { // All focusable element types... let selector = 'a, button, input:not([type=\'hidden\']), textarea, select, details, [tabindex]:not([tabindex=\'-1\'])' return [...$el.querySelectorAll(selector)] // All non-disabled elements... .filter(el => !el.hasAttribute('disabled')) }, firstFocusable() { return this.focusables()[0] }, lastFocusable() { return this.focusables().slice(-1)[0] }, nextFocusable() { return this.focusables()[this.nextFocusableIndex()] || this.firstFocusable() }, prevFocusable() { return this.focusables()[this.prevFocusableIndex()] || this.lastFocusable() }, nextFocusableIndex() { return (this.focusables().indexOf(document.activeElement) + 1) % (this.focusables().length + 1) }, prevFocusableIndex() { return Math.max(0, this.focusables().indexOf(document.activeElement)) - 1 }, closeModal() { window.dispatchEvent(new CustomEvent('close-modal', { detail: 'help' })); this.show = false; } }" x-init="$watch('show', value => { if (value) { document.body.classList.add('overflow-y-hidden'); } else { document.body.classList.remove('overflow-y-hidden'); } })" x-on:open-modal.window="$event.detail == 'help' ? show = true : null" x-on:close.stop="closeModal()" x-on:close-modal.window="$event.detail == 'help' ? show = false : null" x-on:keydown.escape.window="closeModal()" x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()" x-on:keydown.shift.tab.prevent="prevFocusable().focus()" x-show="show" class="relative z-30" aria-labelledby="modal-title" role="dialog" aria-modal="true" style="display: none;"> <div x-show="show" class="fixed inset-0 transform transition-all" x-on:click="closeModal()" x-transition:enter="ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"> <div class="absolute inset-0 bg-elevated-0 dark:bg-elevated-4 opacity-80"></div> </div> <div x-show="show" class="fixed inset-0 z-40 overflow-y-auto"> <div class="flex min-h-full items-center justify-center sm:p-0"> <div @click.stop x-on:click.outside=closeModal() class="relative transform overflow-hidden bg-surface-0 dark:bg-elevated-3 text-left shadow-xl dark:shadow-none dark:border dark:border-elevated-3 transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:rounded-xl w-full h-full sm:h-auto min-h-screen sm:min-h-0"> <div class="absolute right-0 top-0 pr-3 pt-3 block"> <button class="px-4 py-2.5 text-md rounded-xl w-auto border-transparent text-primary-1 dark:text-surface-4 hover:text-primary-1 dark:hover:text-surface-5 disabled:text-surface-6 hover:bg-primary-6 disabled:hover:bg-transparent focus:border-primary-6 focus:border-primary-6 active:bg-primary-6 dark:hover:bg-primary-1 dark:hover:text-surface-1 disabled:dark:hover:bg-transparent inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 items-center" type="button" x-on:click="closeModal()" color="tertiary" type="button"> <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg> </button> </div> <div> <div class="p-8"> <template x-if="$store.ui?.modals?.help?.title"> <h3 class="text-lg font-semibold text-elevated-3 pb-2" x-text="$store.ui?.modals?.help?.title"></h3> </template> <template x-if="$store.ui?.modals?.help?.content"> <p class="mt-3 text-elevated-1 dark:text-surface-5" x-html="$store.ui?.modals?.help?.content"></p> </template> </div> <div class="flex justify-end p-4 space-x-2 bg-surface-2 dark:bg-elevated-3"> <button class="px-4 py-2.5 text-md rounded-xl w-auto bg-primary-1 border-primary-0 hover:bg-primary-3 active:bg-primary-0 focus:shadow-outline-indigo text-surface-0 disabled:bg-surface-4 disabled:text-surface-0 disabled:bg-surface-6 disabled:border-elevated-0 inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 items-center" type="button" x-on:click.prevent="$dispatch('close-modal', 'help')" type="button"> Got it! </button> </div> </div> </div> </div> </div> </div> <div id="modal-limit" x-data="{ show: false, focusables() { // All focusable element types... let selector = 'a, button, input:not([type=\'hidden\']), textarea, select, details, [tabindex]:not([tabindex=\'-1\'])' return [...$el.querySelectorAll(selector)] // All non-disabled elements... .filter(el => !el.hasAttribute('disabled')) }, firstFocusable() { return this.focusables()[0] }, lastFocusable() { return this.focusables().slice(-1)[0] }, nextFocusable() { return this.focusables()[this.nextFocusableIndex()] || this.firstFocusable() }, prevFocusable() { return this.focusables()[this.prevFocusableIndex()] || this.lastFocusable() }, nextFocusableIndex() { return (this.focusables().indexOf(document.activeElement) + 1) % (this.focusables().length + 1) }, prevFocusableIndex() { return Math.max(0, this.focusables().indexOf(document.activeElement)) - 1 }, closeModal() { window.dispatchEvent(new CustomEvent('close-modal', { detail: 'limit' })); this.show = false; } }" x-init="$watch('show', value => { if (value) { document.body.classList.add('overflow-y-hidden'); } else { document.body.classList.remove('overflow-y-hidden'); } })" x-on:open-modal.window="$event.detail == 'limit' ? show = true : null" x-on:close.stop="closeModal()" x-on:close-modal.window="$event.detail == 'limit' ? show = false : null" x-on:keydown.escape.window="" x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()" x-on:keydown.shift.tab.prevent="prevFocusable().focus()" x-show="show" class="relative z-30" aria-labelledby="modal-title" role="dialog" aria-modal="true" style="display: none;"> <div x-show="show" class="fixed inset-0 transform transition-all" x-on:click="closeModal()" x-transition:enter="ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"> <div class="absolute inset-0 bg-elevated-0 dark:bg-elevated-4 opacity-80"></div> </div> <div x-show="show" class="fixed inset-0 z-40 overflow-y-auto"> <div class="flex min-h-full items-center justify-center sm:p-0"> <div @click.stop class="relative transform overflow-hidden bg-surface-0 dark:bg-elevated-3 text-left shadow-xl dark:shadow-none dark:border dark:border-elevated-3 transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:rounded-xl w-full h-full sm:h-auto min-h-screen sm:min-h-0"> <div class="absolute right-0 top-0 pr-3 pt-3 block"> <button class="px-4 py-2.5 text-md rounded-xl w-auto border-transparent text-primary-1 dark:text-surface-4 hover:text-primary-1 dark:hover:text-surface-5 disabled:text-surface-6 hover:bg-primary-6 disabled:hover:bg-transparent focus:border-primary-6 focus:border-primary-6 active:bg-primary-6 dark:hover:bg-primary-1 dark:hover:text-surface-1 disabled:dark:hover:bg-transparent inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 items-center" type="button" x-on:click="closeModal()" color="tertiary" type="button"> <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg> </button> </div> <div> <div class="p-12"> <!-- Title --> <h3 class="text-2xl sm:text-3xl font-bold text-elevated-3 dark:text-surface-3 pb-2 text-center mt-2"> Upgrade to continue </h3> <div> <div class="py-1 mb-4 text-elevated-1 dark:text-surface-6 text-md text-center prose-dark"> <!-- Show custom message --> <p class="mb-4" x-text="$store.ui.modals.plansModal.message"></p> <p class="mb-7 mt-2"> </p> <div class="mx-auto max-w-sm mt-12"> <a class="px-6 py-4 text-md rounded-xl w-full bg-primary-1 border-primary-0 hover:bg-primary-3 active:bg-primary-0 focus:shadow-outline-indigo text-surface-0 disabled:bg-surface-4 disabled:text-surface-0 disabled:bg-surface-6 disabled:border-elevated-0 inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 items-center hover:text-surface-1" full="true" size="lg" href="https://quizgecko.com/plans?offer=special"> View Plans & Pricing </a> </div> </div> </div> </div> <div class="p-12 bg-surface-2 dark:bg-elevated-4"> <div class="mb-5 -mt-4 hidden:sm-block"> <div class="mx-auto max-w-7xl px-6 lg:px-8 mt-8"> <div class="grid grid-cols-2 gap-8 lg:grid-cols-5"> <div class="flex justify-center items-center col-span-1"> <img class="block dark:hidden max-h-16 w-auto object-contain" src="https://quizgecko.com/images/logos/universities/stanford-light.png" alt="Stanford" width="158" height="48"> <img class="hidden dark:block max-h-16 w-auto object-contain opacity-80" src="https://quizgecko.com/images/logos/universities/stanford-dark.png" alt="Stanford" width="158" height="48"> </div> <div class="flex justify-center items-center col-span-1"> <img class="block dark:hidden max-h-10 w-auto object-contain opacity-80" src="https://quizgecko.com/images/logos/universities/princeton-light.png" alt="Princeton" width="158" height="48"> <img class="hidden dark:block max-h-10 w-auto object-contain opacity-80" src="https://quizgecko.com/images/logos/universities/princeton-dark.png" alt="Princeton" width="158" height="48"> </div> <div class="flex justify-center items-center col-span-1"> <img class="block dark:hidden max-h-10 w-auto object-contain opacity-80" src="https://quizgecko.com/images/logos/universities/yale-light.png" alt="Yale" width="158" height="48"> <img class="hidden dark:block max-h-10 w-auto object-contain opacity-80" src="https://quizgecko.com/images/logos/universities/yale-dark.png" alt="Yale" width="158" height="48"> </div> <div class="flex justify-center items-center col-span-1"> <img class="block dark:hidden max-h-12 w-auto object-contain opacity-80" src="https://quizgecko.com/images/logos/universities/berkeley-light.png" alt="Berkeley" width="158" height="48"> <img class="hidden dark:block max-h-12 w-auto object-contain opacity-80" src="https://quizgecko.com/images/logos/universities/berkeley-dark.png" alt="Berkeley" width="158" height="48"> </div> <div class="flex justify-center items-center col-span-2 lg:col-span-1"> <img class="block dark:hidden max-h-14 w-auto object-contain opacity-80" src="https://quizgecko.com/images/logos/universities/oxford-light.png" alt="Oxford" width="158" height="48"> <img class="hidden dark:block max-h-14 w-auto object-contain opacity-80" src="https://quizgecko.com/images/logos/universities/oxford-dark.png" alt="Oxford" width="158" height="48"> </div> </div> </div> </div> </div> </div> <div class="absolute bottom-0 left-0"> <svg width="235" height="104" viewBox="0 0 235 104" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_878_3668)"> <path d="M36.1298 79.0358C42.68 83.8622 40.8211 93.9832 40.8211 93.9832L34.4038 90.869C34.4038 90.869 35.0833 79.1206 26.3422 74.1404L36.1298 79.0358Z" fill="#FDF151" /> <path d="M26.1774 73.7554C26.2261 73.7291 26.2792 73.715 26.3331 73.714C26.3871 73.7131 26.4405 73.7254 26.4898 73.7501L36.2772 78.6454C36.2956 78.6547 36.3134 78.6656 36.3303 78.6779C43.0187 83.6061 41.2038 93.9661 41.1847 94.0703C41.1733 94.1322 41.15 94.1904 41.1165 94.2408C41.083 94.2911 41.04 94.3325 40.9907 94.3617C40.9413 94.3904 40.887 94.4065 40.8315 94.409C40.776 94.4114 40.7208 94.4001 40.6696 94.3758L34.2523 91.2616C34.1059 91.1907 34.015 91.022 34.0253 90.8418C34.0318 90.7268 34.5799 79.3135 26.1699 74.5223C26.1071 74.4865 26.0544 74.4313 26.0178 74.3631C25.9812 74.2949 25.9622 74.2163 25.963 74.1364C25.9638 74.0565 25.9843 73.9784 26.0222 73.911C26.0601 73.8437 26.1139 73.7898 26.1774 73.7554ZM35.9465 79.4126L29.8009 76.3388C32.1695 78.8281 33.3848 81.8504 34.0072 84.2514C34.7771 87.2214 34.8032 89.7399 34.7853 90.5919L40.5238 93.3769C40.7806 91.2855 41.3406 83.413 35.9465 79.4129L35.9465 79.4126Z" fill="#271A79" /> <path d="M20.3269 88.0047C22.643 83.8067 29.7051 76.4713 36.129 79.0344C36.129 79.0344 31.0388 75.7033 26.3414 74.1391C26.3414 74.1391 19.1398 72.5364 13.701 80.528L20.3269 88.0047Z" fill="#FDF151" /> <path d="M18.9084 75.1246C22.874 72.9856 26.3628 73.7116 26.4137 73.7229C26.4249 73.7254 26.436 73.7285 26.447 73.7321C31.1332 75.2923 36.265 78.6333 36.3164 78.667C36.3975 78.72 36.4582 78.8055 36.4866 78.9068C36.515 79.0081 36.5091 79.1179 36.4699 79.2145C36.431 79.3113 36.3616 79.3881 36.2754 79.4297C36.1892 79.4714 36.0924 79.4749 36.0041 79.4396C29.9187 77.0114 22.9978 83.9692 20.6447 88.2337C20.6149 88.2881 20.5746 88.3341 20.527 88.3684C20.4793 88.4026 20.4255 88.4243 20.3695 88.4316C20.3135 88.439 20.2568 88.4319 20.2035 88.4109C20.1503 88.3899 20.1019 88.3555 20.062 88.3103L13.436 80.8334C13.371 80.7601 13.3319 80.6623 13.3259 80.5585C13.32 80.4547 13.3476 80.3519 13.4037 80.2696C15.1458 77.7096 17.0779 76.1117 18.9082 75.1245L18.9084 75.1246ZM26.2543 74.5572C25.8994 74.4878 19.2872 73.3155 14.2029 80.4955L20.2652 87.3359C21.4216 85.4094 23.6353 82.6597 26.488 80.625C28.3575 79.2922 30.9694 77.9464 33.7683 78.0899C31.8633 76.9928 28.9795 75.4673 26.2543 74.5572Z" fill="#271A79" /> </g> <g clip-path="url(#clip1_878_3668)"> <path d="M208.87 107.758C201.247 105.798 199.867 95.5703 199.867 95.5703L206.838 95.9747C206.838 95.9747 209.824 107.267 219.546 108.511L208.87 107.758Z" fill="#FDF151" /> <path d="M219.818 108.81C219.78 108.854 219.735 108.888 219.685 108.91C219.635 108.932 219.581 108.941 219.527 108.938L208.851 108.184C208.831 108.183 208.811 108.179 208.791 108.174C201.007 106.174 199.513 95.7386 199.498 95.6333C199.49 95.5708 199.494 95.5071 199.51 95.4466C199.526 95.3862 199.553 95.3305 199.59 95.2838C199.628 95.2374 199.674 95.2009 199.725 95.1769C199.776 95.1528 199.831 95.1418 199.887 95.1445L206.857 95.5489C207.016 95.5581 207.153 95.6807 207.199 95.8539C207.229 95.9643 210.235 106.891 219.589 108.087C219.658 108.096 219.725 108.127 219.78 108.177C219.835 108.227 219.877 108.293 219.901 108.368C219.925 108.444 219.93 108.525 219.915 108.603C219.901 108.681 219.867 108.753 219.818 108.81ZM208.924 107.334L215.628 107.807C212.642 106.401 210.572 104.041 209.248 102.032C207.611 99.5466 206.81 97.1933 206.564 96.3867L200.331 96.0247C200.736 98.0884 202.638 105.697 208.924 107.334L208.924 107.334Z" fill="#271A79" /> <path d="M220.906 93.1396C220.032 97.9883 215.679 107.644 208.872 107.759C208.872 107.759 214.667 108.888 219.549 108.513C219.549 108.513 226.788 107.191 229.418 97.5564L220.906 93.1396Z" fill="#FDF151" /> <path d="M226.207 104.671C223.152 108.235 219.661 108.923 219.61 108.932C219.598 108.934 219.587 108.936 219.576 108.936C214.706 109.311 208.869 108.189 208.81 108.178C208.718 108.16 208.635 108.104 208.577 108.02C208.519 107.936 208.491 107.83 208.498 107.724C208.504 107.618 208.546 107.519 208.614 107.446C208.682 107.373 208.771 107.332 208.865 107.33C215.313 107.221 219.65 97.9752 220.538 93.0496C220.55 92.9868 220.573 92.9278 220.607 92.8769C220.641 92.8261 220.685 92.7847 220.735 92.7558C220.785 92.7269 220.841 92.7113 220.897 92.7101C220.953 92.7089 221.009 92.7222 221.061 92.749L229.572 97.166C229.655 97.2093 229.722 97.2857 229.76 97.3808C229.797 97.4759 229.803 97.5832 229.776 97.6825C228.934 100.769 227.617 103.027 226.207 104.671L226.207 104.671ZM219.502 108.086C219.855 108.012 226.41 106.518 228.958 97.7841L221.171 93.7432C220.682 96.005 219.456 99.4544 217.412 102.483C216.072 104.468 214.04 106.756 211.375 107.72C213.497 108.002 216.669 108.302 219.502 108.086Z" fill="#271A79" /> </g> <g clip-path="url(#clip2_878_3668)"> <path d="M117.949 107.011C113.273 114.126 118.096 122.885 118.096 122.885L123.168 117.428C123.168 117.428 118.956 106.677 125.64 98.5518L117.949 107.011Z" fill="#FDF151" /> <path d="M125.67 98.1269C125.616 98.1215 125.562 98.1292 125.511 98.1496C125.461 98.1701 125.414 98.2027 125.375 98.2453L117.684 106.704C117.67 106.72 117.657 106.737 117.644 106.755C112.87 114.021 117.724 123.021 117.774 123.111C117.803 123.165 117.843 123.21 117.89 123.244C117.936 123.278 117.989 123.3 118.044 123.308C118.099 123.315 118.155 123.309 118.208 123.289C118.261 123.27 118.309 123.237 118.35 123.194L123.422 117.738C123.537 117.613 123.571 117.419 123.507 117.254C123.466 117.149 119.48 106.66 125.91 98.8433C125.959 98.7848 125.991 98.7123 126.005 98.6338C126.018 98.5554 126.012 98.4742 125.987 98.3995C125.962 98.3249 125.919 98.2597 125.863 98.2115C125.807 98.1633 125.74 98.134 125.67 98.1269ZM118.228 107.293L123.057 101.982C121.593 105.252 121.372 108.567 121.519 111.065C121.7 114.155 122.442 116.528 122.718 117.32L118.183 122.2C117.306 120.339 114.385 113.176 118.228 107.293L118.228 107.293Z" fill="#271A79" /> <path d="M135.497 109.18C132.047 106.158 123.192 102.067 117.946 107.01C117.946 107.01 121.707 101.874 125.637 98.5509C125.637 98.5509 131.905 94.2022 139.437 99.5493L135.497 109.18Z" fill="#FDF151" /> <path d="M132.909 96.5382C128.539 96.0986 125.487 98.1581 125.443 98.1887C125.433 98.1956 125.424 98.2028 125.415 98.2105C121.494 101.525 117.697 106.687 117.659 106.739C117.599 106.82 117.568 106.925 117.572 107.031C117.576 107.137 117.615 107.238 117.681 107.313C117.747 107.388 117.836 107.433 117.929 107.438C118.023 107.443 118.114 107.408 118.187 107.34C123.156 102.658 131.764 106.45 135.269 109.52C135.313 109.559 135.365 109.587 135.42 109.6C135.475 109.613 135.532 109.612 135.587 109.597C135.642 109.582 135.693 109.553 135.736 109.512C135.78 109.471 135.815 109.42 135.839 109.362L139.779 99.7308C139.818 99.6364 139.825 99.5292 139.799 99.4295C139.773 99.3297 139.715 99.2443 139.638 99.1892C137.225 97.4763 134.927 96.7408 132.909 96.538L132.909 96.5382ZM125.846 98.9084C126.158 98.703 132.004 94.991 138.957 99.7169L135.352 108.528C133.681 107.178 130.768 105.474 127.473 104.692C125.314 104.181 122.455 103.95 119.873 105.191C121.326 103.409 123.567 100.839 125.846 98.9084Z" fill="#271A79" /> </g> <g clip-path="url(#clip3_878_3668)"> <path d="M103.326 72.7614C102.689 72.1827 102.028 71.6556 101.343 71.1824C97.4141 68.4645 92.8664 67.706 88.8666 69.1013C85.5503 70.2582 82.8494 72.7907 81.2609 76.2323C79.5997 79.832 79.2479 84.1755 80.2435 88.7934C80.6646 90.7477 81.3672 92.5276 82.3313 94.0842C83.5241 96.0098 85.8658 96.4702 87.5616 95.1122C89.2571 93.7541 89.6648 91.0921 88.4718 89.1661C88.0482 88.4825 87.7334 87.6707 87.5355 86.7535C86.3137 81.0864 88.5562 78.1332 91.062 77.259C93.0123 76.5785 95.3353 77.0212 97.4351 78.4736C99.3662 79.8095 102.071 82.6422 103.989 88.552C104.706 90.7619 106.865 91.8909 108.81 91.0731C110.755 90.2555 111.75 87.8008 111.033 85.5909C109.264 80.1419 106.624 75.7594 103.325 72.7614L103.326 72.7614Z" fill="#C084FC" /> <path d="M101.087 70.5159C101.239 70.6143 101.39 70.7153 101.54 70.8193C102.243 71.3067 102.918 71.8445 103.561 72.4295C106.903 75.4668 109.609 79.9671 111.387 85.4441C112.175 87.8712 111.078 90.5764 108.941 91.4745C108.433 91.6901 107.892 91.7889 107.35 91.7653C106.808 91.7417 106.275 91.5961 105.783 91.3369C105.29 91.0808 104.846 90.716 104.478 90.2637C104.11 89.8113 103.825 89.2803 103.638 88.7015C101.758 82.9074 99.1215 80.1404 97.2412 78.8397C95.2331 77.4503 93.0212 77.0236 91.1733 77.6684C88.8314 78.4853 86.7421 81.2747 87.9016 86.6531C88.0881 87.5184 88.3837 88.2816 88.7803 88.9217C90.0903 91.0367 89.641 93.9708 87.779 95.4624C85.9166 96.9537 83.3358 96.4464 82.0258 94.3314C81.0345 92.7309 80.3127 90.9025 79.8803 88.8967C78.8625 84.1763 79.2256 79.729 80.9299 76.0359C82.5653 72.4925 85.3453 69.8854 88.7581 68.6949C92.7069 67.3175 97.1717 67.9836 101.087 70.5159ZM105.834 90.4079C105.92 90.4634 106.008 90.5148 106.098 90.5618C106.5 90.7739 106.936 90.893 107.379 90.9123C107.823 90.9316 108.265 90.8507 108.681 90.6742C110.429 89.9394 111.327 87.726 110.682 85.7402C108.952 80.4088 106.327 76.0365 103.092 73.0961C102.469 72.5298 101.815 72.0091 101.149 71.5483C97.3101 68.8941 92.8749 68.1509 88.9775 69.5105C85.758 70.6338 83.1359 73.0917 81.5945 76.4314C79.9765 79.9375 79.6359 84.1773 80.6092 88.6927C81.0192 90.5947 81.7024 92.3265 82.6395 93.8394C83.7113 95.5696 85.8231 95.9848 87.3467 94.7647C88.8703 93.5445 89.2377 91.1438 88.1658 89.4133C87.7152 88.6859 87.381 87.8257 87.1721 86.8568C85.8882 80.9011 88.2835 77.7839 90.9535 76.8523C93.0062 76.1362 95.441 76.5955 97.6317 78.1104C99.6139 79.4818 102.387 82.3809 104.342 88.4052C104.615 89.2526 105.143 89.9621 105.833 90.4076L105.834 90.4079Z" fill="#271A79" /> <path d="M82.3353 94.0862C84.7878 98.0446 88.8366 100.272 92.6505 99.7602C95.4668 99.3823 97.7302 97.5015 98.7046 94.7294C99.6481 92.0457 99.7855 87.4989 95.0834 81.0788C94.4431 80.2036 93.7265 79.4042 92.9446 78.693C89.0184 75.1247 83.712 74.0634 78.7222 76.0323C72.4416 78.5105 68.2631 85.0757 68.0772 92.7581C68.0421 94.2135 68.1369 95.6141 68.3594 96.9214C68.7532 99.2346 70.7224 100.745 72.7578 100.295C74.7932 99.8445 76.1241 97.6047 75.7305 95.2915C75.612 94.5942 75.5619 93.8177 75.5821 92.9833C75.7025 88.0091 78.5512 85.1298 81.1773 84.0937C84.2571 82.8783 87.2977 83.7941 89.3111 86.5431C91.0884 88.9699 91.7432 90.5821 91.7061 91.2995C91.6427 92.526 89.6789 91.2708 88.4752 89.168" fill="#C084FC" /> <path d="M91.2308 76.8564C91.9081 77.2945 92.5592 77.7953 93.1789 78.3587C93.9804 79.0881 94.715 79.9075 95.3716 80.8047C100.192 87.3859 100.034 92.0948 99.0526 94.8862C98.0263 97.8062 95.649 99.7862 92.6936 100.183C88.745 100.713 84.5584 98.4158 82.0278 94.3312C81.9705 94.2388 81.9479 94.1242 81.965 94.0126C81.9821 93.9011 82.0374 93.8018 82.1188 93.7366C82.2003 93.6714 82.3011 93.6456 82.3992 93.6649C82.4973 93.6842 82.5846 93.747 82.6419 93.8395C85.0164 97.672 88.9277 99.8291 92.6065 99.3355C95.2838 98.9762 97.433 97.195 98.3556 94.5706C99.2611 91.9945 99.3784 87.61 94.7943 81.3513C94.17 80.4983 93.4716 79.7191 92.7096 79.0255C88.8368 75.5054 83.6534 74.5368 78.8444 76.4344C72.7128 78.8538 68.6335 85.2654 68.452 92.7686C68.4176 94.1933 68.5103 95.5628 68.7275 96.8392C69.0814 98.9176 70.8572 100.28 72.6861 99.8751C74.515 99.4707 75.7152 97.4508 75.3615 95.3723C75.2378 94.6446 75.1856 93.8368 75.2065 92.9713C75.3322 87.7799 78.3095 84.7727 81.0541 83.6897C84.2873 82.414 87.4817 83.3779 89.5994 86.269C91.2274 88.4919 92.1318 90.3341 92.0806 91.3234C92.0578 91.7642 91.854 92.0747 91.5214 92.1751C90.6175 92.4482 89.0538 90.9607 88.1603 89.4001C88.1328 89.3532 88.1137 89.3005 88.1042 89.2451C88.0947 89.1898 88.095 89.1328 88.105 89.0775C88.1151 89.0222 88.1346 88.9697 88.1626 88.923C88.1906 88.8764 88.2265 88.8365 88.2681 88.8056C88.3097 88.7748 88.3563 88.7537 88.4052 88.7435C88.454 88.7333 88.5041 88.7342 88.5526 88.7461C88.6012 88.7581 88.6471 88.7809 88.6878 88.8132C88.7285 88.8454 88.7631 88.8866 88.7897 88.9342C89.753 90.6168 91.029 91.4471 91.3197 91.3543C91.3236 91.3413 91.329 91.3163 91.3312 91.2742C91.3602 90.7115 90.773 89.2061 89.0222 86.8154C87.1127 84.2083 84.2257 83.3413 81.2998 84.4958C78.7925 85.4852 76.0722 88.2372 75.9571 92.9937C75.9376 93.7969 75.9853 94.5425 76.0987 95.2091C76.531 97.7497 75.0641 100.218 72.8287 100.713C70.5932 101.207 68.4228 99.5422 67.9905 97.0021C67.7628 95.665 67.6657 94.233 67.7016 92.7461C67.8919 84.8846 72.1694 78.1656 78.599 75.6284C82.8844 73.9374 87.4553 74.4145 91.2307 76.8566L91.2308 76.8564Z" fill="#271A79" /> <path d="M68.3578 96.9225C69.2879 102.388 72.6101 106.421 76.8216 107.197C80.19 107.818 83.3842 106.174 84.9592 103.007C86.2392 100.434 87.4481 94.8584 81.1598 86.4317C79.9086 84.7549 78.6771 83.3988 77.4804 82.311C70.9462 76.3719 65.4274 78.4219 63.1187 79.7821C59.9875 81.6271 57.4804 85.0753 56.0595 89.4917C54.7005 93.7152 54.4819 98.3812 55.4437 102.63C55.9603 104.911 58.0064 106.283 60.0144 105.694C62.0221 105.104 63.2312 102.777 62.7148 100.495C61.4358 94.8444 63.719 89.036 66.5681 87.3573C67.9774 86.527 71.0027 86.0203 75.4318 91.9555C78.4235 95.9648 78.62 98.2939 78.4413 98.764C78.2544 99.2561 77.8028 99.4531 77.369 99.227C76.4703 98.7579 76.0081 96.9346 75.7287 95.2926" fill="#C084FC" /> <path d="M75.2293 80.0469C76.0392 80.5708 76.8692 81.2077 77.7151 81.9764C78.9805 83.1265 80.2359 84.5322 81.4461 86.1543C87.8814 94.7783 86.614 100.546 85.2856 103.216C83.6322 106.539 80.2861 108.267 76.7609 107.617C72.3922 106.812 68.949 102.645 67.9889 97.0027C67.9714 96.8923 67.9929 96.7785 68.0487 96.6859C68.1045 96.5933 68.1902 96.5293 68.2871 96.5079C68.384 96.4865 68.4844 96.5093 68.5665 96.5714C68.6486 96.6335 68.7059 96.7299 68.7259 96.8398C69.6258 102.127 72.827 106.027 76.8818 106.775C80.0932 107.367 83.1353 105.805 84.6322 102.796C85.8642 100.32 87.0141 94.9358 80.8732 86.7066C79.6941 85.1263 78.4736 83.7591 77.2456 82.643C70.7962 76.7808 65.3382 78.9534 63.2911 80.1595C60.2437 81.955 57.8006 85.3208 56.412 89.6366C55.0789 93.7796 54.864 98.3559 55.8072 102.522C56.2715 104.573 58.1168 105.809 59.9208 105.28C61.7249 104.75 62.8152 102.651 62.3512 100.601C61.0282 94.7562 63.4207 88.7302 66.3955 86.9775C67.9039 86.0888 71.1208 85.5177 75.7182 91.6784C78.5493 95.4726 79.1039 98.0949 78.7859 98.932C78.6552 99.2757 78.4239 99.5347 78.1341 99.6614C77.8426 99.7889 77.515 99.772 77.2122 99.6142C76.3656 99.1721 75.7772 97.8249 75.36 95.3732C75.3425 95.2628 75.364 95.1489 75.4198 95.0563C75.4756 94.9637 75.5613 94.8998 75.6582 94.8784C75.7551 94.8569 75.8555 94.8797 75.9376 94.9418C76.0198 95.004 76.0771 95.1004 76.0971 95.2102C76.4543 97.3092 76.9347 98.5297 77.5258 98.8384C77.6451 98.9006 77.7625 98.9097 77.8653 98.8649C77.9662 98.8209 78.0462 98.7273 78.0966 98.5944C78.2039 98.2628 78.0186 96.0814 75.1454 92.231C70.8843 86.5209 68.0506 86.9634 66.7404 87.7353C64.0169 89.34 61.843 94.9309 63.0783 100.388C63.6455 102.893 62.3129 105.459 60.1077 106.106C57.903 106.754 55.6474 105.242 55.0799 102.736C54.0994 98.4042 54.3221 93.6485 55.7068 89.3449C57.1601 84.8278 59.7311 81.2968 62.946 79.4026C64.8524 78.2794 69.5343 76.3636 75.2291 80.0473L75.2293 80.0469Z" fill="#271A79" /> </g> <g clip-path="url(#clip4_878_3668)"> <path d="M19.815 30.9695C19.8538 30.9719 19.8925 30.975 19.9312 30.9788C21.993 31.1803 23.5157 33.2469 23.3324 35.5945C22.9612 40.3497 21.2912 44.7062 18.5029 48.1922C16.0109 51.3078 12.7471 53.6098 9.0644 54.849C1.7708 57.3032 -5.54182 55.0682 -9.56546 49.1548C-10.831 47.2947 -10.5292 44.6143 -8.89148 43.1681C-7.25325 41.7218 -4.89964 42.0575 -3.6343 43.9172C-1.51065 47.0386 2.64854 48.1178 6.95972 46.667C10.9245 45.333 15.346 41.5321 15.8665 34.8647C16.0462 32.5614 17.8017 30.843 19.815 30.9695Z" fill="#38BDF8" /> <path d="M-10.2944 44.4615C-10.0178 43.8241 -9.61727 43.2665 -9.12329 42.8313C-7.32436 41.243 -4.73019 41.6127 -3.34047 43.6553C-1.31162 46.6373 2.68888 47.6588 6.85175 46.2579C10.6977 44.9638 14.9868 41.2815 15.4904 34.8281C15.6888 32.2851 17.5966 30.403 19.8339 30.5435C20.3962 30.5767 20.9461 30.7415 21.4493 31.0277C21.9524 31.314 22.3979 31.7155 22.7581 32.2071C23.1067 32.6777 23.3698 33.2226 23.5319 33.8103C23.694 34.398 23.752 35.0168 23.7026 35.631C23.3244 40.4803 21.6209 44.923 18.7769 48.4789C16.2385 51.6527 12.9154 53.9967 9.16686 55.2582C1.72403 57.7624 -5.74636 55.4696 -9.86464 49.4169C-10.8601 47.9538 -10.9718 46.0229 -10.2944 44.4615ZM15.0764 39.6883C13.3559 43.6539 10.0805 46.0603 7.06209 47.076C2.60126 48.5772 -1.71503 47.4401 -3.93373 44.1789C-5.07073 42.5078 -7.19325 42.2053 -8.66527 43.5048C-10.1369 44.8043 -10.4089 47.2215 -9.27179 48.8929C-5.34346 54.6665 1.81156 56.8437 8.95626 54.4397C12.573 53.2227 15.7775 50.9632 18.2231 47.9054C20.9557 44.4893 22.5923 40.2196 22.9561 35.5578C22.9966 35.0554 22.9492 34.549 22.8166 34.0682C22.6839 33.5873 22.4687 33.1415 22.1834 32.7565C21.8887 32.3542 21.5241 32.0257 21.1123 31.7915C20.7006 31.5573 20.2506 31.4224 19.7904 31.3954C17.9601 31.2804 16.3995 32.8202 16.237 34.9009C16.097 36.6954 15.6834 38.2893 15.0764 39.6883Z" fill="#271A79" /> <path d="M-9.56805 49.1558C-13.0166 44.0873 -13.4194 38.4939 -10.6456 34.1938C-8.29142 30.5438 -3.95782 28.5055 0.212518 28.767C1.40883 28.842 2.5907 29.1062 3.70948 29.576C8.40848 31.5486 10.9525 36.5571 10.5151 42.9739C10.0849 49.2811 6.942 54.6874 1.66483 58.1968C-2.69768 61.0981 -8.39818 62.5602 -13.9772 62.21L-13.9974 62.2087C-16.0637 62.0773 -17.64 60.0635 -17.5183 57.7111C-17.3967 55.3596 -15.6244 53.5594 -13.5594 53.6891C-13.5528 53.6897 -13.5474 53.6899 -13.5413 53.6902C-9.39326 53.9507 -5.2245 52.9095 -2.10133 50.8325C1.0714 48.7225 2.81055 45.8657 3.04231 42.3393C3.23344 39.4319 2.34878 38.2488 1.09776 37.583C-0.913953 36.5121 -3.62664 37.1561 -4.60857 39.2308C-5.18239 40.4433 -4.99771 41.9181 -3.63681 43.9184" fill="#38BDF8" /> <path d="M-11.8668 35.6601C-11.6105 35.0691 -11.3039 34.4953 -10.9467 33.9415C-8.57338 30.2618 -4.18433 28.0634 0.234962 28.3405C1.49708 28.4197 2.71018 28.7005 3.8408 29.1752C8.70565 31.2173 11.3405 36.3873 10.8894 43.0052C10.4494 49.4565 7.24053 54.9823 1.85378 58.5643C-2.57017 61.5062 -8.34794 62.99 -13.9984 62.6351L-14.0188 62.6339C-15.118 62.564 -16.1263 62.0109 -16.8579 61.0765C-17.5895 60.142 -17.9567 58.9382 -17.8919 57.6865C-17.7583 55.1047 -15.8048 53.1198 -13.5371 53.2623C-9.44282 53.5193 -5.34966 52.499 -2.28918 50.4635C0.779397 48.4228 2.44766 45.6788 2.66912 42.308C2.86039 39.3979 1.90174 38.4816 0.938582 37.9687C-0.986642 36.9439 -3.42464 37.6273 -4.27829 39.4314C-4.61915 40.1516 -4.89275 41.3731 -3.33971 43.6556C-3.28252 43.7452 -3.2583 43.8568 -3.27216 43.9666C-3.28602 44.0765 -3.33688 44.176 -3.41397 44.2441C-3.49106 44.3122 -3.58832 44.3435 -3.68515 44.3315C-3.78198 44.3194 -3.87078 44.2649 -3.93272 44.1795C-5.29902 42.1714 -5.62721 40.4856 -4.93784 39.0285C-3.90444 36.8453 -1.00937 35.9887 1.25788 37.1957C2.92766 38.0847 3.59348 39.6803 3.41653 42.3693C3.17533 46.0377 1.3824 49.0089 -1.91264 51.2001C-5.09708 53.3178 -9.34344 54.3805 -13.5626 54.1155L-13.5875 54.1139C-15.4361 53.9978 -17.0344 55.6216 -17.1437 57.7342C-17.1966 58.7582 -16.8963 59.7432 -16.2978 60.5077C-15.6993 61.2722 -14.8743 61.7249 -13.975 61.7819L-13.9769 62.2092L-13.9551 61.7833C-8.44782 62.1291 -2.82309 60.6876 1.47689 57.8279C6.64431 54.3916 9.72154 49.1049 10.1419 42.9417C10.5657 36.726 8.1124 31.8789 3.57943 29.9758C2.51873 29.5305 1.37877 29.2669 0.191176 29.1925C-3.98143 28.9309 -8.1164 30.9926 -10.3434 34.445C-13.0122 38.5821 -12.6114 43.9838 -9.27103 48.8932C-9.24015 48.9373 -9.2173 48.988 -9.20381 49.0424C-9.19031 49.0967 -9.18644 49.1536 -9.19243 49.2097C-9.19841 49.2658 -9.21413 49.3201 -9.23866 49.3693C-9.2632 49.4185 -9.29606 49.4617 -9.33535 49.4964C-9.37463 49.5311 -9.41956 49.5566 -9.46752 49.5713C-9.51547 49.5861 -9.5655 49.5899 -9.6147 49.5825C-9.66389 49.5751 -9.71128 49.5567 -9.7541 49.5282C-9.79692 49.4998 -9.83432 49.4619 -9.86413 49.4168C-12.9794 44.8378 -13.6767 39.8307 -11.8671 35.6597L-11.8668 35.6601Z" fill="#271A79" /> </g> <g clip-path="url(#clip5_878_3668)"> <path d="M185.876 102.322C186.651 104.521 185.909 107.086 184.048 108.31C180.087 110.914 174.875 111.744 170.771 110.423C167.829 109.477 165.593 107.538 164.306 104.817C161.171 98.1852 163.46 93.2223 164.975 89.9376C166.318 87.0256 166.48 85.7778 165.465 84.4441C164.48 83.1486 160.42 81.9155 152.192 84.7506C149.926 85.5312 147.528 84.0841 146.834 81.5195C146.142 78.9541 147.417 76.2417 149.684 75.4609C164.8 70.253 170.558 75.526 172.644 79.1325C176.539 85.8643 174.15 91.2851 172.584 94.4382C170.999 97.6295 170.654 100.063 173.109 101.083C174.947 101.847 177.777 101.197 179.729 99.9129C181.777 98.5663 184.404 99.3543 185.596 101.673C185.704 101.882 185.797 102.098 185.876 102.322Z" fill="#F5C433" /> <path d="M165.802 73.4162C169.751 74.5327 171.883 76.9329 173.001 78.8661C177.203 86.1269 174.227 92.1176 172.957 94.6756C171.905 96.7926 171.551 98.3021 171.873 99.2898C172.067 99.8835 172.519 100.321 173.255 100.627C174.839 101.286 177.528 100.797 179.512 99.4923C180.602 98.7759 181.871 98.5826 183.092 98.9485C183.692 99.1265 184.255 99.4374 184.748 99.8631C185.242 100.289 185.655 100.821 185.966 101.429C186.084 101.658 186.186 101.896 186.273 102.142C187.133 104.579 186.268 107.41 184.262 108.729C180.206 111.396 174.864 112.245 170.652 110.889C167.596 109.906 165.27 107.885 163.927 105.044C160.684 98.1861 163.037 93.0863 164.593 89.7116C165.975 86.7153 165.938 85.8094 165.139 84.7595C164.179 83.4974 159.971 82.5767 152.316 85.2142C149.828 86.071 147.185 84.4768 146.423 81.6602C146.054 80.2952 146.177 78.8504 146.769 77.5916C147.361 76.3328 148.351 75.4108 149.557 74.9955C156.948 72.4491 162.151 72.384 165.802 73.4162ZM173.43 101.701C173.269 101.655 173.112 101.601 172.96 101.538C171.987 101.134 171.35 100.49 171.068 99.6251C170.648 98.3362 171.01 96.612 172.208 94.1989C173.504 91.5908 176.199 86.1641 172.284 79.3971C170.263 75.9043 164.657 70.8087 149.808 75.9242C148.821 76.2641 148.011 77.0185 147.527 78.0483C147.043 79.078 146.942 80.2603 147.243 81.377C147.867 83.6813 150.03 84.9861 152.065 84.285C160.724 81.3017 164.766 82.7817 165.789 84.1264C167.033 85.7608 166.64 87.3747 165.354 90.1616C163.881 93.3551 161.655 98.1816 164.683 104.587C165.914 107.189 168.059 109.046 170.886 109.955C174.886 111.242 179.966 110.43 183.831 107.889C185.471 106.81 186.179 104.493 185.476 102.5C185.406 102.3 185.321 102.104 185.225 101.916C184.971 101.419 184.632 100.983 184.228 100.635C183.824 100.286 183.364 100.032 182.873 99.8864C182.383 99.7377 181.871 99.7004 181.369 99.7768C180.866 99.8532 180.382 100.042 179.944 100.331C178.181 101.491 175.467 102.276 173.43 101.701L173.43 101.701Z" fill="#271A79" /> </g> <defs> <clipPath id="clip0_878_3668"> <rect width="24.4432" height="26.823" fill="white" transform="matrix(-0.853824 0.460541 -0.395578 -0.948615 43.9531 92.7666)" /> </clipPath> <clipPath id="clip1_878_3668"> <rect width="25.3222" height="25.8606" fill="white" transform="matrix(0.634844 -0.740648 0.687666 0.762409 197.309 97.9424)" /> </clipPath> <clipPath id="clip2_878_3668"> <rect width="23.3528" height="27.9201" fill="white" transform="matrix(0.984913 0.0990542 0.0792183 -1.00497 114.785 122.981)" /> </clipPath> <clipPath id="clip3_878_3668"> <rect width="49.2896" height="54.505" fill="white" transform="matrix(-0.853707 -0.552251 0.441916 -0.881407 91.707 128.071)" /> </clipPath> <clipPath id="clip4_878_3668"> <rect width="46.0044" height="33.6993" fill="white" transform="matrix(-0.393594 0.907219 -0.884393 -0.494938 26.0625 33.6123)" /> </clipPath> <clipPath id="clip5_878_3668"> <rect width="44.9665" height="34.8095" fill="white" transform="matrix(-0.962276 -0.272077 0.214733 -0.976673 184.406 114.786)" /> </clipPath> </defs> </svg> </div> </div> </div> </div> </div> <div id="modal-feedback" x-data="{ show: false, focusables() { // All focusable element types... let selector = 'a, button, input:not([type=\'hidden\']), textarea, select, details, [tabindex]:not([tabindex=\'-1\'])' return [...$el.querySelectorAll(selector)] // All non-disabled elements... .filter(el => !el.hasAttribute('disabled')) }, firstFocusable() { return this.focusables()[0] }, lastFocusable() { return this.focusables().slice(-1)[0] }, nextFocusable() { return this.focusables()[this.nextFocusableIndex()] || this.firstFocusable() }, prevFocusable() { return this.focusables()[this.prevFocusableIndex()] || this.lastFocusable() }, nextFocusableIndex() { return (this.focusables().indexOf(document.activeElement) + 1) % (this.focusables().length + 1) }, prevFocusableIndex() { return Math.max(0, this.focusables().indexOf(document.activeElement)) - 1 }, closeModal() { window.dispatchEvent(new CustomEvent('close-modal', { detail: 'feedback' })); this.show = false; } }" x-init="$watch('show', value => { if (value) { document.body.classList.add('overflow-y-hidden'); } else { document.body.classList.remove('overflow-y-hidden'); } })" x-on:open-modal.window="$event.detail == 'feedback' ? show = true : null" x-on:close.stop="closeModal()" x-on:close-modal.window="$event.detail == 'feedback' ? show = false : null" x-on:keydown.escape.window="closeModal()" x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()" x-on:keydown.shift.tab.prevent="prevFocusable().focus()" x-show="show" class="relative z-30" aria-labelledby="modal-title" role="dialog" aria-modal="true" style="display: none;"> <div x-show="show" class="fixed inset-0 transform transition-all" x-on:click="closeModal()" x-transition:enter="ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"> <div class="absolute inset-0 bg-elevated-0 dark:bg-elevated-4 opacity-80"></div> </div> <div x-show="show" class="fixed inset-0 z-40 overflow-y-auto"> <div class="flex min-h-full items-center justify-center sm:p-0"> <div @click.stop x-on:click.outside=closeModal() class="relative transform overflow-hidden bg-surface-0 dark:bg-elevated-3 text-left shadow-xl dark:shadow-none dark:border dark:border-elevated-3 transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:rounded-xl w-full h-full sm:h-auto min-h-screen sm:min-h-0"> <div class="absolute right-0 top-0 pr-3 pt-3 block"> <button class="px-4 py-2.5 text-md rounded-xl w-auto border-transparent text-primary-1 dark:text-surface-4 hover:text-primary-1 dark:hover:text-surface-5 disabled:text-surface-6 hover:bg-primary-6 disabled:hover:bg-transparent focus:border-primary-6 focus:border-primary-6 active:bg-primary-6 dark:hover:bg-primary-1 dark:hover:text-surface-1 disabled:dark:hover:bg-transparent inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 items-center" type="button" x-on:click="closeModal()" color="tertiary" type="button"> <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg> </button> </div> <div> <div class="p-8" x-data="feedbackModal"> <p class="text-2xl sm:text-3xl font-bold text-elevated-3 dark:text-surface-4 pb-2 text-center mt-2"> Feedback </p> <div class="mt-4 prose dark:prose-dark"> <p class="text-elevated-1 dark:text-surface-5"> Please use this form to submit feedback or report bugs. You can find answers to most questions in our <a class="text-primary-1 cursor-pointer dark:text-primary-1 hover:text-primary-2" href="https://help.quizgecko.com" target="_blank">Help Center.</a> </p> </div> <div class="mt-6"> <form method="POST" enctype="multipart/form-data" x-on:submit.prevent="submit()"> <input type="hidden" name="_token" value="eP6fvoZEwqhpbqi4yCVUAAAcfE56iNuliXiCQNxc" autocomplete="off"> <div class="mb-4"> <label for="category" class="block text-sm font-medium text-elevated-2 dark:text-surface-5"> Category </label> <select id="category" name="category" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-surface-5 dark:border-elevated-2 focus:outline-none focus:ring-primary-1 focus:border-primary-1 dark:bg-elevated-3 dark:text-surface-4 sm:text-sm rounded-md"> <option value="">Select a category</option> <option value="bug">General Bug</option> <option value="feedback">General feedback</option> <option value="question_generation">Generating questions</option> <option value="quiz_play">Playing a quiz</option> <option value="quiz_share">Sharing a quiz</option> </select> </div> <div class="mb-4"> <label for="feedback" class="block text-sm font-medium text-elevated-2 dark:text-surface-5"> Feedback </label> <textarea id="feedback" name="feedback" rows="4" x-model="feedback" class="mt-1 block w-full p-2.5 text-sm text-gray-900 bg-surface-0 border border-surface-5 rounded-lg focus:ring-blue-500 focus:border-blue-500 dark:bg-elevated-3 dark:border-elevated-2 dark:text-surface-4" placeholder="Your feedback..."></textarea> </div> <div class="mb-4"> <label for="image" class="block text-sm font-medium text-elevated-2 dark:text-surface-5"> Image (optional) </label> <input type="file" id="image" name="image" x-on:change="images = Object.values($event.target.files)" class="mt-1 block w-full text-sm text-gray-900 bg-surface-0 border border-surface-5 cursor-pointer focus:outline-none focus:border-transparent rounded-lg dark:bg-elevated-3 dark:border-elevated-2 dark:text-surface-4"> </div> <div class="flex justify-end"> <button class="px-4 py-2.5 text-md rounded-xl w-auto bg-primary-1 border-primary-0 hover:bg-primary-3 active:bg-primary-0 focus:shadow-outline-indigo text-surface-0 disabled:bg-surface-4 disabled:text-surface-0 disabled:bg-surface-6 disabled:border-elevated-0 inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 items-center" type="submit" type="button"> Submit </button> </div> </form> </div> </div> <script> document.addEventListener('alpine:init', () => { Alpine.data('feedbackModal', () => ({ open: false, feedback: "", category: "general", images: null, submit() { this.$dispatch('close-modal', 'feedback'); let formData = new FormData(); formData.append('feedback', this.feedback); formData.append('category', this.category); if (this.images) { formData.append('image', this.images[0]); } this.open = false; axios.post("/api/v1/feedback", formData, { headers: { 'Content-Type': 'multipart/form-data' } }) .then((response) => { this.feedback = ""; this.images = null; this.open = false; window.confirmModal("Submitted", "Thank you for your feedback!", false); }) .catch((error) => { console.error("Error submitting feedback:", error); window.confirmModal("Error", "Sorry, there was an error submitting your feedback. Please try again.", false); this.open = false; }); } })); }); </script> </div> </div> </div> </div> </div> <div id="modal-register" x-data="{ show: false, focusables() { // All focusable element types... let selector = 'a, button, input:not([type=\'hidden\']), textarea, select, details, [tabindex]:not([tabindex=\'-1\'])' return [...$el.querySelectorAll(selector)] // All non-disabled elements... .filter(el => !el.hasAttribute('disabled')) }, firstFocusable() { return this.focusables()[0] }, lastFocusable() { return this.focusables().slice(-1)[0] }, nextFocusable() { return this.focusables()[this.nextFocusableIndex()] || this.firstFocusable() }, prevFocusable() { return this.focusables()[this.prevFocusableIndex()] || this.lastFocusable() }, nextFocusableIndex() { return (this.focusables().indexOf(document.activeElement) + 1) % (this.focusables().length + 1) }, prevFocusableIndex() { return Math.max(0, this.focusables().indexOf(document.activeElement)) - 1 }, closeModal() { window.dispatchEvent(new CustomEvent('close-modal', { detail: 'register' })); this.show = false; } }" x-init="$watch('show', value => { if (value) { document.body.classList.add('overflow-y-hidden'); } else { document.body.classList.remove('overflow-y-hidden'); } })" x-on:open-modal.window="$event.detail == 'register' ? show = true : null" x-on:close.stop="closeModal()" x-on:close-modal.window="$event.detail == 'register' ? show = false : null" x-on:keydown.escape.window="closeModal()" x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()" x-on:keydown.shift.tab.prevent="prevFocusable().focus()" x-show="show" class="relative z-30" aria-labelledby="modal-title" role="dialog" aria-modal="true" style="display: none;"> <div x-show="show" class="fixed inset-0 transform transition-all" x-on:click="closeModal()" x-transition:enter="ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"> <div class="absolute inset-0 bg-elevated-0 dark:bg-elevated-4 opacity-80"></div> </div> <div x-show="show" class="fixed inset-0 z-40 overflow-y-auto"> <div class="flex min-h-full items-center justify-center sm:p-0"> <div @click.stop x-on:click.outside=closeModal() class="relative transform overflow-hidden bg-surface-0 dark:bg-elevated-3 text-left shadow-xl dark:shadow-none dark:border dark:border-elevated-3 transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:rounded-xl w-full h-full sm:h-auto min-h-screen sm:min-h-0"> <div class="absolute right-0 top-0 pr-3 pt-3 block"> <button class="px-4 py-2.5 text-md rounded-xl w-auto border-transparent text-primary-1 dark:text-surface-4 hover:text-primary-1 dark:hover:text-surface-5 disabled:text-surface-6 hover:bg-primary-6 disabled:hover:bg-transparent focus:border-primary-6 focus:border-primary-6 active:bg-primary-6 dark:hover:bg-primary-1 dark:hover:text-surface-1 disabled:dark:hover:bg-transparent inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 items-center" type="button" x-on:click="closeModal()" color="tertiary" type="button"> <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg> </button> </div> <div> <div class="p-8" x-data="{ showEmailForm: false }"> <p class="text-2xl sm:text-3xl font-bold text-elevated-3 dark:text-surface-4 pb-2 text-center mt-2"> Create your free account </p> <div class="mb-3 mt-10" x-show="!showEmailForm"> <div class="mt-6 text-center mx-auto max-w-sm"> <a x-data @click="$store.signInMethod.trackSignIn('google')" x-tooltip="Last used" x-tooltip-position="left" x-tooltip-display="$store.signInMethod.method === 'google'" href="https://quizgecko.com/auth/google/redirect" class="px-5 py-3 text-md rounded-lg w-full bg-blue-600 dark:border-blue-600 hover:bg-blue-700 hover:border-blue-600 active:bg-blue-100 focus:border-blue-600 focus:shadow-outline-gray text-surface-0 disabled:bg-blue-200 disabled:text-surface-3 inline-flex justify-center font-bold border shadow-sm disabled:cursor-not-allowed cursor-pointer disabled:shadow-none focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 mt-1 sm:w-full"> <svg class="w-6 h-6 mr-1" viewBox="0 0 533.5 544.3"> <path d="M533.5 278.4c0-18.5-1.5-37.1-4.7-55.3H272.1v104.8h147c-6.1 33.8-25.7 63.7-54.4 82.7v68h87.7c51.5-47.4 81.1-117.4 81.1-200.2z" fill="#4285f4"></path> <path d="M272.1 544.3c73.4 0 135.3-24.1 180.4-65.7l-87.7-68c-24.4 16.6-55.9 26-92.6 26-71 0-131.2-47.9-152.8-112.3H28.9v70.1c46.2 91.9 140.3 149.9 243.2 149.9z" fill="#34a853"></path> <path d="M119.3 324.3c-11.4-33.8-11.4-70.4 0-104.2V150H28.9c-38.6 76.9-38.6 167.5 0 244.4l90.4-70.1z" fill="#fbbc04"></path> <path d="M272.1 107.7c38.8-.6 76.3 14 104.4 40.8l77.7-77.7C405 24.6 339.7-.8 272.1 0 169.2 0 75.1 58 28.9 150l90.4 70.1c21.5-64.5 81.8-112.4 152.8-112.4z" fill="#ea4335"></path> </svg> <span class="ml-2"> Continue with Google </span> </a> </div> <div class="mt-2 text-center mx-auto max-w-sm"> <a href="https://quizgecko.com/auth/apple/redirect" x-data @click="$store.signInMethod.trackSignIn('apple')" x-tooltip-position="left" x-tooltip="Last used" x-tooltip-display="$store.signInMethod.method === 'apple'" class="px-5 py-3 text-md rounded-lg w-full dark:border-elevated-3 hover:bg-elevated-3 hover:border-black active:bg-surface-3 focus:border-black focus:shadow-outline-gray text-surface-0 disabled:text-surface-3 disabled:bg-surface-4 inline-flex justify-center font-bold border shadow-sm disabled:cursor-not-allowed cursor-pointer disabled:shadow-none focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 mt-1 sm:w-full bg-black"> <svg class="w-5 h-5 mr-0.5 mt-0.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516.024.034 1.52.087 2.475-1.258.955-1.345.762-2.391.728-2.43Zm3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422.212-2.189 1.675-2.789 1.698-2.854.023-.065-.597-.79-1.254-1.157a3.692 3.692 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56.244.729.625 1.924 1.273 2.796.576.984 1.34 1.667 1.659 1.899.319.232 1.219.386 1.843.067.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758.347-.79.505-1.217.473-1.282Z"> </path> <path d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516.024.034 1.52.087 2.475-1.258.955-1.345.762-2.391.728-2.43Zm3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422.212-2.189 1.675-2.789 1.698-2.854.023-.065-.597-.79-1.254-1.157a3.692 3.692 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56.244.729.625 1.924 1.273 2.796.576.984 1.34 1.667 1.659 1.899.319.232 1.219.386 1.843.067.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758.347-.79.505-1.217.473-1.282Z"> </path> </svg> <span class="ml-2"> Sign in with Apple </span> </a> </div> <div class="text-center mt-8"> <button class="px-4 py-2.5 text-md rounded-xl w-auto border-2 bg-surface-1 dark:bg-elevated-3 border-surface-5 dark:border-elevated-1 hover:border-primary-1 dark:hover:border-primary-1 active:bg-surface-3 dark:active:bg-elevated-2 focus:border-primary-0 focus:shadow-outline-gray dark:focus:shadow-outline-gray text-primary-1 dark:text-surface-4 hover:text-primary-1 dark:hover:text-surface-5 dark:disabled:elevated-3 disabled:text-surface-6 dark:disabled:border-elevated-1 disabled:hover:border-surface-5 disabled:active:bg-surface-1 dark:disabled:active:bg-elevated-2 inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 items-center" x-data="" x-tooltip="Last used" x-tooltip-position="left" x-tooltip-display="$store.signInMethod.method === 'email'" color="secondary" type="button" @click="showEmailForm = true; $store.signInMethod.trackSignIn('email')" type="button"> or continue with email </button> </div> </div> <form method="POST" action="https://quizgecko.com/register" class="" x-show="showEmailForm"> <input type="hidden" name="_token" value="eP6fvoZEwqhpbqi4yCVUAAAcfE56iNuliXiCQNxc" autocomplete="off"> <div class="mt-2 mb-6"> <button class="px-3 py-2 text-sm rounded-xl w-auto border-2 bg-surface-1 dark:bg-elevated-3 border-surface-5 dark:border-elevated-1 hover:border-primary-1 dark:hover:border-primary-1 active:bg-surface-3 dark:active:bg-elevated-2 focus:border-primary-0 focus:shadow-outline-gray dark:focus:shadow-outline-gray text-primary-1 dark:text-surface-4 hover:text-primary-1 dark:hover:text-surface-5 dark:disabled:elevated-3 disabled:text-surface-6 dark:disabled:border-elevated-1 disabled:hover:border-surface-5 disabled:active:bg-surface-1 dark:disabled:active:bg-elevated-2 inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 items-center" color="light" size="sm" @click="showEmailForm = false" type="button"> ← Back </button> </div> <!-- Name --> <div> <label class="block text-sm text-elevated-3 font-semibold dark:text-surface-4 cursor-pointer" for="name"> Your Name </label> <input class="flex-1 block w-full min-w-0 text-elevated-3 dark:text-surface-4 bg-surface-3 dark:bg-elevated-4 px-4 py-3 rounded-xl mt-1 dark:bg-elevated-3 focus:ring-0 border border-surface-5 dark:border-elevated-1 focus:border-primary-1 block w-full mt-1" id="name" type="text" name="name" required="required" autofocus="autofocus"> </div> <!-- Email Address --> <div class="mt-4"> <label class="block text-sm text-elevated-3 font-semibold dark:text-surface-4 cursor-pointer" for="email"> Email </label> <input class="flex-1 block w-full min-w-0 text-elevated-3 dark:text-surface-4 bg-surface-3 dark:bg-elevated-4 px-4 py-3 rounded-xl mt-1 dark:bg-elevated-3 focus:ring-0 border border-surface-5 dark:border-elevated-1 focus:border-primary-1 block w-full mt-1" id="email" type="email" name="email" required="required"> </div> <!-- Password --> <div class="mt-4"> <label class="block text-sm text-elevated-3 font-semibold dark:text-surface-4 cursor-pointer" for="password"> Password </label> <input class="flex-1 block w-full min-w-0 text-elevated-3 dark:text-surface-4 bg-surface-3 dark:bg-elevated-4 px-4 py-3 rounded-xl mt-1 dark:bg-elevated-3 focus:ring-0 border border-surface-5 dark:border-elevated-1 focus:border-primary-1 block w-full mt-1" id="password" type="password" name="password" required="required" autocomplete="new-password"> </div> <!-- Confirm Password --> <div class="mt-4"> <label class="block text-sm text-elevated-3 font-semibold dark:text-surface-4 cursor-pointer" for="password_confirmation"> Confirm Password </label> <input class="flex-1 block w-full min-w-0 text-elevated-3 dark:text-surface-4 bg-surface-3 dark:bg-elevated-4 px-4 py-3 rounded-xl mt-1 dark:bg-elevated-3 focus:ring-0 border border-surface-5 dark:border-elevated-1 focus:border-primary-1 block w-full mt-1" id="password_confirmation" type="password" name="password_confirmation" required="required"> </div> <div class="flex items-center justify-end mt-4"> <a class="text-sm text-elevated-1 underline hover:text-gray-900 dark:text-surface-5 dark:hover:text-surface-3" href="https://quizgecko.com/login"> Already registered? </a> <button class="px-4 py-2.5 text-md rounded-xl w-auto bg-primary-1 border-primary-0 hover:bg-primary-3 active:bg-primary-0 focus:shadow-outline-indigo text-surface-0 disabled:bg-surface-4 disabled:text-surface-0 disabled:bg-surface-6 disabled:border-elevated-0 inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 items-center ml-4" type="submit" type="button"> Verify email → </button> </div> </form> <div class="mt-12 text-center max-w-sm mx-auto"> <p class="text-sm text-surface-6 "> By continuing, you agree to Quizgecko's <a class="underline" target="_blank" href="https://quizgecko.com/terms">Terms of Service</a> and <a href="https://quizgecko.com/privacy-policy" class="underline" target="_blank" rel="noopener noreferrer">Privacy Policy</a>. </p> </div> </div> <div class="p-8 bg-surface-2 dark:bg-elevated-4"> <div class="mx-auto max-w-sm px-2 mt-4"> <p class="font-semibold text-elevated-1 text-lg text-center dark:text-surface-5"> Trusted by top students and educators worldwide </p> </div> <div class="mb-5 -mt-6"> <div class="mx-auto max-w-7xl px-6 lg:px-8 mt-8"> <div class="grid grid-cols-2 gap-8 lg:grid-cols-5"> <div class="flex justify-center items-center col-span-1"> <img class="block dark:hidden max-h-16 w-auto object-contain" src="https://quizgecko.com/images/logos/universities/stanford-light.png" alt="Stanford" width="158" height="48"> <img class="hidden dark:block max-h-16 w-auto object-contain opacity-80" src="https://quizgecko.com/images/logos/universities/stanford-dark.png" alt="Stanford" width="158" height="48"> </div> <div class="flex justify-center items-center col-span-1"> <img class="block dark:hidden max-h-10 w-auto object-contain opacity-80" src="https://quizgecko.com/images/logos/universities/princeton-light.png" alt="Princeton" width="158" height="48"> <img class="hidden dark:block max-h-10 w-auto object-contain opacity-80" src="https://quizgecko.com/images/logos/universities/princeton-dark.png" alt="Princeton" width="158" height="48"> </div> <div class="flex justify-center items-center col-span-1"> <img class="block dark:hidden max-h-10 w-auto object-contain opacity-80" src="https://quizgecko.com/images/logos/universities/yale-light.png" alt="Yale" width="158" height="48"> <img class="hidden dark:block max-h-10 w-auto object-contain opacity-80" src="https://quizgecko.com/images/logos/universities/yale-dark.png" alt="Yale" width="158" height="48"> </div> <div class="flex justify-center items-center col-span-1"> <img class="block dark:hidden max-h-12 w-auto object-contain opacity-80" src="https://quizgecko.com/images/logos/universities/berkeley-light.png" alt="Berkeley" width="158" height="48"> <img class="hidden dark:block max-h-12 w-auto object-contain opacity-80" src="https://quizgecko.com/images/logos/universities/berkeley-dark.png" alt="Berkeley" width="158" height="48"> </div> <div class="flex justify-center items-center col-span-2 lg:col-span-1"> <img class="block dark:hidden max-h-14 w-auto object-contain opacity-80" src="https://quizgecko.com/images/logos/universities/oxford-light.png" alt="Oxford" width="158" height="48"> <img class="hidden dark:block max-h-14 w-auto object-contain opacity-80" src="https://quizgecko.com/images/logos/universities/oxford-dark.png" alt="Oxford" width="158" height="48"> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div id="modal-confirm" x-data="{ show: false, focusables() { // All focusable element types... let selector = 'a, button, input:not([type=\'hidden\']), textarea, select, details, [tabindex]:not([tabindex=\'-1\'])' return [...$el.querySelectorAll(selector)] // All non-disabled elements... .filter(el => !el.hasAttribute('disabled')) }, firstFocusable() { return this.focusables()[0] }, lastFocusable() { return this.focusables().slice(-1)[0] }, nextFocusable() { return this.focusables()[this.nextFocusableIndex()] || this.firstFocusable() }, prevFocusable() { return this.focusables()[this.prevFocusableIndex()] || this.lastFocusable() }, nextFocusableIndex() { return (this.focusables().indexOf(document.activeElement) + 1) % (this.focusables().length + 1) }, prevFocusableIndex() { return Math.max(0, this.focusables().indexOf(document.activeElement)) - 1 }, closeModal() { window.dispatchEvent(new CustomEvent('close-modal', { detail: 'confirm' })); this.show = false; } }" x-init="$watch('show', value => { if (value) { document.body.classList.add('overflow-y-hidden'); } else { document.body.classList.remove('overflow-y-hidden'); } })" x-on:open-modal.window="$event.detail == 'confirm' ? show = true : null" x-on:close.stop="closeModal()" x-on:close-modal.window="$event.detail == 'confirm' ? show = false : null" x-on:keydown.escape.window="closeModal()" x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()" x-on:keydown.shift.tab.prevent="prevFocusable().focus()" x-show="show" class="relative z-30" aria-labelledby="modal-title" role="dialog" aria-modal="true" style="display: none;"> <div x-show="show" class="fixed inset-0 transform transition-all" x-on:click="closeModal()" x-transition:enter="ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"> <div class="absolute inset-0 bg-elevated-0 dark:bg-elevated-4 opacity-80"></div> </div> <div x-show="show" class="fixed inset-0 z-40 overflow-y-auto"> <div class="flex min-h-full items-center justify-center sm:p-0"> <div @click.stop x-on:click.outside=closeModal() class="relative transform overflow-hidden bg-surface-0 dark:bg-elevated-3 text-left shadow-xl dark:shadow-none dark:border dark:border-elevated-3 transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:rounded-xl w-full h-full sm:h-auto min-h-screen sm:min-h-0"> <div class="absolute right-0 top-0 pr-3 pt-3 block"> <button class="px-4 py-2.5 text-md rounded-xl w-auto border-transparent text-primary-1 dark:text-surface-4 hover:text-primary-1 dark:hover:text-surface-5 disabled:text-surface-6 hover:bg-primary-6 disabled:hover:bg-transparent focus:border-primary-6 focus:border-primary-6 active:bg-primary-6 dark:hover:bg-primary-1 dark:hover:text-surface-1 disabled:dark:hover:bg-transparent inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 items-center" type="button" x-on:click="closeModal()" color="tertiary" type="button"> <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg> </button> </div> <div> <div class="p-8" x-data> <h3 class="text-lg font-semibold text-elevated-3 pb-2" x-text="$store.confirmModal.title"></h3> <p class="mt-3 text-elevated-1 dark:text-surface-5" x-html="$store.confirmModal.message"></p> <div class="mt-6 flex justify-end space-x-3"> <template x-if="$store.confirmModal.showCancel"> <button class="px-4 py-2.5 text-md rounded-xl w-auto border-2 bg-surface-1 dark:bg-elevated-3 border-surface-5 dark:border-elevated-1 hover:border-primary-1 dark:hover:border-primary-1 active:bg-surface-3 dark:active:bg-elevated-2 focus:border-primary-0 focus:shadow-outline-gray dark:focus:shadow-outline-gray text-primary-1 dark:text-surface-4 hover:text-primary-1 dark:hover:text-surface-5 dark:disabled:elevated-3 disabled:text-surface-6 dark:disabled:border-elevated-1 disabled:hover:border-surface-5 disabled:active:bg-surface-1 dark:disabled:active:bg-elevated-2 inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 items-center" color="secondary" @click="$store.confirmModal.onCancel()" type="button"> Cancel </button> </template> <button class="px-4 py-2.5 text-md rounded-xl w-auto bg-primary-1 border-primary-0 hover:bg-primary-3 active:bg-primary-0 focus:shadow-outline-indigo text-surface-0 disabled:bg-surface-4 disabled:text-surface-0 disabled:bg-surface-6 disabled:border-elevated-0 inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 items-center" @click="$store.confirmModal.onOk()" type="button"> OK </button> </div> </div> </div> </div> </div> </div> </div> <script> document.addEventListener('alpine:init', () => { Alpine.store('confirmModal', { open: false, title: '', message: '', showCancel: true, onOk: () => {}, onCancel: () => {}, show(title, message, showCancel = true) { window.dispatchEvent(new CustomEvent('open-modal', { detail: 'confirm' })); this.title = title; this.message = message; this.showCancel = showCancel; this.open = true; }, hide() { window.dispatchEvent(new CustomEvent('close-modal', { detail: 'confirm' })); this.open = false; } }); }); window.confirmModal = (title, message, showCancel = true) => { return new Promise((resolve) => { const confirmModal = Alpine.store('confirmModal'); confirmModal.show(title, message, showCancel); confirmModal.onOk = () => { confirmModal.hide(); resolve(true); }; confirmModal.onCancel = () => { confirmModal.hide(); resolve(false); }; }); }; </script> <div x-data="{ notifications: [], add(e) { if (!e.detail.type) { e.detail.type = 'success' } this.notifications.push({ id: e.timeStamp, type: e.detail.type, content: e.detail.content, title: e.detail.title, linkText: e.detail.linkText, linkUrl: e.detail.linkUrl, }) }, remove(notification) { this.notifications = this.notifications.filter(i => i.id !== notification.id) }, }" @notify.window="add($event)" class="fixed top-2 right-0 z-50" role="status" aria-live="polite"> <!-- Show container only when there are notifications --> <div x-show="notifications.length > 0" x-transition class="flex w-full min-w-[300px] max-w-xs xl:max-w-sm flex-col space-y-4 pr-4 pb-4 sm:justify-start"> <!-- Notification --> <template x-for="notification in notifications" :key="notification.id"> <div x-data="{ show: false, init() { this.$nextTick(() => this.show = true) setTimeout(() => this.transitionOut(), 6500) }, transitionOut() { this.show = false setTimeout(() => this.remove(this.notification), 400) }, }" x-show="show" x-transition.duration.300ms class="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-surface-0 dark:bg-elevated-4 shadow-lg ring-1 ring-surface-4 dark:ring-elevated-4 ring-opacity-5 p-4"> <div class="flex items-start"> <!-- Icons --> <div x-show="notification.type === 'info'" class="flex-shrink-0"> <svg class="w-6 h-6 text-surface-6 dark:text-elevated-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm-4,48a12,12,0,1,1-12,12A12,12,0,0,1,124,72Zm12,112a16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40a8,8,0,0,1,0,16Z"/></svg> <span class="sr-only"> Information: </span> </div> <div x-show="notification.type === 'success'" class="flex-shrink-0"> <svg class="w-6 h-6 text-green-400 dark:text-success-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"/></svg> <span class="sr-only"> Success: </span> </div> <div x-show="notification.type === 'error'" class="flex-shrink-0"> <svg class="w-6 h-6 text-red-400 dark:text-error-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm-8-80V80a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,172Z"/></svg> <span class="sr-only"> Error: </span> </div> <!-- Text --> <div class="ml-3 w-0 flex-1 pt-0.5"> <p x-text="notification.title" x-show="notification.title" class="text-sm font-semibold text-elevated-3 dark:text-surface-4 mb-1"></p> <p x-text="notification.content" class="text-sm text-elevated-2 dark:text-surface-5"></p> <div class="mt-2 flex" x-show="notification.linkText"> <a class="px-3 py-2 text-sm rounded-xl w-auto bg-primary-1 border-primary-0 hover:bg-primary-3 active:bg-primary-0 focus:shadow-outline-indigo text-surface-0 disabled:bg-surface-4 disabled:text-surface-0 disabled:bg-surface-6 disabled:border-elevated-0 inline-flex justify-center font-semibold border-b-4 disabled:cursor-not-allowed cursor-pointer disabled:shadow-none mt-1 focus:shadow-outline-gray focus:ring-2 focus:ring-offset-2 focus:ring-primary-1 items-center" type="link" target="_blank" x-text="notification.linkText" size="sm" x-bind:href="notification.linkUrl"> </a> </div> </div> <!-- Remove button --> <div class="ml-4 flex flex-shrink-0"> <button @click="transitionOut()" type="button" class="inline-flex text-surface-6 dark:text-elevated-0"> <svg aria-hidden class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg> <span class="sr-only">Close notification</span> </button> </div> </div> </div> </template> </div> </div> <footer aria-labelledby="footer-heading"> <p id="footer-heading" class="sr-only">Footer</p> <div class="mx-auto max-w-7xl px-6 pb-8 pt-16 sm:pt-24 lg:px-8 lg:pt-28"> <div class="xl:grid xl:grid-cols-3 xl:gap-10"> <div class="mt-10 xl:mt-0"> <img class="w-8 rounded-md" src="https://quizgecko.com/images/icon-small.png" alt=""> <div class="mt-4 border-elevated-4/10 pt-4 md:flex md:items-center md:justify-between"> <div class="flex space-x-6 md:order-2"> <a href="https://discord.gg/HsRXwQ3S7Z" target="_blank" class="text-surface-6 hover:text-gray-500"> <span class="sr-only">Discord</span> <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M247.51,174.39,218,58a16.08,16.08,0,0,0-13-11.88l-36.06-5.92a16.22,16.22,0,0,0-18.26,11.88l-.21.85a4,4,0,0,0,3.27,4.93,155.62,155.62,0,0,1,24.41,5.62,8.2,8.2,0,0,1,5.62,9.7,8,8,0,0,1-10.19,5.64,155.4,155.4,0,0,0-90.8-.1,8.22,8.22,0,0,1-10.28-4.81,8,8,0,0,1,5.08-10.33,156.85,156.85,0,0,1,24.72-5.72,4,4,0,0,0,3.27-4.93l-.21-.85A16.21,16.21,0,0,0,87.08,40.21L51,46.13A16.08,16.08,0,0,0,38,58L8.49,174.39a15.94,15.94,0,0,0,9.06,18.51l67,29.71a16.17,16.17,0,0,0,21.71-9.1l3.49-9.45a4,4,0,0,0-3.27-5.35,158.13,158.13,0,0,1-28.63-6.2,8.2,8.2,0,0,1-5.61-9.67,8,8,0,0,1,10.2-5.66,155.59,155.59,0,0,0,91.12,0,8,8,0,0,1,10.19,5.65,8.19,8.19,0,0,1-5.61,9.68,157.84,157.84,0,0,1-28.62,6.2,4,4,0,0,0-3.27,5.35l3.49,9.45a16.18,16.18,0,0,0,21.71,9.1l67-29.71A15.94,15.94,0,0,0,247.51,174.39ZM92,152a12,12,0,1,1,12-12A12,12,0,0,1,92,152Zm72,0a12,12,0,1,1,12-12A12,12,0,0,1,164,152Z"/></svg> </a> <a href="https://www.tiktok.com/@quizgecko" class="text-surface-6 hover:text-elevated-0"> <span class="sr-only">Tiktok</span> <svg class="w-6 h-6" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"> <path d="M448,209.91a210.06,210.06,0,0,1-122.77-39.25V349.38A162.55,162.55,0,1,1,185,188.31V278.2a74.62,74.62,0,1,0,52.23,71.18V0l88,0a121.18,121.18,0,0,0,1.86,22.17h0A122.18,122.18,0,0,0,381,102.39a121.43,121.43,0,0,0,67,20.14Z"> </path> </svg> </a> <a href="https://instagram.com/quizgecko" class="text-surface-6 hover:text-elevated-0"> <span class="sr-only">Instagram</span> <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"> <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd" /> </svg> </a> <a href="https://twitter.com/Quizgecko" class="text-surface-6 hover:text-elevated-0"> <span class="sr-only">X</span> <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"> <path d="M13.6823 10.6218L20.2391 3H18.6854L12.9921 9.61788L8.44486 3H3.2002L10.0765 13.0074L3.2002 21H4.75404L10.7663 14.0113L15.5685 21H20.8131L13.6819 10.6218H13.6823ZM11.5541 13.0956L10.8574 12.0991L5.31391 4.16971H7.70053L12.1742 10.5689L12.8709 11.5655L18.6861 19.8835H16.2995L11.5541 13.096V13.0956Z" /> </svg> </a> <a href="https://www.facebook.com/profile.php?id=61550782041398" class="text-surface-6 hover:text-elevated-0"> <span class="sr-only">Facebook</span> <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"> <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" /> </svg> </a> <a target="_blank" href="mailto:hello@quizgecko.com" class="text-surface-6 cursor-pointer hover:text-elevated-2 mr-2 rtl:ml-2"> <span class="sr-only">Email</span> <svg class="inline-block w-6 h-7 text-surface-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M224,48H32a8,8,0,0,0-8,8V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A8,8,0,0,0,224,48Zm-96,85.15L52.57,64H203.43ZM98.71,128,40,181.81V74.19Zm11.84,10.85,12,11.05a8,8,0,0,0,10.82,0l12-11.05,58,53.15H52.57ZM157.29,128,216,74.18V181.82Z"/></svg> </a> <a target="_blank" href="https://chrome.google.com/webstore/detail/quizgecko/jipdeflholipfmimeegaphokjfhkbbpl" class="text-surface-6 cursor-pointer hover:text-elevated-2 mr-2 rtl:ml-2"> <span class="sr-only">Chrome</span> <svg class="w-6 h-6 text-surface-6" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <circle cx="12" cy="12" r="4"></circle> <line x1="21.17" y1="8" x2="12" y2="8"> </line> <line x1="3.95" y1="6.06" x2="8.54" y2="14"> </line> <line x1="10.88" y1="21.94" x2="15.46" y2="14"> </line> </svg> </a> </div> </div> <div class="flex gap-3 mt-6 -ml-1"> <a href="https://apple.co/4a1UzYI" title="" class="inline-flex items-center justify-center w-full text-left text-surface-0 bg-elevated-4 dark:bg-elevated-2 hover:bg-elevated-1 rounded-lg focus:outline-none focus:ring-4 focus:ring-gray-300 px-2 py-1.5 sm:w-auto" role="button"> <svg aria-hidden="true" class="h-8 w-8 sm:w-10 sm:h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> <path d="M19.665 16.811a10.316 10.316 0 0 1-1.021 1.837c-.537.767-.978 1.297-1.316 1.592-.525.482-1.089.73-1.692.744-.432 0-.954-.123-1.562-.373-.61-.249-1.17-.371-1.683-.371-.537 0-1.113.122-1.73.371-.616.25-1.114.381-1.495.393-.577.025-1.154-.229-1.729-.764-.367-.32-.826-.87-1.377-1.648-.59-.829-1.075-1.794-1.455-2.891-.407-1.187-.611-2.335-.611-3.447 0-1.273.275-2.372.826-3.292a4.857 4.857 0 0 1 1.73-1.751 4.65 4.65 0 0 1 2.34-.662c.46 0 1.063.142 1.81.422s1.227.422 1.436.422c.158 0 .689-.167 1.593-.498.853-.307 1.573-.434 2.163-.384 1.6.129 2.801.759 3.6 1.895-1.43.867-2.137 2.08-2.123 3.637.012 1.213.453 2.222 1.317 3.023a4.33 4.33 0 0 0 1.315.863c-.106.307-.218.6-.336.882zM15.998 2.38c0 .95-.348 1.838-1.039 2.659-.836.976-1.846 1.541-2.941 1.452a2.955 2.955 0 0 1-.021-.36c0-.913.396-1.889 1.103-2.688.352-.404.8-.741 1.343-1.009.542-.264 1.054-.41 1.536-.435.013.128.019.255.019.381z"> </path> </svg> <div class="ml-2.5"> <span class="block text-xs font-normal leading-none"> Download on the </span> <span class="block text-sm font-bold leading-tight"> App Store </span> </div> </a> <a href="https://bit.ly/quizgecko-android" title="" class="inline-flex items-center justify-center w-full text-left text-surface-0 bg-elevated-4 dark:bg-elevated-2 hover:bg-elevated-1 rounded-lg focus:outline-none focus:ring-4 focus:ring-gray-300 px-2 py-1.5 sm:w-auto" role="button"> <svg aria-hidden="true" class="h-8 w-8 sm:w-10 sm:h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> <path d="m12.954 11.616 2.957-2.957L6.36 3.291c-.633-.342-1.226-.39-1.746-.016l8.34 8.341zm3.461 3.462 3.074-1.729c.6-.336.929-.812.929-1.34 0-.527-.329-1.004-.928-1.34l-2.783-1.563-3.133 3.132 2.841 2.84zM4.1 4.002c-.064.197-.1.417-.1.658v14.705c0 .381.084.709.236.97l8.097-8.098L4.1 4.002zm8.854 8.855L4.902 20.91c.154.059.32.09.495.09.312 0 .637-.092.968-.276l9.255-5.197-2.666-2.67z"> </path> </svg> <div class="ml-2.5"> <span class="block text-xxs font-normal leading-none"> Download on </span> <span class="block text-sm font-bold leading-tight"> Google Play </span> </div> </a> </div> </div> <div class="mt-16 grid grid-cols-2 xl:col-span-2 xl:mt-0"> <div class="md:grid md:grid-cols-2 md:gap-8"> <div> <p class="text-sm font-semibold leading-6 text-elevated-2 dark:text-surface-5"> Solutions </p> <ul role="list" class="mt-4 space-y-2"> <li> <a href="https://quizgecko.com/plans?offer=teacher" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6 dark:hover:text-surface-4">Schools</a> </li> <li> <a href="https://quizgecko.com/for/business" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6 dark:hover:text-surface-4">Business</a> </li> <li> <a href="https://quizgecko.com/plans?offer=student" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6 dark:hover:text-surface-4">Students</a> </li> <li> <a href="https://quizgecko.com/for/parents" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6 dark:hover:text-surface-4">Parents</a> </li> <li> <a href="https://quizgecko.com/for/tutors" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6 dark:hover:text-surface-4">Tutors</a> </li> <li> <a href="https://quizgecko.com/for/homeschooling" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6 dark:hover:text-surface-4">Homeschooling</a> </li> </ul> </div> <div class="mt-10 md:mt-0"> <p class="text-sm font-semibold leading-6 text-elevated-2 dark:text-surface-5"> Account </p> <ul role="list" class="mt-4 space-y-2"> <li> <a href="https://quizgecko.com/library" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6 dark:hover:text-surface-4">My Library</a> </li> <li> <a href="https://quizgecko.com/profile" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6 dark:hover:text-surface-4">My Profile</a> </li> <li> <a href="https://quizgecko.com/billing" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6 dark:hover:text-surface-4">Billing</a> </li> <li> <a href="https://quizgecko.com/features" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6 dark:hover:text-surface-4">Features</a> </li> </ul> </div> </div> <div class="md:grid md:grid-cols-2 md:gap-8"> <div> <p class="text-sm font-semibold leading-6 text-elevated-2 dark:text-surface-5"> Resources </p> <ul role="list" class="mt-4 space-y-2"> <li> <a href="https://quizgecko.com/blog" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6 dark:hover:text-surface-4">Blog</a> </li> <li> <a href="/api" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6 dark:hover:text-surface-4">API</a> </li> <li> <a href="https://help.quizgecko.com" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6 dark:hover:text-surface-4">Help Center</a> </li> <li> <a href="https://quizgecko.com/discover" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6 dark:hover:text-surface-4">Browse Lessons</a> </li> </ul> </div> <div class="mt-10 md:mt-0"> <p class="text-sm font-semibold leading-6 text-elevated-2 dark:text-surface-5"> Policies </p> <ul role="list" class="mt-4 space-y-2"> <li> <a href="https://quizgecko.com/terms" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6 dark:hover:text-surface-4">Terms</a> </li> <li> <a href="https://quizgecko.com/privacy-policy" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6 dark:hover:text-surface-4">Privacy</a> </li> <li> <a href="https://quizgecko.com/copyright" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6 dark:hover:text-surface-4">Copyright</a> </li> <li> <a href="https://quizgecko.com/legal" class="text-sm leading-6 text-elevated-1 hover:text-elevated-0 dark:text-surface-6 dark:hover:text-surface-4">More...</a> </li> </ul> </div> </div> </div> </div> </div> <div class="mt-8 border-t border-elevated-4/10 pt-4 md:flex md:items-center md:justify-between"> <div class="text-center mx-auto max-w-xl mt-4 mb-8 text-elevated-0 dark:text-surface-6 text-sm "> <p class="mb-2 text-gray-900 dark:text-surface-5">Change Language</p> <div class="flex-wrap justify-center pt-8 sm:justify-start sm:pt-0 "> <span class="ml-2 mr-2 text-elevated-2 dark:text-surface-5">English</span> <a class="underline ml-2 mr-2 text-elevated-2 dark:text-surface-5" href="https://quizgecko.com/locale/fr">French</a> <a class="underline ml-2 mr-2 text-elevated-2 dark:text-surface-5" href="https://quizgecko.com/locale/de">German</a> <a class="underline ml-2 mr-2 text-elevated-2 dark:text-surface-5" href="https://quizgecko.com/locale/es">Spanish</a> <a class="underline ml-2 mr-2 text-elevated-2 dark:text-surface-5" href="https://quizgecko.com/locale/pt">Portuguese</a> <a class="underline ml-2 mr-2 text-elevated-2 dark:text-surface-5" href="https://quizgecko.com/locale/hi">Hindi</a> <a class="underline ml-2 mr-2 text-elevated-2 dark:text-surface-5" href="https://quizgecko.com/locale/ko">Korean</a> <a class="underline ml-2 mr-2 text-elevated-2 dark:text-surface-5" href="https://quizgecko.com/locale/zh">Chinese</a> </div> </div> </div> </footer> </div> </body> </html> <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9179bb152df6d68c',t:'MTc0MDUwNzg1MS4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script><script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="e411d1201f054e8d745535a2-|49" defer></script>