0

I have created a survey using LimeSurvey tool. For some customization, I have to implement the following task.

Screenshot:

Here, when the user clicks on the Next and if any of the questions are not answered, I want to inform the user that they have missed to answer.

So when they click on Next, I would like to see a confirm box (Javascript) , which displays a message saying you have missed. Ther will be "It is Okay, proceed to next page" button and " I will stay here and answer" button.

"It is Okay, proceed to next page" button should do the same functionality of the "Next" button.

" I will stay here and answer" button will let the users stay in the same page.

I know it is possible using Javascript, I am not sure how to implement this specific task.

I just know that the ID of the Next button is "movenextbtn".

But how will I check whether a question has not been answered when clicking Next button and also using the confirm box how will I proceed to next page or stay in the same page.

Any help would be much much appreciated.

Thanks in advance.

Kevin
  • 41,694
  • 12
  • 53
  • 70
Anakata Andrese
  • 39
  • 1
  • 7
  • something similar to this http://stackoverflow.com/questions/14957604/javascript-radio-button-confirmation .. But it didnt help at all – Anakata Andrese Aug 08 '14 at 07:41
  • You have to give some more information. Bare minimum, the classes/id's of the radio buttons – Abhilash Aug 08 '14 at 07:50
  • Just make the question mandatory and put a no-answer option in the survey, no need to over complicate it. – Pwner Aug 08 '14 at 08:21
  • I could see from Firebug that "answertext" is the class of the table which has the radio button questions. "answer_cell_001 answer-item radio-item" is the class of the radio button – Anakata Andrese Aug 08 '14 at 08:30
  • @Pwner No we are doing a research survey and cannot mandate people to answer, at the same time we are not ready to inform them if they have missed something by mistake. – Anakata Andrese Aug 08 '14 at 08:31

2 Answers2

0

This bit of code assumes that you're only interested in radio buttons on the form that has a button with an id of movenextbtn. You'd have to insert it somewhere in your page.

<script>                                                                        
  // wait for everything to load                                                
  window.addEventListener('load', function() {                                  
    // let's check radio buttons when the next button is clicked   
    var nextButton = document.getElementById('movenextbtn');                    
    var form = nextButton.form;                                                 

    nextButton.addEventListener('click', function(e) {                          
      var radioElements = form.querySelectorAll('input[type="radio"]');         
      var currentRadioName;                                                     
      var seenRadioName;                                                        
      var index;                                                                
      var confirmation;                                                         

      for(index = 0; index < radioElements.length; index += 1) {                
        currentRadioName = radioElements[index].name;                           

        // check if we've already seen this named radio button set              
        if(seenRadioName != currentRadioName) {                                 
          // check that there's a checked radio button for this set of named radio buttons
          if(!form.querySelectorAll('input[type="radio"][name="' + currentRadioName + '"]:checked').length) {
            // didn't answer a question, ask if that's ok                       
            confirmation = confirm("You have missed answering a question.\n\nOK to Continue?\nCancel form submission and answer?");

            if(confirmation) {                                                  
              // the user clicked ok, let's submit the form                     
              return true;                                                      
            }                                                                   
            else {                                                              
              // the user clicked cancel, let's stop the form submission        
              e.preventDefault();                                               
              e.stopPropagation();                                              
              return false;                                                     
            }                                                                   
          }                                                                     

          // remember that we already checked this set of radio buttons         
          seenRadioName = currentRadioName;                                     
        }                                                                       
      }                                                                         
    }, false);                                                                  
  }, false);                                                                    
</script>

You can play with it more, here: http://jsbin.com/howuzapi/1/edit

Alfredo Delgado
  • 689
  • 4
  • 12
  • AlfredoDelgado ... It works fine to certain extent but after the confirmbox, the next button wont work, any Idea how it can be fixed? – Anakata Andrese Aug 08 '14 at 12:05
  • Could you be more specific? The next button works fine for me whether I've answered all questions or selected to confirm after not answering. Is your work available at a public URL that I can get at? Have you seen it working at http://jsbin.com/howuzapi/1/edit ? – Alfredo Delgado Aug 08 '14 at 12:43
0

Place this script in the source of the array question:

<script type="text/javascript" charset="utf-8"> 
$(document).ready(function() { 

    // Identify this question
    var thisQuestion = $('#question'+{QID}+'');

    // Listener on the "Next" button
    $('#movenextbtn').click(function(event){
        // Compare number of clicked radios to number of array rows
        if($('input.radio:checked', thisQuestion ).length != $('tr.answers-list',thisQuestion ).length) {
            // Pop up a confirm message
            if(confirm('You have not answered all rows.\n\nAre you sure you want to continue?')) { 
                return true;
            }
            else { 
                return false;
            }
        }
    });
});
</script>
tpartner
  • 421
  • 2
  • 5