Best answer by Anonymous
View original
A code for a pop-over or pop-up window to prompt participants to check their answers
Hi, I am trying to do a pop-up or pop-over in one question to prompt participants to check their answers before moving on. This window or intercept should come up when they press next for to move onto the next question. Appreciate it if I can be directed to a question or discussion thread related to this or any help with codes are greatly appreciated! Thanks!
Userlevel 7
+33
if this is non mandatory question, choose request response rather than force response, if respondent move forward without answering it will display popup.
if it is forced, you can use trigger question on same page.
if it is forced, you can use trigger question on same page.
Hi! Thanks for the help! But I need to customize the message in the pop-up box. Sorry one more question (relatively new to this), what is a trigger question? Tried searching under qualtrics but can't get any information out.
Userlevel 7
+33
1.) just add one question below your main question without giving page break.Like "Are you sure, your answer to this question are correct? Yes No.
2.) Add display logic on this question that it appear for any selection in your main question and select "in page" like in below my q29 is trigger and will appear for any selection in q28 and i will ask if answers are correct.!
3.) if the select No, show your main question again or ask with in same question to change answers.
2.) Add display logic on this question that it appear for any selection in your main question and select "in page" like in below my q29 is trigger and will appear for any selection in q28 and i will ask if answers are correct.!
3.) if the select No, show your main question again or ask with in same question to change answers.
A
Hello @Xxtan ;
For this, we need a fake next button to make popover.
Step 1: Paste the following code in the look and feel -> advanced -> add custom css
#CustomButton{
border: none;
color: #fff;
font-size: 16px;
padding: 8px 20px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
cursor: pointer;
margin: 0;
text-align: center;
text-decoration: none;
-webkit-appearance: none;
transition: background .3s;
background-color: #c32432;
}
Step 2: Paste the following code in the js(onready) of the question for which you want the popover:
const that=this;
this.hideNextButton();
var btn = jQuery('<div id="Buttons"><input id="CustomButton" class="NextButton Button" title=" Next " type="button" name="NextButton" value=" Next " aria-label="Next"></div>')
jQuery('#Buttons').append(btn);
jQuery('#CustomButton').on('click', function(){
var txt;
var e= jQuery("[id='QR~QID1']").val()
var r = confirm("Please check your email address "+e); //design your question here
if (r == true) {
that.clickNextButton();
} else {
}
});
Now in the above code, we are confirming the email address of the user through open text, fetching of response for the question will differ with question type.
Output:
!
For this, we need a fake next button to make popover.
Step 1: Paste the following code in the look and feel -> advanced -> add custom css
#CustomButton{
border: none;
color: #fff;
font-size: 16px;
padding: 8px 20px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
cursor: pointer;
margin: 0;
text-align: center;
text-decoration: none;
-webkit-appearance: none;
transition: background .3s;
background-color: #c32432;
}
Step 2: Paste the following code in the js(onready) of the question for which you want the popover:
const that=this;
this.hideNextButton();
var btn = jQuery('<div id="Buttons"><input id="CustomButton" class="NextButton Button" title=" Next " type="button" name="NextButton" value=" Next " aria-label="Next"></div>')
jQuery('#Buttons').append(btn);
jQuery('#CustomButton').on('click', function(){
var txt;
var e= jQuery("[id='QR~QID1']").val()
var r = confirm("Please check your email address "+e); //design your question here
if (r == true) {
that.clickNextButton();
} else {
}
});
Now in the above code, we are confirming the email address of the user through open text, fetching of response for the question will differ with question type.
Output:
!
Userlevel 7
+20
Through jQuery and CSS you can also create a customized pop-up. Which will ask for the confirmation? Something like below.
!
Show the custom pop-up only at those place where you want the user to double check their response or if the user misses answering the question.
!
Show the custom pop-up only at those place where you want the user to double check their response or if the user misses answering the question.
> @Mohammedali_Rajapakar_Ugam said:
> Through jQuery and CSS you can also create a customized pop-up. Which will ask for the confirmation? Something like below.
>
> !
>
> Show the custom pop-up only at those place where you want the user to double check their response or if the user misses answering the question.
>
Yes! this is what I need, how do I get or create the code?
> Through jQuery and CSS you can also create a customized pop-up. Which will ask for the confirmation? Something like below.
>
> !
>
> Show the custom pop-up only at those place where you want the user to double check their response or if the user misses answering the question.
>
Yes! this is what I need, how do I get or create the code?
> @Shashi said:
> Hello @Xxtan ;
>
> For this, we need a fake next button to make popover.
>
> Step 1: Paste the following code in the look and feel -> advanced -> add custom css
>
> #CustomButton{
> border: none;
> color: #fff;
> font-size: 16px;
> padding: 8px 20px;
> -webkit-border-radius: 4px;
> -moz-border-radius: 4px;
> -ms-border-radius: 4px;
> -o-border-radius: 4px;
> border-radius: 4px;
> cursor: pointer;
> margin: 0;
> text-align: center;
> text-decoration: none;
> -webkit-appearance: none;
> transition: background .3s;
> background-color: #c32432;
> }
>
> Step 2: Paste the following code in the js(onready) of the question for which you want the popover:
>
> const that=this;
> this.hideNextButton();
> var btn = jQuery('<div id="Buttons"><input id="CustomButton" class="NextButton Button" title=" Next " type="button" name="NextButton" value=" Next " aria-label="Next"></div>')
> jQuery('#Buttons').append(btn);
>
> jQuery('#CustomButton').on('click', function(){
> var txt;
> var e= jQuery("[id='QR~QID1']").val()
> var r = confirm("Please check your email address "+e); //design your question here
> if (r == true) {
> that.clickNextButton();
> } else {
>
> }
>
> });
>
> Now in the above code, we are confirming the email address of the user through open text, fetching of response for the question will differ with question type.
>
> Output:
> !
>
Thank you so much!!!
> Hello @Xxtan ;
>
> For this, we need a fake next button to make popover.
>
> Step 1: Paste the following code in the look and feel -> advanced -> add custom css
>
> #CustomButton{
> border: none;
> color: #fff;
> font-size: 16px;
> padding: 8px 20px;
> -webkit-border-radius: 4px;
> -moz-border-radius: 4px;
> -ms-border-radius: 4px;
> -o-border-radius: 4px;
> border-radius: 4px;
> cursor: pointer;
> margin: 0;
> text-align: center;
> text-decoration: none;
> -webkit-appearance: none;
> transition: background .3s;
> background-color: #c32432;
> }
>
> Step 2: Paste the following code in the js(onready) of the question for which you want the popover:
>
> const that=this;
> this.hideNextButton();
> var btn = jQuery('<div id="Buttons"><input id="CustomButton" class="NextButton Button" title=" Next " type="button" name="NextButton" value=" Next " aria-label="Next"></div>')
> jQuery('#Buttons').append(btn);
>
> jQuery('#CustomButton').on('click', function(){
> var txt;
> var e= jQuery("[id='QR~QID1']").val()
> var r = confirm("Please check your email address "+e); //design your question here
> if (r == true) {
> that.clickNextButton();
> } else {
>
> }
>
> });
>
> Now in the above code, we are confirming the email address of the user through open text, fetching of response for the question will differ with question type.
>
> Output:
> !
>
Thank you so much!!!
Hi,
is there any database where I could look up the language for Qualtrics and JS?
I would like to use this to ask if my participants really want to go with the answer they clicked... So answer a or b in a multiple choice question. However, I don't know how I can tell JS to go and pick up the answer that the participant selected and display it instead of the value as used in this example.
Thank you!
is there any database where I could look up the language for Qualtrics and JS?
I would like to use this to ask if my participants really want to go with the answer they clicked... So answer a or b in a multiple choice question. However, I don't know how I can tell JS to go and pick up the answer that the participant selected and display it instead of the value as used in this example.
Thank you!
> @Mohammedali_Rajapakar_Ugam said:
> Through jQuery and CSS you can also create a customized pop-up. Which will ask for the confirmation? Something like below.
>
> !
>
> Show the custom pop-up only at those place where you want the user to double check their response or if the user misses answering the question.
>
Hi I need a set up exactly like this. Please advise on the code. Thanks.
> Through jQuery and CSS you can also create a customized pop-up. Which will ask for the confirmation? Something like below.
>
> !
>
> Show the custom pop-up only at those place where you want the user to double check their response or if the user misses answering the question.
>
Hi I need a set up exactly like this. Please advise on the code. Thanks.
Userlevel 4
+4
> @Mohammedali_Rajapakar_Ugam said:
> Through jQuery and CSS you can also create a customized pop-up. Which will ask for the confirmation? Something like below.
>
> !
>
> Show the custom pop-up only at those place where you want the user to double check their response or if the user misses answering the question.
>
Hi @Mohammedali_Rajapakar_Ugam,
It would be really cool if you can indeed share your code with us.
Thanks in advance.
> Through jQuery and CSS you can also create a customized pop-up. Which will ask for the confirmation? Something like below.
>
> !
>
> Show the custom pop-up only at those place where you want the user to double check their response or if the user misses answering the question.
>
Hi @Mohammedali_Rajapakar_Ugam,
It would be really cool if you can indeed share your code with us.
Thanks in advance.
Hello Mohammedali_Rajapakar_Ugam or Xxtan, did any of you get the code for what Mohammedali_Rajapakar_Ugam had?
Leave a Reply
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.