initialization HD Quiz by ajax

Here you go 🙂

This example does the following.

1. Adds a new button to the end of a quiz that will load the next quiz. You can add this button anywhere you want. Just take note of…
2. Adds the Javascript to the end of a quiz. This means that the code will only load on pages that have quizzes. The only thing to note is that this means that where you place the button needs to be ABOVE where this code executes. You can take this code and add it to your footer if that makes more sense for you instead.
3. Send the current Quiz ID via ajax to the server
4. On server, accepts the curent quiz ID, and using that, figures out what the “next” quiz to load should be. It then prints that entire quiz and sends back to the client
5. Now back on our javascript, we add the new quiz to the site, remove the old quiz, reset the quiz settings, and scroll the site back to the top.

NOTE: You can ignore my “figure out what the next quiz should be” if you want. I just added it in because I thought it was cool haha.

/* HD Quiz - khanhfe */
// Load a new quiz via ajax call
// and figure out what the "next" quiz to load is

function hdq_khanhfe_after_quiz_content()
{
	// this function allows us to add custom content to the end of a quiz
	// we are using it to add our custom javascript so that the code
	// only exists on pages that have a quiz on it	
	?>

	<!-- for this example, we are adding in the "next quiz" button here
	we are using 'div' instead of 'a' so that we do not have to link hijack -->

	<div id = "hdq_khanhfe_load_new_quiz" title = "Load Next Quiz" aria-role = "button" class = "button">Next Quiz</div>

	<script>
		function hdq_khanhfe_load_new_quiz() {
			document.getElementById("hdq_khanhfe_load_new_quiz").addEventListener("click", function () {
				/* HDQ.VARS.ajax is preloaded by HD Quiz
				 * in this example, we are automatically grabbing the "next quiz"
				 * so replace 'HDQ.VARS.id' with the quiz id of whatever quiz you want to load
				 * a specific one instead
				 */

				const data = HDQ.VARS.id; // the current quiz ID.
				jQuery.ajax({
					type: "POST",
					data: {
						action: "hdq_khanhfe_handle_ajax_shortcode",
						data: data,
					},
					url: HDQ.VARS.ajax,
					success: async function (res) {
						// res will contain all of the HTML for the quiz. We can use this to replace the existing quiz
						const el = document.getElementsByClassName("hdq_quiz_wrapper")[0];
						el.insertAdjacentHTML("beforebegin", res);
						el.remove();
						await HDQ.init();
						hdq_khanhfe_load_new_quiz(); // run this function again to reset the eventListener
						document.getElementsByClassName("hdq_before")[0].scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" });
					},
				});
			});
		}
		hdq_khanhfe_load_new_quiz();
	</script>
	<?php
}
add_action("hdq_after", "hdq_khanhfe_after_quiz_content");

function hdq_khanhfe_handle_ajax_shortcode()
{
	// this is the function that will be called via the ajax call
	$current_quiz_id = intval($_POST['data']); // we sent the quiz ID in the ajax call
	
	// now we grab as list of ALL quizzes, and loop through them until we find
	// the quiz whose ID matches current_quiz_id. We can then use this to grab
	// the next quiz in the list, or reset to the first if we are at the end

    $term_args = array(
    	'hide_empty' => true, // no point loading in an empty quiz!
        'orderby' => 'name', // feel free to change
        'order' => 'ASC', // these to whatever makes sense
	);
    $quizzes = get_terms("quiz", $term_args);
	$next_quiz_id = 0;
	for($i = 0; $i < count($quizzes) - 1; $i++){
		// since we are using quiz count - 1, if we do not find a match
		// we can assume that the current quiz was the last in the list
		if($quizzes[$i]->term_id === $current_quiz_id){
			// get the quiz id for the next quiz in the list
			$next_quiz_id = $quizzes[$i + 1]->term_id;
			break;
		}
	}
	
	// if $next_quiz_id is still zero, then the current quiz was probably
	// the last in the list and we can reset to the first in the list
	if($next_quiz_id === 0){
		$next_quiz_id = $quizzes[0]->term_id;
	}
	
	define('HDQ_REDIRECT', false); // this disalbes the "is_single" check for AMP pages
	
	// cool. we now have the quiz id for the next quiz!
	ob_start();
	echo do_shortcode('[HDquiz quiz = "'.$next_quiz_id.'"]');
	$data = ob_get_contents();
	ob_end_clean();
	echo $data;
	die();
}
add_action( 'wp_ajax_nopriv_hdq_khanhfe_handle_ajax_shortcode', 'hdq_khanhfe_handle_ajax_shortcode' );
add_action( 'wp_ajax_hdq_khanhfe_handle_ajax_shortcode', 'hdq_khanhfe_handle_ajax_shortcode' );