Fungsi menjawab soalan dalam talian yang dilaksanakan oleh jQuery_jquery

Kadangkala perlu menambah fungsi ujian dalam talian pada halaman web, seperti tinjauan dalam talian, ujian dalam talian pelbagai pengetahuan dan aplikasi lain memerlukan penggunaan banyak kemahiran bahagian hadapan dan belakang. Hari ini saya akan berkongsi dengan anda aplikasi front-end berdasarkan jQuery-testing fungsi menjawab soalan.

HTML

Mula-mula muatkan fail perpustakaan jquery dan kuiz.js serta fail gaya CSS styles.css yang diperlukan.

<script src="jquery.js"></script> 
<script src="quiz.js"></script> 
<link rel="stylesheet" href="styles.css" /> 

Kemudian tambahkan div#kuiz-bekas di mana soalan ujian perlu diletakkan.

Salin kod Kod adalah seperti berikut:

jQuery

Pertama, kami mentakrifkan soalan dan pilihan jawapan ialah soalan, jawapan ialah pilihan jawapan, dan Jawapan yang betul ialah jawapan yang betul. Dapat dilihat bahawa init yang ditakrifkan ialah format data json.

Salin kod Kod adalah seperti berikut:

var init={'soalan':[{'soalan':'Apakah itu jQuery? ','answers':['JavaScript library','CSS library','PHP framework','None of the above'],'correctAnswer':1},{'question':'Cari item dengan kategori berbeza? ','answers':['meja tulis','sofa','TV','taplak meja'],'correctAnswer':3},{'question':'Negara yang mempunyai keluasan tanah terbesar ialah:',' answers': ['Amerika Syarikat','China','Russia','Canada'],'correctAnswer':3},{'question':'Berapa jauhkah jarak bulan dari bumi? ','jawapan':['180,000 kilometer','380,000 kilometer','1 juta kilometer','1.8 juta kilometer'],'Jawapan betul':2}]};

Seterusnya, kami terus memanggil kaedah pemalam yang disediakan oleh quiz.js, dan kemudian membuka halaman untuk melihat bahawa projek ujian dalam talian telah dijana pada halaman.

$(function(){ 
  $('#quiz-container').jquizzy({ 
    questions: init.questions 
  }); 
}); 

Jadi, jika anda ingin mengubah suai reka letak gaya soalan ujian tersuai, anda boleh membuat pengubahsuaian yang sesuai dalam fail quiz.js dan styles.css.

Soalan
Pada ketika ini, rakan-rakan yang berhati-hati akan mendapati bahawa masalah akan datang: 1. Adakah tidak selamat untuk menandakan secara langsung jawapan yang betul kepada soalan dalam kod js? Sama ada jawapan kepada projek ujian rasmi harus ditentukan di latar belakang untuk menghalang seseorang daripada melihat kod sumber untuk mendapatkan jawapan yang betul secara langsung.
2. Bagaimana untuk berinteraksi dengan latar belakang? Contohnya, sahkan identiti sebelum menjawab soalan ujian dan hantar keputusan ke bahagian belakang selepas menjawab soalan.
Apa yang saya ingin katakan ialah ini adalah projek demonstrasi kod hadapan. Jawapan aplikasi sebenar tidak akan muncul dalam kod bahagian hadapan.js sebenarnya sudah mempunyai antara muka untuk berinteraksi dengan ajax latar belakang artikel berikut. Pengenalan, saya sudah memikirkan tajuk artikel: Bagaimana menggunakan jQuery PHP MySQL untuk melaksanakan projek ujian dalam talian, jadi nantikan.

Lihat demo Muat turun kod sumber

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.