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' 
   • See article: Default Text: Accessing Default Text Menu
2. In the 'Survey Header' field and access the 'Source Code Editor' and add the following
   • See article: Source Code Editor
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
• See article: Add a Question: Static Elements
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. 

<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>
	

3. Add the following code to the '</> Add Javascript' field
   • See article: Adding JavaScript and/or CSS to a Question

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);
}
	

4. Add the following code to the '</> Add CSS' field
   • See article: Adding JavaScript and/or CSS to a Question

/* 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);
}