Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

smiley face without radiobutton and submitting

manueltrevilla
Offline
New Member

More

12 years 10 months ago - 12 years 10 months ago #81914 by manueltrevilla

Replied by manueltrevilla on topic smiley face without radiobutton and submitting

Hi! Im really really new at this, I have tried this code to do exactly that effect, sad face, neutral face, happy face organized horizontally, and onclick response, it works great! but i can´t hide the radio buttons and text. i have a script that can hide the radio buttons but no mater where i put it it doesn´t work.
the code that i want to include is:
"// Hide the radio buttons

$( ‘#question’ + qid + ‘ input.radio’ ).hide();"

I have zero coding experience, please be patient, this is the full code that is working for me:

Code:

<div style="width:100%;">
  <div style="width:30%; float:left; margin-left: 2%; margin-right:1%">
    <a href="javascript:selectface(0);" onclick="$('form#limesurvey').submit();"><img class="face num0" src="https://localhost/limesurvey/imagenes/imagen1.jpeg" width="100%" /></a></div>
  <div style="width:30%; float:left; margin-left: 2%; margin-right:1%">
    <a href="javascript:selectface(1);" onclick="$('form#limesurvey').submit();"><img class="face num1" src="https://localhost/limesurvey/imagenes/imagen2.jpeg" width="100%" /></a></div>
  <div style="width:30%; float:left; margin-left: 2%; margin-right:1%">
    <a href="javascript:selectface(2);" onclick="$('form#limesurvey').submit();"><img class="face num2" src="https://localhost/limesurvey/imagenes/imagen3.jpeg" width="100%" /></a></div>
</div>
<script type="text/javascript" charset="utf-8">
 
    function selectface(face) {
        $('.face').removeClass('selected');
        $('#question5 input.radio:eq('+face+')').attr('checked', true);
        $('.num'+face).addClass('selected');
 
 
    }
 
    $(document).ready(function() {
 
        $('#question5 .survey-question-answer ').hide();
        $('#question5 .questionhelp ').hide();
$( ‘#question5 + qid + ‘ input.radio’ ).hide();

 
        selectface($('#question5 input.radio:checked').val() - 1);
 
    });
 // Hide the radio buttons
 
$( ‘#question’ + qid + ‘ input.radio’ ).hide();
 $( '#question' + qid + ' td.answer label.answertext' ).each(function(i) { 
                var id = $( this ).attr('for'); 
                if ( $( '#question' + qid + ' td.answer input#' + id + '' ).attr('checked') == true ) { 
                    $(this).css({ 'border':'10px solid ' + checkedBorder + '' }); 
                } 
                else { 
                    $(this).css({ 'border':'10px solid ' + uncheckedBorder + '' }); 
                } 
            }); 
 
 
            // Label pointer and width styles 
            // $( '#question' + qid + ' td.answer label.answertext' ).css({ 'cursor':'pointer', 'width':'auto' }); 
            $( '#question' + qid + ' td.answer label.answertext' ).css({ 'cursor':'pointer', 'width':'auto', 'height':'auto', 'display':'inline-block' });
 
            // Dennis - extra for the inline-block outline
            // Fix list text-indent 
            $( '#question' + qid + ' li' ).css({ 'text-indent':'0' });
 
 
            // Hover label border styles 
            $( '#question' + qid + ' td.answer label.answertext' ).hover(function () { // On mouseover 
                var id = $( this ).attr('for'); 
                $(this).css({ 'border':'10px solid ' + hoverBorder + '' }); 
            },  
            function () { // On mouseout 
                var id = $( this ).attr('for'); 
                if ( $( '#question' + qid + ' td.answer input#' + id + '' ).attr('checked') == true ) { 
                    $(this).css({ 'border':'10px solid ' + checkedBorder + '' }); 
                } 
                else { 
                    $(this).css({ 'border':'10px solid ' + uncheckedBorder + '' }); 
                } 
 
            }); 
 
</script>
<style type="text/css">
.face {
border:0px solid white;
}
 
.selected {
border:4px solid #cc0000;
}</style>

Last edit: 12 years 10 months ago by manueltrevilla.

The topic has been locked.

Mazi
Offline
LimeSurvey Community Team

More

12 years 10 months ago #81998 by Mazi

Replied by Mazi on topic smiley face without radiobutton and submitting

Try using '' or "" quotes only, your quotes might cause problems.

Also check that there are spaces before and after each { and } bracket.

Best regards/Beste Grüße,
Dr. Marcel Minke
survey-consulting.com
offlinesurveys.com
Feel free to contact me by email for professional LimeSurvey support!

The topic has been locked.

manueltrevilla
Offline
New Member

More

12 years 10 months ago - 12 years 10 months ago #82009 by manueltrevilla

Replied by manueltrevilla on topic smiley face without radiobutton and submitting

Thanks for your fast response, i checked the ' and the space before and after { } , the code is working very good, but the radio buttons are still there, I put the hide radio buttons code but it doesn´t seems to do anything. I picked the code from another post that you contributed: www.limesurvey.org/es/forum/design-issue...-answer-change-label But when I copy that exact working code in my questions you are still able to see the radio buttons, but it organize the images vertically not horizontally, so I chose the code from this post that is perfect asides form the radio buttons.
I include a capture of the survey with the new code and still showing the radio buttons.
Hope you can help out, I have a very good 2 days coding experience so it could be just a simple rookie question I´m sorry.

Code:

<div style="width:100%;">
  <div style="width:30%; float:left; margin-left: 2%; margin-right:1%">
    <a href="javascript:selectface(0);" onclick="$('form#limesurvey').submit();"><img class="face num0" src="https://localhost/limesurvey/imagenes/imagen1.jpeg" width="100%" /></a></div>
  <div style="width:30%; float:left; margin-left: 2%; margin-right:1%">
    <a href="javascript:selectface(1);" onclick="$('form#limesurvey').submit();"><img class="face num1" src="https://localhost/limesurvey/imagenes/imagen2.jpeg" width="100%" /></a></div>
  <div style="width:30%; float:left; margin-left: 2%; margin-right:1%">
    <a href="javascript:selectface(2);" onclick="$('form#limesurvey').submit();"><img class="face num2" src="https://localhost/limesurvey/imagenes/imagen3.jpeg" width="100%" /></a></div>
</div>
<script type="text/javascript" charset="utf-8">
 
    function selectface(face) {
        $('.face').removeClass('selected');
        $('#question4 input.radio:eq('+face+')').attr('checked', true);
        $('.num'+face).addClass('selected');
        $( '#question' + qid + ' input.radio' ).hide();
 
    }
 
    $(document).ready(function() {
 
        $('#question4 .survey-question-answer ').hide();
        $('#question4 .questionhelp ').hide();
 
        selectface($('#question69 input.radio:checked').val() - 1);
 
    } );
 
 
</script>
<style type="text/css">
.face {
border:0px solid white; 
 }
 
.selected {
border:4px solid #cc0000;
 }</style>

Last edit: 12 years 10 months ago by manueltrevilla.

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

12 years 10 months ago #82048 by tpartner

Replied by tpartner on topic smiley face without radiobutton and submitting

Manuel, I think the code you are using may be over-complicated.

Do you want a click on the image to set a hidden radio AND submit the page or just set a hidden radio and give the respondent some indication that it has been set?

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

The topic has been locked.

manueltrevilla
Offline
New Member

More

12 years 10 months ago #82441 by manueltrevilla

Replied by manueltrevilla on topic smiley face without radiobutton and submitting

Hi tpartner, the first choice is perfect, clickable images with auto submit it would be perfect. Again sorry for the trouble i´m a huge rookie.

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

12 years 10 months ago - 12 years 10 months ago #82460 by tpartner

Replied by tpartner on topic smiley face without radiobutton and submitting

Okay, this code will auto-submit the page but you can just comment out that line if you don't want it to.

Add the following to the source of the question and Replace "QQ" with the question ID :

Code:

<div style="width:100%;">
  <div style="float:left; margin-left: 2%; margin-right:1%">
    <img src="https://localhost/limesurvey/imagenes/imagen1.jpeg" />
  </div>
  <div style="float:left; margin-left: 2%; margin-right:1%">
    <img src="https://localhost/limesurvey/imagenes/imagen2.jpeg" />
  </div>
  <div style="float:left; margin-left: 2%; margin-right:1%">
    <img src="https://localhost/limesurvey/imagenes/imagen3.jpeg" />
  </div>
</div>
<script type="text/javascript" charset="utf-8">
 
  $(document).ready(function(){
 
    // Call the radioImages function with the question ID
    radioImages(QQ);
 
    function radioImages(qID) {
      // Hide radio list
      $('#question'+qID+' li[id^="javatbd"]:first').parent().hide();
 
      // Add some IDs and classes
      $('#question'+qID+' img').each(function(i){
        $(this).attr('id','img-'+qID+'-'+i).addClass('clickableImage');
      });
 
      // Set initial "selected" classe (in case a respondent returns to the page)
      if($('#question'+qID+' input.radio:checked').length > 0) {
        var radioIndex = $('#question'+qID+' input.radio:checked').index('input.radio');
        $('#question'+qID+' .clickableImage:eq('+radioIndex+')').addClass('clickableImageSelected');
      }
 
      // Hover effects
      $('#question'+qID+' img').hover(
        function () {
          $(this).addClass('clickableImageHover');
        }, 
        function () {
          $(this).removeClass('clickableImageHover');
        }
      );
 
      // Click events
      $('#question'+qID+' .clickableImage').click(function(){
        $('#question'+qID+' .clickableImageSelected').removeClass('clickableImageSelected');
        $(this).addClass('clickableImageSelected');
        var imgIndex = $(this).attr('id').split(qID+'-')[1];
        $('#question'+qID+' input.radio:eq('+imgIndex+')').click();
        // Submit the page
        if($('#movesubmitbtn').length > 0) {
          document.limesurvey.move.value = 'movesubmit';
        }
        else {
          document.limesurvey.move.value = 'movenext';
        }
        document.limesurvey.submit();
      });
    }
  });
 
</script>

Then add this to the end of template.css (your code had styles embedded in the <body> of the page which is a no-no):

Code:

.clickableImage {
  border: 2px solid transparent;
}
 
.clickableImageHover {
  border-color: #66FF66;
}
 
.clickableImageSelected {
  border-color: #009900;
}

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Last edit: 12 years 10 months ago by tpartner.

The topic has been locked.

manueltrevilla
Offline
New Member

More

12 years 10 months ago - 12 years 10 months ago #82537 by manueltrevilla

Replied by manueltrevilla on topic smiley face without radiobutton and submitting

Thanks so so much for your support, I don´t really know why it doesn´t work, with that code the radio buttons and submit buttons are visible to the left side of the screen breaking a little bit the format.
I was thinking why i want to do something that diferent if LimeSurvey offer a star rating JQuery Plugin that works very good. So to stop the hassle im going with it, (I will keep trying to fix my mistake with your code, is a good practice for a rookie) but now I just want to auto submit the question when you click on the rating. I tried tu cut your code to just include that part of the code but is not working. Can you help with it?

Code:

      // Click events
      $('#question'+qID+' .clickableImage').click(function(){
        $('#question'+qID+' .clickableImageSelected').removeClass('clickableImageSelected');
        $(this).addClass('clickableImageSelected');
        var imgIndex = $(this).attr('id').split(qID+'-')[1];
        $('#question'+qID+' input.radio:eq('+imgIndex+')').click();
        // Submit the page
        if($('#movesubmitbtn').length > 0) {
          document.limesurvey.move.value = 'movesubmit';
        }
        else {
          document.limesurvey.move.value = 'movenext';
        }
        document.limesurvey.submit();
      });
    }
  });
 
</script>

Last edit: 12 years 10 months ago by manueltrevilla.

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

12 years 10 months ago #82565 by tpartner

Replied by tpartner on topic smiley face without radiobutton and submitting

This will submit the page when you click a star:

Code:

<script type="text/javascript" charset="utf-8">
 
  $(document).ready(function(){
 
    $('.star-rating').click(function(){
      if($('#movesubmitbtn').length > 0) {
        document.limesurvey.move.value = 'movesubmit';
      }
      else {
        document.limesurvey.move.value = 'movenext';
      }
      document.limesurvey.submit();
    });
  });
 
</script>

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

The topic has been locked.

matct
Offline
New Member

More

10 years 1 month ago #118670 by matct

Replied by matct on topic smiley face without radiobutton and submitting

tpartner wrote: Okay, this code will auto-submit the page but you can just comment out that line if you don't want it to.

Add the following to the source of the question and Replace "QQ" with the question ID :

Code:

<div style="width:100%;">
  <div style="float:left; margin-left: 2%; margin-right:1%">
    <img src="https://localhost/limesurvey/imagenes/imagen1.jpeg" />
  </div>
  <div style="float:left; margin-left: 2%; margin-right:1%">
    <img src="https://localhost/limesurvey/imagenes/imagen2.jpeg" />
  </div>
  <div style="float:left; margin-left: 2%; margin-right:1%">
    <img src="https://localhost/limesurvey/imagenes/imagen3.jpeg" />
  </div>
</div>
<script type="text/javascript" charset="utf-8">
 
  $(document).ready(function(){
 
    // Call the radioImages function with the question ID
    radioImages(QQ);
 
    function radioImages(qID) {
      // Hide radio list
      $('#question'+qID+' li[id^="javatbd"]:first').parent().hide();
 
      // Add some IDs and classes
      $('#question'+qID+' img').each(function(i){
        $(this).attr('id','img-'+qID+'-'+i).addClass('clickableImage');
      });
 
      // Set initial "selected" classe (in case a respondent returns to the page)
      if($('#question'+qID+' input.radio:checked').length > 0) {
        var radioIndex = $('#question'+qID+' input.radio:checked').index('input.radio');
        $('#question'+qID+' .clickableImage:eq('+radioIndex+')').addClass('clickableImageSelected');
      }
 
      // Hover effects
      $('#question'+qID+' img').hover(
        function () {
          $(this).addClass('clickableImageHover');
        }, 
        function () {
          $(this).removeClass('clickableImageHover');
        }
      );
 
      // Click events
      $('#question'+qID+' .clickableImage').click(function(){
        $('#question'+qID+' .clickableImageSelected').removeClass('clickableImageSelected');
        $(this).addClass('clickableImageSelected');
        var imgIndex = $(this).attr('id').split(qID+'-')[1];
        $('#question'+qID+' input.radio:eq('+imgIndex+')').click();
        // Submit the page
        if($('#movesubmitbtn').length > 0) {
          document.limesurvey.move.value = 'movesubmit';
        }
        else {
          document.limesurvey.move.value = 'movenext';
        }
        document.limesurvey.submit();
      });
    }
  });
 
</script>

Then add this to the end of template.css (your code had styles embedded in the <body> of the page which is a no-no):

Code:

.clickableImage {
  border: 2px solid transparent;
}
 
.clickableImageHover {
  border-color: #66FF66;
}
 
.clickableImageSelected {
  border-color: #009900;
}

When I use this including the auto submit, I get no completed results, the answer is not saved to the database.
Did something change between this years ago and current stable?

The topic has been locked.

Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans

Get started

Welcome to the LimeSurvey Community Forum

smiley face without radiobutton and submitting

Lime-years ahead

Legal

About Us

Open Source