Using javascript to enter data into a table created using the rich content editor

Hi RElsdon ,

• You need to use parseInt() to get value from score .Can you please tell more as to where these scores coming from??


• You will need to update the value from textbox dynamically using JS as it will depend on value Respondents enters.


• For , storing value in your table to make it simple add and so on .Then you can use JS to update value inside it using innerText .


• You will also need to add event listener on your button to perform updation and calculation on click of button.

RElsdon ,
So , score value is dependent on previous question .
Respondent will not be able to change the value in score variable once they reach the present page??
They can just update the value in textbox(which will be auto-populated by score value) if yes then it will make the process much more easier.

RElsdon ,
Yes .that will be the way to move forward .Keep working on it.
Meanwhile ,I will also try to emulate to question structure at my end and will try to custom code to have desired result, at my end.

Hi RElsdon ,
I am using Below structure:
Add Below code in Html in Text/Graphic question in Qualtrics in Rich content editor HTML tab:

 
 
   
   
   
   
   
 
 
 
 
   
   
   
   
   
 
 
   
   
   
   
   
 
 
   
   
   
   
   
 
 
   
   
   
   
   
 
 
   
   
   
   
   
 
 

	Income Gained	Tax Rate for this Income             Range	Tax to Pay	After-Tax Inocme
0-10		0%
11-20		20%
21-30		30%
30+		40%
Total

Calculate Function

A paragraph

Calculate
Now add below JS in Qualtrics API of above question only(Text/Graphic) :
Here , update the value of "score" variable with
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
function Calc() {
    
 let text=document.querySelector("input[type=text]")
 
    let y1;


    let y=parseInt(text.value);
    let score=parseInt(" ${gr://SC_cT0uGBHILsp0UTQ/Score}  ")
if (y === 0) {
  y1 = 0;
} else {
  y1 = score - Math.floor((y - 1) / 10) * 10;
}
document.getElementById("y1").innerText=y1;
let y2;
if (y === 0) {
  y2 = 0;
} else {
  y2 = score - Math.floor((y - 1) / 10) * 10;
}
document.getElementById("y2").innerText=y2;
let y3;
if (y === 0) {
  y3 = 0;
} else {
  y3 = score - Math.floor((y - 1) / 10) * 10;
}
document.getElementById("y3").innerText=y3;
let y4;
if (y === 0) {
  y4 = 0;
} else {
  y4 = score - Math.floor((y - 1) / 10) * 10;
}
document.getElementById("y4").innerText=y4;


let y5=score;


document.getElementById("y5").innerText=y5;




 }

Calc();
});


Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/


function Calc() {
    
 let text=document.querySelector("input[type=text]")
 
    let y1;


    let y=parseInt(text.value);
    let score=parseInt(" ${gr://SC_cT0uGBHILsp0UTQ/Score}  ")
if (y === 0) {
  y1 = 0;
} else {
  y1 = score - Math.floor((y - 1) / 10) * 10;
}
document.getElementById("y1").innerText=y1;
let y2;
if (y === 0) {
  y2 = 0;
} else {
  y2 = score - Math.floor((y - 1) / 10) * 10;
}
document.getElementById("y2").innerText=y2;
let y3;
if (y === 0) {
  y3 = 0;
} else {
  y3 = score - Math.floor((y - 1) / 10) * 10;
}
document.getElementById("y3").innerText=y3;
let y4;
if (y === 0) {
  y4 = 0;
} else {
  y4 = score - Math.floor((y - 1) / 10) * 10;
}
document.getElementById("y4").innerText=y4;


let y5=score;


document.getElementById("y5").innerText=y5;




 }



let button=document.querySelector("[type=button]")

button.addEventListener("click" ,function(){
 
Calc();
    
})
});


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


});


The above code update the table cells as requested by you.
Hope it resolves your query!!