<span> Scenario 1 out of 5 </span>
 
<font size="3">
<table border="4" cellpadding="15" cellsapcing="0" width="90%">
  <col width="140">
  <col width="30">
  <col width="30">
  <tbody><tr>
  <th><br></th>
  <th><b>Candidate 1</b></th>
  <th><b>Candidate 2</b></th>
  </tr>
 
  <!--Create Placeholders for dimensions names (e.g., "att1") -->
  <!--Create Placeholders for candidate traits (e.g., "a1" for first candidate, "b1" for second candidate) -->
 
  <tr>
  <td id="att1"><br></td>
  <td id="a1"><br></td>
  <td id="b1"><br></td>
  </tr>  
  <tr>
  <td id="att2"><br></td>
  <td id="a2"><br></td>
  <td id="b2"><br></td>
  </tr>  
  <tr>
  <td id="att3"><br></td>
  <td id="a3"><br></td>
  <td id="b3"><br></td>
  </tr>
  </tbody></table>
</font>
 
<script>
  //Define the Dimensions
    var attRaw = ["Race/Ethnicity","OCCUPATION","PID"];
    var att = ["Race/Ethnicity","OCCUPATION","PID"];
    var attributes =["","",""];
 
  //Randomize the Order of Dimensions
    for (i=0; i<attRaw,length;i++){
    var rand1 = Math.floor(Math.random()*((attRaw.length-i)-0));
    attributes[i]=att[rand1];
    att.splice(rand1,1);}
 
  //Create Variables for Traits associated with each dimension
    var RACE_raw = ["White","Black","Hispanic","Asian"];
    var OCCUPATION_raw = ["Lawyer","teacher","business owner","Doctor"];
    var PID_raw = ["Democrat","Republican","Independent"]
 
  //Use math.random tp randomly select traits for each dimension for both candidates
    var RACE_a = RACE_raw[Math.floor(Math.random()*RACE_raw.length)];
    var OCCUPATION_a = OCCUPATION_raw[Math.floor(Math.random()*OCCUPATION_rawN.length)];
    var PID_a = PID_raw[Math.floor(Math.random()*PID_raw.length)];
 
    var RACE_b = RACE_raw[Math.floor(Math.random()*RACE_raw.length)];    
    var OCCUPATION_b = OCCUPATION_raw[Math.floor(Math.random()*OCCUPATION_raw.length)];  
    var PID_b = PID_raw[Math.floor(Math.random()*PID_raw.length)];    
 
  //Take indexOf the Dimension variable. This is the order of the Dimension variable
    var RACE_index = attributes.indexOf("Race/Ethnicity");
    var OCCUPATION_index = attributes.indexOf("OCCUPATION");
    var PID_index = attributes.indexOf("PID");
 
        //Use IndexOf Dimension and replace with appropriate trait for CandidateA
  // For instance, if "PID" is the 3rd element in the Dimension variable,
  //this will place Democrat/Republican/Independent as the 3rd element of the forst candidate's attributes
 
  att_a_traits[RACE_index] = RACE_a;
  att_a_traits[OCCUPATION_index] = OCCUPATION_a;
  att_a_traits[PID_index] = PID_a;
 
  //Do the same for the second candidate
  att_b_traits[RACE_index] = RACE_b;
  att_b_traits[OCCUPATION_index] = OCCUPATION_b;
  att_b_traits[PID_index] = PID_b;  
 
  //Create list of variables in the for loop
 
  att_list =["att1","att2","att3"];
  a_list =["a1","a2","a3"];
  b_list =["b1","b2","b3"];
 
  //For elements 1 to 3 in the Dimensions, First Candidate and Second Candidate variables.
  //The first line assigns Dimensions to each "id" tag in the first column of the HTML table
  //The second line assigns first candidate traits to each "id" tag in the second column of the HTML table
  //the Third line assigns first candidate traits to each "id" tag in the third column of the HTML table
 
  for(i=0;i<3;i++){
    document.getElementById(att_list[i]).innerHTML = attributes[i];
    document.getElementById(a_list[i]).innerHTML = att_a_traits[i];
    document.getElementById(b_list[i]).innerHTML = att_b_traits[i];
  }
</script>