Homepage / Doc / Survey Structure

Survey Structure

The documents in this section will provide detailed information on the different sections of a survey in the HTML. This will be helpful if you want to alter the appearance of the survey in more impactful ways than our style templates, and also provide you with a general layout and structure of a survey within Checkbox.

There are three main sections to a Checkbox survey.

  • HeaderWrapper
    • This contains the style header information
  • WrapperMaster
    • Progress bar
    • Page numbers
    • Survey Items
    • Navigation buttons
  • FooterWrapper
    • This contains the style footer information

screen-shot-2016-11-10-at-3-22-29-pm

You can see the HTML of a basic sample survey by clicking expand source below.

<div class="headWrapper">
   <span id="_responseView__pageView_Layout___headerZone">
      <div id="_responseView__pageView_Layout___headerZone__headerPanel" class="surveyHeaderWrapper">
      </div>
   </span>
   <div class="clear"></div>
</div>
<div class="clear"></div>
<div class="wrapperMaster">
   <div class="center borderRadius surveyContentFrame">
      <div class="innerSurveyContentFrame">
         <span id="_responseView__pageView_Layout___titleZone"></span>
         <div class="clear"></div>
         <span id="_responseView__pageView_Layout___progressZoneTop"></span>
         <div class="clear"></div>
         <span id="_responseView__pageView_Layout___pageNumberZone"></span>
         <div class="clear"></div>
         <div class="itemZoneWrapper">
            <span id="_responseView__pageView_Layout___defaultZone" class="Page">
               <div id="_responseView__pageView_Layout___defaultZone_Renderer_213700_Wrapper" style="clear:both;">
                  <div id="_responseView__pageView_Layout___defaultZone_Renderer_213700">
                     <div id="_responseView__pageView_Layout___defaultZone_213700__containerPanel" class="itemContainer itemPositionLeft">
                        <div id="_responseView__pageView_Layout___defaultZone_213700__contentPanel" class="itemContent">
                           <div id="_responseView__pageView_Layout___defaultZone_213700__topAndOrLeftPanel" class="topAndOrLeftContainer labelTop">
                              <div id="_responseView__pageView_Layout___defaultZone_213700__textContainer" class="textContainer">
                                 <div id="_responseView__pageView_Layout___defaultZone_213700__questionText__questionPanel" class="questionTextContainer Question">
                                    <label for="_responseView__pageView_Layout___defaultZone_213700__textInput">This is a sample item</label>
                                 </div>
                                 <div style="clear:both;"></div>
                                 <div id="_responseView__pageView_Layout___defaultZone_213700__questionText__descriptionPanel" class="descriptionTextContainer Description">
                                    <root />
                                 </div>
                              </div>
                           </div>
                           <div id="_responseView__pageView_Layout___defaultZone_213700__bottomAndOrRightPanel" class="bottomAndOrRightContainer inputForLabelTop">
                              <div id="_responseView__pageView_Layout___defaultZone_213700__inputPanel" class="inputContainer">
                                 <input name="_responseView$_pageView$Layout_$_defaultZone$213700$_textInput" type="text" id="_responseView__pageView_Layout___defaultZone_213700__textInput" dataDefaultValue="" />
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </span>
            <div class="clear"></div>
         </div>
         <div class="clear"></div>
         <span id="_responseView__pageView_Layout___progressZoneBottom"></span>
      </div>
      <div class="navigationWrapper">
         <div class="surveyButtonsContainer">
            <span id="_responseView__pageView_Layout___previousZone"></span>
            <span id="_responseView__pageView_Layout___saveZone"></span>
            <span id="_responseView__pageView_Layout___resetZone"></span>
            <span id="_responseView__pageView_Layout___nextZone"><input type="submit" name="_responseView$_pageView$Layout_$_nextZone$_finishBtn" value="Finish" onclick="return false;WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;_responseView$_pageView$Layout_$_nextZone$_finishBtn&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="_responseView__pageView_Layout___nextZone__finishBtn" class="surveyFooterButton workflowAjaxPostAction" data-action="finish" /></span>
            <div class="clear"></div>
         </div>
      </div>
   </div>
</div>
<div class="footerWrapper">
   <span id="_responseView__pageView_Layout___footerZone">
      <div id="_responseView__pageView_Layout___footerZone__footerPanel" class="surveyFooterWrapper">
      </div>
   </span>
   <div class="clear"></div>
</div>
November 15, 2016