Accordion: Chunking
Posted by Stan Bogdanov on 25 April 2008 - 12:18Last updated 09 November 2008 - 02:02
Introduction
This tutorial takes you step by step through the creation of a custom JCloze dropdown using a demo source file.The chunks in the 'accordion menu' can hold text, images, flash video (flv), flash animation (swf), flash mp3 audio, links, iframes, etc. We may further customize the look of each chunk through inline CSS. The chunks can be done not only in JCloze, but JQuiz too, or any type of exercise that can add a reading text and that you think needs such a technique.
First, see a HotPotatoes JCloze demo with Accordion Chunking. There are some customizations of the CSS code, so the page you create will most probably not look exactly like the JCloze demo.
As a matter of fact, accordion chunking is implemented in this tutorial. I thought I'd let you know in case you haven't noticed yet.
Preparation
Download the ZIP file accordion_chunking.zip and unpack it where you are planning to use it.
It contains the following files:
- accordion_styles.css - the CSS styling for the accordion chunks
three javascript files
- jquery-1.2.2.pack.js
- ddaccordion.js
- accordion_ini.js
and some images.
Getting to grips with the structure for the accordion chunks
Open the demo JCloze - accordion-chunking.jcl and click Add Reading text.
You see plenty of code. This will be all of the accordion chunks. Let's look more closely at the
structure. The basics is - each chunk is contained between
<h3 class="mytext">Heading</h3> //The clickable headings
<div class="thechunk">Chunk text</div> //The chunk
Just to let you know, 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 chunk through inline CSS. And if you need more chunks, just create more <h3>s and </div>s
Mind that!The code in the demo (.jcl file) runs as a single line! If you decide to change anything, 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.
Styling the accordion chunks
Making the exercise
Go to the Configuration screen ->Custom and make sure these lines are there:
<link rel="stylesheet" type="text/css" href="accordion_styles.css"/>
<script type="text/javascript" src="jquery-1.2.2.pack.js"></script>
<script type="text/javascript" src="ddaccordion.js"></script>
<script type="text/javascript" src="accordion_ini.js"></script>
Export the exercise and create the web page.
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 accordion chunks! ;-)
Notes:
The script has been taken from Dynamicdrive.com. For more possibilities for customizations, check Accordion Content script (v1.3). 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.
Don't forget to drop a comment here.
Related tutorials
Rate this: |
Share it:
|
Write a comment