[ad_1]
Hi avantprime, as you’ve figured out, the reason it isn’t working is because you are using page caching which creates a static version of the page, and a way around this is to load quizzes using ajax.
The problem is that it’s not as simple to do because HD Quiz needs to do a lot more than just print content. We need to, for example, make sure our style sheets and JS files are enqueued on the page whenever you load a quiz.
Some plugins (looking at you Contact Form 7, WooCommerce, etc) load their assets on every one of your pages, regardless if you are using any functionality from those plugins on that page. I took the opposite rout with HD Quiz and make it so that things like JavaScript only load on pages that actually have a quiz on them.
THE SOLUTION
First, I do plan on adding in an “ajax mode” eventually, but probably not until a “2.0” release.
However, you can always force ajax yourself. I’ve even written the code for you 🙂 See below for the code that you can add to your theme’s functions.php file. But before we get into that, here are some IMPORTANT NOTES.
- BACKUP your
functions.phpfile before making any edits! If you make a mistake, it will take down your entire site and you’ll need to restore your backup of this file. - The best place to put this code is right after the opening
<?phpthat should be at the top of the file - The way this will work is that you replace the original HD Quiz shortcode, with this new one
[hd_quiz_ajax quizid = "XXX"]replacingXXXwith the ID of your quiz. - I haven’t fully tested this with every combination of addons and settings, but it should work for most things.
- This looks like a lot of code, but most of it is just reprinting the local vars on the page since they won’t be able to be grabbed via ajax.
Pastebin:
// tell HD Quiz to not redirect to the same page
define("HDQ_REDIRECT", false);
// Add new ajax shortcode
function hd_quiz_ajax($atts)
{
// Attributes
$atts = shortcode_atts(
array(
'quizid' => '0',
),
$atts
);
ob_start();
// make sure style sheet and script files are printed on the page
wp_enqueue_style(
'hdq_admin_style',
plugins_url('hd-quiz/includes/css/hdq_style.css?'),
array(),
HDQ_PLUGIN_VERSION
);
wp_enqueue_script(
'hdq_admin_script',
plugins_url('hd-quiz/includes/js/hdq_script.js?'),
array('jquery'),
HDQ_PLUGIN_VERSION,
true
);
// redo the local vars since they won't be printed via the ajax
$quiz_ID = intval($atts["quizid"]); // quiz ID from shortcode
$quiz_name = get_term($quiz_ID, "quiz");
$quiz_name = $quiz_name->name;
$quiz_settings = get_hdq_quiz($quiz_ID);
$hdq_settings = hdq_get_settings();
// if we should display ads
$use_adcode = false;
$hdq_adcode = hdq_decode(hdq_decode($hdq_settings["hd_qu_adcode"]["value"]));
if ($hdq_adcode != "" && $hdq_adcode != null) {
$hdq_adcode = apply_filters("the_content", stripcslashes(urldecode($hdq_adcode)));
$use_adcode = true;
}
$legacy_scroll = false;
if (isset($hdq_settings["hd_qu_legacy_scroll"]["value"]) && $hdq_settings["hd_qu_legacy_scroll"]["value"][0] == "yes") {
$legacy_scroll = true;
}
$hdq_featured_image = "";
$hdq_twitter_handle = $hdq_settings["hd_qu_tw"]["value"];
$hide_questions = "";
if (isset($quiz_settings["hide_questions"]["value"][0])) {
$hide_questions = $quiz_settings["hide_questions"]["value"][0];
}
$finish = "Finish";
if (!isset($hdq_settings["hd_qu_finish"]) || $hdq_settings["hd_qu_finish"]["value"] !== "") {
$finish = $hdq_settings["hd_qu_finish"]["value"];
}
$next = "Next";
if (!isset($hdq_settings["hd_qu_next"]) || $hdq_settings["hd_qu_next"]["value"] !== "") {
$next = $hdq_settings["hd_qu_next"]["value"];
}
$results = "Results";
if (!isset($hdq_settings["hd_qu_results"]) || $hdq_settings["hd_qu_results"]["value"] !== "") {
$results = $hdq_settings["hd_qu_results"]["value"];
}
$translations = array(
"finish" => $finish,
"next" => $next,
"results" => $results,
);
// create object for localized script
$hdq_local_vars = new \stdClass();
$hdq_local_vars->hdq_quiz_id = $quiz_ID;
$hdq_local_vars->hdq_timer = $quiz_settings["quiz_timer"]["value"];
$hdq_local_vars->hdq_timer_question = $quiz_settings["quiz_timer_question"]["value"][0];
$hdq_local_vars->hdq_show_results = $quiz_settings["show_results"]["value"][0];
$hdq_local_vars->hdq_results_correct = $quiz_settings["show_results_correct"]["value"][0];
$hdq_local_vars->hdq_show_extra_text = $quiz_settings["show_extra_text"]["value"][0];
$hdq_local_vars->hdq_show_results_now = $quiz_settings["show_results_now"]["value"][0];
$hdq_local_vars->hdq_stop_answer_reselect = $quiz_settings["stop_answer_reselect"]["value"][0];
$hdq_local_vars->hdq_pass_percent = $quiz_settings["quiz_pass_percentage"]["value"];
$hdq_local_vars->hdq_share_results = $quiz_settings["share_results"]["value"][0];
$hdq_local_vars->hdq_hide_questions = $hide_questions;
$hdq_local_vars->hdq_legacy_scroll = $legacy_scroll;
$hdq_local_vars->hdq_quiz_permalink = get_the_permalink();
$hdq_local_vars->hdq_twitter_handle = $hdq_twitter_handle;
$hdq_local_vars->hdq_quiz_name = $quiz_name;
$hdq_local_vars->hdq_ajax = admin_url('admin-ajax.php');
$hdq_local_vars->hdq_featured_image = $hdq_featured_image;
$hdq_local_vars->hdq_use_ads = $use_adcode;
$hdq_local_vars->hdq_submit = array();
$hdq_local_vars->hdq_init = array();
$hdq_local_vars->hdq_translations = $translations;
$hdq_local_vars->hdq_share_text = $hdq_settings["hd_qu_share_text"]["value"];
do_action("hdq_submit", $hdq_local_vars); // add functions to quiz complete
do_action("hdq_init", $hdq_local_vars); // add functions to quiz init
$hdq_local_vars = json_encode($hdq_local_vars);
wp_localize_script('hdq_admin_script', 'hdq_local_vars', array($hdq_local_vars));
?>
<div id="hd_quiz_ajax"><!-- quiz will load here --></div>
<script>
// use ajax to grab quiz content
function hd_quiz_ajax_loader() {
const quizid = <?php echo $quiz_ID; ?>;
const ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
jQuery.ajax({
type: "POST",
data: {
action: "hdq_quiz_ajax_print",
quizid: quizid,
},
url: ajaxurl,
success: function(data) {
document.getElementById("hd_quiz_ajax").innerHTML = data;
HDQ.EL = {
quizzes: document.getElementsByClassName("hdq_quiz"),
results: document.getElementsByClassName("hdq_results_wrapper")[0],
questions: document.getElementsByClassName("hdq_question"),
next: document.getElementsByClassName("hdq_next"),
finish: document.getElementsByClassName("hdq_finsh_button"),
answers: document.getElementsByClassName("hdq_option"),
loading: document.getElementsByClassName("hdq_loading_bar")[0],
jPaginate: document.getElementsByClassName("hdq_jPaginate_button"),
};
HDQ.init(); // initialize the quiz now that it's on the page
HDQ.EL.quizzes[0].style.display = "block";
console.log(HDQ.EL.quizzes[0])
},
error: function() {
console.log("HDQuiz ajax error")
}
});
}
window.onload = hd_quiz_ajax_loader;
</script>
<?php
$html = ob_get_clean();
return $html;
}
add_shortcode('hd_quiz_ajax', 'hd_quiz_ajax');
// return the quiz content + local vars
function hdq_quiz_ajax_print()
{
$quizid = intval($_POST["quizid"]);
echo do_shortcode('[HDquiz quiz = "' . $quizid . '"]');
die();
}
add_action('wp_ajax_hdq_quiz_ajax_print', 'hdq_quiz_ajax_print');
add_action('wp_ajax_nopriv_hdq_quiz_ajax_print', 'hdq_quiz_ajax_print');