Welcome to the LimeSurvey Community Forum

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

Search Results (Searched for: html)

  • Joffm
  • Joffm's Avatar
Yesterday 17:15
Replied by Joffm on topic MATRIZ EXTENSA
@yuleidis,
todavia no has respondido a mis preguntas.
Por lo tanto sólo puedo mostrar los scripts utilizados.
Todos estos ya están disponibles aquí en el foro.

a. Para mostrar filas una tras otra:
Code:
<script>
$(document).ready(function() {
 
   // A function to add or remove rows of an Array (Multi Flexible)(Text) question
    function varLengthArray(qID) {
        
        if ($('#question'+qID+'').length > 0) {
            
            // The HTML content of the Add/Remove elements - modify as you wish
            var addContent = '[+] Añadir';
            var removeContent = '[-] Eliminar';
 
            // Create the Add and Remove elements &amp; insert them
            // Adjust colors by using other bootstrap classes
            // „btn-primary“, „btn-success“, „btn-info“, „btn-warning“, „btn-danger“
            var el1 = document.createElement('div');
            el1.setAttribute('id','addButton'+qID);
            el1.setAttribute('class','btn btn-success');
            document.body.appendChild(el1);
            var el2 = document.createElement('div');
            el2.setAttribute('id','removeButton'+qID);
            el2.setAttribute('class','btn btn-danger');
            document.body.appendChild(el2);
 
            // Move them to after the array
            $( 'div#addButton'+qID ).appendTo($( '#question' + qID + ' table.ls-answers' ).parent());
            $( 'div#removeButton'+qID ).appendTo($( '#question' + qID + ' table.ls-answers' ).parent());
 
            // Insert their HTML
            $( 'div#addButton'+qID ).html( addContent );
            $( 'div#removeButton'+qID ).html( removeContent );
 
            // Style the elements - you can modify here if you wish
            $( 'div#addButton'+qID ).css({
                'margin':'10px 0 10px 10px',
                'padding':'1px',
                'text-align':'center',
                'width':'auto',
                'cursor':'pointer',
                'float':'left'
            });
 
            $( 'div#removeButton'+qID ).css({
                'margin':'10px 0 10px 10px',
                'padding':'1px',
                'text-align':'center',
                'width':'auto',
                'cursor':'pointer',
                'float':'left'
            });
 
            // Initially hide the Remove element
            $( 'div#removeButton'+qID ).hide();
 
            // Call the functions below when clicked
            $( 'div#addButton'+qID ).click(function (event) {
                addRow(qID);
            });
            $( 'div#removeButton'+qID ).click(function (event) {
                removeRow(qID);
            });
 
            // Function to add a row, also shows the Remove element and hides the
            //Add element if all rows are shown
            function addRow(qID) {
                var arrayRow = '#question' + qID + ' table.ls-answers tr.subquestion-list';
                var rowCount = $( arrayRow ).size() - 1;
                $( arrayRow + '[name="hidden"]:first' ).attr('name', 'visible').show();
                $( 'div#removeButton'+qID ).show();
                if ( $( arrayRow + ':eq(' + rowCount + ')' ).attr('name') == 'visible' )  {
                    $( 'div#addButton'+qID ).hide();
                }
            }
 
            // Function to remove a row, also clears the contents of the removed row,
            // shows the Add element if the last row is hidden and hides the Remove
            // element if only the first row is shown
            function removeRow(qID) {
                var arrayRow = '#question' + qID + ' table.ls-answers tr.subquestion-list';
                var rowCount = $( arrayRow ).size() - 1;
                $( arrayRow + '[name="visible"]:last input[type="text"]' ).val('');
                $( arrayRow + '[name="visible"]:last' ).attr('name', 'hidden').hide();
                $( 'div#addButton'+qID ).show();
                if ( $( arrayRow + ':eq(1)' ).attr('name') == 'hidden' )  {
                    $( 'div#removeButton'+qID ).hide();
                }
            }
 
            // Just some initialization stuff
            var arrayRow = '#question' + qID + ' table.ls-answers tr.subquestion-list';
            var rowCount = '';
 
            // Initially hide all except first row or any rows with populated inputs
            $( arrayRow ).each(function(i) {
                if ( i > 0 ) {
                    // We also need to give the hidden rows a name cause IE doesn't
                    // recognize jQuery :visible selector consistently
                    $( this ).attr('name', 'hidden').hide();
 
                    $('input[type=text]', this).each(function(i) {
                        if ($(this).attr('value') != '') {
                            $(this).parents('tbody:eq(0)').attr('name', 'visible').show();
                            $( 'div#removeButton'+qID ).show();
                        }
                    });
                    rowCount = i;
                }
            });
        }
    }
    // Call the function with a question ID
    varLengthArray({QID});
});
</script>

b. Para mostrar columnas de diferentes anchos
Code:
 <script type="text/javascript" charset="utf-8">
  $(document).on('ready pjax:scriptcomplete',function(){
    var thisQuestion = $('#question{QID}');
    // Add a question class
    thisQuestion.addClass('custom-array');
 
    // Column-specific classes
    $('table.subquestion-list tr', thisQuestion).each(function(i) {
      $('th, td', this).each(function(i) {
        $(this).addClass('column-'+i);
      });
    });
  });
</script>
Code:
<style type="text/css">.custom-array table.subquestion-list col {
    width: auto !important;
  }
 
  .custom-array table.subquestion-list thead .column-0 {  width: 5%; }
  .custom-array table.subquestion-list thead .column-1 {  width: 10%; }
  .custom-array table.subquestion-list thead .column-2 {  width: 20%; }
  .custom-array table.subquestion-list thead .column-3 {  width: 10%; }
  .custom-array table.subquestion-list thead .column-4 {  width: 25%; }
  .custom-array table.subquestion-list thead .column-5 {  width: 30%; }
</style>
 


c. Para crear un menú desplegable en una columna (aquí columna con código "X003")
Code:
<script type="text/javascript" charset="utf-8">
  $(document).on('ready pjax:scriptcomplete',function(){
    var thisQuestion = $('#question{QID}');
 
    // Insert selects
    $('.answer-item.answer_cell_X003', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\
  <option value="">...</option>\
            <option value="1">Si</option>\
            <option value="2">No</option>\
    </select>');
 
 
   // Listeners
    $('.inserted-select', thisQuestion).on('change', function(i) {
      if($(this).val() != '') {
        $(this).closest('.answer-item').find('input:text').val($('option:selected', this).val()).trigger('change');
      }
      else {
        $(this).closest('.answer-item').find('input:text').val('').trigger('change');
      }
    });
     // Returning to page
    $('.with-select input:text', thisQuestion).each(function(i) {
      var thisCell = $(this).closest('.answer-item');
      var inputText = $.trim($(this).val());
      $('select.inserted-select', thisCell).val(inputText);
    });
   // Clean-up styles
    $('select.inserted-select', thisQuestion).css({
      'max-width': '100%'
    });
    $('.with-select input:text', thisQuestion).css({
      'position': 'absolute',
      'left': '-9999em'
    });
  });
</script>

d. Para crear una máscara de entrada (aquí columna con código "X001")
1. Robin Herbots
[url] github.com/RobinHerbots/Inputmask [/url]
[url] robinherbots.github.io/Inputmask/#/documentation [/url]
Code:
 <script src="https://cdnjs.cloudflare.com/ajax/libs/inputmask/4.0.9/jquery.inputmask.bundle.min.js"></script> <script type="text/javascript" charset="utf-8">
    $(document).on('ready pjax:scriptcomplete',function(){ 
         $('#question{QID} .answer_cell_X001 input[type="text"]').inputmask({ regex: "([01][0-9])|([2][0-4]):([0-5][0-9])",
            'placeholder': 'hh:mm',
            'removeMaskOnSubmit': false,
            'rightAlign': false,
        });
    });
</script>

2. Igor Escobar (Opción diferente)
[url] igorescobar.github.io/jQuery-Mask-Plugin/ [/url]

e. Encabezados adicionales
Code:
<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:scriptcomplete',function(){
    // Insert the column categories
    $('#question{QID} table.subquestion-list thead tr:eq(0) td:eq(0)').remove();
    $('#question{QID} table.subquestion-list thead').prepend('<tr class="ls-heading">\
      <td rowspan="2" colspan="1" style="border-top:0 !important;"></td>\
      <th class="answer-text inserted-header" colspan="1"></th>\
      <th class="answer-text inserted-header" colspan="1"></th>\
      <th class="answer-text inserted-header" colspan="1"></th>\
      <th class="answer-text inserted-header" colspan="1"></th>\
      <th class="answer-text inserted-header" colspan="2">Temperatura</th>\
      <th class="answer-text inserted-header" colspan="5">Hallazgo de las canales</th>\
      <th class="answer-text inserted-header" colspan="1"></th>\
      <th class="answer-text inserted-header" colspan="1"></th>\
    </tr>');
    });    
</script>

f. Convertir campos de texto en casillas de verificación (no exclusivo)
Code:
<script type="text/javascript" charset="utf-8">  
    $(document).on('ready pjax:scriptcomplete',function(){
 
        // Identify this question
        var thisQuestion = $('#question{QID}');
 
        // Column-specific classes
        $('tr.subquestion-list', thisQuestion).each(function(i) {
            $('th, td', this).each(function(i) {
                $(this).addClass('column-'+i);
            });
        });
        
        // Insert checkboxes
        $('.answer-item.column-7, .answer-item.column-8, .answer-item.column-9, .answer-item.column-10, .answer-item.column-11', thisQuestion).addClass('custom-checkbox-item');
        $('.custom-checkbox-item', thisQuestion).each(function(i) {
            var thisID = $('input:text:eq(0)', this).attr('id');
            $('label', this).before('<input class="" id="'+thisID+'" value="Y" type="checkbox" name="'+thisID.replace(/answer/, '')+'" />');
            if($('input:text:eq(0)', this).val() == 'Y') {
                $('input:checkbox:eq(0)', this).prop('checked', true);
            }
            $(this).removeClass('text-item').addClass('checkbox-item');
            $('input:text:eq(0)', this).remove();
        });      
    });
</script> 

Es tu obligación transferir este cuestionario en papel a un diseño razonable para una encuesta en Internet.

Joffm
  • Joffm
  • Joffm's Avatar
Yesterday 16:49
No veo nigun problema.
He usado este script sin comparar con tuyo.
Code:
<script>
$(document).ready(function() {
 
   // A function to add or remove rows of an Array (Multi Flexible)(Text) question
    function varLengthArray(qID) {
        
        if ($('#question'+qID+'').length > 0) {
            
            // The HTML content of the Add/Remove elements - modify as you wish
            var addContent = '[ + ]';
            var removeContent = '[ - ]';
 
            // Create the Add and Remove elements &amp; insert them
            // Adjust colors by using other bootstrap classes
            // „btn-primary“, „btn-success“, „btn-info“, „btn-warning“, „btn-danger“
            var el1 = document.createElement('div');
            el1.setAttribute('id','addButton'+qID);
            el1.setAttribute('class','btn btn-success');
            document.body.appendChild(el1);
            var el2 = document.createElement('div');
            el2.setAttribute('id','removeButton'+qID);
            el2.setAttribute('class','btn btn-danger');
            document.body.appendChild(el2);
 
            // Move them to after the array
            $( 'div#addButton'+qID ).appendTo($( '#question' + qID + ' table.ls-answers' ).parent());
            $( 'div#removeButton'+qID ).appendTo($( '#question' + qID + ' table.ls-answers' ).parent());
 
            // Insert their HTML
            $( 'div#addButton'+qID ).html( addContent );
            $( 'div#removeButton'+qID ).html( removeContent );
 
            // Style the elements - you can modify here if you wish
            $( 'div#addButton'+qID ).css({
                'margin':'10px 0 10px 10px',
                'padding':'1px',
                'text-align':'center',
                'width':'auto',
                'cursor':'pointer',
                'float':'left'
            });
 
            $( 'div#removeButton'+qID ).css({
                'margin':'10px 0 10px 10px',
                'padding':'1px',
                'text-align':'center',
                'width':'auto',
                'cursor':'pointer',
                'float':'left'
            });
 
            // Initially hide the Remove element
            $( 'div#removeButton'+qID ).hide();
 
            // Call the functions below when clicked
            $( 'div#addButton'+qID ).click(function (event) {
                addRow(qID);
            });
            $( 'div#removeButton'+qID ).click(function (event) {
                removeRow(qID);
            });
 
            // Function to add a row, also shows the Remove element and hides the
            //Add element if all rows are shown
            function addRow(qID) {
                var arrayRow = '#question' + qID + ' table.ls-answers tr.subquestion-list';
                var rowCount = $( arrayRow ).size() - 1;
                $( arrayRow + '[name="hidden"]:first' ).attr('name', 'visible').show();
                $( 'div#removeButton'+qID ).show();
                if ( $( arrayRow + ':eq(' + rowCount + ')' ).attr('name') == 'visible' )  {
                    $( 'div#addButton'+qID ).hide();
                }
            }
 
            // Function to remove a row, also clears the contents of the removed row,
            // shows the Add element if the last row is hidden and hides the Remove
            // element if only the first row is shown
            function removeRow(qID) {
                var arrayRow = '#question' + qID + ' table.ls-answers tr.subquestion-list';
                var rowCount = $( arrayRow ).size() - 1;
                $( arrayRow + '[name="visible"]:last input[type="text"]' ).val('');
                $( arrayRow + '[name="visible"]:last' ).attr('name', 'hidden').hide();
                $( 'div#addButton'+qID ).show();
                if ( $( arrayRow + ':eq(1)' ).attr('name') == 'hidden' )  {
                    $( 'div#removeButton'+qID ).hide();
                }
            }
 
            // Just some initialization stuff
            var arrayRow = '#question' + qID + ' table.ls-answers tr.subquestion-list';
            var rowCount = '';
 
            // Initially hide all except first row or any rows with populated inputs
            $( arrayRow ).each(function(i) {
                if ( i > 0 ) {
                    // We also need to give the hidden rows a name cause IE doesn't
                    // recognize jQuery :visible selector consistently
                    $( this ).attr('name', 'hidden').hide();
 
                    $('input[type=text]', this).each(function(i) {
                        if ($(this).attr('value') != '') {
                            $(this).parents('tbody:eq(0)').attr('name', 'visible').show();
                            $( 'div#removeButton'+qID ).show();
                        }
                    });
                    rowCount = i;
                }
            });
        }
    }
    // Call the function with a question ID
    varLengthArray({QID});
});
</script>



 
  • holch
  • holch's Avatar
09 May 2024 21:42
Replied by holch on topic Display images in dropdown answers
I don't think it is possible to show images within a html dropdown. You would have to try to create your "own" dropdown via layers and Javascript, I guess.

stackoverflow.com/questions/4941004/putt...s-in-a-dropdown-list
  • MinaRa
  • MinaRa's Avatar
09 May 2024 19:10
Autoplay Videos auf Safari/Mac was created by MinaRa
Hallo ihr Lieben, 

im Rahmen meiner Bachelorarbeit möchte ich gerne über LimeSurvey Daten erheben. U.a. werden die Teilnehmenden zwischendurch immer einen 5 Sekunden Countdown als Video sehen. Das Video habe ich von YouTube und bereits eingepflegt ->  Videolink  

Nun ist mein Problem, dass es nicht automatisch startet und dann weiter zur nächsten Frage springt, sondern man "Play" drücken, das Video dann startet und man dann weiter klicken muss. Ich möchte jedoch, dass es automatisch nach dem vorherigen Countdown startet und automatisch dann weiter geht zur nächsten Frage.

Den Code seht ihr hier: 

<div class="ckeditor-html5-video" style="text-align: center;">
<video autoplay="autoplay" controlslist="nodownload" src="/upload/surveys/786863/files/5%20second%20countdown%20with%20sound%20effect.mp4"> </video>
</div>
<p> </p>


Vielleicht könnt ihr mir weiterhelfen, dass wäre super lieb!
Danke im Voraus :) 
  • MaJu24
  • MaJu24's Avatar
09 May 2024 13:29
Display images in dropdown answers was created by MaJu24
(Write here your question/remark)Your LimeSurvey version: Version 5.6.59+240416
Own server or LimeSurvey hosting: Own Server
==================
In my survey I want to display little images next to the answers of a dropdown/select(multiple answers, single choice) question.
Unfortunately html ignores images in <option> tags. I tried a few workarounds, but could not get it to go.

For clarification, what I want to achieve:

Question 1 (Dropdown/Select)
 - [img1] Answer 1
 - [img2] Answer 2
 - [img3] Answer 3


Thanks in advance!
  • Joffm
  • Joffm's Avatar
29 Apr 2024 20:40
Hay muchos errores.

1. No debes crear una página HTML, puedes usar código HTML
2. El guión para los menús desplegables
  • no es el guión estándar
  • guarda códigos y no los textos
3. .shown es solo para preguntas codificadas para mostrar el texto.

Acabo de cambiar algo rápidamente.
 
 


limeMpdf está disponible con Limesurvey 6.x. compatible
 

Joffm
  • blacho
  • blacho's Avatar
29 Apr 2024 19:38
Ayúdenos a ayudarle y rellene los siguientes campos:.
Su versión de LimeSurvey: 6.2.11
Servidor propio o LimeSurvey Cloud: propio
Plantilla de diseño utilizada: fruity
==================
hola quiero hacer que unas respuestas de las matrices me aparezcan en pdf report, pero como las matrices las tengo personalizadas con codigo fuente html probablemente sea por eso que no se leen, pero la estructura tiene que ser asi y asi debe de funcionar
he mirado si por limepdf pero al parecer solo es hasta la version 5x de LS y yo ando en 6x, me podrian ayudar a que esas respuestas aparezcan en el pdf report y gracias.

File Attachment:

File Name: limesurvey...3163.lss
File Size:150 KB
  • orri.eiriksson
  • orri.eiriksson's Avatar
29 Apr 2024 15:44
Create a new survey using the API was created by orri.eiriksson
Please help us help you and fill where relevant:
Your LimeSurvey version: 6.5.4
Own server or LimeSurvey hosting: LimeSurvey hosting
Survey theme/template: Any
==================
Hello all,
I wanted to know if it's possible to create a new survey from scratch using only the API.  I don't see any direct calls for it, except perhaps the import_survey method ( api.limesurvey.org/classes/remotecontrol...method_import_survey ). Incidentally, I can't find any documentation on the "survey lsa archive" one might be able to use for that.

Can anyone help me out?
  • Joffm
  • Joffm's Avatar
28 Apr 2024 20:20
Something like this?
 

Add a dummy prefix and suffix and add this to the question text (in source code mode)
and adapt to your needs
Code:
<script type="text/javascript">    
    $(document).on('ready pjax:scriptcomplete',function(){
 
        // Change the prefixes
          $('#question{QID} .ddprefix:eq(0)').html('Pre1');
         $('#question{QID} .ddprefix:eq(1)').html('Pre2');
         $('#question{QID} .ddprefix:eq(2)').html('Pre3');
         $('#question{QID} .ddprefix:eq(3)').html('Pre4');
        $('#question{QID} .ddprefix:eq(4)').html('Pre5');
         $('#question{QID} .ddprefix:eq(5)').html('Pre6');
         $('#question{QID} .ddprefix:eq(6)').html('Pre7');
         $('#question{QID} .ddprefix:eq(7)').html('Pre8');
 
        // Change the suffixes
          $('#question{QID} .ddsuffix:eq(0)').html('Suff1');
         $('#question{QID} .ddsuffix:eq(1)').html('Suff2');
         $('#question{QID} .ddsuffix:eq(2)').html('Suff3');
         $('#question{QID} .ddsuffix:eq(3)').html('Suff4');
        $('#question{QID} .ddsuffix:eq(4)').html('Suff5');
         $('#question{QID} .ddsuffix:eq(5)').html('Suff6');
         $('#question{QID} .ddsuffix:eq(6)').html('Suff7');
         $('#question{QID} .ddsuffix:eq(7)').html('Suff8');
    });
</script>
 
  • Wissensarchitektur
  • Wissensarchitektur's Avatar
26 Apr 2024 11:23
Bulk change radio list to bootstap buttons was created by Wissensarchitektur
Please help us help you and fill where relevant:
Your LimeSurvey version: 6.5.4
Own server or LimeSurvey hosting: Limesurvery hosting
Survey theme/template:  Edited version of fruity
==================
Hello,
I'm preparing a survey in which respondents will receive random ideas and should respond to these ideas with a single click on a bootstrap button. The ideas are inserted as random questions in one question group and users are expected to respond to as many as they wish.

I have created a template and exported it to CSV where I have added the HTML text of the questions (i.e. ideas to be evaluated). When I upload the CSV as a new survey all bootstrap buttons are changed to radio lists, because both answer types have the same code in the CSV table ("L").

There are 1300 questions (randomly displayed ideas to be evaluated) making it impractical to change them all manually to bootstrap buttons. Is there a way to change all radio lists to bootstrap buttons in bulk?
How can I upload the questionaire CSV in a way that all answers options are displayed as bootstrap buttons and not as radio lists?


 
  • free521521521
  • free521521521's Avatar
25 Apr 2024 21:22
The Email template button issue. was created by free521521521
I want to add a button in Email template, so I use:
Code:
<a href="{SURVEYURL}" style="background-color: #4CAF50; color: white; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 12px;">Start Survey</a>

But when I check the test Email it show this:
" www.sample.com/survey/index.php?r=survey...token=xxxxxx=zh-Hans " style="background-color: #4CAF50; color: white; padding: 12px 18px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 12px;">Start Survey"

Seems the SURVEYURL broke the HTML button, how to solve this problem?

​​​​​​​Thanks!
  • DenisChenu
  • DenisChenu's Avatar
25 Apr 2024 14:26 - 25 Apr 2024 14:36
> The demo files you find in the folder "demo" of the plugin.

No :) In the plugin configuration :) (need update plugin )
 

Attachment not found



> Short: With limeMpdf you can use the bootstrap options.

Long :
  1. mpdf is really more powerfull than tcpdf on HTML support .
  2. LimeMpdf allow you to have your own header/footer/content etc …
  3. LimeMPDF include some dedicated tag for example : in the demo survey : i use <radio> and <radio-checked> tag
  • tpartner
  • tpartner's Avatar
24 Apr 2024 19:30
I have removed my name from your script credit - I did not code the randomization.

If you want to duplicate the headers at the bottom of the table, try this after your randomization. (it will result in slightly invalid HTML)

Code:
$('table.subquestion-list', thisQuestion).append($('table.subquestion-list thead', thisQuestion).clone());
  • DenisChenu
  • DenisChenu's Avatar
24 Apr 2024 13:33
Replied by DenisChenu on topic Import question using LImeSurvey API
You can export such lsq file from any limesurvey, think it's the best solution (dobne for this)
Your write import question
Else you have set_question_properties

And PLEASE ! AGAIN : stackoverflow.com/help/how-to-ask
Displaying 1 - 15 out of 4736 results.

Lime-years ahead

Online-surveys for every purse and purpose