Numeric: Progressive Reveal

This article will help you create a Numeric question using a Progressive Reveal

Numeric Progressive Reveal

This code will allow you to use a Numeric question type which will show your one attribute at a time. The next item will appear after you answer the current one.  

Click here to see an example

Instructions

1. Add a Numeric question type to your survey with all of the appropriate 
   1. See article: Add a Question: Numeric Fields
2. Add the code below to your 'ADD JAVASCRIPT'
   1. See article: Adding JavaScript and/or CSS to a Question
   2. Make sure to update the 'Q6' with your specific question number
      

      var $ = jQuery,
          q = $("[data-qnum='Q6']");
      
      // SHOW ONE AT A TIME
      q.find(".cm-numeric-input").keyup(function() {
        var target = $(this).parents("li");
        if ( $(this).val() !== "" ) {
          target.next().show();
        }
        else {
          target.nextAll().hide().find(".cm-numeric-input").val("");
        }
      });
      
      		

3. Add the code below to your 'ADD CSS' 
   
   1. See article: Adding JavaScript and/or CSS to a Question
      

      /* HIDES PROGRESSIVE REVEAL AS NEEDED */
      .cm-numeric-response-set li:not(:first-child) {
      	display: none;
      }
      	

4. You may have to modify your question settings based on your needs.
5. As always, make sure to test