You are here: Home » Tutorials » for HotPotatoes » Virtual Pagination: Chunking

Virtual Pagination: Chunking

Posted by Stan Bogdanov on 07 January 2008 - 23:19
Last updated 30 May 2008 - 18:26

Introduction

This tutorial takes you step by step through the creation of a custom JQuiz using a demo source file.

The virtual pages can hold text, images, flash video (flv), flash animation (swf), flash mp3 audio, links, iframes, etc. We may further customize the look of each virtual page through inline CSS. Virtual pages can be done not only with JQuiz, but with any type of exercise that you think needs such a technique.

See a working demo first. There are minor customizations of the CSS code, so the page you create will most probably not look exactly like the working demo.


Some of the steps require that you work with HTML code directly in a text editor (e.g. Notepad) or HTML editor (e.g. Notepad++).

Preparation

You need the following files:

- virtual_pagination.jqz - the demo HotPotatoes JQuiz
- pagination_style.css - the CSS styling declarations for the navigation
- virtualpaginate.js - the javascript to build the navigation of the chunks
- paginate_ini.js - the javascript to initialize the pagination

Download the ZIP file virtual_pagination.zip and unpack it.

Step 1: Getting to grips with the structure for the virtual pages

Open the demo JQuiz - virtual_pagination.jqz and click Add Reading text.

You see plenty of code. This will be all of the virtual pages. Let's look more closely at the structure. The basics is - each virtual page is contained between <div class="virtualpage"> </div>

Below is the full code from the demo. As you can see, we may put a lot more code for images, flash video (FLV), flash animation (swf), flash mp3 audio, links, iframes, etc; we may further customize the look of each virtual page through inline CSS. And if you need more virtual pages or paragraphs, just create more DIV's and P's

<!-- virtual page 1 START (Text)-->
<div class="virtualpage"
 style="border:1px dotted #aa0000;
 background-color:#ffcc11;
 margin:5px;
 padding:5px;">
 Your text chunk number 1 goes here</div>
<!-- virtual page 1 END -->
 
<!-- virtual page 2 START (Text)-->
<div class="virtualpage"
 style="border:1px dotted #aa0000;
 background-color:#ffcc11;
 margin:5px;
 padding:5px;">
 Your text chunk number 2 goes here</div>
<!-- virtual page 2 END -->
 
<!-- virtual page 3 START (Image)-->
<div class="virtualpage"
 style="overflow: hidden;width:350px;height:400px;">
 350px wide, 400px high ; overflow: hidden;
 <br /> Mind the size of the picture(s).
 <br /><img src="berries.png" alt="" /></div>
<!-- virtual page 3 END -->
 
<!-- virtual page 4 START (Image)-->
<div class="virtualpage">Overflow is shown – the full image.
 <br /><img src="berries.png" alt="" /></div>
<!-- virtual page 4 END -->
 
<!-- virtual page 5 START Flash Video (FLV)-->
<div class="virtualpage"
 style="margin-right:auto;margin-left:auto;
 text-align:center;width:300px;">
 Ok, here's FLV video! Larry King; Queen_80_larry.flv<br />
 <object type="application/x-shockwave-flash" width="240" height="153"
 data="flvplayer.swf?file=queen_80_larry_king.flv&amp;autostart=false">
 <param name="movie"
 value="flvplayer.swf?file=queen_80_larry_king.flv&amp;autostart=false" />
 <a href="http://www.macromedia.com/go/getflashplayer">
 You need Flash - Get it!</a>
 </object></div>
<!-- virtual page 5 END -->
 
<!-- virtual page 6 START (SWF video/animation)-->
<div class="virtualpage" 
 style="margin-right:auto;margin-left:auto;
 text-align:center;width:300px;">
 And here's SWF video!<br /> ~american-dream.swf~<br />
 <object type="application/x-shockwave-flash"
 data="american-dream.swf" width="280" height="248"
 style="vertical-align:middle;">
 <param name="movie" value="american-dream.swf" />
 <a href="http://www.macromedia.com/go/getflashplayer">
 You need Flash - Get it!</a>
 </object></div>
<!-- virtual page 6 END -->
 
<!-- virtual page 7 START FlashMP3 Audio -->
<div class="virtualpage"
 style="margin-right:auto;margin-left:auto;text-align:center;width:300px;">
<p style="border:1px dotted #aa0000;
   background-color:#ffcc11;margin:5px;padding:5px;">
   You know what to do here -> press the <b>Play</b>
   button to listen to the recording.</p>
 <object type="application/x-shockwave-flash"  width="220" height="32"
  data="player.swf?file=part1_1.mp3&amp;autolaunch=false">
 <param name="movie"
  value="player.swf?file=part1_1.mp3&amp;autolaunch=false" />
 <param name="FlashVars" value="my_bitrate=60" />
 <a href="javascript:void(0);"
 onclick="play('part1_1.mp3', '60');">Click to listen</a>
 <a href="http://www.macromedia.com/go/getflashplayer">Get Flash</a>
 </object></div>
<!-- virtual page 7 END -->
 
<!-- Pagination DIV START - This is the navigation for the virtual pages-->
<div id="gallerypaginate" class="paginationstyle"
 style="margin-right:auto;margin-left:auto; text-align:center;">
 <a href="#" rel="previous"><strong>&laquo;</strong> Prev</a>&nbsp;
 <span class="flatview"></span>&nbsp;
 <a href="#" rel="next">Next <strong>&raquo;</strong></a>
 </div>
<!-- Pagination DIV END -->
 
<!-- Initialize pagination -->
<script type="text/javascript" src="paginate_ini.js"></script>
<!-- Initialize pagination END-->

Mind that! Mind that!

The code in the demo quiz (.jqz file) runs as a single line! If you decide to Copy-Paste any piece from the above structure, MAKE SURE you REMOVE ALL CARRIAGE RETURNS because HotPotatoes will convert them to <br /> tags and it will break the code and cause the page to NOT WORK properly, or not work at all.

Step 2: The styling pagination_style.css

Go to the Configuration screen ->Custom and make sure this line is there:

<link rel="stylesheet" type="text/css" href="pagination_style.css"/>

You may want to edit the CSS file pagination_style.css to change the colours of the pagination navigation buttons.

Step 3: Making the exercise

Input your data as usual - questions, answers, feedback, etc. Export the quiz and create the web page.

Step 4: Adding the virtualpaginate.js

Open the .htm file - the web page you just created - with Notepad, Notepad++ or any editor you like. Scroll down the source code and find these lines: 

</head>
<body onload="StartUp()" id="TheBody">
<!-- BeginTopNavButtons -->

Add this line <script type="text/javascript" src="virtualpaginate.js"></script> before the </head> tag, like this: 
<script type="text/javascript" src="virtualpaginate.js"></script>
</head>
<body onload="StartUp()" id="TheBody">
<!-- BeginTopNavButtons -->

Well, that's it. Save your work, and view your web page in the browser. Make sure you have all the files from the zip in the folder along with the exercise and any images, mp3, flv, swf files that you use in the exercise.

You have virtual pages! (If you've followed closely this tutorial ;-)

Notes:

The script has been taken from Dynamicdrive.com. For more possibilities for customizations, check the Documentation. If you are using this tutorial long after the creation date, it's a good idea to check for script updates and for browser compatibility.

An older version of this tutorial lives in the Files section of the !Y hotpotatoesusers support group.

Related Tutorials




Rate this:

  • Currently2.91961414791/5 Stars
  • 1
  • 2
  • 3
  • 4
  • 5
Votes: 622

Share it:

Windows Live

Write a comment

  • Required fields are marked with *.

If you have trouble reading the code, click on the code itself to generate a new random code.
Security Code:
 
admin
Posts: 1
Comment
re: virtual pagination: chunking
Reply #2 on : Sun May 17, 2009, 08:17:13
Surely, this cuts one step.
However, there's plenty of javascript in the HotPotatoes exercise and this particular javascript needs to be immediately before the closing </head> tag.
Last Edit: May 17, 2009, 08:17:36 by admin  
erik
Posts: 1
Comment
virtual pagination: chunking
Reply #1 on : Thu May 15, 2008, 20:33:49
I'm just wondering why one has to add the virtualpaginate.js script in step 4 AFTER the web page has been created? I've tried to add this script in the Configuration screen ->Custom behind the line <link rel="stylesheet" type="text/css" href="pagination_style.css"/> (see step 2) and it works fine as well? Is there any reason why one should avoid this ? At least it's easier and one step shorter ....

Feedback Form
Feedback Analytics