How to change quiz result message based on ranking level?

Hi Julie,

I’m attempting to change the Quiz Result Message based on the Ranking Level that the quiz taker gets. Since I couldn’t think of an easier way, I hooked into “slickquiz_after_result” and introduced some jQuery that grabs the h3.quizLevel class and shows the appropriate result.

I started by populating the “Result Copy” of the quiz with all the different messages:

<div id="result-level1">
  <p>This is the message you get if you score 81-100%</p>
</div>
<div id="result-level2">
  <p>This is the message you get if you score 61-80%</p>
</div>
<div id="result-level3">
  <p>This is the message you get if you score 41-60%</p>
</div>
<div id="result-level4">
  <p>This is the message you get if you score 21-40%</p>
</div>
<div id="result-level5">
  <p>This is the message you get if you score 0-20%</p>
</div>

I went into my CSS and hid all those divs by default:

#result-level1, #result-level2, #result-level3, #result-level4, #result-level5 {
	display: none;
}

Then I went into my child theme’s functions.php and set up a function to show each result if the right condition is met:

/**
* SlickQuiz - Change Result Message Based On Ranking Level
*/
function slickquiz_change_result_message() {
	$script = '<script>
		jQuery(document).ready(function($) {
			var className = $("h3.quizLevel").attr("class");
			switch(className){
	                        case "quizLevel level0":
					$("#result-level1").show();
					break;
				case "quizLevel level1":
					$("#result-level2").show();
					break;
				case "quizLevel level2":
					$("#result-level3").show();
					break;
				case "quizLevel level3":
					$("#result-level4").show();
					break;
				case "quizLevel level4":
					$("#result-level5").show();
					break;
		   }
		});
		</script>';
		echo $script;
}
add_action('slickquiz_after_result', 'slickquiz_change_result_message');

I tested this jQuery out with some hard-coded HTML:

<h3 class="quizLevel level0">Your Ranking:<span>Insert Ranking Here</span></h3>

And it worked as expected. However, when I added all the above code parts to the WordPress site, it won’t pick up the “levelX” part of the class. I’m thinking that this is because the level part of the class is generated dynamically.

Is there a way I can use a callback within SlickQuiz to trigger my jQuery after the level part of the class has been introduced? Or is there a better way to achieve what I’m looking for?

Thanks for your help,
Mike S

https://wordpress.org/plugins/slickquiz/