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!!