Complete sentence with text button | XM Community
Skip to main content

Hey, im trying to make a survey but having problems. I will describe my problem as good as possible. 

What I want is that when participants click on next page button they immediatly see a sentence without the last word. I want to have a button they can click so that the sentence completes itself, I would like to have it in the same place but it is okay if this doesnt work. Then I want also that the multiple choice options true and false come in the screen. 

 

So: sentence without last word → click → last word & multiple choice answers. 

 

Im trying my best but can’t get it to work, does anyone have any ideas to do this?

Made a typo in the title, I mean ‘Complete sentence with next button’


Hi,

Can you please try this:

Q1 text: Complete my <span class="hidd">text</span>

 

Q1: js 

function FnAddFakeButtons(){
    jQuery("#NextButton").css("visibility","hidden");
    var fakeNextButton = "<span class='fakeNextButton' id='"+jQuery('#NextButton').attr('id')+"'  value='"+jQuery("#NextButton").attr("value")+"' title='"+jQuery("#NextButton").attr("title")+"'>"+jQuery("#NextButton").attr("value")+"</span>";
    if (jQuery(".fakeNextButton").length == 0){
        jQuery("#Buttons").append(fakeNextButton);
    }
}

Qualtrics.SurveyEngine.addOnload(function()
{
    /*Place your JavaScript here to run when the page loads*/

});

Qualtrics.SurveyEngine.addOnReady(function()
{
    /*Place your JavaScript here to run when the page is fully displayed*/
    jQuery(".QuestionOuter").eq(-1).css("visibility","hidden")
    jQuery(".hidd").css("display","none")
    
    FnAddFakeButtons()
    var click_count=0
    jQuery(".fakeNextButton").click(function()    {
    click_count=click_count+1
    jQuery(".QuestionOuter").eq(-1).css("visibility","visible")
    jQuery(".hidd").css("display","inline")
    console.log("click_count",click_count)
    if(click_count>1){
            jQuery("#NextButton").click();
        }    
    });

});

Qualtrics.SurveyEngine.addOnUnload(function()
{
    /*Place your JavaScript here to run when the page is unloaded*/

});

 

Let me know if that's what you were looking for. I there is something more please do out.


Hi @iris1200 ,

If I understand your requirement  correctly , you would like below structure  and functionality:
 

Add below HTML:

Click to write the question text <span id="test" style="display:none">word</span>
<br/>
<button id="bt">Click me to reveal the word</button>

And below JS to the question :

Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/

});

Qualtrics.SurveyEngine.addOnReady(function()
{
let btn=document.getElementById("bt")

let word=document.getElementById("test");

let choiceStr=document.querySelector(".ChoiceStructure");
choiceStr.style.display="none";

btn.addEventListener("click",function() {
word.style.display="initial";
choiceStr.style.display="initial";
})
});

Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/

});

It will do following :
Before button click:
 

After button Click :
 



Hope this resolves your query😊!!


@qualtrics_nerd  Thank you so much for your answer. This is exactly what I was looking for. It works perfectly. My only question is, I want the ‘click me’ button gone after revealing the word, it can be confusing for people when its still there and no word showing up. Sorry for the delay in my answer but Im very thankful! 


Hi @iris1200 ,

The html code will be the same .
Please find updated JS code to hide the Button after click.
 

Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/

});

Qualtrics.SurveyEngine.addOnReady(function()
{
let btn=document.getElementById("bt")

let word=document.getElementById("test");

let choiceStr=document.querySelector(".ChoiceStructure");
choiceStr.style.display="none";

btn.addEventListener("click",function() {
word.style.display="initial";
choiceStr.style.display="initial";
btn.style.display="none";
})
});

Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/

});

Hope this resolves your query😊!!


@qualtrics_nerd You are amazing!! It’s exactly what I wanted. Thanks!! 😁


Leave a Reply