Gunakan API Pengertian untuk membuat kuiz dengan JavaScript

JavaScript Online Quiz: Dari Pangkalan Data Pengertian ke Laman Web Interaktif

Artikel ini akan membimbing anda bagaimana untuk membina kuiz dalam talian JavaScript interaktif menggunakan API Pengertian. Walaupun tanggapan tidak direka khusus untuk membuat kuiz, kita boleh mencapai ini dengan bijak menggunakan pangkalan data tabularnya dan menggabungkan teknologi seperti JavaScript, Node.js, dan Express.

mata teras:

Aplikasi fleksibel pangkalan data jadual tanggapan untuk pembinaan kuiz JavaScript.
Membina persekitaran JavaScript dan Node.js, dan gunakan Express dan Dotenv untuk Pengurusan Pelayan dan Perlindungan Pembolehubah Alam Sekitar.
Gunakan token integrasi dalaman tanggapan untuk pengesahan selamat untuk memastikan keselamatan interaksi API.
Ambil data kuiz dari tanggapan melalui pertanyaan berstruktur dan tukar ke format yang tersedia untuk aplikasi JavaScript.
Soalan dan jawapan kuiz secara dinamik, dan berikan interaksi pengguna dan maklum balas visual (jawapan yang betul menunjukkan hijau, jawapan yang salah menunjukkan merah).
Gunakan fleksibiliti API tanggapan untuk menyesuaikan dan mengautomasikan tetapan kuiz untuk menjadikannya penyelesaian berskala.

Tetapan Projek:

Kami membahagikan tetapan projek ke dalam dua bahagian: tanggapan dan kod. Anda memerlukan akaun tanggapan dan memasang persekitaran Node.js. Kod lengkap boleh didapati di GitHub (pautan ditinggalkan).

Tetapan terminal tanggapan:

Buat akaun dan log masuk.
Buat halaman baru, pilih "Tambah Halaman" dan namakannya.
Pilih pangkalan data jadual sebagai jenis halaman.
Struktur pangkalan data reka bentuk:
4. • Soalan: Jenis tajuk
   • Jawapan: pelbagai jenis pilihan (digunakan untuk menyimpan pelbagai pilihan jawapan)
   • Jawapan yang betul (betul): Jenis teks

Masukkan soalan ujian, pilihan jawapan dan jawapan yang betul dalam borang.
Buat Integrasi API Pengertian: Lawati laman web API Pengertian, klik "Integrasi Saya", dan kemudian klik "Buat Integrasi Baru". Isi tajuk, pilih ruang kerja yang berkaitan, dan salin token integrasi dalaman anda selepas penyerahan.
Tambahkan integrasi yang baru dibuat ke pangkalan data tanggapan anda: Klik "Kongsi" dalam pangkalan data, kemudian "Jemput", pilih integrasi yang anda buat dan jemput.

Tetapan sampingan kod:

Gunakan repositori templat tanggapan pra-siap (pautan yang ditinggalkan) yang mengandungi kod awal untuk berinteraksi dengan API tanggapan.

1. klon repositori templat.
2. Ketergantungan pemasangan: Run npm install atau yarn install. Ketergantungan termasuk @notionhq/client, dotenv dan Express.
3. Buat .env fail dan tambahkan kunci API dan ID pangkalan data anda:

<code>NOTION_API_KEY = YOUR_TOKEN_HERE
NOTION_API_DATABASE = YOUR_DATABASE_ID_HERE</code>

(nota: Tambah fail .env ke .gitignore untuk mengelakkannya daripada dikemukakan ke repositori kod.)

4. Run npm start atau yarn start untuk memulakan pelayan.

Dapatkan data ujian:

Fungsi

.index.js dalam fail getDatabase bertanggungjawab untuk mendapatkan data dari pangkalan data tanggapan:

<code class="language-javascript">exports.getDatabase = async function () {
  const response = await notion.databases.query({ database_id: databaseId });
  // ... (映射数据库条目到JavaScript对象) ...
};</code>

Fungsi ini menggunakan pertanyaan berstruktur untuk mendapatkan data dari API tanggapan dan memetakannya kepada pelbagai objek JavaScript yang mengandungi soalan, jawapan, dan jawapan yang betul.

Tunjukkan data dalam penyemak imbas:

secara dinamik membuat elemen HTML menggunakan JavaScript untuk membuat soalan dan jawapan kuiz. Gaya CSS digunakan untuk mencantikkan antara muka. Coretan Kod Utama (kod operasi DOM terperinci ditinggalkan, sila rujuk teks asal):

• createQuestion Fungsi: Buat dan tunjukkan soalan.
• createAnswers Fungsi: Buat dan panggil pilihan jawapan dan tambahkan pendengar acara klik. Klik pendengar acara mengubah warna latar belakang pilihan jawapan (betul hijau dan salah merah) berdasarkan sama ada jawapan yang dipilih oleh pengguna adalah betul.

Interaksi Pengguna:

Dayakan interaksi pengguna dan maklum balas dengan menambah pendengar acara klik untuk setiap pilihan jawapan.

Ringkasan:

Artikel ini menunjukkan cara menggunakan API tanggapan untuk membina kuiz dalam talian JavaScript penuh. Dengan bijak memohon pangkalan data Jadual Pencegahan dan pengaturcaraan JavaScript, kita boleh dengan mudah membuat alat pembelajaran interaktif tersuai. Untuk kod lengkap dan langkah yang lebih terperinci, sila rujuk repositori GitHub yang disediakan dalam teks asal.

Atas ialah kandungan terperinci Gunakan API Pengertian untuk membuat kuiz dengan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!