Single Page CBC (Choice Based Conjoint)
For this setup, upload the dat file on the survey "upload file" page and call the below script for calling the design file
<exec when="init">
def getCodeFile(fname, zipHeader):
try:
CodesData = File( "%s/%s" % (gv.survey.path, fname), zipHeader)
except IOError:
CodesData = ""
return CodesData
</exec>
<exec when="init">
cbcd = getCodeFile("cbc_design.dat", "code")
</exec>
After this copy the below script while updating the question id o be the first one of the ones shown to the respondent.
<style name="respview.client.js" with="SPCBCD_1"><![CDATA[
<script>
jQuery(document).ready(function(){
jQuery(".survey-section:eq(1)").prepend("<div class='cbcprogress'></div>")
jQuery(".html.comment").addClass("collapsedQ");
jQuery(".question.radio").each(function(){
var targetdiv = jQuery(this).attr("id")
var loopnum = jQuery(this).attr("id").split("_")[2]
var allpage = jQuery(".question.radio").length
if (loopnum == 1){
jQuery("div.cbcprogress").append("<div class='circle active' id='jump_" + loopnum + "'><span class='label' targetQ='" + targetdiv + "'>" + loopnum + "</span></div><span class='bar'></span>")
jQuery(this).addClass("expandedQ");
}
else if (loopnum < allpage){
jQuery("div.cbcprogress").append("<div class='circle' id='jump_" + loopnum + "'><span class='label' targetQ='" + targetdiv + "'>" + loopnum + "</span></div><span class='bar'></span>")
jQuery(this).addClass("collapsedQ");
}
else{
jQuery("div.cbcprogress").append("<div class='circle' id='jump_" + loopnum + "'><span class='label' targetQ='" + targetdiv + "'>" + loopnum + "</span></div>")
jQuery(this).addClass("collapsedQ");
}
});
jQuery("#btn_continue, #btn_finish").hide();
jQuery(".td.element.inputrow").each(function(){
if(jQuery(this).find('input[type="radio"]').first().attr("checked")){
jQuery(this).addClass('cellchecked');
jQuery("#btn_continue, #btn_finish").show();
}else{
jQuery(this).removeClass('cellchecked');
}
});
jQuery("td.element.inputrow.clickableCell").on("click", function(e){
e.preventDefault();
e.stopPropagation();
jQuery(this).parents(".answers").find("td.element").removeClass('cellchecked');
jQuery(this).addClass('cellchecked');
var jQueryradio = jQuery(this).find('input[type="radio"]');
if (!jQueryradio.prop("checked")){
jQueryradio.prop("checked",true);
var $curel = jQuery("span[targetQ='" + jQuery(this).parents(".question.radio").attr("id") + "']")
$curel.parents(".cbcprogress .circle").removeClass("active")
$curel.parent(".circle").addClass("done enablenav")
$curel.parent(".circle").next().addClass("done")
jQuery(this).parents(".question.radio").removeClass("expandedQ")
jQuery(this).parents(".question.radio").addClass("collapsedQ")
var loopnum = jQuery(this).parents(".question.radio").attr("id").split("_")[2]
var allpage = jQuery(".question.radio").length
if (loopnum != allpage){
var $nextel = $curel.parent(".circle").next().next()
$nextel.addClass("active enablenav")
jQuery("#" + $nextel.find("span.label").attr("targetQ")).removeClass("collapsedQ")
jQuery("#" + $nextel.find("span.label").attr("targetQ")).addClass("expandedQ")
}
else{
jQuery(".html.comment").removeClass("collapsedQ")
jQuery(".html.comment").addClass("expandedQ")
jQuery("#btn_continue, #btn_finish").show();
}
}
});
jQuery(".circle span.label").on("click", function(e){
e.preventDefault();
e.stopPropagation();
if (jQuery(this).parents(".circle").hasClass("enablenav")){
jQuery(this).parents(".circle").addClass("active")
jQuery(".question.radio.expandedQ").addClass("collapsedQ")
jQuery(".question.radio.expandedQ").removeClass("expandedQ")
jQuery("#" + jQuery(this).attr("targetQ")).removeClass("collapsedQ")
jQuery("#" + jQuery(this).attr("targetQ")).addClass("expandedQ")
}
});
})
</script>
]]></style>
<style name="respview.client.css" with="SPCBCD_1"><![CDATA[
<style>
.question.radio.expandedQ, .html.comment.expandedQ{
display: block !important;
}
.question.radio.collapsedQ, .html.comment.collapsedQ, .cell-sub-wrapper{
display: none !important;
}
.question.radio{
transition: opacity 2s, display 2s;
}
td.element.inputrow:hover div.jTitle, td.element.inputrow:hover div.jImage, td.element.inputrow:hover div.jPrice, td.element.inputrow.cellchecked div.jTitle, td.element.inputrow.cellchecked div.jImage, td.element.inputrow.cellchecked div.jPrice, td.element.inputrow:hover div.NoneTitle, td.element.inputrow.cellchecked div.NoneTitle{
background: #0fb1b3 !important;
}
table.grid.grid-table-mode{
border-collapse: separate;
border-spacing: 20px 0px;
}
th.col-legend{
border-bottom: none !important;
background-color: #0fb1b3;
border-radius: 15px;
text-transform: uppercase;
color: #fff;
font-weight: bold;
}
div.jTitle, div.jImage, div.jPrice {
border-radius: 15px;
border: solid 1px #0fb1b3;
text-align: center;
width: 100%;
transition: all 0.5s;
font-weight: bold;
}
div.jImage{
height: 450px;
width: 170px;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
div.NoneTitle{
height: 450px;
width: 170px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
border: solid 1px #0fb1b3;
border-radius: 15px;
font-weight: bold;
}
td.element.inputrow.cellchecked div.NoneTitle, td.element.inputrow.cellchecked div.jTitle, td.element.inputrow.cellchecked div.jPrice{
color: #fff;
}
.grid.grid-table-mode{
width: 100% !important;
}
div.jTitle, div.jPrice {
padding: 15px;
}
div.jImage img{
margin-left: auto;
margin-right: auto;
}
td.element.lastrow{
border: none !important;
}
.pricebig{
font-size: 40px;
}
.iconcell{
width: 15%;
}
.textcell{
width: 85%;
}
.icontables{
padding: 5px;
width: 100%;
text-align: left;
}
.cbcprogress{
text-align: center;
padding: 5px;
position: absolute;
transform: rotate(90deg);
top: 130px;
left: -75px;
}
.circle{
cursor: pointer;
}
.cbcprogress .circle.done, .cbcprogress .bar.done{
background: #e6e6e6;
}
.cbcprogress .circle, .cbcprogress .bar{
display: inline-block;
background: #fff;
width: 40px;
height: 40px;
border-radius: 40px;
border: 1px solid #0fb1b3;
}
.cbcprogress .circle.active .label{
color: #fff;
background: #0fb1b3;
box-shadow: inset 0 0 2px rgb(0 0 0 / 20%);
}
.cbcprogress .circle.done .label{
color: #fff;
background: #167475;
box-shadow: inset 0 0 2px rgb(0 0 0 / 20%);
}
.cbcprogress .circle .label{
display: inline-block;
width: 32px;
height: 32px;
line-height: 32px;
border-radius: 32px;
margin-top: 3px;
color: #0fb1b3;
font-size: 17px;
}
.cbcprogress .bar{
position: relative;
width: 10px;
height: 6px;
margin: 3px 0 3px 0;
border-left: none;
border-right: none;
border-radius: 0;
}
.circle span.label{
transform: rotate(-90deg);
}
</style>
]]></style>
</exec>
Then copy the below while updating the question rows, question label, question text and piping accordingly.
<quota label="cbcQu" overquota="noqual" sheet="CBCversion"/>
<number
label="CBC_Version"
size="3"
where="execute,survey,report">
<title>CBC Version</title>
<exec>
print p.markers
for x in p.markers:
if "/CBCversion/varCBC_" in x:
CBC_Version.val = int(x.split("_")[-1])
break
</exec>
</number>
<suspend/>
<define label="att1_list">
<row label="r1">First-person shooter (FPS)</row>
<row label="r2">Third-person shooter (TPS) / Action</row>
<row label="r3">Role-playing (RPG)</row>
<row label="r4">Strategy</row>
<row label="r5">Simulation</row>
<row label="r6">Casual / puzzle / card</row>
<row label="r7">Real-time strategy</row>
<row label="r8">Sports</row>
<row label="r9">Music</row>
<row label="r10">Fighting</row>
<row label="r11">Massive online battle arena (MOBA)</row></define>
<define label="att2_list">
<row label="r1">Not included (Note: show as blank cell in programmed conjoint)</row>
<row label="r2">Additional story content is available for purchase in a cash shop</row></define>
<define label="att3_list">
<row label="r1">Not included (Note: show as blank cell in programmed conjoint)</row>
<row label="r2">Additional levels of gameplay are available for purchase in a cash shop</row></define>
<define label="att4_list">
<row label="r1">Not included (Note: show as blank cell in programmed conjoint)</row>
<row label="r2">Additional characters are available for purchase in a cash shop</row></define>
<define label="att5_list">
<row label="r1">Not included (Note: show as blank cell in programmed conjoint)</row>
<row label="r2">In-game items like weapons, vehicles and equipment are available for purchase in a cash shop</row></define>
<define label="att6_list">
<row label="r1">Not included (Note: show as blank cell in programmed conjoint)</row>
<row label="r2">Cosmetic items and customizations for you characters are available for purchase in a cash shop</row></define>
<define label="att7_list">
<row label="r1">Not included (Note: show as blank cell in programmed conjoint)</row>
<row label="r2">Boosters and power-ups are available for purchase in a cash shop</row></define>
<define label="att8_list">
<row label="r1">The game features in-game currency that can only be earned</row>
<row label="r2">The game features in-game currency that can be earned or purchased with real money</row>
<row label="r3">The game features an in-game currency that can only be earned and a separate currency that can only be purchased with real money</row></define>
<define label="att9_list">
<row label="r1">Not included (Note: show as blank cell in programmed conjoint)</row>
<row label="r2">The game features exclusive in-game items that can only be purchased with real money</row>
<row label="r3">The game features exclusive in-game items that can be either earned or purchased with real money</row></define>
<define label="att10_list">
<row label="r1">The game is free of all advertising</row>
<row label="r2">The game features advertising</row></define>
<define label="att11_list">
<row label="r1">There is no subscription required to play</row>
<row label="r2">The game requires you to pay a subscription each month in order to play</row></define>
<define label="att12_list">
<row label="r1">Game is free</row>
<row label="r2">Game is available for $2.50</row>
<row label="r3">Game is available for $5</row>
<row label="r4">Game is available for $10</row>
<row label="r5">Game is available for $15</row>
<row label="r6">Game is available for $20</row>
<row label="r7">Game is available for $25</row>
<row label="r8">Game is available for $30</row>
<row label="r9">Game is available for $40</row>
<row label="r10">Game is available for $50</row></define>
<loop label="CBCloop" vars="var1">
<title>Maxdiff loop</title>
<block label="CBC">
<exec>
codes = str(CBC_Version.val) + "x[loopvar: label]"
for x in range(1,4):
codeF = codes + "x" + str(x)
cbciter = cbcd.get(codeF)
if cbciter:
for n in range(1,13):
punchQ = allQuestions["Attr%sc%s_[loopvar: label]" % (str(n),str(x))]
if int(cbciter["attr" + str(n)]) gt 0:
punchQ.val = punchQ.attr("r" +cbciter["attr" + str(n)]).index
</exec>
<select
label="Attr1c1_[loopvar: label]"
optional="1"
where="execute,survey,report">
<title>Attribute 1 for Concept 1</title>
<insert as="choices" source="att1_list"/>
</select>
<select
label="Attr2c1_[loopvar: label]"
optional="1"
where="execute,survey,report">
<title>Attribute 2 for Concept 1</title>
<insert as="choices" source="att2_list"/>
</select>
<select
label="Attr3c1_[loopvar: label]"
optional="1"
where="execute,survey,report">
<title>Attribute 3 for Concept 1</title>
<insert as="choices" source="att3_list"/>
</select>
<select
label="Attr4c1_[loopvar: label]"
optional="1"
where="execute,survey,report">
<title>Attribute 4 for Concept 1</title>
<insert as="choices" source="att4_list"/>
</select>
<select
label="Attr5c1_[loopvar: label]"
optional="1"
where="execute,survey,report">
<title>Attribute 5 for Concept 1</title>
<insert as="choices" source="att5_list"/>
</select>
<select
label="Attr6c1_[loopvar: label]"
optional="1"
where="execute,survey,report">
<title>Attribute 6 for Concept 1</title>
<insert as="choices" source="att6_list"/>
</select>
<select
label="Attr7c1_[loopvar: label]"
optional="1"
where="execute,survey,report">
<title>Attribute 7 for Concept 1</title>
<insert as="choices" source="att7_list"/>
</select>
<select
label="Attr8c1_[loopvar: label]"
optional="1"
where="execute,survey,report">
<title>Attribute 8 for Concept 1</title>
<insert as="choices" source="att8_list"/>
</select>
<select
label="Attr9c1_[loopvar: label]"
optional="1"
where="execute,survey,report">
<title>Attribute 9 for Concept 1</title>
<insert as="choices" source="att9_list"/>
</select>
<select
label="Attr10c1_[loopvar: label]"
optional="1"
where="execute,survey,report">
<title>Attribute 10 for Concept 1</title>
<insert as="choices" source="att10_list"/>
</select>
<select
label="Attr11c1_[loopvar: label]"
optional="1"
where="execute,survey,report">
<title>Attribute 11 for Concept 1</title>
<insert as="choices" source="att11_list"/>
</select>
<select
label="Attr12c1_[loopvar: label]"
optional="1"
where="execute,survey,report">
<title>Attribute 12 for Concept 1</title>
<insert as="choices" source="att12_list"/>
</select>
<suspend/>
<select
label="Attr1c2_[loopvar: label]"
optional="1"
where="execute,survey,report">
<title>Attribute 1 for Concept 2</title>
<insert as="choices" source="att1_list"/>
</select>
<select
label="Attr2c2_[loopvar: label]"
optional="1"
where="execute,survey,report">
<title>Attribute 2 for Concept 2</title>
<insert as="choices" source="att2_list"/>
</select>
<select
label="Attr3c2_[loopvar: label]"
optional="1"
where="execute,survey,report">
<title>Attribute 3 for Concept 2</title>
<insert as="choices" source="att3_list"/>
</select>
<select
label="Attr4c2_[loopvar: label]"
optional="1"
where="execute,survey,report">
<title>Attribute 4 for Concept 2</title>
<insert as="choices" source="att4_list"/>
</select>
<select
label="Attr5c2_[loopvar: label]"
optional="1"
where="execute,survey,report">
<title>Attribute 5 for Concept 2</title>
<insert as="choices" source="att5_list"/>
</select>
<select
label="Attr6c2_[loopvar: label]"
optional="1"
where="execute,survey,report">
<title>Attribute 6 for Concept 2</title>
<insert as="choices" source="att6_list"/>
</select>
<select
label="Attr7c2_[loopvar: label]"
optional="1"
where="execute,survey,report">
<title>Attribute 7 for Concept 2</title>
<insert as="choices" source="att7_list"/>
</select>
<select
label="Attr8c2_[loopvar: label]"
optional="1"
where="execute,survey,report">
<title>Attribute 8 for Concept 2</title>
<insert as="choices" source="att8_list"/>
</select>
<select
label="Attr9c2_[loopvar: label]"
optional="1"
where="execute,survey,report">
<title>Attribute 9 for Concept 2</title>
<insert as="choices" source="att9_list"/>
</select>
<select
label="Attr10c2_[loopvar: label]"
optional="1"
where="execute,survey,report">
<title>Attribute 10 for Concept 2</title>
<insert as="choices" source="att10_list"/>
</select>
<select
label="Attr11c2_[loopvar: label]"
optional="1"
where="execute,survey,report">
<title>Attribute 11 for Concept 2</title>
<insert as="choices" source="att11_list"/>
</select>
<select
label="Attr12c2_[loopvar: label]"
optional="1"
where="execute,survey,report">
<title>Attribute 12 for Concept 2</title>
<insert as="choices" source="att12_list"/>
</select>
<suspend/>
<select
label="Attr1c3_[loopvar: label]"
optional="1"
where="execute,survey,report">
<title>Attribute 1 for Concept 3</title>
<insert as="choices" source="att1_list"/>
</select>
<select
label="Attr2c3_[loopvar: label]"
optional="1"
where="execute,survey,report">
<title>Attribute 2 for Concept 3</title>
<insert as="choices" source="att2_list"/>
</select>
<select
label="Attr3c3_[loopvar: label]"
optional="1"
where="execute,survey,report">
<title>Attribute 3 for Concept 3</title>
<insert as="choices" source="att3_list"/>
</select>
<select
label="Attr4c3_[loopvar: label]"
optional="1"
where="execute,survey,report">
<title>Attribute 4 for Concept 3</title>
<insert as="choices" source="att4_list"/>
</select>
<select
label="Attr5c3_[loopvar: label]"
optional="1"
where="execute,survey,report">
<title>Attribute 5 for Concept 3</title>
<insert as="choices" source="att5_list"/>
</select>
<select
label="Attr6c3_[loopvar: label]"
optional="1"
where="execute,survey,report">
<title>Attribute 6 for Concept 3</title>
<insert as="choices" source="att6_list"/>
</select>
<select
label="Attr7c3_[loopvar: label]"
optional="1"
where="execute,survey,report">
<title>Attribute 7 for Concept 3</title>
<insert as="choices" source="att7_list"/>
</select>
<select
label="Attr8c3_[loopvar: label]"
optional="1"
where="execute,survey,report">
<title>Attribute 8 for Concept 3</title>
<insert as="choices" source="att8_list"/>
</select>
<select
label="Attr9c3_[loopvar: label]"
optional="1"
where="execute,survey,report">
<title>Attribute 9 for Concept 3</title>
<insert as="choices" source="att9_list"/>
</select>
<select
label="Attr10c3_[loopvar: label]"
optional="1"
where="execute,survey,report">
<title>Attribute 10 for Concept 3</title>
<insert as="choices" source="att10_list"/>
</select>
<select
label="Attr11c3_[loopvar: label]"
optional="1"
where="execute,survey,report">
<title>Attribute 11 for Concept 3</title>
<insert as="choices" source="att11_list"/>
</select>
<select
label="Attr12c3_[loopvar: label]"
optional="1"
where="execute,survey,report">
<title>Attribute 12 for Concept 3</title>
<insert as="choices" source="att12_list"/>
</select>
<suspend/>
<radio
label="CBCD_[loopvar: label]" surveyDisplay="desktop">
<title>CBC Demo</title>
<comment>Select one</comment>
<row label="ra1" optional="1" where="notdp">Genre</row>
<row label="ra2" cond="Attr2c3_[loopvar: label].any or Attr2c2_[loopvar: label].any or Attr2c1_[loopvar: label].any" optional="1" where="notdp">Additional story content</row>
<row label="ra3" cond="Attr3c3_[loopvar: label].any or Attr3c2_[loopvar: label].any or Attr3c1_[loopvar: label].any" optional="1" where="notdp">Additional game levels</row>
<row label="ra4" cond="Attr4c3_[loopvar: label].any or Attr4c2_[loopvar: label].any or Attr4c1_[loopvar: label].any" optional="1" where="notdp">Additional characters</row>
<row label="ra5" cond="Attr5c3_[loopvar: label].any or Attr5c2_[loopvar: label].any or Attr5c1_[loopvar: label].any" optional="1" where="notdp">Additional in-game items</row>
<row label="ra6" cond="Attr6c3_[loopvar: label].any or Attr6c2_[loopvar: label].any or Attr6c1_[loopvar: label].any" optional="1" where="notdp">Additional cosmetic items</row>
<row label="ra7" cond="Attr7c3_[loopvar: label].any or Attr7c2_[loopvar: label].any or Attr7c1_[loopvar: label].any" optional="1" where="notdp">Additional boosters</row>
<row label="ra8" cond="Attr8c3_[loopvar: label].any or Attr8c2_[loopvar: label].any or Attr8c1_[loopvar: label].any" optional="1" where="notdp">In-game currency</row>
<row label="ra9" cond="Attr9c3_[loopvar: label].any or Attr9c2_[loopvar: label].any or Attr9c1_[loopvar: label].any" optional="1" where="notdp">Exclusive items</row>
<row label="ra10" cond="Attr10c3_[loopvar: label].any or Attr10c2_[loopvar: label].any or Attr10c1_[loopvar: label].any" optional="1" where="notdp">Ads</row>
<row label="ra11" cond="Attr11c3_[loopvar: label].any or Attr11c2_[loopvar: label].any or Attr11c1_[loopvar: label].any" optional="1" where="notdp">Subscription</row>
<row label="ra12" optional="1" where="notdp">Upfront game client cost</row>
<row label="r1" ss:rowClassNames="lastrow"/>
<style name="question.left" rows="ra1,ra2,ra3,ra4,ra5,ra6,ra7,ra8,ra9,ra10,ra11,ra12"><![CDATA[
\@if this.styles.ss.legendColWidth
<$(tag) scope="row" class="cell nonempty legend row-legend row-legend-left ${"row-legend-both " if ec.haveRightLegend and ec.haveLeftLegend else ""}row-legend-basic ${"mobile-left-row-legend " if force else ""}$(levels) ${"desktop" if this.grouping.cols else "mobile"} ${"row-legend-both-space " if ec.haveRightLegend and ec.haveLeftLegend and (not row.group or not row.index==0) else "border-collapse "} $(row.styles.ss.rowClassNames)" style="width:${this.styles.ss.legendColWidth}; min-width:${this.styles.ss.legendColWidth}">
<div class="att_title"><span class="level_text">$(text)</span></div>
</$(tag)>
\@else
<$(tag) scope="row" class="cell nonempty legend row-legend row-legend-left ${"row-legend-both " if ec.haveRightLegend and ec.haveLeftLegend else ""}row-legend-basic ${"mobile-left-row-legend " if force else ""}$(levels) ${"desktop" if this.grouping.cols else "mobile"} ${"row-legend-both-space " if ec.haveRightLegend and ec.haveLeftLegend and (row.group or not row.index==0) else "border-collapse "} $(row.styles.ss.rowClassNames)">
<div class="att_title"><span class="level_text">$(text)</span></div>
</$(tag)>
\@endif
]]></style>
<style cols="c1" name="question.element" rows="ra1,ra2,ra3,ra4,ra5,ra6,ra7,ra8,ra9,ra10,ra11,ra12"><![CDATA[
\@if ec.simpleList
<div class="element $(rowStyle) $(levels) $(extraClasses) ${col.group.styles.ss.groupClassNames if col.group else (row.group.styles.ss.groupClassNames if row.group else "")} $(col.styles.ss.colClassNames) $(row.styles.ss.rowClassNames) ${"clickableCell" if isClickable else ""}"$(extra)>
${Attr1c1_[loopvar: label].selected.text if ec.row.label=="ra1" else ""}
${Attr2c1_[loopvar: label].selected.text if ec.row.label=="ra2" else ""}
${Attr3c1_[loopvar: label].selected.text if ec.row.label=="ra3" else ""}
${Attr4c1_[loopvar: label].selected.text if ec.row.label=="ra4" else ""}
${Attr5c1_[loopvar: label].selected.text if ec.row.label=="ra5" else ""}
${Attr6c1_[loopvar: label].selected.text if ec.row.label=="ra6" else ""}
${Attr7c1_[loopvar: label].selected.text if ec.row.label=="ra7" else ""}
${Attr8c1_[loopvar: label].selected.text if ec.row.label=="ra8" else ""}
${Attr9c1_[loopvar: label].selected.text if ec.row.label=="ra9" else ""}
${Attr10c1_[loopvar: label].selected.text if ec.row.label=="ra10" else ""}
${Attr11c1_[loopvar: label].selected.text if ec.row.label=="ra11" else ""}
${Attr12c1_[loopvar: label].selected.text if ec.row.label=="ra12" else ""}
</div>
\@else
<$(tag) $(headers) class="cell nonempty element $(levels) ${"desktop" if this.grouping.cols else "mobile"} border-collapse $(extraClasses) ${col.group.styles.ss.groupClassNames if col.group else (row.group.styles.ss.groupClassNames if row.group else "")} $(col.styles.ss.colClassNames) $(row.styles.ss.rowClassNames) ${"clickableCell" if isClickable else ""}"$(extra)>
${Attr1c1_[loopvar: label].selected.text if ec.row.label=="ra1" else ""}
${Attr2c1_[loopvar: label].selected.text if ec.row.label=="ra2" else ""}
${Attr3c1_[loopvar: label].selected.text if ec.row.label=="ra3" else ""}
${Attr4c1_[loopvar: label].selected.text if ec.row.label=="ra4" else ""}
${Attr5c1_[loopvar: label].selected.text if ec.row.label=="ra5" else ""}
${Attr6c1_[loopvar: label].selected.text if ec.row.label=="ra6" else ""}
${Attr7c1_[loopvar: label].selected.text if ec.row.label=="ra7" else ""}
${Attr8c1_[loopvar: label].selected.text if ec.row.label=="ra8" else ""}
${Attr9c1_[loopvar: label].selected.text if ec.row.label=="ra9" else ""}
${Attr10c1_[loopvar: label].selected.text if ec.row.label=="ra10" else ""}
${Attr11c1_[loopvar: label].selected.text if ec.row.label=="ra11" else ""}
${Attr12c1_[loopvar: label].selected.text if ec.row.label=="ra12" else ""}
</$(tag)>
\@endif
]]></style>
<style cols="c2" name="question.element" rows="ra1,ra2,ra3,ra4,ra5,ra6,ra7,ra8,ra9,ra10,ra11,ra12"><![CDATA[
\@if ec.simpleList
<div class="element $(rowStyle) $(levels) $(extraClasses) ${col.group.styles.ss.groupClassNames if col.group else (row.group.styles.ss.groupClassNames if row.group else "")} $(col.styles.ss.colClassNames) $(row.styles.ss.rowClassNames) ${"clickableCell" if isClickable else ""}"$(extra)>
${Attr1c2_[loopvar: label].selected.text if ec.row.label=="ra1" else ""}
${Attr2c2_[loopvar: label].selected.text if ec.row.label=="ra2" else ""}
${Attr3c2_[loopvar: label].selected.text if ec.row.label=="ra3" else ""}
${Attr4c2_[loopvar: label].selected.text if ec.row.label=="ra4" else ""}
${Attr5c2_[loopvar: label].selected.text if ec.row.label=="ra5" else ""}
${Attr6c2_[loopvar: label].selected.text if ec.row.label=="ra6" else ""}
${Attr7c2_[loopvar: label].selected.text if ec.row.label=="ra7" else ""}
${Attr8c2_[loopvar: label].selected.text if ec.row.label=="ra8" else ""}
${Attr9c2_[loopvar: label].selected.text if ec.row.label=="ra9" else ""}
${Attr10c2_[loopvar: label].selected.text if ec.row.label=="ra10" else ""}
${Attr11c2_[loopvar: label].selected.text if ec.row.label=="ra11" else ""}
${Attr12c2_[loopvar: label].selected.text if ec.row.label=="ra12" else ""}
</div>
\@else
<$(tag) $(headers) class="cell nonempty element $(levels) ${"desktop" if this.grouping.cols else "mobile"} border-collapse $(extraClasses) ${col.group.styles.ss.groupClassNames if col.group else (row.group.styles.ss.groupClassNames if row.group else "")} $(col.styles.ss.colClassNames) $(row.styles.ss.rowClassNames) ${"clickableCell" if isClickable else ""}"$(extra)>
${Attr1c2_[loopvar: label].selected.text if ec.row.label=="ra1" else ""}
${Attr2c2_[loopvar: label].selected.text if ec.row.label=="ra2" else ""}
${Attr3c2_[loopvar: label].selected.text if ec.row.label=="ra3" else ""}
${Attr4c2_[loopvar: label].selected.text if ec.row.label=="ra4" else ""}
${Attr5c2_[loopvar: label].selected.text if ec.row.label=="ra5" else ""}
${Attr6c2_[loopvar: label].selected.text if ec.row.label=="ra6" else ""}
${Attr7c2_[loopvar: label].selected.text if ec.row.label=="ra7" else ""}
${Attr8c2_[loopvar: label].selected.text if ec.row.label=="ra8" else ""}
${Attr9c2_[loopvar: label].selected.text if ec.row.label=="ra9" else ""}
${Attr10c2_[loopvar: label].selected.text if ec.row.label=="ra10" else ""}
${Attr11c2_[loopvar: label].selected.text if ec.row.label=="ra11" else ""}
${Attr12c2_[loopvar: label].selected.text if ec.row.label=="ra12" else ""}
</$(tag)>
\@endif
]]></style>
<style cols="c3" name="question.element" rows="ra1,ra2,ra3,ra4,ra5,ra6,ra7,ra8,ra9,ra10,ra11,ra12"><![CDATA[
\@if ec.simpleList
<div class="element $(rowStyle) $(levels) $(extraClasses) ${col.group.styles.ss.groupClassNames if col.group else (row.group.styles.ss.groupClassNames if row.group else "")} $(col.styles.ss.colClassNames) $(row.styles.ss.rowClassNames) ${"clickableCell" if isClickable else ""}"$(extra)>
${Attr1c3_[loopvar: label].selected.text if ec.row.label=="ra1" else ""}
${Attr2c3_[loopvar: label].selected.text if ec.row.label=="ra2" else ""}
${Attr3c3_[loopvar: label].selected.text if ec.row.label=="ra3" else ""}
${Attr4c3_[loopvar: label].selected.text if ec.row.label=="ra4" else ""}
${Attr5c3_[loopvar: label].selected.text if ec.row.label=="ra5" else ""}
${Attr6c3_[loopvar: label].selected.text if ec.row.label=="ra6" else ""}
${Attr7c3_[loopvar: label].selected.text if ec.row.label=="ra7" else ""}
${Attr8c3_[loopvar: label].selected.text if ec.row.label=="ra8" else ""}
${Attr9c3_[loopvar: label].selected.text if ec.row.label=="ra9" else ""}
${Attr10c3_[loopvar: label].selected.text if ec.row.label=="ra10" else ""}
${Attr11c3_[loopvar: label].selected.text if ec.row.label=="ra11" else ""}
${Attr12c3_[loopvar: label].selected.text if ec.row.label=="ra12" else ""}
</div>
\@else
<$(tag) $(headers) class="cell nonempty element $(levels) ${"desktop" if this.grouping.cols else "mobile"} border-collapse $(extraClasses) ${col.group.styles.ss.groupClassNames if col.group else (row.group.styles.ss.groupClassNames if row.group else "")} $(col.styles.ss.colClassNames) $(row.styles.ss.rowClassNames) ${"clickableCell" if isClickable else ""}"$(extra)>
${Attr1c3_[loopvar: label].selected.text if ec.row.label=="ra1" else ""}
${Attr2c3_[loopvar: label].selected.text if ec.row.label=="ra2" else ""}
${Attr3c3_[loopvar: label].selected.text if ec.row.label=="ra3" else ""}
${Attr4c3_[loopvar: label].selected.text if ec.row.label=="ra4" else ""}
${Attr5c3_[loopvar: label].selected.text if ec.row.label=="ra5" else ""}
${Attr6c3_[loopvar: label].selected.text if ec.row.label=="ra6" else ""}
${Attr7c3_[loopvar: label].selected.text if ec.row.label=="ra7" else ""}
${Attr8c3_[loopvar: label].selected.text if ec.row.label=="ra8" else ""}
${Attr9c3_[loopvar: label].selected.text if ec.row.label=="ra9" else ""}
${Attr10c3_[loopvar: label].selected.text if ec.row.label=="ra10" else ""}
${Attr11c3_[loopvar: label].selected.text if ec.row.label=="ra11" else ""}
${Attr12c3_[loopvar: label].selected.text if ec.row.label=="ra12" else ""}
</$(tag)>
\@endif
]]></style>
<style name="question.after"><![CDATA[
<link rel="stylesheet" href="[rel cbc_style.css]">
]]></style>
<style name='el.noanswer'> <![CDATA[
\@if ec.simpleList
<div class="element">
\@endif
<div class="noansdiv"><span class="cell-sub-wrapper cell-legend-right"><span class="cell-input cell-sub-column">
<input type="radio" id="$(row.checkboxLabel)" name="$(row.checkboxLabel)" value="1" class="input no-answer checkbox" $(value|checkbox)/>
</span><span class="cell-text cell-sub-column"><label for="$(row.checkboxLabel)">$(label)</label></span></span></div>
\@if ec.simpleList
</div>
\@endif
]]></style>
<col label="c1" value="1">Concept 1</col>
<col label="c2" value="2">Concept 2</col>
<col label="c3" value="3">Concept 3</col>
<noanswer label="n99">None of these</noanswer>
</radio>
</block>
<looprow label="1">
<loopvar name="var1">1</loopvar>
</looprow>
<looprow label="2">
<loopvar name="var1">2</loopvar>
</looprow>
<looprow label="3">
<loopvar name="var1">3</loopvar>
</looprow>
<looprow label="4">
<loopvar name="var1">4</loopvar>
</looprow>
<looprow label="5">
<loopvar name="var1">5</loopvar>
</looprow>
<looprow label="6">
<loopvar name="var1">6</loopvar>
</looprow>
<looprow label="7">
<loopvar name="var1">7</loopvar>
</looprow>
<looprow label="8">
<loopvar name="var1">8</loopvar>
</looprow>
<looprow label="9">
<loopvar name="var1">9</loopvar>
</looprow>
<looprow label="10">
<loopvar name="var1">10</loopvar>
</looprow>
<looprow label="11">
<loopvar name="var1">11</loopvar>
</looprow>
<looprow label="12">
<loopvar name="var1">12</loopvar>
</looprow>
<looprow label="13">
<loopvar name="var1">13</loopvar>
</looprow>
<looprow label="14">
<loopvar name="var1">14</loopvar>
</looprow>
</loop>