All Collections
Quizzes
Frequently Asked Questions
How do I show quiz score on an external Thank You Page?
How do I show quiz score on an external Thank You Page?

An advanced topic!

Kaisa Kokkonen avatar
Written by Kaisa Kokkonen
Updated over a week ago

We always recommend using the built in DilogR Thank You Page if you want to display a person’s quiz score and other information like custom recommendations.

BUT

If you really want to send quiz takers to a separate thank you page like a page hosted by clickfunnels or leadpages, etc. you can pass the quiz score to the next page and display the quiz score there. This will work if you are using the DilogR advanced scored quiz.

To do this you will need to:

  • Use a merge field on your thank you page

  • Copy some javascript from this training post and paste it in the footer of your thank you page (where you would place other tracking javascript like google analytics tracking script)

  • Modify some settings in your DilogR Quiz Thank You Page.

Step 1:

On your externally hosted thank you page insert the merge field {QuizScore} wherever you would like the quiz score to appear. This page can be hosted wherever you like (wordpress, LeadPages, ClickFunnels, etc.)

For example, if I wanted my thank you page to say, “Your Personal Score is: 55” or “Your Personal Score is: 142” or whatever their personal score is I would include this text on my thank you page:

Your Personal Score is: {QuizScore}

Example:

 

Step 2:

In the footer of your externally hosted thank you page insert the following Javascript:

<script type=”text/javascript”>
(function( window, undefined ){
var $dilogr = function(){
this.init();
}
$dilogr.prototype.init = function(){
}
$dilogr.prototype.getParticipantResult = function(name){
name = name.replace(/[\[]/, “\\[“).replace(/[\]]/, “\\]”);
var regex = new RegExp(“[\\?&]” + name + “=([^&#]*)”),
results = regex.exec(window.location.search);
return results === null ? “” : decodeURIComponent(results[1].replace(/\+/g, ” “));
}
$dilogr.prototype.htmlreplace = function(a, b, element) {
if (!element) element = document.body;
var nodes = element.childNodes;
for (var n=0; n<nodes.length; n++) {
if (nodes[n].nodeType == 3) {
var r = new RegExp(a, ‘gi’);
if (nodes[n].textContent) {
nodes[n].nodeValue = nodes[n].textContent.replace(r, b);
} else {
nodes[n].nodeValue = nodes[n].nodeValue.replace(r,b);
}
} else {
this.htmlreplace(a, b, nodes[n]);
}
}
}
$dilogr.prototype.replaceParticipantResults = function(name, querySelector){
var value = this.getParticipantResult(name);
if(typeof value === ‘undefined’ || value.length == 0){
return;
}
if(typeof querySelector === ‘undefined’){
this.htmlreplace(“{“+name+”}”, value);
}else{
try{
var nodeList = document.querySelectorAll(querySelector);
var nodesLength = nodeList.length;
for(var j=0; j<nodesLength; j++){
this.htmlreplace(“{“+name+”}”, value, nodeList[j]);
}
}catch (e){
}
}
var argsLength = arguments.length;
for(var i = 2; i<argsLength; i++){
var nodeList = document.querySelectorAll(arguments[i]);
var nodesLength = nodeList.length;
if(nodesLength == 0){
this.htmlreplace(arguments[i], text);
}else{
for(var j=0; j<nodesLength; j++){
nodeList[j].innerHTML = text;
}
}
}
}
window.$dilogr = new $dilogr();
})(window);
$dilogr.replaceParticipantResults(“QuizScore”);
</script>

 

Here is an example of where you would place this code on a page using ClickFunnels:

 

Advanced option (NOT REQUIRED):

The Javascript above will search your page for {QuizScore} and replace that text with the actual score that the person got.

You can alter the Javascript slightly so that the Javascript doesn’t scan the whole page looking for {QuizScore}

You can insert the CSS id or CssSelector into the Javascript to tell the Javascript exactly where to look for {QuizScore}

If you know how to find the id or CssSelector on your page you can insert that into the Javascript

See this page for more information about how CSS selectors work.

So for example, IF I include {QuizScore} on my page and I know that I included it where the id=#tmp_headline1-41902

I could alter the last line of the Javascript to:

$dilogr.replaceParticipantResults(“QuizScore”, “#tmp_headline1-41902”);

Instead of the default:

$dilogr.replaceParticipantResults(“QuizScore”);

This will increase the efficiency of the Javascript as the Javascript will not scan the entire page looking for {QuizScore}. It will only look for {QuizScore} at #tmp_headline1-41902

You do NOT need to do this last step. If you don’t know how to find the CssSelector then don’t worry about this.

 

Step 3:

In the DilogR admin for your quiz, you need to modify a couple of settings under “Customize -> Thank You Page”

Click Customize -> Thank You Page -> HTTP Request” (See image below)

Under the “HTTP request section” check the box that says, “Enable HTTP Request”

Scroll down to the bottom and Click “Save”

This will tell the DilogR Quiz to pass the quiz score on to your externally hosted thank you page.

Did this answer your question?