Can I create a hyperlink that leads to the next page and track whether participants click this link or the next button in the right down corner?

You can use css, HTML and JS on the question page. create fake hyper link using CSS and html and apply JS to trigger next button.

<style>
#NextButton{
display: none;
}
.fake-link {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}
</style>

<div class="fake-link" id="linkH">click here</div>

jQuery("#linkH").click(function(){
jQuery("#linkH").css("color", "purple");
jQuery("#NextButton").trigger('click');
});

Hi Arun,

Thanks for your response! Where would I insert these codes? 

And just to check: does this result in the word 'here' being clickable and that clicking on it leads to the next page of the questionnaire? And does the arrow at the bottom right also remain for clicking through? And is a value assigned to clicking on the word 'here' (=1) or the arrow (=0)?

Best,

Fleur

paste <style> and <div> codes under question text html view.
 

and jQuery code under javascript addOnLoad() function. refer below screenshot.

Q1: does this result in the word 'here' being clickable and that clicking on it leads to the next page of the questionnaire? Currently it is considering “Click here” instead of here. you can move out “click” word from div tag and then functionality will work on “here”.

Q2: And does the arrow at the bottom right also remain for clicking through? if you will remove below css from style tag then next button will also appear. and respondent can click either “here" text or “arrow” button to advance current page.

#NextButton{ display: none; }

Q3: And is a value assigned to clicking on the word 'here' (=1) or the arrow (=0)? [then you  should create one embedded field in survey flow and set it’s value as 0, and you can set value on embedded field after click on “here” as 1. So if someone will click next button then hyperlink will not click and value will be shown as 0, if hyperlink will be clicked the value will be shown as 1. please ignore previous codes and refer below one.]

embedded field in survey flow:

HTML:

<div class="fake-link" id="linkH">here</div>

CSS:

<style>
.fake-link {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}
</style>

JS:

jQuery("#linkH").click(function(){
	jQuery("#linkH").css("color", "purple");
	Qualtrics.SurveyEngine.setEmbeddedData("Click_Hyperlink", "1");
jQuery("#NextButton").trigger('click');
});

Hi Arun,

Thanks again for helping! 

Inserting the clickable link at the word 'here' succeeded using the <div> and <style> code. 

Just to check: what is the full Javascript I need to insert at the relevant question to both trigger that clicking the link or arrow redirects to the next question and I can measure which way the participants got to the next page (via link = 1 and via arrow = 0)? Or are they two separate scripts? If so can you explain specifically which script should go where? I'm really a layman when it comes to javascript and Custom Code, so hence I need a little more explanation.…

Best,

Fleur

See it’s a full JS for click forward and setting up embedded data value as 1 if hyperlink will be clicked. Make sure to create one embedded field in survey flow “Click_Hyperlink” and set its value as 0 as mentioned in my previews comment. below you can see comment on each line code which is describing the functionality of whole script.

jQuery("#linkH").click(function(){
	jQuery("#linkH").css("color", "purple"); // it's css to change the color of 'here' text after click.
	Qualtrics.SurveyEngine.setEmbeddedData("Click_Hyperlink", "1"); // here we are setting embedded field value as Click_Hyperlink=1 
jQuery("#NextButton").trigger('click'); // here we are auto forwarding to next page after clicking on hyperlink.
});

Just to avoid any confusion. please refer below. you can paste JS like this.

Do I just place the embedded field under the block where people click on the link or the arrow, like this (the screenshot is in Dutch, but the green block is the ED and the one above is the clicking ‘question’): 

Embedded field implementation should be at the top of the survey flow because survey flow runs from top to bottom.

I ran my survey but unfortunately it did not work. The word ‘hier’ was not clickable and hence did not lead to the next page of the survey.

Also the factor ‘clicked’ had no value when I checked my data.

Here is a sceenshot of everything I did in order to make it work. Could you tell me what I am doing wrong?

1. HTML on the question where I want the word ‘hier’ to be clickable as a false link that directs participants to the next page:

2. 

   Javascript attached to the question as presented above:

3. 

   Embedded data as first block of the surveyflow

Do you know what I am doing wrong?

I see that Click_hyperlink was recorded, but the value is 0 and I did try to click on the word ‘hier’. So I guess that the fake link on the word ‘hier’ is not working. 

please do not insert <div> tag under <a> remove a tag. and replace it with my div html code. Also please confirm which layout you are using?

Can you tell me what step you are referring to (1 or 2) and provide me again with the right code. Maybe it helps if I send you what the viewable text must be? That is:

“Bent u benieuwd naar de reisinformatie van de Reisapp?

Klik hier om de Reisapp te downloaden!

Indien u de link opent op een desktop, wordt u doorverwezen naar de reisinformatie op nederlandwereldwijd.nl”

And in this text, it want the word ‘hier’ to be clickable. Based on this, what is the complete text I need to paste as html code for this block?

I’m not sure what you mean by ‘layout’, where can I find which layout I am using?

Thanks in advance!

Use this text. Make sure to paste it under HTML view in question text.

“Bent u benieuwd naar de reisinformatie van de Reisapp?

Klik <div class="fake-link" id="linkH">hier</div> om de Reisapp te downloaden!

Indien u de link opent op een desktop, wordt u doorverwezen naar de reisinformatie op nederlandwereldwijd.nl”

Regarding layout: go to look and feel > Layout, then see which layout is selected.

When using the text you provided, I got weird spacing between ‘klik’ and ‘hier’ and between ‘hier’ and ‘om’. So I changed the HTML into this:

<p>Bent u benieuwd naar de reisinformatie van de Reisapp?</p>
<p>Klik <span class="fake-link" id="linkH">hier</span> om de Reisapp te downloaden!</p>
<p>Indien u de link opent op een desktop, wordt u doorverwezen naar de reisinformatie op nederlandwereldwijd.nl.</p>

<style type="text/css">.fake-link {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}
</style>

When testing the survey, this worked! The ‘hier’ looks like a link and is clickable. However, clicking it does not lead to the next page of the survey and when I click it this does not lead to ‘Clicked_Hyperlink’ being valued as ‘1’. Could it be that the id of ‘next button’ is not correct in this Javascript code as my settings are in Dutch?

My layout setting is ‘Simple’ and the text on the next button is ‘Volgende pagina’ as seen in the screenshots below

Yesss!! I works!! Thank you so much Arun, you are my hero!

Glad, your problem is resolved. Please mark you issue solved now. All the best! Thanks!!

Hi Arun,

When I tested my survey this morning, unfortunately clicking on the link did not result in going to the next page anymore. I did not change anything in my survey, except that I published it and I added another block of questions. Do you have any idea what is going wrong here?

I added a screenshot of the Javascript and HTML of the question text. 

When I add the HTML text as you sent me in an earlier message, it changes it to the text in my screenshot. It looks like it removes this part itself:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <style>

Do you have any idea what I can do?

Thanks so much in advance!

Best,

Fleur

If happens only you edit texts in normal view. if you have removed the additional next line or space from below text edit view them you can lose your custom scripting. 

Better you can add JS library in your survey header. Follow below path and screenshot.

Copy »      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

click on Look and Feel » General » Header edit

Click on source, then paste it in html note pad.

Publish the survey and test it before go live.

Thanks.

Hi Arun,

It worked. Thank you so so much again. 

Have a good day!

Best,

Fleur

Glad to hear that, Fleur! All the best!!