Home News Contact Us Forum About Us Demos Products F.A.Q.
Shopping Cart
You currently have 0 items in your cart.


Recent Events
  • 31/12/2023 New Year SALE

    We are glad to announce New Year SALE. 25% discount for all our extensions. Use NY24 coupon code. Hurry up the discount is valid till 7 January.

  • 21/11/2023 BLACK FRIDAY 23 is coming

    BIG SALE, 35% discount for all our extensions. Use BF23 coupon code. Hurry up the discount is valid till 27 November.


2Checkout.com, Inc. is an authorized retailer of goods and services provided by ARI Soft. 2CheckOut




Follow us on twitter



Welcome, Guest
Please Login or Register.    Lost Password?

Change Radio Buttons for Answers
(1 viewing) (1) Guest
component
Go to bottomPage: 12345
TOPIC: Change Radio Buttons for Answers
#59445
Re:Change Radio Buttons for Answers 7 Years, 1 Month ago Karma: 0
Activ correct answer
The administrator has disabled public write access.
 
#59446
Re:Change Radio Buttons for Answers 7 Years, 1 Month ago Karma: 0
active wrong answer
The administrator has disabled public write access.
 
#59447
Re:Change Radio Buttons for Answers 7 Years, 1 Month ago Karma: 0
And yes only for single question
The administrator has disabled public write access.
 
#59459
Re:Change Radio Buttons for Answers 7 Years, 1 Month ago Karma: 746
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
The administrator has disabled public write access.
 
#59493
Re:Change Radio Buttons for Answers 7 Years, 1 Month ago Karma: 0
Dear ARI Team,

First off all - thanks your for great support.

Unfortunately, the code doesn’t help us.

We cant make it with this Code.

WE sent you our codding, there you can see how we did it in our earlier Project.

How can we manage this?
We hope you can help us.

Greetings

Pierre Köhler
CTO Heti-Tec
File Attachment:
File Name: QUIZ_Earlier_Projekt.zip
File Size: 2307
Last Edit: 2017/02/01 19:28 By Heti.
The administrator has disabled public write access.
 
#59495
Re:Change Radio Buttons for Answers 7 Years, 1 Month ago Karma: 746
Could you explain what problem do you have with the code which we provided?

Regards,
ARI Soft
The administrator has disabled public write access.
 
Go to topPage: 12345