The following code is inside an array type question with subquestion SQ001 and answer options A1-A3.
So this code creates a table, where on the last row (actually column, but it's transposed via CSS) three cells called "Button 1", "Button 2", "Button 3" are created.
What I want to do now is to instead insert the radio buttons A1-A3 into these cells.
[/url]), but I can't make it work for me. I would like it to be done within the for loop if that's possible (see comment in code). But I am open to any other solution.
Code:
<table id="dce_table">
</table>
<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:scriptcomplete',function(){
var attributes = ["Attribute 1", "Attribute 2", "Attribute 3","Attribute 4", "Attribute 5"];
var myTASK = "2";
var alternatives = ["Option 1","Option 2","Option 3"];
var myVERSION = "2"; // replace with random number (1 to 'total number of versions') later on
var h = 0;
var f = 0;
var myData = [
{ "Version":"1","Task":"1","Concept":"1","Att1":"Banane","Att2":"5€","Att3":"27,56","Att4":"$$$","Att5":"50°C"},
{ "Version":"1","Task":"1","Concept":"2","Att1":"Karotte","Att2":"10€","Att3":"58,87","Att4":"€€€","Att5":"165°F"},
{ "Version":"1","Task":"1","Concept":"3","Att1":"Vanilleeis","Att2":"10€","Att3":"58,87","Att4":"€€€","Att5":"165°F"},
{ "Version":"1","Task":"2","Concept":"1","Att1":"Birne","Att2":"5€","Att3":"27,56","Att4":"$$$","Att5":"50°C"},
{ "Version":"1","Task":"2","Concept":"2","Att1":"Sellerie","Att2":"10€","Att3":"58,87","Att4":"€€€","Att5":"165°F"},
{ "Version":"1","Task":"2","Concept":"3","Att1":"Obstsalat","Att2":"10€","Att3":"58,87","Att4":"€€€","Att5":"165°F"},
{ "Version":"2","Task":"1","Concept":"1","Att1":"Apfel","Att2":"5€","Att3":"27,56","Att4":"$$$","Att5":"50°C"},
{ "Version":"2","Task":"1","Concept":"2","Att1":"Gurke","Att2":"10€","Att3":"58,87","Att4":"€€€","Att5":"165°F"},
{ "Version":"2","Task":"1","Concept":"3","Att1":"Mousse au Chocolat","Att2":"10€","Att3":"58,87","Att4":"€€€","Att5":"165°F"},
{ "Version":"2","Task":"2","Concept":"1","Att1":"Blaubeeren","Att2":"5€","Att3":"27,56","Att4":"$$$","Att5":"50°C"},
{ "Version":"2","Task":"2","Concept":"2","Att1":"Zucchini","Att2":"10€","Att3":"58,87","Att4":"€€€","Att5":"165°F"},
{ "Version":"2","Task":"2","Concept":"3","Att1":"Erdbeerjoghurt","Att2":"10€","Att3":"58,87","Att4":"€€€","Att5":"165°F"}
]
var col = ;
col.push("Option");
for (var key in myData[0]) {
if (key != "Version" && key != "Task" && key != "Concept") {
col.push(key);
}
}
col.push("Buttons");
var table = document.createElement("table");
var tr = table.insertRow(-1);
for (var i = 0; i < col.length; i++) {
if (i === 0) {
var th = document.createElement("th");
th.innerHTML = "Option";
tr.appendChild(th);
}
else if (i < col.length-1) {
var th = document.createElement("th");
th.innerHTML = attributes[i-1];
tr.appendChild(th);
}
else {
var th = document.createElement("th");
th.innerHTML = "Buttons go here";
tr.appendChild(th);
}
}
for (var i = 0; i < myData.length; i++) {
var x = 1;
if (myData[i]["Version"] === myVERSION && myData[i]["Task"] === myTASK) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
if (col[j] === "Buttons") {
var createButtonField = tr.insertCell(-1);
createButtonField.innerHTML = "Button" + x; // What I want to do is to insert A"x" in here, so the radio-button for A1 in the first cell, A2 in the second cell and so on
x += 1;
}
else if (j == 0) {
var createLabel = tr.insertCell(-1);
createLabel.innerHTML = alternatives[f];
f += 1;
}
else {
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = myData[i][col[j]];
}
}
}
}
var divContainer = document.getElementById("dce_table");
divContainer.innerHTML = "";
divContainer.appendChild(table);
});
</script>
<style type="text/css">#dce_table {
margin: auto;
border: 2px solid black;
padding: 10px;
}
#dce_table tr {
border: 1px solid black;
display: inline-block;
float: left;
}
#dce_table th {
border: 1px solid black;
display: block;
padding: 10px;
}
#dce_table td {
border: 1px solid black;
display: block;
padding: 10px;
}
</style>[/i][/i][/i]
Topic Author
