Static Element: Page Turner

This article will help you create a Page Turner exercise. 


Background 

You may want a more creative way to display images. This is sometimes done to show a more interactive version of a menu, magazine or newspaper. 

This exercise is designed for display purposes only and does not store any data. 

Click here to see an example


Instructions

Uploading Your Images

  1. Upload your images
    • See article: Uploading Images/Videos
    • NOTE: For this to work the best, all of the images you use should have identical dimensions

Survey Settings

  1. Access the 'Default Text' 
  2. In the 'Survey Header' field and access the 'Source Code Editor' and add the following
  3. Paste in the following code
    <script src="https://cdn2.cmix.com/surveyContent/survey_3911/uploads/jquery.booklet.latest.min.js"></script>
    <link href="https://cdn2.cmix.com/surveyContent/survey_3911/uploads/jquery.booklet.latest.css" type="text/css" rel="stylesheet" media="screen, projection, tv">
    	
  4. Save and close the Source Code Editor

Building the Exercise

  1. Program a 'Static Element', if you haven't already
  2. Add the following code to the 'Source Code Editor' tied to the Question text field
    • See article: Source Code Editor
    • The example below has a cover page, 4 regular pages and a back cover. The divs in the code go in order starting from the top. You will see the classes also go in logical order (left-page-overlay and right-page-overlay). Simply add the image urls in the corresponding placeholder locations and delete any unused code and/or copy and paste to add more pages as needed following the same pattern. 
  3. <div class="pageturner-placeholder">
    	<div id="pageturner2" style="display: none;">
    		<div>
    			<div class="right-page-overlay"><br>
    			</div><img src="https://cdn2.cmix.com/COVER.jpg" class="turner-page fr-dii"></div>
    		<div>
    			<div class="left-page-overlay"><br>
    			</div><img src="https://cdn2.cmix.com/PAGE1.jpg" class="turner-page fr-dii"></div>
    		<div>
    			<div class="right-page-overlay"><br>
    			</div><img src="https://cdn2.cmix.com/PAGE2.jpg" class="turner-page fr-dii"></div>
    		<div>
    			<div class="left-page-overlay"><br>
    			</div><img src="https://cdn2.cmix.com/PAGE3.jpg" class="turner-page fr-dii"></div>
    		<div>
    			<div class="right-page-overlay"><br>
    			</div><img src="https://cdn2.cmix.com/PAGE4.jpg" class="turner-page fr-dii"></div>
    		<div>
    			<div class="left-page-overlay"><br>
    			</div><img src="https://cdn2.cmix.com/BACKCOVER.jpg" class="turner-page fr-dii"></div>
    	</div>
    </div>
    	
  4. Add the following code to the '</> Add Javascript' field
  5. cmSurvey.disableNextButton(true);
    jQuery('#pageturner2').booklet({
      width:  700,
      height: 494,
      speed: 800,
      pagePadding: 0,
      pageNumbers: false,
      closed: true,
      manual:   false,
      overlays: true,
      tabs:  true,
      hovers:   true,
      easing:  'easeInOutCubic',
      easeIn:  'easeInCubic',
      easeOut: 'easeOutCubic',
      change: function(event, data){
        if (data.index == 4) {
          cmSurvey.disableNextButton(false);
        }
      }
    }).show();
    if (screen.width <= 750) {
    	cmSurvey.disableNextButton(false);
    }
    	
  6. Add the following code to the '</> Add CSS' field
  7. /* PAGE TURNER CSS */
    img {
      max-width: 100%;
    }
    
    .pageturner-placeholder {
      min-height: 494px;
      text-align: center;
      margin-top: 3em;
    }
    #pageturner2 {
      background-color: white;
    }
    #pageturner2 .turner-page {
    }
    #pageturner2 .right-page-overlay {
      background: linear-gradient(to right, rgba(0,0,0,0) 20%, rgba(255, 255, 255, 0.30) 35%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.1) 96%, rgba(0,0,0,0.15) 100%);
      position: absolute;
      height: 494px;
      width: 350px;
    }
    #pageturner2 .left-page-overlay {
      background: linear-gradient(to left, rgba(0,0,0,0) 20%, rgba(255, 255, 255, 0.30) 35%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.1) 96%, rgba(0,0,0,0.15) 100%);
      position: absolute;
      height: 494px;
      width: 350px;
    }
    
    .b-tab {
      top: -3em !important;
      margin-bottom: 1em;
      background: #f8f8f8;
      color: #222;
      padding: 0.5em 0.5em;
      height: auto !important;
      border: 1px solid #bbb;
      border-radius: 4px;
      width: auto !important;
    }
    .b-tab:after { content: " Page"; }
    
    .b-wrap.b-wrap-left {
      -webkit-box-shadow: -5px 0 5px 0 rgba(0,0,0,0.5);
      box-shadow: -5px 0 5px 0 rgba(0,0,0,0.5);
    }
    .b-wrap.b-wrap-right {
      -webkit-box-shadow: 5px 0 5px 0 rgba(0,0,0,0.5);
      box-shadow: 5px 0 5px 0 rgba(0,0,0,0.5);
    }
    	
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us