Code:
<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>
