Open questions.js file, find "getRadioViewHtml" method for "SingleQuestion" question and replace it with the following code:
| Code: |
getRadioViewHtml: function (readOnly) {
var id = this.getId(),
answers = '',
containerTemplate = '<div id="#{containerId}" class="aq-singlequestion">#{answers}<br class="aq-clear" /></div>',
itemTemplate =
'<div class="aq-answer-container">\
<div class="aq-answer-label"><label for="sa#{questionId}_#{hidQueId}">#{choice} #{num}</label> <input type="radio" class="aq-singlequestion-ctrl" id="sa#{questionId}_#{hidQueId}" name="#{ctrlId}" value="#{hidQueId}" #{checked} #{readonly} /></div>\
<div class="aq-answer #{selectedClass}" onclick="YAHOO.util.Dom.getElementsByClassName(\'aq-answer\',null,\'#{containerId}\',function(el){el.removeClass(\'aq-answer-selected\')});YAHOO.util.Dom.addClass(this,\'aq-answer-selected\');YAHOO.util.Dom.get(\'sa#{questionId}_#{hidQueId}\').checked=true;">#{answer}' + (this.postfix ? ' <span class="aq-singlequestion-postfix">' + this.postfix + '</span>' : '') + '</div>\
<br class="aq-clear" />\
</div>';
if (this.questionData) {
for (var i = 0, cnt = this.questionData.length; i < cnt; i++) {
var dataItem = this.questionData[i],
checked = dataItem['selected'] || false;
answers += AS.core.format(itemTemplate, {
hidQueId: dataItem.hidQueId,
ctrlId: id,
questionId: this.questionId,
answer: dataItem['tbxAnswer'],
choice: LM.getMessage('COM_ARIQUIZ_CHOICE'),
num: AQ.questions.util.getAnswerNumber(i + 1, this.answersOrderType),
checked: checked ? ' checked="checked"' : '',
selectedClass: checked ? 'aq-answer-selected' : '',
readonly: readOnly ? ' disabled="disabled"' : ''
})
}
};
return AS.core.format(containerTemplate, {
"containerId": this.getContainerId(),
"answers": answers
});
},
|
and add the following CSS rules to a CSS file (for example to a site template CSS file):
| Code: |
.aq-singlequestion {padding-right:20px;}
.aq-singlequestion .aq-answer-label {display:none;}
.aq-singlequestion .aq-answer-container .aq-clear {display:none;}
.aq-singlequestion .aq-answer {width:100%;cursor:pointer;border:1px solid #c4c4c4;background:linear-gradient(#fefefe,#e7e7e7);padding:10px!important;border-radius:10px;text-align:center;}
.aq-singlequestion .aq-answer-selected {background:#fff326;}
|
It will show single questions like on the screenshot below. You can add some styles to adapt it for your design:
Regards,
ARI Soft
