Matrix table with constant sum

Hi @Jessica.S  - unfortunately, not sure I can help on the Matrix Table, but would be great to see your JavaScript for the Constant Sum version if you’re willing to share that?

Hi @Jessica.S ,

Can you please confirm if the Position of total box is according to Statements or Scale points?

Hi @Jessica.S ,
Ignore the above comment , as found a common class in both structure which i am using to implement the above task(I am disabling the button ):

Please add below code in your question:

 

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

});

Qualtrics.SurveyEngine.addOnReady(function()
{

function validColor(){
let box=document.getElementsByClassName("InputText ");
for(let i=0;i<box.length;i++)
    {
if(box[i].value<100)
{
box[i].style.cssText="color:red !important";
 document.getElementById("NextButton").disabled=false; 
}
else if(box[i].value==="100")
{
box[i].style.cssText="color:black !important";
 document.getElementById("NextButton").disabled=false;   
}
else  
if(box[i].value>100)
{

  document.getElementById("NextButton").disabled=true;    
}

    }
}
document.getElementById("Questions").addEventListener("input",event=>{validColor();})

});

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

});

Hope this resolves your query😊!!

Hi @MikeW ,
I have made below code for Constant Sum question :
You will have to change QID in first statement of validColor():

 

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

});

Qualtrics.SurveyEngine.addOnReady(function()
{
	function validColor(){
let box=document.getElementById("QID44_Total");


if(box.value<100)
{
box.style.cssText="color:red !important";
 document.getElementById("NextButton").disabled=false;     
}
else if(box.value==="100")
{
box.style.cssText="color:black !important";
 document.getElementById("NextButton").disabled=false;   
}
else  
if(box.value.toString()>"100")
{

  document.getElementById("NextButton").disabled=true;    
}


}
document.getElementById("Questions").addEventListener("input",event=>{validColor();})
});

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

});

Hope this resolves your query😊!!

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

});

Qualtrics.SurveyEngine.addOnReady(function()
{

function validColor(){
let box=document.getElementsByClassName("InputText ");
for(let i=0;i<box.length;i++)
    {
if(box[i].value<100)
{
box[i].style.cssText="color:red !important";
 document.getElementById("NextButton").disabled=false; 
}
else if(box[i].value==="100")
{
box[i].style.cssText="color:black !important";
 document.getElementById("NextButton").disabled=false;   
}
else  
if(box[i].value>100)
{

  document.getElementById("NextButton").disabled=true;    
}

    }
}
document.getElementById("Questions").addEventListener("input",event=>{validColor();})

});

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

});

Please ignore this code it  fails at some boundary conditions.(due to string issue)
Please find updated code below:
 

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

});

Qualtrics.SurveyEngine.addOnReady(function()
{

function validColor(){
let box=document.getElementsByClassName("InputText ");
for(let i=0;i<box.length;i++)
    {
if(box[i].value<"100")
{
box[i].style.cssText="color:red !important";
  document.getElementById("NextButton").disabled=false;    
}
else if(box[i].value==="100")
{
box[i].style.cssText="color:black !important";
 document.getElementById("NextButton").disabled=false;   
}

    }

for(let i=0;i<box.length;i++){
  if(parseInt(box[i].value.replace(/,/g, ''), 10) > 100)
{  

  document.getElementById("NextButton").disabled=true;    
}    

}

}
document.getElementById("Questions").addEventListener("input",event=>{validColor();})

});

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

});

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

});

Qualtrics.SurveyEngine.addOnReady(function()
{

function validColor(){
let box=document.getElementsByClassName("InputText ");
for(let i=0;i<box.length;i++)
    {
if(box[i].value<100)
{
box[i].style.cssText="color:red !important";
 document.getElementById("NextButton").disabled=false; 
}
else if(box[i].value==="100")
{
box[i].style.cssText="color:black !important";
 document.getElementById("NextButton").disabled=false;   
}
else  
if(box[i].value>100)
{

  document.getElementById("NextButton").disabled=true;    
}

    }
}
document.getElementById("Questions").addEventListener("input",event=>{validColor();})

});

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

});

Hi @qualtrics_nerd Thank you so much for your help! Your code works splendidly for making the font colour black when the total box is equal to 100 (and red otherwise), however the next button is never disabled. In addition to your code, I tried also the below, which also does not work. Do you know why disabling the next button does not work? Thank you very much!

if (box[i].value>100) this.disableNextButton(); 

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

});

Qualtrics.SurveyEngine.addOnReady(function()
{

function validColor(){
let box=document.getElementsByClassName("InputText ");
for(let i=0;i<box.length;i++)
    {
if(box[i].value<100)
{
box[i].style.cssText="color:red !important";
 document.getElementById("NextButton").disabled=false; 
}
else if(box[i].value==="100")
{
box[i].style.cssText="color:black !important";
 document.getElementById("NextButton").disabled=false;   
}
else  
if(box[i].value>100)
{

  document.getElementById("NextButton").disabled=true;    
}

    }
}
document.getElementById("Questions").addEventListener("input",event=>{validColor();})

});

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

});

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

});

Qualtrics.SurveyEngine.addOnReady(function()
{

function validColor(){
let box=document.getElementsByClassName("InputText ");
for(let i=0;i<box.length;i++)
    {
if(box[i].value<"100")
{
box[i].style.cssText="color:red !important";
  document.getElementById("NextButton").disabled=false;    
}
else if(box[i].value==="100")
{
box[i].style.cssText="color:black !important";
 document.getElementById("NextButton").disabled=false;   
}

    }

for(let i=0;i<box.length;i++){
  if(parseInt(box[i].value.replace(/,/g, ''), 10) > 100)
{  

  document.getElementById("NextButton").disabled=true;    
}    

}

}
document.getElementById("Questions").addEventListener("input",event=>{validColor();})

});

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

});

Hi again @qualtrics_nerd just saw that you had posted an updated code (sorry - had missed that)! Your new code works for both turning the number in the total box black when it is equal to 100 and for disabling the next button when it is above 100, but once the number in the total box has been 100 once it remains black even if it is then changed to above or below 100 (it doesn’t turn red again). I’m looking at your code to see how I can adapt it so that the total number turns red again, and will keep you updated! Thank you very much for your help!!

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

});

Qualtrics.SurveyEngine.addOnReady(function()
{

function validColor(){
let box=document.getElementsByClassName("InputText ");
for(let i=0;i<box.length;i++)
    {
if(box[i].value<100)
{
box[i].style.cssText="color:red !important";
 document.getElementById("NextButton").disabled=false; 
}
else if(box[i].value==="100")
{
box[i].style.cssText="color:black !important";
 document.getElementById("NextButton").disabled=false;   
}
else  
if(box[i].value>100)
{

  document.getElementById("NextButton").disabled=true;    
}

    }
}
document.getElementById("Questions").addEventListener("input",event=>{validColor();})

});

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

});

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

});

Qualtrics.SurveyEngine.addOnReady(function()
{

function validColor(){
let box=document.getElementsByClassName("InputText ");
for(let i=0;i<box.length;i++)
    {
if(box[i].value<"100")
{
box[i].style.cssText="color:red !important";
  document.getElementById("NextButton").disabled=false;    
}
else if(box[i].value==="100")
{
box[i].style.cssText="color:black !important";
 document.getElementById("NextButton").disabled=false;   
}

    }

for(let i=0;i<box.length;i++){
  if(parseInt(box[i].value.replace(/,/g, ''), 10) > 100)
{  

  document.getElementById("NextButton").disabled=true;    
}    

}

}
document.getElementById("Questions").addEventListener("input",event=>{validColor();})

});

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

});

Hi again @qualtrics_nerd just saw that you had posted an updated code (sorry - had missed that)! Your new code works for both turning the number in the total box black when it is equal to 100 and for disabling the next button when it is above 100, but once the number in the total box has been 100 once it remains black even if it is then changed to above or below 100 (it doesn’t turn red again). I’m looking at your code to see how I can adapt it so that the total number turns red again, and will keep you updated! Thank you very much for your help!!

UPDATE: I tried to adapt your code (see below) to get it it to turn the total number red again (if conditions are met) after it has met the condition for black once, but unfortunately now it is not doing anything I was looking for it to do… :/ Do you know why this might be? Thank you in advance!

Qualtrics.SurveyEngine.addOnload(function()
{
	jQuery("#"+this.questionId+" td input[type=text]").val("");

});

Qualtrics.SurveyEngine.addOnReady(function()
{

function validColor(){
let box=document.getElementsByClassName("InputText ");
for(let i=0;i<box.length;i++)
    {
if (box[i].value==="100") {box[i].style.cssText="color:black !important";
		} else {
		box[i].style.cssText="color:red !important";
		}
if(box[i].value<="100")
{
  document.getElementById("NextButton").disabled=false;    
}
else if(box[i].value>"100")
{
 document.getElementById("NextButton").disabled=true;   
}

    }

for(let i=0;i<box.length;i++){
  if(parseInt(box[i].value.replace(/,/g, ''), 10) > 100)
{  

  document.getElementById("NextButton").disabled=true;    
}    

}
document.getElementById("Questions").addEventListener("input",event=>{validColor();})

}});


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

});

Hi @MikeW of course! I adapted the following code posted by ahmedA:

The code I used is found below.

Thank you also to @qualtrics_nerd for posting your code!

Qualtrics.SurveyEngine.addOnload(function()
{
	jQuery("#"+this.questionId+" li input[type=text]").val("");
	jQuery("#"+this.questionId+" li input[type=text]").color("black");
});

Qualtrics.SurveyEngine.addOnReady(function()
{
		let quest = this,
        qc = quest.questionContainer,
        id = quest.questionId,
        total_box = qc.querySelector("#" + id + "_Total");
	total_box.oninput = function () {
        if (total_box.value > 100) {quest.disableNextButton();
		} else {
		quest.enableNextButton();
		}
		if (total_box.value == 100) {total_box.style.color = "black";
		} else {
		total_box.style.color = "red";
		}
	}
});

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

});

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

});

Qualtrics.SurveyEngine.addOnReady(function()
{

function validColor(){
let box=document.getElementsByClassName("InputText ");
for(let i=0;i<box.length;i++)
    {console.log(parseInt(box[i].value.replace(/,/g, ''), 10));
if(parseInt(box[i].value.replace(/,/g, ''), 10)<100)

{
box[i].style.cssText="color:red !important";
  document.getElementById("NextButton").disabled=false;    
}


 if(box[i].value==="100")
{
box[i].style.cssText="color:black !important";
 document.getElementById("NextButton").disabled=false;   
}

    }

for(let i=0;i<box.length;i++){
  if(parseInt(box[i].value.replace(/,/g, ''), 10) > 100)
{  console.log(parseInt(box[i].value.replace(/,/g, ''), 10));

  document.getElementById("NextButton").disabled=true;    
}    

}

}
document.getElementById("Questions").addEventListener("input",event=>{validColor();})

});

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

});

Thank you so much!! This code was the solution!!

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

});

Qualtrics.SurveyEngine.addOnReady(function()
{

function validColor(){
let box=document.getElementsByClassName("InputText ");
for(let i=0;i<box.length;i++)
    {console.log(parseInt(box[i].value.replace(/,/g, ''), 10));
if(parseInt(box[i].value.replace(/,/g, ''), 10)<100)

{
box[i].style.cssText="color:red !important";
  document.getElementById("NextButton").disabled=false;    
}


 if(box[i].value==="100")
{
box[i].style.cssText="color:black !important";
 document.getElementById("NextButton").disabled=false;   
}

    }

for(let i=0;i<box.length;i++){
  if(parseInt(box[i].value.replace(/,/g, ''), 10) > 100)
{  console.log(parseInt(box[i].value.replace(/,/g, ''), 10));

  document.getElementById("NextButton").disabled=true;    
}    

}

}
document.getElementById("Questions").addEventListener("input",event=>{validColor();})

});

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

});

@qualtrics_nerd Thank you so much!! This code was the solution!!