Using javascript to enter data into a table created using the rich content editor | Experience Community
Skip to main content

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

  • February 16, 2023
  • 8 replies
  • 354 views
R
Level 2 ●●
Forum|alt.badge.img+4

Code.pdfI have been trying to work out how to use the answer from a previous question to inform values in a table I created in the rich content editor. I have no coding experience, whatsoever, and I've no idea if what I have suggested is even possible in the way I've suggested. So, any tips are greatly appreciated.
The essentials are that respondents will enter a numeric value into a box. They then click a button on the same page which should pull through the numeric value. The table is also on the same page which, I am told, is why I cannot use embedded data to solve the problem. The numeric value from the previous question is then transformed by some if statements which I define (see pdf). The pdf shows the if statements which are required but I'm not sure if I am able to create variables like this. Is there a replace function which could replace the string "y1" with a numeric value based on the previous question answer and if statement mentioned?
Any help much appreciated
Thanks in advance
Russell

8 replies

qualtrics_nerd
Level 5 ●●●●●
Forum|alt.badge.img+19
  • qualtrics_nerd
  • Level 5 ●●●●●
  • February 16, 2023

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.



    R
    Level 2 ●●
    Forum|alt.badge.img+4
    • RElsdon
    • Author
    • Level 2 ●●
    • February 16, 2023

    Thank you very much for your response.
    The participants will perform two tasks which provide them a score. This score will be pulled through as a default answer in the QID309 box. They can then change this value or keep it the same. The button should then transform this value dependent on the score being within a certain range (0-10, 11-20, 21-30 etc). The new value is dependent on the if statements mentioned.

    qualtrics_nerd
    Level 5 ●●●●●
    Forum|alt.badge.img+19
    • qualtrics_nerd
    • Level 5 ●●●●●
    • February 16, 2023

    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.

    R
    Level 2 ●●
    Forum|alt.badge.img+4
    • RElsdon
    • Author
    • Level 2 ●●
    • February 16, 2023

    Yes, the prepopulated answer will be the score, but then respondents can enter any value between 0 and their score from earlier. I was assuming I could use piped text to pull the value through from the previous text box and when the button is clicked it takes the current entered value and uses it to change the values in the table.

    qualtrics_nerd
    Level 5 ●●●●●
    Forum|alt.badge.img+19
    • qualtrics_nerd
    • Level 5 ●●●●●
    • February 16, 2023

    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.

    R
    Level 2 ●●
    Forum|alt.badge.img+4
    • RElsdon
    • Author
    • Level 2 ●●
    • February 21, 2023

    Screenshots.pdfI've been working on the code and this is how far I've got.
    Whenever I refer to QID309 I need to pull through the text entry answer from the top of the first screenshot. If this is possible.
    When the button is clicked I need the code to pull through the current value in that box and use it to change the values for y1 to y5 according to the functions stated.
    Thanks in advance

    1 Attachments
    qualtrics_nerd
    Level 5 ●●●●●
    Forum|alt.badge.img+19
    • qualtrics_nerd
    • Level 5 ●●●●●
    • February 21, 2023

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


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



    Calculate Function




    A paragraph



    image.pngNow 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😊!!

      R
      Level 2 ●●
      Forum|alt.badge.img+4
      • RElsdon
      • Author
      • Level 2 ●●
      • February 28, 2023

      The code works perfectly, thank you.

      Could one of the admins mark this answer as accepted as I don’t have the option to anymore.

      Thanks very much for your help!

        Terms & ConditionsAccessibility statement