Cara Membuat Kuiz JavaScript Mudah: Tutorial Kod

kuiz adalah menyeronokkan! Mereka adalah cara yang baik untuk belajar tentang subjek baru, dan mereka membolehkan anda melibatkan penonton anda dengan sesuatu yang menyeronokkan dan suka bermain. Dari perspektif pemaju, "Bagaimana saya membuat kuiz JavaScript?" adalah salah satu soalan yang paling biasa yang ditanya oleh orang yang belajar pembangunan web, dan untuk alasan yang baik.

Pengekodan permainan kuiz JavaScript anda sendiri adalah latihan pembelajaran yang hebat. Ia mengajar anda bagaimana menangani acara, memanipulasi DOM, mengendalikan input pengguna, dan menggunakan storan tempatan untuk mengesan skor mereka. Apabila anda mempunyai kuiz asas dan berjalan, terdapat banyak kemungkinan untuk menambah fungsi yang lebih maju, seperti penomboran.

Dalam tutorial ini, saya akan membimbing anda melalui cara membuat kuiz di JavaScript bahawa anda akan dapat menyesuaikan diri dengan keperluan anda dan menambah ke laman web anda sendiri. Jika anda ingin melihat apa yang akan kami tamat, anda boleh melangkaui dan melihat kod kuiz JavaScript yang berfungsi.

Untuk pengetahuan dan cabaran JavaScript yang lebih mendalam, dapatkan buku percuma kami: belajar kod dengan JavaScript.

perkara yang perlu diperhatikan sebelum memulakan

Berikut adalah beberapa perkara yang perlu diketahui sebelum memulakan:

Ini adalah tutorial front-end, yang bermaksud sesiapa yang tahu bagaimana untuk melihat melalui kod sumber halaman dapat mencari jawapannya. Untuk kuiz yang serius, data perlu dikendalikan melalui hujung belakang, yang berada di luar skop tutorial ini.
Kod dalam artikel ini menggunakan sintaks JavaScript moden (ES6), yang bermaksud ia tidak akan serasi dengan mana -mana versi Internet Explorer. Walau bagaimanapun, ia akan berfungsi dengan baik pada pelayar moden, termasuk Microsoft Edge.
Jika anda perlu menyokong penyemak imbas yang lebih tua, saya telah menulis tutorial kuiz JavaScript yang serasi dengan IE8. Atau, jika anda ingin penyegaran pada ES6, periksa kursus ini oleh Darin Haener di SitePoint Premium.
Anda memerlukan kebiasaan dengan HTML, CSS, dan JavaScript, tetapi setiap baris kod akan dijelaskan secara individu.

Langkah 1 - Struktur asas kuiz JavaScript anda

Sebaik -baiknya, kami mahu soalan dan jawapan kuiz berada dalam kod JavaScript kami dan mempunyai skrip kami secara automatik menjana aplikasi kuiz. Dengan cara itu, kita tidak perlu menulis banyak markup berulang, dan kita boleh menambah dan mengeluarkan soalan dengan mudah. ​​

Dalam contoh ini, kami akan menstrukturkan projek kami menggunakan tiga fail utama:

fail HTML untuk antara muka pengguna asas (UI).
fail CSS untuk gaya.
fail JavaScript untuk mengendalikan semua fungsi interaktif.
Walau bagaimanapun, jika anda lebih suka, anda juga boleh memasukkan kod CSS dan JavaScript secara langsung dalam fail HTML sebagai kod sebaris.

Apabila belajar bagaimana membuat kuiz di HTML dan JavaScript, penting untuk memahami bagaimana struktur HTML berinteraksi dengan logik JavaScript. Jadi, sebagai langkah pertama, mari kita buat struktur HTML permainan kuiz JavaScript kami.

• A
  untuk memegang kuiz.
• a untuk menghantar jawapan.
• A
  untuk memaparkan hasilnya.

  inilah cara yang akan kelihatan:

  <span><span><span><div> id<span>="quiz"</span>><span><span></span></span>
  </div></span>></span>
  </span><span><span><span><button> id<span>="submit"</span>></button></span>Submit Quiz<span><span></span>></span>
  </span><span><span><span><div> id<span>="results"</span>><span><span></span></span>
  </div></span>></span></span></span>

  Struktur ini adalah contoh mudah bagaimana membuat kod HTML kuiz yang berfungsi sebagai asas untuk templat kuiz JavaScript anda. Jika anda menjalankan permohonan sekarang, anda hanya akan melihat butang "Kirim Kuiz".

  Langkah 2 - Inisialisasi pembolehubah JavaScript

  Sekarang, kita boleh menggunakan javascript document.getElementById kaedah untuk memilih unsur -unsur HTML di atas dan menyimpan rujukan kepada mereka dalam kod kuiz JavaScript seperti di bawah:

  <span>const quizContainer = document.getElementById('quiz');
  </span><span>const resultsContainer = document.getElementById('results');
  </span><span>const submitButton = document.getElementById('submit');</span>

  Perkara seterusnya keperluan aplikasi kuiz kami adalah beberapa soalan untuk dipaparkan. Kami akan menggunakan literasi objek JavaScript untuk mewakili soalan individu dan array untuk memegang semua soalan yang membentuk aplikasi kuiz kami. Menggunakan array akan membuat soalan mudah untuk berulang:

  <span>const myQuestions = [
  </span>  <span>{
  </span>    <span>question: "Who invented JavaScript?",
  </span>    <span>answers: {
  </span>      <span>a: "Douglas Crockford",
  </span>      <span>b: "Sheryl Sandberg",
  </span>      <span>c: "Brendan Eich"
  </span>    <span>},
  </span>    <span>correctAnswer: "c"
  </span>  <span>},
  </span>  <span>{
  </span>    <span>question: "Which one of these is a JavaScript package manager?",
  </span>    <span>answers: {
  </span>      <span>a: "Node.js",
  </span>      <span>b: "TypeScript",
  </span>      <span>c: "npm"
  </span>    <span>},
  </span>    <span>correctAnswer: "c"
  </span>  <span>},
  </span>  <span>{
  </span>    <span>question: "Which tool can you use to ensure code quality?",
  </span>    <span>answers: {
  </span>      <span>a: "Angular",
  </span>      <span>b: "jQuery",
  </span>      <span>c: "RequireJS",
  </span>      <span>d: "ESLint"
  </span>    <span>},
  </span>    <span>correctAnswer: "d"
  </span>  <span>}
  </span><span>];
  </span>

  Jangan ragu untuk memasukkan banyak soalan atau jawapan yang anda mahukan.

  NOTA : Kerana ini adalah array, soalan -soalan akan muncul mengikut urutan yang disenaraikan. Sekiranya anda ingin menyusun soalan -soalan dalam apa jua cara sebelum menyampaikannya kepada pengguna, lihat hujung cepat kami pada menyusun pelbagai objek dalam JavaScript . Langkah 3 - Bina fungsi kuiz

  Sekarang kita mempunyai senarai soalan kami, kami dapat menunjukkannya pada halaman. Untuk itu, kami akan menggunakan fungsi bernama BuildQuix (). Mari kita melalui baris JavaScript berikut mengikut baris untuk melihat bagaimana ia berfungsi:

  Pertama, kami membuat pemboleh ubah output untuk mengandungi semua output HTML, termasuk soalan dan pilihan jawapan.

  <span>function buildQuiz(){
  </span>  <span>// variable to store the HTML output
  </span>  <span>const output = [];
  </span>
    <span>// for each question...
  </span>  myQuestions<span>.forEach(
  </span>    <span>(currentQuestion<span>, questionNumber</span>) => {
  </span>
        <span>// variable to store the list of possible answers
  </span>      <span>const answers = [];
  </span>
        <span>// and for each available answer...
  </span>      <span>for(letter in currentQuestion.answers){
  </span>
          <span>// ...add an HTML radio button
  </span>        answers<span>.push(
  </span>          <span><span>`<label>
  </label></span></span><span><span>            <input type="radio" name="question<span >${questionNumber}</span>" value="<span >${letter}</span>">
  </span></span><span><span>            <span>${letter}</span> :
  </span></span><span><span>            <span>${currentQuestion.answers[letter]}</span>
  </span></span><span><span>          `</span>
  </span>        <span>);
  </span>      <span>}
  </span>
        <span>// add this question and its answers to the output
  </span>      output<span>.push(
  </span>        <span><span>`<div> <span>${currentQuestion.question}</span> </div>
  </span></span><span><span>        <div> <span>${answers.join('')}</span> </div>`</span>
  </span>      <span>);
  </span>    <span>}
  </span>  <span>);
  </span>
    <span>// finally combine our output list into one string of HTML and put it on the page
  </span>  quizContainer<span>.innerHTML = output.join('');
  </span><span>}</span>

  Seterusnya, kita boleh mula membina HTML untuk setiap soalan. Kita perlu gelung melalui setiap soalan seperti ini:

  Untuk keringkasan, kami menggunakan fungsi anak panah untuk melaksanakan operasi kami pada setiap soalan. Kerana ini dalam gelung foreach, kita mendapat nilai semasa, indeks (nombor kedudukan item semasa dalam array), dan array itu sendiri sebagai parameter. Kami hanya memerlukan nilai semasa dan indeks, yang untuk tujuan kami, kami akan menamakan Question dan soal selidik masing -masing.

  myQuestions<span>.forEach( (currentQuestion<span>, questionNumber</span>) => {
  </span>  <span>// the code we want to run for each question goes here
  </span><span>});</span>

  Sekarang mari kita lihat kod di dalam gelung kami:

  Untuk setiap soalan, kami ingin menghasilkan HTML yang betul. Oleh itu, langkah pertama kami adalah untuk membuat array untuk memegang senarai jawapan yang mungkin.

  <span>// we'll want to store the list of answer choices
  </span><span>const answers = [];
  </span>
  <span>// and for each available answer...
  </span><span>for(letter in currentQuestion.answers){
  </span>
    <span>// ...add an html radio button
  </span>  answers<span>.push(
  </span>    <span><span>`<label>
  </label></span></span><span><span>      <input type="radio" name="question<span >${questionNumber}</span>" value="<span >${letter}</span>">
  </span></span><span><span>      <span>${letter}</span> :
  </span></span><span><span>      <span>${currentQuestion.answers[letter]}</span>
  </span></span><span><span>    `</span>
  </span>  <span>);
  </span><span>}
  </span>
  <span>// add this question and its answers to the output
  </span>output<span>.push(
  </span>  <span><span>`<div> <span>${currentQuestion.question}</span> </div>
  </span></span><span><span>  <div> <span>${answers.join('')}</span> </div>`</span>
  </span><span>);
  </span>

  Seterusnya, kami akan menggunakan gelung untuk mengisi jawapan yang mungkin untuk soalan semasa. Untuk setiap pilihan, kami membuat butang radio HTML, yang kami masukkan dalam elemen . Ini memastikan pengguna boleh mengklik di mana sahaja pada teks jawapan untuk memilih jawapan itu. Sekiranya label itu ditinggalkan, maka pengguna perlu mengklik pada butang radio itu sendiri, yang tidak dapat diakses.

  di sini, kami menggunakan literals templat, yang merupakan rentetan tetapi lebih kuat. Kami akan menggunakan ciri -ciri berikut literals template:

  • keupayaan multi-line.
  • tidak perlu menggunakan petikan melarikan diri dalam petikan kerana literasi templat menggunakan backticks.
  • interpolasi rentetan membolehkan ekspresi JavaScript menyemai ke dalam rentetan anda seperti ini: $ {code_goes_here}.

  Sebaik sahaja kami mempunyai senarai butang jawapan kami, kami boleh menolak soalan HTML dan jawapan HTML ke senarai keseluruhan output kami.

  Perhatikan bahawa kami menggunakan templat literal dan beberapa ungkapan tertanam untuk terlebih dahulu membuat soalan Div dan kemudian buat div jawapan. Ekspresi gabungan mengambil senarai jawapan kami dan meletakkannya bersama dalam satu rentetan yang dapat kita hasilkan ke dalam jawapan kami div.

  Sekarang bahawa kami telah menjana HTML untuk setiap soalan, kami boleh menyertainya bersama -sama dan menunjukkannya pada halaman:

  <span><span><span><div> id<span>="quiz"</span>><span><span></span></span>
  </div></span>></span>
  </span><span><span><span><button> id<span>="submit"</span>></button></span>Submit Quiz<span><span></span>></span>
  </span><span><span><span><div> id<span>="results"</span>><span><span></span></span>
  </div></span>></span></span></span>

  Sekarang, fungsi BuildQuiz kami selesai, dan anda harus dapat menjalankan aplikasi kuiz dan melihat soalan yang dipaparkan.

  Walau bagaimanapun, struktur kod anda adalah penting. Oleh kerana sesuatu yang dipanggil Zon Mati Temporal, anda tidak boleh merujuk pelbagai soalan anda sebelum ia ditakrifkan.

  untuk rekap, ini adalah struktur yang betul:

  Langkah 4 - Memaparkan hasil kuiz

  <span>const quizContainer = document.getElementById('quiz');
  </span><span>const resultsContainer = document.getElementById('results');
  </span><span>const submitButton = document.getElementById('submit');</span>

  Pada ketika ini, kami ingin membina fungsi pameran kami untuk gelung atas jawapan, periksa mereka, dan tunjukkan hasilnya. Ini adalah bahagian penting dari mana -mana pelaksanaan JavaScript permainan kuiz, kerana ia memberikan maklum balas segera kepada pengguna berdasarkan prestasi mereka.

  inilah fungsi, yang akan kita lalui secara terperinci seterusnya:

  Pertama, kami memilih semua bekas jawapan dalam HTML kuiz kami. Kemudian, kami akan membuat pembolehubah untuk menjejaki jawapan semasa pengguna dan jumlah jawapan yang betul.

  <span>const myQuestions = [
  </span>  <span>{
  </span>    <span>question: "Who invented JavaScript?",
  </span>    <span>answers: {
  </span>      <span>a: "Douglas Crockford",
  </span>      <span>b: "Sheryl Sandberg",
  </span>      <span>c: "Brendan Eich"
  </span>    <span>},
  </span>    <span>correctAnswer: "c"
  </span>  <span>},
  </span>  <span>{
  </span>    <span>question: "Which one of these is a JavaScript package manager?",
  </span>    <span>answers: {
  </span>      <span>a: "Node.js",
  </span>      <span>b: "TypeScript",
  </span>      <span>c: "npm"
  </span>    <span>},
  </span>    <span>correctAnswer: "c"
  </span>  <span>},
  </span>  <span>{
  </span>    <span>question: "Which tool can you use to ensure code quality?",
  </span>    <span>answers: {
  </span>      <span>a: "Angular",
  </span>      <span>b: "jQuery",
  </span>      <span>c: "RequireJS",
  </span>      <span>d: "ESLint"
  </span>    <span>},
  </span>    <span>correctAnswer: "d"
  </span>  <span>}
  </span><span>];
  </span>

  Sekarang, kita boleh gelung melalui setiap soalan dan periksa jawapannya.

  <span>function buildQuiz(){
  </span>  <span>// variable to store the HTML output
  </span>  <span>const output = [];
  </span>
    <span>// for each question...
  </span>  myQuestions<span>.forEach(
  </span>    <span>(currentQuestion<span>, questionNumber</span>) => {
  </span>
        <span>// variable to store the list of possible answers
  </span>      <span>const answers = [];
  </span>
        <span>// and for each available answer...
  </span>      <span>for(letter in currentQuestion.answers){
  </span>
          <span>// ...add an HTML radio button
  </span>        answers<span>.push(
  </span>          <span><span>`<label>
  </label></span></span><span><span>            <input type="radio" name="question<span >${questionNumber}</span>" value="<span >${letter}</span>">
  </span></span><span><span>            <span>${letter}</span> :
  </span></span><span><span>            <span>${currentQuestion.answers[letter]}</span>
  </span></span><span><span>          `</span>
  </span>        <span>);
  </span>      <span>}
  </span>
        <span>// add this question and its answers to the output
  </span>      output<span>.push(
  </span>        <span><span>`<div> <span>${currentQuestion.question}</span> </div>
  </span></span><span><span>        <div> <span>${answers.join('')}</span> </div>`</span>
  </span>      <span>);
  </span>    <span>}
  </span>  <span>);
  </span>
    <span>// finally combine our output list into one string of HTML and put it on the page
  </span>  quizContainer<span>.innerHTML = output.join('');
  </span><span>}</span>

  kami akan menggunakan 3 langkah untuk itu:

  Cari jawapan yang dipilih dalam html.

  • mengendalikan apa yang berlaku jika jawapannya betul.
  • mengendalikan apa yang berlaku jika jawapannya salah.
  mari kita lihat lebih dekat bagaimana kita mencari jawapan yang dipilih dalam html kami:

  Pertama, kami memastikan kami melihat di dalam bekas jawapan untuk soalan semasa.

  myQuestions<span>.forEach( (currentQuestion<span>, questionNumber</span>) => {
  </span>  <span>// the code we want to run for each question goes here
  </span><span>});</span>

  Dalam baris seterusnya, kami menentukan pemilih CSS yang akan membolehkan kami mencari butang radio yang diperiksa.

  Kemudian kami menggunakan QuerySelector JavaScript untuk mencari pemilih CSS kami dalam jawapan yang telah ditetapkan sebelumnya. Pada dasarnya, ini bermakna kita akan mencari butang radio jawapan yang diperiksa.

  Akhirnya, kita boleh mendapatkan nilai jawapan itu dengan menggunakan. Nilai.

  berurusan dengan input pengguna yang tidak lengkap

  Bagaimana jika pengguna telah meninggalkan jawapan kosong? Dalam kes ini, menggunakan. Nilai akan menyebabkan kesilapan kerana anda tidak boleh mendapatkan nilai sesuatu yang tidak ada di sana. Untuk menyelesaikannya, kami telah menambah ||, yang bermaksud "atau", dan {}, yang merupakan objek kosong. Sekarang, pernyataan keseluruhan mengatakan:

  • Dapatkan rujukan kepada elemen jawapan yang dipilih atau, jika itu tidak wujud, gunakan objek kosong.
  • Dapatkan nilai apa sahaja yang ada dalam pernyataan pertama.

  Akibatnya, nilai itu akan menjadi jawapan pengguna atau tidak ditentukan, yang bermaksud pengguna boleh melangkaui soalan tanpa merosakkan aplikasi kuiz kami.

  Menilai jawapan dan memaparkan hasil

  Kenyataan seterusnya dalam gelung pemeriksaan jawapan kami akan membolehkan kami mengendalikan jawapan yang betul dan tidak betul.

  <span><span><span><div> id<span>="quiz"</span>><span><span></span></span>
  </div></span>></span>
  </span><span><span><span><button> id<span>="submit"</span>></button></span>Submit Quiz<span><span></span>></span>
  </span><span><span><span><div> id<span>="results"</span>><span><span></span></span>
  </div></span>></span></span></span>

  Jika jawapan pengguna sepadan dengan pilihan yang betul, tingkatkan bilangan jawapan yang betul dengan satu dan (pilihan) warna set pilihan hijau. Sekiranya jawapannya salah atau kosong, warna pilihan jawapan merah (sekali lagi, pilihan).

  Sebaik sahaja gelung pemeriksa jawapan selesai, kita dapat menunjukkan berapa banyak soalan pengguna mendapat hak:

  <span>const quizContainer = document.getElementById('quiz');
  </span><span>const resultsContainer = document.getElementById('results');
  </span><span>const submitButton = document.getElementById('submit');</span>

  Dan sekarang kami mempunyai kuiz JavaScript yang bekerja!

  Jika anda mahu, anda boleh membungkus seluruh kuiz dalam IIFE (dengan segera menggunakan ekspresi fungsi), yang merupakan fungsi yang berjalan sebaik sahaja anda menentukannya. Ini akan memastikan pembolehubah anda keluar dari skop global dan memastikan aplikasi kuiz anda tidak mengganggu skrip lain yang berjalan di halaman.

  <span>const myQuestions = [
  </span>  <span>{
  </span>    <span>question: "Who invented JavaScript?",
  </span>    <span>answers: {
  </span>      <span>a: "Douglas Crockford",
  </span>      <span>b: "Sheryl Sandberg",
  </span>      <span>c: "Brendan Eich"
  </span>    <span>},
  </span>    <span>correctAnswer: "c"
  </span>  <span>},
  </span>  <span>{
  </span>    <span>question: "Which one of these is a JavaScript package manager?",
  </span>    <span>answers: {
  </span>      <span>a: "Node.js",
  </span>      <span>b: "TypeScript",
  </span>      <span>c: "npm"
  </span>    <span>},
  </span>    <span>correctAnswer: "c"
  </span>  <span>},
  </span>  <span>{
  </span>    <span>question: "Which tool can you use to ensure code quality?",
  </span>    <span>answers: {
  </span>      <span>a: "Angular",
  </span>      <span>b: "jQuery",
  </span>      <span>c: "RequireJS",
  </span>      <span>d: "ESLint"
  </span>    <span>},
  </span>    <span>correctAnswer: "d"
  </span>  <span>}
  </span><span>];
  </span>

  Sekarang anda sudah siap! Jangan ragu untuk menambah atau membuang soalan dan jawapan dan gaya kuiz tetapi anda suka.

  Sekarang, jika anda menjalankan aplikasi, anda boleh memilih jawapan dan menyerahkan kuiz untuk mendapatkan hasilnya.

  Langkah 5 - Menambah Gaya

  Sejak sekarang kita mempunyai kuiz kerja, mari kita menjadikannya lebih mesra pengguna dengan menambahkan beberapa gaya. Walau bagaimanapun, saya tidak akan pergi ke butiran setiap gaya. Anda boleh menyalin kod di bawah secara langsung ke dalam fail Styles.css.

  Pada ketika ini, kuiz anda mungkin kelihatan seperti ini (dengan sedikit gaya):

  <span>function buildQuiz(){
  </span>  <span>// variable to store the HTML output
  </span>  <span>const output = [];
  </span>
    <span>// for each question...
  </span>  myQuestions<span>.forEach(
  </span>    <span>(currentQuestion<span>, questionNumber</span>) => {
  </span>
        <span>// variable to store the list of possible answers
  </span>      <span>const answers = [];
  </span>
        <span>// and for each available answer...
  </span>      <span>for(letter in currentQuestion.answers){
  </span>
          <span>// ...add an HTML radio button
  </span>        answers<span>.push(
  </span>          <span><span>`<label>
  </label></span></span><span><span>            <input type="radio" name="question<span >${questionNumber}</span>" value="<span >${letter}</span>">
  </span></span><span><span>            <span>${letter}</span> :
  </span></span><span><span>            <span>${currentQuestion.answers[letter]}</span>
  </span></span><span><span>          `</span>
  </span>        <span>);
  </span>      <span>}
  </span>
        <span>// add this question and its answers to the output
  </span>      output<span>.push(
  </span>        <span><span>`<div> <span>${currentQuestion.question}</span> </div>
  </span></span><span><span>        <div> <span>${answers.join('')}</span> </div>`</span>
  </span>      <span>);
  </span>    <span>}
  </span>  <span>);
  </span>
    <span>// finally combine our output list into one string of HTML and put it on the page
  </span>  quizContainer<span>.innerHTML = output.join('');
  </span><span>}</span>

  Langkah 6 - Melaksanakan Pagination

  Seperti yang anda lihat dalam imej di atas, soalan dalam kuiz diperintahkan satu demi satu. Kami perlu tatal ke bawah untuk memilih jawapan kami. Walaupun ini kelihatan baik dengan tiga soalan, anda mungkin mula bergelut untuk menjawabnya apabila bilangan soalan meningkat. Oleh itu, kita perlu mencari cara untuk menunjukkan hanya satu soalan pada satu masa melalui penomboran.

  Untuk itu, anda perlu:

  • cara untuk menunjukkan dan menyembunyikan soalan.
  • Butang untuk menavigasi kuiz.

  Jadi, mari buat beberapa penyesuaian pada kod kami, bermula dengan HTML:

  <span><span><span><div> id<span>="quiz"</span>><span><span></span></span>
  </div></span>></span>
  </span><span><span><span><button> id<span>="submit"</span>></button></span>Submit Quiz<span><span></span>></span>
  </span><span><span><span><div> id<span>="results"</span>><span><span></span></span>
  </div></span>></span></span></span>

  Kebanyakan markup itu sama seperti sebelumnya, tetapi sekarang kami telah menambah butang navigasi dan bekas kuiz. Bekas kuiz akan membantu kita meletakkan soalan sebagai lapisan yang dapat kita tunjukkan dan menyembunyikan.

  Seterusnya, di dalam fungsi BuildQuiz, kita perlu menambah elemen

  dengan slaid kelas untuk memegang soalan dan jawapan yang baru kita buat:

  <span>const quizContainer = document.getElementById('quiz');
  </span><span>const resultsContainer = document.getElementById('results');
  </span><span>const submitButton = document.getElementById('submit');</span>

  Seterusnya, kita boleh menggunakan beberapa kedudukan CSS untuk membuat slaid duduk sebagai lapisan di atas satu sama lain. Dalam contoh ini, anda akan melihat kami menggunakan z-indeks dan peralihan kelegapan untuk membolehkan slaid kami memudar masuk dan keluar. Inilah yang kelihatan seperti CSS:

  <span>const myQuestions = [
  </span>  <span>{
  </span>    <span>question: "Who invented JavaScript?",
  </span>    <span>answers: {
  </span>      <span>a: "Douglas Crockford",
  </span>      <span>b: "Sheryl Sandberg",
  </span>      <span>c: "Brendan Eich"
  </span>    <span>},
  </span>    <span>correctAnswer: "c"
  </span>  <span>},
  </span>  <span>{
  </span>    <span>question: "Which one of these is a JavaScript package manager?",
  </span>    <span>answers: {
  </span>      <span>a: "Node.js",
  </span>      <span>b: "TypeScript",
  </span>      <span>c: "npm"
  </span>    <span>},
  </span>    <span>correctAnswer: "c"
  </span>  <span>},
  </span>  <span>{
  </span>    <span>question: "Which tool can you use to ensure code quality?",
  </span>    <span>answers: {
  </span>      <span>a: "Angular",
  </span>      <span>b: "jQuery",
  </span>      <span>c: "RequireJS",
  </span>      <span>d: "ESLint"
  </span>    <span>},
  </span>    <span>correctAnswer: "d"
  </span>  <span>}
  </span><span>];
  </span>

  Sekarang kita akan menambah beberapa JavaScript untuk membuat kerja penomboran. Seperti dahulu, perintah itu penting, jadi ini adalah struktur yang disemak semula kod kami:

  <span>function buildQuiz(){
  </span>  <span>// variable to store the HTML output
  </span>  <span>const output = [];
  </span>
    <span>// for each question...
  </span>  myQuestions<span>.forEach(
  </span>    <span>(currentQuestion<span>, questionNumber</span>) => {
  </span>
        <span>// variable to store the list of possible answers
  </span>      <span>const answers = [];
  </span>
        <span>// and for each available answer...
  </span>      <span>for(letter in currentQuestion.answers){
  </span>
          <span>// ...add an HTML radio button
  </span>        answers<span>.push(
  </span>          <span><span>`<label>
  </label></span></span><span><span>            <input type="radio" name="question<span >${questionNumber}</span>" value="<span >${letter}</span>">
  </span></span><span><span>            <span>${letter}</span> :
  </span></span><span><span>            <span>${currentQuestion.answers[letter]}</span>
  </span></span><span><span>          `</span>
  </span>        <span>);
  </span>      <span>}
  </span>
        <span>// add this question and its answers to the output
  </span>      output<span>.push(
  </span>        <span><span>`<div> <span>${currentQuestion.question}</span> </div>
  </span></span><span><span>        <div> <span>${answers.join('')}</span> </div>`</span>
  </span>      <span>);
  </span>    <span>}
  </span>  <span>);
  </span>
    <span>// finally combine our output list into one string of HTML and put it on the page
  </span>  quizContainer<span>.innerHTML = output.join('');
  </span><span>}</span>

  kita boleh mulakan dengan beberapa pembolehubah untuk menyimpan rujukan ke butang navigasi kami dan menjejaki slaid yang kami lakukan. Tambahkan ini selepas panggilan ke BuildQuiz (), seperti yang ditunjukkan di atas:

  myQuestions<span>.forEach( (currentQuestion<span>, questionNumber</span>) => {
  </span>  <span>// the code we want to run for each question goes here
  </span><span>});</span>

  Seterusnya kami akan menulis fungsi untuk menunjukkan slaid. Tambahkan ini di bawah fungsi yang sedia ada (BuildQuiz dan ShowResults):

  <span>// we'll want to store the list of answer choices
  </span><span>const answers = [];
  </span>
  <span>// and for each available answer...
  </span><span>for(letter in currentQuestion.answers){
  </span>
    <span>// ...add an html radio button
  </span>  answers<span>.push(
  </span>    <span><span>`<label>
  </label></span></span><span><span>      <input type="radio" name="question<span >${questionNumber}</span>" value="<span >${letter}</span>">
  </span></span><span><span>      <span>${letter}</span> :
  </span></span><span><span>      <span>${currentQuestion.answers[letter]}</span>
  </span></span><span><span>    `</span>
  </span>  <span>);
  </span><span>}
  </span>
  <span>// add this question and its answers to the output
  </span>output<span>.push(
  </span>  <span><span>`<div> <span>${currentQuestion.question}</span> </div>
  </span></span><span><span>  <div> <span>${answers.join('')}</span> </div>`</span>
  </span><span>);
  </span>

  inilah yang dilakukan oleh tiga baris pertama:

  • Sembunyikan slaid semasa dengan mengeluarkan kelas slaid aktif.
  • Tunjukkan slaid baru dengan menambahkan kelas slaid aktif.
  • Kemas kini nombor slaid semasa.

  baris seterusnya memperkenalkan logik JavaScript berikut:

  • Jika kita berada di slaid pertama, sembunyikan butang slaid sebelumnya . Jika tidak, tunjukkan butang.
  • Jika kita berada di slaid terakhir, sembunyikan butang slaid seterusnya dan tunjukkan butang hantar . Jika tidak, tunjukkan butang slaid seterusnya dan sembunyikan hantar butang.

  Selepas kami menulis fungsi kami, kami boleh segera memanggil Showlide (0) untuk menunjukkan slaid pertama. Ini akan datang selepas kod penomboran:

  quizContainer<span>.innerHTML = output.join('');</span>

  Seterusnya kita boleh menulis fungsi untuk membuat butang navigasi berfungsi. Ini pergi di bawah fungsi showlide:

  <span>// Functions
  </span><span>function buildQuiz(){ ... }
  </span><span>function showResults(){ ... }
  </span>
  <span>// Variables
  </span><span>const quizContainer = document.getElementById('quiz');
  </span><span>const resultsContainer = document.getElementById('results');
  </span><span>const submitButton = document.getElementById('submit');
  </span><span>const myQuestions = [ ... ];
  </span>
  <span>// Kick things off
  </span><span>buildQuiz();
  </span>
  <span>// Event listeners
  </span>submitButton<span>.addEventListener('click', showResults);
  </span>

  di sini, kami menggunakan fungsi pameran kami untuk membolehkan butang navigasi kami menunjukkan slaid sebelumnya dan slaid seterusnya.

  Akhirnya, kita perlu mengaitkan butang navigasi sehingga fungsi ini. Ini datang pada akhir kod:

  <span><span><span><div> id<span>="quiz"</span>><span><span></span></span>
  </div></span>></span>
  </span><span><span><span><button> id<span>="submit"</span>></button></span>Submit Quiz<span><span></span>></span>
  </span><span><span><span><div> id<span>="results"</span>><span><span></span></span>
  </div></span>></span></span></span>

  sekarang kuiz anda telah bekerja navigasi!

  Apa yang akan datang?

  Sekarang anda mempunyai aplikasi kuiz JavaScript asas, sudah tiba masanya untuk mendapatkan kreatif dan eksperimen.

  Berikut adalah beberapa cadangan yang boleh anda cuba:

  • Cuba cara yang berbeza untuk menjawab jawapan yang betul atau jawapan yang salah.
  • gaya kuiz dengan baik.
  • tambah bar kemajuan.
  • biarkan pengguna menyemak jawapan sebelum mengemukakan.
  • Beri pengguna ringkasan jawapan mereka selepas mereka menyerahkannya.
  • Kemas kini navigasi untuk membiarkan pengguna melangkau ke mana -mana nombor soalan.
  • Buat mesej tersuai untuk setiap peringkat hasil. Sebagai contoh, jika seseorang mencatatkan 8/10 atau lebih tinggi, panggil mereka kuiz ninja.
  • Tambahkan butang untuk berkongsi hasil di media sosial.
  • Simpan skor tinggi anda menggunakan LocalStorage.
  • Tambahkan pemasa undur untuk melihat sama ada orang boleh mengalahkan jam.
  • Gunakan konsep dari artikel ini ke kegunaan lain, seperti penganggar harga projek, atau kuiz "yang mana-karakter-anda".

  Soalan Lazim mengenai Cara Membuat Kuiz JavaScript Mudah

  bagaimana saya boleh menambah lebih banyak soalan ke kuiz JavaScript?

  Menambah lebih banyak soalan ke kuiz JavaScript anda adalah proses yang mudah. Anda perlu menambah lebih banyak objek ke pelbagai soalan dalam kod JavaScript anda. Setiap objek mewakili soalan dan mempunyai dua sifat: teks (soalan itu sendiri) dan respons (pelbagai jawapan yang mungkin). Berikut adalah contoh bagaimana anda boleh menambah soalan baru:

  <span>const quizContainer = document.getElementById('quiz');
  </span><span>const resultsContainer = document.getElementById('results');
  </span><span>const submitButton = document.getElementById('submit');</span>

  Dalam contoh ini, kami menambah soalan mengenai modal Perancis, dengan empat jawapan yang mungkin. Jawapan yang betul ditandakan dengan 'betul: benar'.

  bagaimana saya boleh merebak urutan soalan dalam kuiz?

  Randomisasi susunan soalan boleh menjadikan kuiz anda lebih mencabar dan menyeronokkan. Anda boleh mencapai ini dengan menggunakan kaedah jenis () yang digabungkan dengan fungsi math.random (). Begini cara anda boleh melakukannya:

  <span>const myQuestions = [
  </span>  <span>{
  </span>    <span>question: "Who invented JavaScript?",
  </span>    <span>answers: {
  </span>      <span>a: "Douglas Crockford",
  </span>      <span>b: "Sheryl Sandberg",
  </span>      <span>c: "Brendan Eich"
  </span>    <span>},
  </span>    <span>correctAnswer: "c"
  </span>  <span>},
  </span>  <span>{
  </span>    <span>question: "Which one of these is a JavaScript package manager?",
  </span>    <span>answers: {
  </span>      <span>a: "Node.js",
  </span>      <span>b: "TypeScript",
  </span>      <span>c: "npm"
  </span>    <span>},
  </span>    <span>correctAnswer: "c"
  </span>  <span>},
  </span>  <span>{
  </span>    <span>question: "Which tool can you use to ensure code quality?",
  </span>    <span>answers: {
  </span>      <span>a: "Angular",
  </span>      <span>b: "jQuery",
  </span>      <span>c: "RequireJS",
  </span>      <span>d: "ESLint"
  </span>    <span>},
  </span>    <span>correctAnswer: "d"
  </span>  <span>}
  </span><span>];
  </span>

  Kod ini secara rawak akan menyusun pelbagai soalan setiap kali halaman dimuatkan.

  bagaimana saya boleh menambah pemasa ke kuiz?

  Menambah pemasa boleh membuat kuiz anda lebih menarik. Anda boleh dengan mudah menambah pemasa ke kuiz menggunakan fungsi JavaScript SetInterval (). Berikut adalah contoh mudah:

  <span>function buildQuiz(){
  </span>  <span>// variable to store the HTML output
  </span>  <span>const output = [];
  </span>
    <span>// for each question...
  </span>  myQuestions<span>.forEach(
  </span>    <span>(currentQuestion<span>, questionNumber</span>) => {
  </span>
        <span>// variable to store the list of possible answers
  </span>      <span>const answers = [];
  </span>
        <span>// and for each available answer...
  </span>      <span>for(letter in currentQuestion.answers){
  </span>
          <span>// ...add an HTML radio button
  </span>        answers<span>.push(
  </span>          <span><span>`<label>
  </label></span></span><span><span>            <input type="radio" name="question<span >${questionNumber}</span>" value="<span >${letter}</span>">
  </span></span><span><span>            <span>${letter}</span> :
  </span></span><span><span>            <span>${currentQuestion.answers[letter]}</span>
  </span></span><span><span>          `</span>
  </span>        <span>);
  </span>      <span>}
  </span>
        <span>// add this question and its answers to the output
  </span>      output<span>.push(
  </span>        <span><span>`<div> <span>${currentQuestion.question}</span> </div>
  </span></span><span><span>        <div> <span>${answers.join('')}</span> </div>`</span>
  </span>      <span>);
  </span>    <span>}
  </span>  <span>);
  </span>
    <span>// finally combine our output list into one string of HTML and put it on the page
  </span>  quizContainer<span>.innerHTML = output.join('');
  </span><span>}</span>

  Dalam contoh ini, kuiz akan berlangsung selama 30 saat. Pemasa akan mengemas kini setiap saat, dan apabila waktunya sudah selesai, amaran akan ditunjukkan.

  bagaimana saya boleh menunjukkan jawapan yang betul jika pengguna mendapat salah?

  anda boleh menunjukkan jawapan yang betul dengan mengubahsuai fungsi checkanswer (). Anda boleh menambah klausa lain ke pernyataan jika memeriksa jika jawapannya betul. Begini cara anda boleh melakukannya:

  <span><span><span><div> id<span>="quiz"</span>><span><span></span></span>
  </div></span>></span>
  </span><span><span><span><button> id<span>="submit"</span>></button></span>Submit Quiz<span><span></span>></span>
  </span><span><span><span><div> id<span>="results"</span>><span><span></span></span>
  </div></span>></span></span></span>

  Dalam contoh ini, jika jawapan pengguna tidak betul, amaran akan ditunjukkan dengan jawapan yang betul.

  bagaimana saya boleh menambahkan imej kepada soalan?

  Anda boleh menambah imej ke soalan anda dengan menambahkan harta 'imej' ke objek soalan. Anda kemudian boleh menggunakan harta ini untuk memaparkan imej dalam HTML anda. Berikut adalah contoh:

  <span>const quizContainer = document.getElementById('quiz');
  </span><span>const resultsContainer = document.getElementById('results');
  </span><span>const submitButton = document.getElementById('submit');</span>

  Di HTML anda, anda boleh memaparkan imej seperti ini:

  <span>const myQuestions = [
  </span>  <span>{
  </span>    <span>question: "Who invented JavaScript?",
  </span>    <span>answers: {
  </span>      <span>a: "Douglas Crockford",
  </span>      <span>b: "Sheryl Sandberg",
  </span>      <span>c: "Brendan Eich"
  </span>    <span>},
  </span>    <span>correctAnswer: "c"
  </span>  <span>},
  </span>  <span>{
  </span>    <span>question: "Which one of these is a JavaScript package manager?",
  </span>    <span>answers: {
  </span>      <span>a: "Node.js",
  </span>      <span>b: "TypeScript",
  </span>      <span>c: "npm"
  </span>    <span>},
  </span>    <span>correctAnswer: "c"
  </span>  <span>},
  </span>  <span>{
  </span>    <span>question: "Which tool can you use to ensure code quality?",
  </span>    <span>answers: {
  </span>      <span>a: "Angular",
  </span>      <span>b: "jQuery",
  </span>      <span>c: "RequireJS",
  </span>      <span>d: "ESLint"
  </span>    <span>},
  </span>    <span>correctAnswer: "d"
  </span>  <span>}
  </span><span>];
  </span>

  Dan dalam javascript anda, anda boleh mengemas kini atribut SRC imej semasa memaparkan soalan baru:

  <span>function buildQuiz(){
  </span>  <span>// variable to store the HTML output
  </span>  <span>const output = [];
  </span>
    <span>// for each question...
  </span>  myQuestions<span>.forEach(
  </span>    <span>(currentQuestion<span>, questionNumber</span>) => {
  </span>
        <span>// variable to store the list of possible answers
  </span>      <span>const answers = [];
  </span>
        <span>// and for each available answer...
  </span>      <span>for(letter in currentQuestion.answers){
  </span>
          <span>// ...add an HTML radio button
  </span>        answers<span>.push(
  </span>          <span><span>`<label>
  </label></span></span><span><span>            <input type="radio" name="question<span >${questionNumber}</span>" value="<span >${letter}</span>">
  </span></span><span><span>            <span>${letter}</span> :
  </span></span><span><span>            <span>${currentQuestion.answers[letter]}</span>
  </span></span><span><span>          `</span>
  </span>        <span>);
  </span>      <span>}
  </span>
        <span>// add this question and its answers to the output
  </span>      output<span>.push(
  </span>        <span><span>`<div> <span>${currentQuestion.question}</span> </div>
  </span></span><span><span>        <div> <span>${answers.join('')}</span> </div>`</span>
  </span>      <span>);
  </span>    <span>}
  </span>  <span>);
  </span>
    <span>// finally combine our output list into one string of HTML and put it on the page
  </span>  quizContainer<span>.innerHTML = output.join('');
  </span><span>}</span>

  Dalam contoh ini, imej gajah akan dipaparkan apabila soalan ditunjukkan.

  bagaimana saya mengendalikan pelbagai jawapan yang betul dalam kuiz javascript?

  Mengendalikan pelbagai jawapan yang betul melibatkan membolehkan pengguna memilih lebih daripada satu jawapan dan menyemak jika mana -mana jawapan yang dipilih adalah betul. Sebagai contoh, inilah cara anda boleh mengemas kini fungsi showResults di atas () untuk mengendalikan pelbagai jawapan yang betul.

  myQuestions<span>.forEach( (currentQuestion<span>, questionNumber</span>) => {
  </span>  <span>// the code we want to run for each question goes here
  </span><span>});</span>

  Adakah perlu untuk mengekalkan fail JavaScript yang berasingan dan fail CSS?

  Mengekalkan fail JavaScript dan CSS yang berasingan bukanlah suatu keharusan. Walau bagaimanapun, ia secara amnya dianggap sebagai amalan terbaik kerana ia meningkatkan kebolehbacaan dan pemeliharaan kod anda.