showing feedback with additional text after each question

Wanted to bump this up for any ideas? Thanks!

https://www.qualtrics.com/community/discussion/comment/32948#Comment_32948You probably haven't gotten any responses because your question isn't very clear. An image might help. Also, addOnload and addOnReady are always called. There is probably a problem with your JS. If you are asking for help with JS, you should post your code.

The functions are not called, because a new page is not being called. Just the dom is being modified. This JS will work for feedback that is displayed after the question.
Qualtrics.SurveyEngine.addOnReady(function () {
    document.querySelector("#NextButton").addEventListener("click", grading_text);
    qid = this.questionId;


    function grading_text(){
        var gt = setInterval(function (){
            if(document.getElementById(qid).className == "Grading"){
                document.querySelector(".GradingQuestionText.BorderColor").innerText += "\\n text to add"
                clearInterval(gt);
            }
        },100)
    }
});

To user: ahmedA
This is exactly what i was looking for. How to add the text to class .GradingQuestionText.BorderColor (upon inspection, thats the new class that gets added on the feedback page.)
I just didnt know which event to call so that i can modify/append the existing text.
I will try this and get back to you.
To User: Tom.
I agree that the picture would help clarifying the question. I will see if i can add an image that explains my question in a much better way.

The following code works first time when clicking the next button.
After answering the question, user presses the next button. This triggers the listener to append the feedback text and this text is appended to the existing question text.
Now after seeing this new feedback on the scoring page, if the user presses the back button, and then chooses a different answer and then clicks the next button, then the feedback text is not being added.

Qualtrics.SurveyEngine.addOnReady(function()
{
document.querySelector("#NextButton").addEventListener("click", grading_text);
  qid = this.questionId;
  var feedbackText = "My feedback Text";
    var gt = setInterval(function (){
      if(document.getElementById(qid).className == "Grading"){
        document.querySelector(".GradingQuestionText.BorderColor").innerText += feedbackText;
        clearInterval(gt);
      }
    },100)
  }
});

https://www.qualtrics.com/community/discussion/comment/32959#Comment_32959its surprising that it is even working the first time because you haven't defined the function which is supposed to execute onclick.

Ahmed.
I probably missed copying that line of code in the editor. Whats the best way for this function to get triggered if user goes back and then clicks the next button ?
Here is the actual code
Qualtrics.SurveyEngine.addOnReady(function () {
    document.querySelector("#NextButton").addEventListener("click", grading_text);
    qid = this.questionId;


    function grading_text(){
        var gt = setInterval(function (){
            if(document.getElementById(qid).className == "Grading"){
                document.querySelector(".GradingQuestionText.BorderColor").innerText += "Additional Text"
                clearInterval(gt);
            }
        },100)
    }
});

Also, i tried the following as well. The next does gets called, but the new text does not appear the second time.
Qualtrics.SurveyEngine.addOnPageSubmit(function(type)
{

if(type == "next")
{

  alert("here");
//document.querySelector("#NextButton").addEventListener("click", grading_text);
  qid = this.questionId;
  var addltext= "hello this is a new text";
grading_text();
  function grading_text(){
    var gt = setInterval(function (){
      if(document.getElementById(qid).className == "Grading"){
        document.querySelector(".GradingQuestionText.BorderColor").innerText += addltext;
        clearInterval(gt);
      }
    },100)
  }
}
});

I pasted the first code. And it's working no matter how many times I do back and next. So, there's a possibility that the issue may lie with your browser.
I modified the code a bit to add a random string, so it's still working. You can also try this, to check where the problem lies:
Qualtrics.SurveyEngine.addOnReady(function () {
    document.querySelector("#NextButton").addEventListener("click", grading_text);
    qid = this.questionId;
    function grading_text(){
        var gt = setInterval(function (){
console.log("not yet");

            if(document.getElementById(qid).className == "Grading"){
r = Math.random().toString(36).substring(7);
console.log(r);
                document.querySelector(".GradingQuestionText.BorderColor").innerText +="\\n"+ r;
                clearInterval(gt);
            }
        },100)
    }
});
On a general note, these kind of debugging scenarios require that you provide as much information as possible. What kind of question are you using? Are you using carry forward choices etc. etc. Since, the backend is close a black box, if I can't exactly replicate what you are doing, I won't encounter the problems you face.
PS: The

setInterval 

The Grading page is a new page. You can add an addOnload function to the Look & Feel header to reformat it with JS. I believe at least one reason the setInterval() approach is problematic is because the clearInterval(gt) function fails due to the scope of gt. I haven't tried it, but I think gt is undefined by the time clearInterval() is executed.

I tried the above code , but cannot make it to work the second time the user goes back and then clicks next. I copied the exact code you have.
I created a brand new simple question with 3 possible choices. Set score to 1 for the first choice. Add javascript to that question with the code above.
I have attached images that hopefully helps in troubleshooting. Second time i do see an error in the console log.
As far as the other approach, can you elaborate where should the javascript be placed.
If i add a code on the addOnLoad page, its not being called when the grading page loads. 

To add JS to the Look & Feel header, edit the header in source mode (<>) and add the script inside a

If i comment the line below (and the corresponding brace)
//if(document.getElementById(qid).className == "Grading"){
i can see the text now if the user navigates back and forth. So is that line necessary?
Thanks!

Screengrab.ziphttps://www.qualtrics.com/community/discussion/comment/32987#Comment_32987I'm using the code here. You can see the screen grab to see that it's working.

https://www.qualtrics.com/community/discussion/comment/32998#Comment_32998Let's see the flow of the code. After one clicks the next button, the function checks the class of the element

qid

grading

.GradingQuestionText.BorderColor

I put a console.log(qid) after this line var qid=this.questionId
It outputs the value when i first enter the question.
However its null, if user clicks the next button, sees the grading page and then comes back to the question page by clicking the back button. 
Not sure why the questionId is null when the back button is pressed. 

https://www.qualtrics.com/community/discussion/comment/33009#Comment_33009Sorry can't replicate this problem. Try with different browsers, turn off any ad blockers that you have.

qid 

qid

gt

I created a brand new survey with just one question in it. Still getting the same null id issue.
Also TomG I added a piece of code in the look and feel section as you had mentioned (i tried in both places onready and onload)
Unfortunately i still get qid as null.
Qualtrics.SurveyEngine.addOnload(function()
{
 var qid = this.questionId;
 console.log(qid);
});
Qualtrics.SurveyEngine.addOnReady(function()
{
 var qid = this.questionId;
 console.log(qid);
});

https://www.qualtrics.com/community/discussion/comment/33012#Comment_33012I'm a little confused about the scope issue.

gt 

qid

this 

addOnload 

qid 

That’s because addOnload (or addOnReady) is not associated with a specific question when added to the header.

What would be the way to make this work then? I guess i dont follow your second approach.

https://www.qualtrics.com/community/discussion/comment/33016#Comment_33016You don't need the question object (this) to find the elements you are interested in. For example, to find all the graded questions on a page, you could do this:
var gqs = jQuery(".Grading");

https://www.qualtrics.com/community/discussion/comment/33014#Comment_33014When you use var X in a function, that variable is local to the function. If there is a function within that parent function then X is global in the child function. In the setInterval example, both qid and gt are global in the setInterval anonymous function (i.e., the function that is the first argument of setInterval). I believe what is happening is that while the setInterval function continues to run the parent function that is local to the page goes away when pages are switched and that results in the global variables being null.