Mengintegrasikan beberapa pilihan kuis di WordPress: menciptakan Front End

Ini adalah bagian kedua dari seri mengembangkan beberapa pilihan kuis plugin untuk WordPress. Pada bagian pertama kami membuat backend kami plugin untuk menangkap data yang diperlukan untuk menyimpan dalam database.

Dalam bagian akhir ini, kita akan menciptakan frontend plugin dimana pengguna dapat mengambil kuis dan mengevaluasi pengetahuan mereka.

Topik-topik berikut akan dibahas dalam bagian ini menyelesaikan plugin kami:

• Membuat Shortcode untuk menampilkan sebuah kuis
• Mengintegrasikan jQuery Slider untuk menampilkan pertanyaan dan navigasi
• Menyelesaikan sebuah kuis dan generate hasil
• Membuat sebuah kuis Timer

Kita akan membutuhkan sejumlah besar pertanyaan di backend untuk menghasilkan random kuis. Saya berharap bahwa Anda sudah menyedikan backend dan menyimpan pertanyaan kuis yang cukup.

Jadi mari kita mulai.

Membuat Shortcode untuk menampilkan sebuah kuis

Pertama kita harus memiliki sebuah post atau halaman yang memuat unsur-unsur tampilan kuis. Ini dapat dicapai dengan menggunakan shortcode atau halaman template. Dalam plugin ini, shortcode akan digunakan untuk membuat independen dari tema.

Pada awalnya, shortcode harus menampilkan kategori kuis yang tersedia sehingga pengguna dapat memilih kategori untuk menghasilkan kuis. Shortcode akan ditambahkan pada constructor menggunakan fungsi add_shortcode seperti yang diberikan dalam kode berikut.

1

add_shortcode( 'wpq_show_quiz', array( $this, 'wpq_show_quiz' ) );

Sekarang, mari kita lihat implementasi untuk shortcode mengambil kuisategori yang tersedia dari database.

1

function wpq_show_quiz( $atts ) {

2

3

  global $post;

4

5

	$html = '<div id="quiz_panel"><form action="" method="POST">';

6

7

	$html .= '<div class="toolbar">';

8

9

	$html .= '<div class="toolbar_item"><select name="quiz_category" id="quiz_category">';

10

11

	// Retrive the quiz categories from database

12

13

	$quiz_categories = get_terms( 'quiz_categories', 'hide_empty=1' );

14

15

	foreach ( $quiz_categories as $quiz_category ) {

16

17

		$html .= '<option value="' . $quiz_category->term_id . '">' . $quiz_category->name . '</option>';

18

19

	}

20

21

	$html .= '</select></div>';

22

23

	$html .= '<input type="hidden" value="select_quiz_cat" name="wpq_action" />';

24

25

	$html .= '<div class="toolbar_item"><input type="submit" value="Select Quiz Category" /></div>';

26

27

	$html .= '</form>';

28

29

	$html .= '<div class="complete toolbar_item" ><input type="button" id="completeQuiz" value="Get Results" /></div>';

30

31

	// Implementation of Form Submission

32

33

	// Displaying the Quiz as unorderd list

34

35

	return $html;

36

37

}

Shortcode kami akan menghasilkan form HTML dan diperlukan kontrol yang digunakan untuk kuis. Kita mengambil daftar kategori tersedia kuis menjadi bidang drop down untuk membiarkan pengguna memilih kategori. Kita dapat menggunakan fungsi get_terms dengan hide_empty = 1 untuk mendapatkan kategori kuis yang memiliki setidaknya satu pertanyaan.

Bidang tersembunyi disebut wpq_action digunakan untuk memeriksa nilai $_POST setelah di submit.

Setelah Anda memasukkan shortcode ke halaman atau post, output akan terlihat seperti berikut.

Sekarang pengguna dapat memilih kategori kuis dan submit form untuk mendapatkan kuis. Jadi kita akan menangani pada form di dalam shorcode untuk mendapatkan kategori yang dipilih dan mengambil pertanyaan random untuk kuis.

Kode berikut berisi implementasi mengambil pertanyaan dari kategori yang dipilih.

1

$questions_str = "";

2

3

if ( isset( $_POST['wpq_action'] ) && 'select_quiz_cat' == $_POST['wpq_action'] ) {

4

5

	$html .= '<div id="timer" style="display: block;"></div>';

6

	$html .= '<div style="clear: both;"></div></div>';

7

8

	$quiz_category_id = $_POST['quiz_category'];

9

	$quiz_num = get_option( 'wpq_num_questions' );

10

	$args = array(

11

		'post_type' => 'wptuts_quiz',

12

		'tax_query' => array(

13

			array(

14

				'taxonomy' => 'quiz_categories',

15

				'field' => 'id',

16

				'terms' => $quiz_category_id

17

			)

18

		),

19

		'orderby' => 'rand',

20

		'post_status' => 'publish',

21

		'posts_per_page' => $quiz_num

22

	);

23

24

	$query = new WP_Query( $args );

25

26

	$quiz_index = 1;

27

	while ( $query->have_posts() ) : $query->the_post();

28

29

		// Generating the HTML for Questions

30

31

	endwhile;

32

	wp_reset_query();

33

34

	// Embedding Slider

35

}

36

else {

37

	$html .= '<div id="timer" style="display: none;"></div>';

38

	$html .= '<div style="clear: both;"></div></div>';

39

}

Kode yang diberikan harus dimasukkan ke dalam implementasi pengiriman Form bagian kode sebelumnya.

 Setelah formulir disubmit, kami memeriksa apakah form mengandung action yang dibutuhkan menggunakan bidang tersembunyi yang dihasilkan sebelumnya. Maka kita mendapatkan kategori ykamiangdipilih kuis dari $_POST array.

Kemudian kita query database untuk wptuts_quiz post dengan kuis kategori yang dipilih.

Hal ini penting untuk mengatur orderby sebagai rand untuk menghasilka pertanyaan kuis acak, yang jika tidak akan menghasilkan serangkaian pertanyaan yang sama setiap kali. Juga, pastikan untuk mengatur posts_per_page untuk menetapkan jumlah maksimum pertanyaan per setiap kuis yang diberikan.

Setelah hasil dihasilkan kita perlu menambahkan pertanyaan ke elemen HTML yang diperlukan dan kami akan mengimplementasikan hal ini pada bagian berikutnya.

Mengintegrasikan jQuery Slider untuk menampilkan pertanyaan dan navigasi

Kuis dapat dihasilkan sebagai layar yang berisi semua pertanyaan sekaligus, atau layar yang berisi satu pertanyaan pada satu waktu dengan kontrol navigasi. Saya percaya bahwa teknik kedua adalah favorit di kalangan kebanyakan orang. Oleh karena itu, kami akan menampilkan kuis ini dengan satu pertanyaan dan navigasi untuk melintasi pertanyaan-pertanyaan sebelumnya dan berikutnya.

Menghasilkan fungsi ini dari awal bisa menjadi tugas yang memakan waktu serta menciptakan kembali kemudi. JQuery slider akan menjadi solusi sempurna untuk situasi ini dan saya akan menggunakan RhinoSlider, karena ini adalah favorit saya, jadi ambil salinannya.

Di dalam folder download, Anda akan melihat tiga folder bernama img, js dan css. Salin img dan css folder ke plugin dan salin file di dalam js folder ke folder js yang sudah ada yang kita miliki di plugin kuis. Sekarang kita dapat mulai termasuk diperlukan skrip dan style untuk slider.

Termasuk script Frontend

Di bagian pertama, kami membuat script yang diperlukan untuk backend. Dalam bagian ini kita akan meliputi script yang diperlukan untuk RhinoSlider serta quiz.js untuk fungsionalitas kustom.

Pertimbangkan kode berikut untuk termasuk script dan data konfigurasi yang diperlukan.

1

function wpq_frontend_scripts() {

2

3

	wp_register_script( 'rhino', plugins_url( 'js/rhinoslider-1.05.min.js', __FILE__ ), array( 'jquery' ) );

4

5

	wp_register_script( 'rhino-mousewheel', plugins_url( 'js/mousewheel.js', __FILE__ ), array( 'jquery' ) );

6

7

	wp_register_script( 'rhino-easing', plugins_url( 'js/easing.js', __FILE__ ), array( 'jquery' ) );

8

9

	wp_register_script( 'quiz', plugins_url( 'js/quiz.js', __FILE__ ), array( 'jquery', 'rhino', 'rhino-mousewheel', 'rhino-easing' ) );

10

11

	wp_enqueue_script( 'quiz' );

12

13

	$quiz_duration = get_option( 'wpq_duration' );

14

15

	$quiz_duration = ( ! empty( $quiz_duration ) ) ? $quiz_duration : 300;

16

17

	$config_array = array(

18

19

		'ajaxURL' => admin_url( 'admin-ajax.php' ),

20

21

		'quizNonce' => wp_create_nonce( 'quiz-nonce' ),

22

23

		'quizDuration' => $quiz_duration,

24

25

		'plugin_url' => $this->plugin_url

26

27

	);

28

29

	wp_localize_script( 'quiz', 'quiz', $config_array );

30

31

}

Di sini kita memiliki tiga file JavaScript yang digunakan untuk RhinoSlider dan quiz.js file untuk fungsionalitas kustom. Dalam bagian sebelumnya, kita mengkonfigurasi durasi kuis. Kita dapat mengambil durasi menggunakan fungsi get_option dan menetapkannya ke $config array. Juga, kita harus mencakup konfigurasi umum dalam array konfigurasi.

Akhirnya kita dapat menggunakan fungsi wp_localize_script untuk menetapkan konfigurasi data dalam quiz.js file.

Termasuk Frontend style

Demikian pula kita dapat memasukkan file CSS yang dibutuhkan untuk Rhino Slider menggunakan kode berikut.

1

function wpq_frontend_styles() {

2

3

	wp_register_style( 'rhino-base', plugins_url( 'css/rhinoslider-1.05.css', __FILE__ ) );

4

5

	wp_enqueue_style( 'rhino-base' );

6

7

}

Akhirnya kita perlu memperbarui konstruktor plugin untuk menambahkan action yang diperlukan untuk termasuk skrip dan style seperti yang diberikan dalam kode berikut.

1

add_action( 'wp_enqueue_scripts', array( $this, 'wpq_frontend_scripts' ) );

2

3

add_action( 'wp_enqueue_scripts', array( $this, 'wpq_frontend_styles' ) );

Semuanya sudah siap untuk mengintegrasikan slider dengan pertanyaan-pertanyaan ke shortcode yang kita buat sebelumnya. Mari kita bergerak maju.

Embedding Slider ke Shortcode

Saat ini kami memiliki dua komentar dalam fungsi shortcode, menyebutkan "Menghasilkan HTML untuk pertanyaan" dan "Embedding Slider". Bagian-bagian perlu diperbarui dengan masing-masing kode untuk menghasilkan slider. Pertama kita perlu untuk memperbarui while loop sebagai berikut.

1

while ( $query->have_posts() ) : $query->the_post();

2

3

	$question_id = get_the_ID();

4

5

	$question = the_title( '', '', FALSE ) . ' ' . get_the_content();

6

7

	$question_answers = json_decode( get_post_meta( $question_id, '_question_answers', true ) );

8

9

	$questions_str .= '<li>';

10

11

	$questions_str .= '<div class="ques_title"><span class="quiz_num">' . $quiz_index . '</span>' . $question . '</div>';

12

13

	$questions_str .= '<div class="ques_answers" data-quiz-id="' . $question_id . '">';

14

15

	$quiestion_index = 1;

16

17

	foreach ( $question_answers as $key => $value ) {

18

19

		if ( '' != $value ) {

20

21

			$questions_str .= $quiestion_index . ' <input type="radio" value="' . $quiestion_index . '" name="ans_' . $question_id . '[]" />' . $value . '<br/>';

22

23

		}

24

25

		$quiestion_index++;

26

27

	}

28

29

	$questions_str .= '</div></li>';

30

31

	$quiz_index++;

32

33

endwhile;

Penjelasan Kode

• Dalam loop, pertama kita mendapatkan pertanyaan dengan menggabungkan bidang judul dan konten untuk pertanyaan.
• Kemudian kita mengambil jawaban dari setiap pertanyaan dengan menggunakan fungsi get_post_meta.
• Di dalam setiap foreach, semua jawaban akan ditugaskan untuk tombol radio dengan nilai-nilai yang diperlukan.
• Perlu daftar item akan ditempatkan di dalam loop termasuk data atribut HTML, yang akan berguna di bagian berikutnya.
• Keluaran terakhir while loop akan sebuah variabel string yang berisi daftar pertanyaan dan jawaban mereka tertanam dalam HTML.

Selanjutnya kita perlu membuat wadah untuk slider di bagian berkomentar sebagai "Embedding Slider". Kode berikut berisi kode HTML untuk membuat wadah.

1

$html .= '<ul id="slider">' . $questions_str;

2

3

$html .= '<li id="quiz_result_page"><div class="ques_title">Quiz Results <span id="score"></span></div>';

4

5

$html .= '<div id="quiz_result"></div>';

6

7

$html .= '</li></ul></div>';

Kita akan menggunakan daftar unordered dipanggil slider sebagai wadah untuk Rhino Slider. Awalnya kami meliputi serangkaian pertanyaan dan jawaban yang dihasilkan di dalam loop, menggunakan $questions_str. Ini akan berisi koleksi item daftar.

Kemudian kita harus secara manual membuat item daftar lain untuk menunjukkan hasil kuis dan Skor.

Sekarang semua data dan slide yang diperlukan untuk aplikasi kuis dikonfigurasi. Kita dapat menginisialisasi Slider badak di quiz.js untuk melihat kuis dalam action.

1

jQuery(document).ready(function($) {

2

3

	$('#slider').rhinoslider( {

4

5

		controlsMousewheel: false,

6

7

		controlsPlayPause: false,

8

9

		showBullets: 'always',

10

11

		showControls: 'always'

12

13

	} );

14

15

} );

Saya telah menggunakan beberapa style CSS kustom untuk meningkatkan tampilan dan nuansa. Anda dapat menemukan semua diubah CSS di bawah bagian wp_quiz rhinoslider-1.05.css file. Sekarang Anda harus memiliki sesuatu seperti gambar berikut.

Menyelesaikan kuis dan menghasilkan hasil

Setelah kuis dimuat, Anda dapat menggunakan kontrol navigasi untuk bergerak di antara pertanyaan-pertanyaan dan jawaban. Anda harus mengklik tombol "Get Results" setelah semua pertanyaan akan dijawab. Sekarang kita perlu menciptakan hasil kuis menggunakan request AJAX.

Mari kita menerapkan kode jQuery untuk membuat request AJAX.

1

$("#completeQuiz").click(function() {

2

3

	wpq_quiz_results();

4

5

});

6

7

var wpq_quiz_results = function() {

8

9

	var selected_answers = {};

10

11

	$(".ques_answers").each(function() {

12

13

		var question_id = $(this).attr("data-quiz-id");

14

15

		var selected_answer = $(this).find('input[type=radio]:checked');

16

17

		if ( selected_answer.length != 0 ) {

18

19

			var selected_answer = $(selected_answer).val();

20

21

			selected_answers["qid_"+question_id] = selected_answer;

22

23

		}

24

		else {

25

26

			selected_answers["qid_"+question_id] = '';

27

28

		}

29

30

	} );

31

32

	// AJAX Request

33

34

};

Setelah mengklik tombol "Get Results", kita memanggil fungsi wpq_quiz_results menggunakan jQuery. Setiap pertanyaan telah ditambahkan ke slider dengan class CSS khusus yang dipanggil ques_answers.

Saat melintasi melalui setiap elemen dengan class ques_answers, kita mengambil pertanyaan ID menggunakan HTML data-atribut yang disebut data-quiz-id dan tombol radio yang dipilih menggunakan jQuery.

Akhirnya kami menetapkan semua pertanyaan dan jawaban yang dipilih ke dalam sebuah array yang disebut selected_answers, untuk dikirimkan ke request AJAX.

Lihatlah kode berikut untuk implementasi request AJAX.

1

$.post(quiz.ajaxURL, {

2

3

	action: "get_quiz_results",

4

5

	nonce: quiz.quizNonce,

6

7

	data: selected_answers,

8

9

}, function(data) {

10

11

	// AJAX result handling code

12

13

}, "json" );

Pertama kita membuat request AJAX menggunakan data konfigurasi ditetapkan dari fungsi wpq_frontend_scripts. Daftar jawaban yang dihasilkan di bagian sebelumnya akan dikirimkan sebagai data parameter. Sebelum menangani hasil, kita harus melihat pada pelaksanaan kode sisi server pada bagian berikut.

Menciptakan sebuah Handler AJAX di sisi Server

Pertama kita harus memperbarui konstruktor dengan action yang diperlukan untuk menggunakan AJAX untuk kedua login pengguna dan normal seperti ditunjukkan pada kode berikut.

1

add_action( 'wp_ajax_nopriv_get_quiz_results', array( $this, 'get_quiz_results' ) );

2

3

add_action( 'wp_ajax_get_quiz_results', array( $this, 'get_quiz_results' ) );

Kemudian kita dapat pindah ke implementasi fungsi get_quiz_results seperti yang ditunjukkan pada kode berikut.

1

function get_quiz_results() {

2

3

	$score = 0;

4

5

	$question_answers = $_POST["data"];

6

7

	$question_results = array();

8

9

	foreach ( $question_answers as $ques_id => $answer ) {

10

11

		$question_id = trim( str_replace( 'qid_', '', $ques_id ) ) . ',';

12

13

		$correct_answer = get_post_meta( $question_id, '_question_correct_answer', true );

14

15

		if ( $answer == $correct_answer ) {

16

17

			$score++;

18

19

			$question_results["$question_id"] = array( "answer" => $answer, "correct_answer" => $correct_answer, "mark" => "correct" );

20

21

		}

22

		else {

23

24

			$question_results["$question_id"] = array( "answer" => $answer, "correct_answer" => $correct_answer, "mark" => "incorrect" );

25

26

		}

27

28

	}

29

30

	$total_questions = count( $question_answers );

31

32

	$quiz_result_data = array(

33

34

		"total_questions" => $total_questions,

35

36

		"score" => $score,

37

38

		"result" => $question_results

39

40

	);

41

42

	echo json_encode( $quiz_result_data );

43

44

	exit;

45

46

}

Penjelasan Kode

• Jawaban yang dipilih untuk semua pertanyaan yang akan diterima menggunakan parameter data dalam $_POST array.
• Kemudian kita mengambil ID pertanyaan dari setiap pertanyaan dengan mengganti awalan qid_.
• Selanjutnya kita menerima jawaban yang benar dari setiap pertanyaan dari database menggunakan fungsi get_post_meta.
• Selanjutnya kami memeriksa apakah jawabannya disediakan sesuai dengan jawaban yang benar dan membuat $question_results berdasarkan status hasilnya.
• Sementara memeriksa jawaban, kita perlu untuk memperbarui nilai kuis menggunakan variabel $score.
• Akhirnya kami menetapkan hasil kuis dan nilai ke array $quiz_result_data akan dikirim sebagai respon.

Hingga saat ini, kami menciptakan request AJAX dan dilaksanakan respon sisi server. Pada bagian berikutnya kita akan menyelesaikan proses generasi hasil kuis dengan penanganan respon AJAX.

Penanganan Data respon AJAX

Dalam respon penanganan bagian, kami memiliki beberapa tugas, termasuk tampilan hasil kuis dan nilai. Jadi aku akan memisahkan kode menjadi beberapa bagian untuk membuat penjelasan yang jelas. Pertimbangkan kode berikut yang berisi request AJAX lengkap.

1

$.post(

2

	quiz.ajaxURL,

3

	{

4

5

		action: 'get_quiz_results',

6

7

		nonce: quiz.quizNonce,

8

9

		data: selected_answers

10

11

	},

12

	function(data) {

13

14

		// Section 1

15

16

		var total_questions = data.total_questions;

17

18

		$('#slider').data('rhinoslider').next($('#rhino-item' + total_questions));

19

20

		$('#score').html( data.score + '/' + total_questions);

21

22

		// Section 2

23

24

		var result_html = '<table>';

25

26

		result_html += '<tr><td>Question</td><td>Answer</td><td>Correct Answer</td><td>Result</td></tr>';

27

28

		var quiz_index = 1;

29

30

		$.each(data.result, function( key, ques ) {

31

32

			result_html += '<tr><td>' + quiz_index + '</td><td>' + ques.answer + '</td><td>' + ques.correct_answer + '</td>';

33

34

			result_html += '<td><img src="' + quiz.plugin_url + 'img/' + ques.mark + '.png" /></td></tr>';

35

36

			quiz_index++;

37

38

		});

39

40

		result_html += '<tr><td>&nbsp;</td><td></td><td></td>';

41

42

		result_html += '<td></td></tr>';

43

44

		// Section 3

45

46

		$('#quiz_result').parent().css('overflow-y','scroll');

47

48

		$('#quiz_result').html(result_html);

49

50

		$('#timer').hide();

51

52

	},

53

	'json'

54

);

Penjelasan dari bagian 1

Pertama, kita mengambil total pertanyaan kuis dari respon yang diterima dari server. Kemudian kami menggunakan fungsi next Rhino Slider untuk mengarahkan pengguna ke hasil slide. Kemudian kita menetapkan nilai pengguna dengan pertanyaan total dalam wadah #score.

Penjelasan tentang bagian 2

Bagian awal dari kode ini menghasilkan tabel HTML dengan judul yang diperlukan untuk menampilkan hasil. Kemudian kami menetapkan pertanyaan untuk tabel di dalam jQuery loop masing-masing. Kami telah menggunakan dua gambar untuk menampilkan status keberhasilan atau kegagalan pertanyaan.

Penjelasan tentang bagian 3

Awalnya kita harus memungkinkan scroll di halaman hasil seperti itu dapat cukup panjang untuk kuis dengan sejumlah pertanyaan. Atribut CSS overflow-y digunakan untuk memungkinkan scroll. Akhirnya kami menetapkan tabel hasil kuis ke dalam wadah #quiz_result dan menyembunyikan timer, yang kami akan mengimplementasikan pada bagian berikutnya.

Setelah kuis selesai, layar akan terlihat seperti sesuatu yang mirip dengan gambar berikut.

Menciptakan sebuah kuis Timer

Biasanya setiap ujian atau kuis memiliki jangka waktu yang telah ditetapkan. Jadi kita akan menggunakan durasi kami dikonfigurasi dalam halaman pengaturan plugin kami untuk menghasilkan timer kuis. Kami sudah terkonfigurasi timer tersembunyi pada buka halaman awal, dan akan terlihat pada form di shortcode.

Mari kita fokus pada timer secara dinamis mengubah menggunakan kode jQuery seperti ditunjukkan di bawah.

1

var duration = quiz.quizDuration * 60;

2

3

$(document).ready(function($) {

4

5

	setTimeout("startPuzzleCount()",1000);

6

7

});

8

9

var startPuzzleCount = function() {

10

11

	duration--;

12

13

	$('#timer').html(duration+" Seconds Remaining");

14

15

	if ( duration == '0' ) {

16

17

		$('#timer').html("Time Up");

18

19

		wpq_quiz_results();

20

21

		return;

22

23

	}

24

25

	setTimeout("startPuzzleCount()",1000);

26

27

};

Kuis durasi diakses menggunakan array konfigurasi yang dimasukan menggunakan fungsi wp_localize_script. Durasi kemudian diubah menjadi detik dengan mengalikan dengan 60.

Kemudian kita menciptakan fungsi setTimeout untuk memulai timer. Dalam fungsi, kami mengurangi durasi 1 dan menetapkan untuk wadah #timer. Ketika waktu semakin ke nol, kita memanggil fungsi wpq_quiz_results untuk secara otomatis selesaikan kuis dan menghasilkan hasil.

Akhirnya, kita memanggil setTimeout fungsi rekursif untuk memperbarui sisa waktu. Kami telah menyelesaikan implementasi timer dan kuis Anda akan terlihat seperti gambar berikut dengan timer.

Rangkuman

Seluruh dua bagian seri ini, kami mengembangkan sederhana dan menyelesaikan beberapa pilihan kuis plugin untuk WordPress. Anda dapat memperluas fungsi plugin ini sesuai dengan persyaratan aplikasi Anda. Saya sarankan Anda bisa meningkatkan plugin dengan mencoba berikut:

• Membuat cara untuk menetapkan pertanyaan untuk kuis bukan menghasilkan random kuis.
• Simpan hasil kuis untuk pengguna yang login.
• Membuat sebuah kuis kompetisi antara pengguna.

Biarkan saya tau saran Anda dan bagaimana kelanjutannya dengan extending plugin proses.

Menuggu untuk mendengar dari Anda.