Nasa Tlx - displaying multiple sliders on one page plugin?

[jenniekim00]

Has anyone tried recreating the NASA-TLX questionnaire with jspsych?

I am currently trying out the image-slider-plugin for the rating scales. However, I haven't figured out how to display multiple rating scales on the same page yet. If you have any ideas, thanks!

P.S. I have found other sources of web-based NASA-TLX online:

• https://www.keithv.com/software/nasatlx/
• https://github.com/sirctseb/NASA-TLX
  I haven't figured out how to integrate it into my current experiment using jspsych.

My overall goal is to incorporate both a custom image complex span task (in progress) + nasa tlx for my thesis project.

[vijaymarupudi]

Looking at the source for this one: https://www.keithv.com/software/nasatlx/nasatlx.html, it would be relatively easy to transform it to a jsPsych plugin.

You can pretty much copy and paste most of the code, just changing a few bits to interact with jsPsych.

https://www.jspsych.org/plugins/creating-a-plugin/ will help!

[jenniekim00]

Hi there, thanks for the response! The only issue is figuring out how to 'copy and paste' the html code, i can easily copy and paste the js code and adjust into a plugin, but figuring out how to recode the html into the plugin is a lil hard for me to wrap my head around- the first thing i can think of is recoding with the '.innerHTML' but it's still a lot for my novice brain to fully understand yet aha... I already have an html file formatted with jspsych plugins for my current working memory tasks in progress, so i simply can't copy & paste unfortunately.

But definitely I will look into it more! If you or anyone knows how to display multiple slider scales on one page with a plugin, that'd be great!! I'm still in the progress of debugging and creating more code, any help will be appreciated :'))

[vijaymarupudi]

Here's a working demo. I've made some functions global where the html expects them to be global:

    window.buttonPart1 = buttonPart1;
    window.buttonPart2 = buttonPart2;
    window.buttonPair1 = buttonPair1;
    window.buttonPair2 = buttonPair2;

and

    window.scaleClick = function scaleClick(index, val) {

And instead of displaying the results, I've collected them into an object and called jsPsych.finishTrial().

        calcResults();
        var finalResults = { scales: scale, ratings: results_rating, tallies: results_tally, weights: results_weight }
        jsPsych.finishTrial(finalResults)

Here's the code for the entire plugin.

jsPsych.plugins["tlx"] = {
  info: { parameters: {} },
  trial: function (display_element, trial) {
    display_element.innerHTML = `
           <div id="div_part1">
           Task Questionnaire - Part 1 <br />
           <br />
           Click on each scale at the point that best indicates your experience of the task <br />
           <br />
           <div id="scale0"></div>
           <div id="scale1"></div>
           <div id="scale2"></div>
           <div id="scale3"></div>
           <div id="scale4"></div>
           <div id="scale5"></div>
           <br />
           <input class="next" id="next" type="button" value="Continue >>" onclick="buttonPart1();">
           </div>
           <div id="div_part2" style="display:none">
           Task Questionnaire - Part 2 <br />
           <br />
           One each of the following 15 screens, click on the scale title that represents the
           more important contributor to workload for the task <br />
           <br />
           <input class="next" id="next2" type="button" value="Continue >>" onClick="buttonPart2();">
           </div>
           <div id="div_part3" style="display:none">
           Task Questionnaire - Part 2 <br />
           <br />
           Click on the factor that represents the more important contributor to workload for the task<br />
           <br />
           <table>
           <tr>
           <td><input class="pair" id="pair1" type="button" value="" onClick="buttonPair1();"> </td>
           <td class="def"><div id="pair1_def"></div></td>
           </tr>
           <tr>
           <td align="center"> or </td>
           <td></td>
           </tr>
           <tr>
           <td><input class="pair" id="pair2" type="button" value="" onClick="buttonPair2();"></td>
           <td class="def"><div id="pair2_def"></div></td>
           </tr>
           </table>
           </div>
           <div id="div_part4" style="display:none">
           </div>
           `;

    window.buttonPart1 = buttonPart1;
    window.buttonPart2 = buttonPart2;
    window.buttonPair1 = buttonPair1;
    window.buttonPair2 = buttonPair2;

    var scale = new Array();
    var left = new Array();
    var right = new Array();
    var def = new Array();
    var NUM_SCALES = 6;

    scale[0] = "Mental Demand";
    left[0] = "Low";
    right[0] = "High";
    def[0] =
      "How much mental and perceptual activity was required (e.g. thinking, deciding, calculating, remembering, looking, searching, etc)? Was the task easy or demanding, simple or complex, exacting or forgiving?";

    scale[1] = "Physical Demand";
    left[1] = "Low";
    right[1] = "High";
    def[1] =
      "How much physical activity was required (e.g. pushing, pulling, turning, controlling, activating, etc)? Was the task easy or demanding, slow or brisk, slack or strenuous, restful or laborious?";

    scale[2] = "Temporal Demand";
    left[2] = "Low";
    right[2] = "High";
    def[2] =
      "How much time pressure did you feel due to the rate of pace at which the tasks or task elements occurred? Was the pace slow and leisurely or rapid and frantic?";

    scale[3] = "Performance";
    left[3] = "Good";
    right[3] = "Poor";
    def[3] =
      "How successful do you think you were in accomplishing the goals of the task set by the experimenter (or yourself)? How satisfied were you with your performance in accomplishing these goals?";

    scale[4] = "Effort";
    left[4] = "Low";
    right[4] = "High";
    def[4] =
      "How hard did you have to work (mentally and physically) to accomplish your level of performance?";

    scale[5] = "Frustration";
    left[5] = "Low";
    right[5] = "High";
    def[5] =
      "How insecure, discouraged, irritated, stressed and annoyed versus secure, gratified, content, relaxed and complacent did you feel during the task?";

    // Pairs of factors in order in the original instructions, numbers
    // refer to the index in the scale, left, right, def arrays.
    var pair = new Array();
    pair[0] = "4 3";
    pair[1] = "2 5";
    pair[2] = "2 4";
    pair[3] = "1 5";
    pair[4] = "3 5";
    pair[5] = "1 2";
    pair[6] = "1 3";
    pair[7] = "2 0";
    pair[8] = "5 4";
    pair[9] = "3 0";
    pair[10] = "3 2";
    pair[11] = "0 4";
    pair[12] = "0 1";
    pair[13] = "4 1";
    pair[14] = "5 0";

    // Variable where the results end up
    var results_rating = new Array();
    var results_tally = new Array();
    var results_weight = new Array();
    var results_overall;

    var pair_num = 0;
    for (var i = 0; i < NUM_SCALES; i++) results_tally[i] = 0;

    // Used to randomize the pairings presented to the user
    function randOrd() {
      return Math.round(Math.random()) - 0.5;
    }

    // Make sure things are good and mixed
    for (i = 0; i < 100; i++) {
      pair.sort(randOrd);
    }

    // They click on a scale entry
    window.scaleClick = function scaleClick(index, val) {
      results_rating[index] = val;

      // Turn background color to white for all cells
      for (i = 5; i <= 100; i += 5) {
        var top = "t_" + index + "_" + i;
        var bottom = "b_" + index + "_" + i;
        document.getElementById(top).bgColor = "#FFFFFF";
        document.getElementById(bottom).bgColor = "#FFFFFF";
      }

      var top = "t_" + index + "_" + val;
      var bottom = "b_" + index + "_" + val;
      document.getElementById(top).bgColor = "#AAAAAA";
      document.getElementById(bottom).bgColor = "#AAAAAA";
    }

    // Return the HTML that produces the table for a given scale
    function getScaleHTML(index) {
      var result = "";

      // Outer table with a column for scale, column for definition
      result += "<table><tr><td>";

      // Table that generates the scale
      result += '<table class="scale">';

      // Row 1, just the name of the scale
      result +=
        '<tr><td colspan="20" class="heading">' + scale[index] + "</td></tr>";

      // Row 2, the top half of the scale increments, 20 total columns
      result += "<tr>";
      var num = 1;
      for (var i = 5; i <= 100; i += 5) {
        result +=
          '<td id="t_' +
          index +
          "_" +
          i +
          '"   class="top' +
          num +
          '" onMouseUp="scaleClick(' +
          index +
          ", " +
          i +
          ');"></td>';
        num++;
        if (num > 2) num = 1;
      }
      result += "</tr>";

      // Row 3, bottom half of the scale increments
      result += "<tr>";
      for (var i = 5; i <= 100; i += 5) {
        result +=
          '<td id="b_' +
          index +
          "_" +
          i +
          '"   class="bottom" onMouseUp="scaleClick(' +
          index +
          ", " +
          i +
          ');"></td>';
      }
      result += "</tr>";

      // Row 4, left and right of range labels
      result += "<tr>";
      result +=
        '<td colspan="10" class="left">' +
        left[index] +
        '</td><td colspan="10" class="right">' +
        right[index] +
        "</td>";
      result += "</tr></table></td>";

      // Now for the definition of the scale
      result += '<td class="def">';
      result += def[index];
      result += "</td></tr></table>";

      return result;
    }

    function onLoad() {
      // Get all the scales ready
      for (var i = 0; i < NUM_SCALES; i++) {
        document.getElementById("scale" + i).innerHTML = getScaleHTML(i);
      }
    }

    // Users want to proceed after doing the scales
    function buttonPart1() {
      // Check to be sure they click on every scale
      for (var i = 0; i < NUM_SCALES; i++) {
        if (!results_rating[i]) {
          alert("A value must be selected for every scale!");
          return false;
        }
      }

      // Bye bye part 1, hello part 2
      document.getElementById("div_part1").style.display = "none";
      document.getElementById("div_part2").style.display = "";

      return true;
    }

    // User done reading the part 2 instructions
    function buttonPart2() {
      // Bye bye part 2, hello part 3
      document.getElementById("div_part2").style.display = "none";
      document.getElementById("div_part3").style.display = "";

      // Set the labels for the buttons
      setPairLabels();
      return true;
    }

    // Set the button labels for the pairwise comparison stage
    function setPairLabels() {
      var indexes = new Array();
      indexes = pair[pair_num].split(" ");

      var pair1 = scale[indexes[0]];
      var pair2 = scale[indexes[1]];

      document.getElementById("pair1").value = pair1;
      document.getElementById("pair2").value = pair2;

      document.getElementById("pair1_def").innerHTML = def[indexes[0]];
      document.getElementById("pair2_def").innerHTML = def[indexes[1]];
    }

    // They clicked the top pair button
    function buttonPair1() {
      var indexes = new Array();
      indexes = pair[pair_num].split(" ");
      results_tally[indexes[0]]++;

      nextPair();
      return true;
    }

    // They clicked the bottom pair button
    function buttonPair2() {
      var indexes = new Array();
      indexes = pair[pair_num].split(" ");
      results_tally[indexes[1]]++;
      nextPair();
      return true;
    }

    // Compute the weights and the final score
    function calcResults() {
      results_overall = 0.0;

      for (var i = 0; i < NUM_SCALES; i++) {
        results_weight[i] = results_tally[i] / 15.0;
        results_overall += results_weight[i] * results_rating[i];
      }
    }

    // Output the table of results
    function getResultsHTML() {
      var result = "";

      result +=
        "<table><tr><td></td><td>Rating</td><td>Tally</td><td>Weight</td></tr>";
      for (var i = 0; i < NUM_SCALES; i++) {
        result += "<tr>";

        result += "<td>";
        result += scale[i];
        result += "</td>";

        result += "<td>";
        result += results_rating[i];
        result += "</td>";

        result += "<td>";
        result += results_tally[i];
        result += "</td>";

        result += "<td>";
        result += results_weight[i];
        result += "</td>";

        result += "</tr>";
      }

      result += "</table>";
      result += "<br/>";
      result += "Overall = ";
      result += results_overall;
      result += "<br/>";

      return result;
    }

    // Move to the next pair
    function nextPair() {
      pair_num++;
      if (pair_num >= 15) {
        document.getElementById("div_part3").style.display = "none";
        document.getElementById("div_part4").style.display = "";
        calcResults();
        var finalResults = { scales: scale, ratings: results_rating, tallies: results_tally, weights: results_weight }
        jsPsych.finishTrial(finalResults)
      } else {
        setPairLabels();
      }
    }


    onLoad()
  },
};
// usage
jsPsych.init({ timeline: [{ type: 'tlx'}], on_finish: function() { jsPsych.data.displayData() }})

Let me know if you have any further questions!

[jenniekim00]

Thank you so much, it worked like a charm! I am still trying to decipher and understand it myself, but it's definitely working and I can't thank you enough for your help. You are a wonderful soul :'))

[vijaymarupudi]

Feel free to ask questions if you come across roadblocks!