HotPotatoes Tutorials and How-to's

Check the Full Tag Cloud

News:

Realities
Realities

Changing servers
Changing hosting provider

Family stuff
Family stuff

Most Recent:

Realities 2010.05.13 Realities video and pictures
Miscellaneous 2009.11.10 Other Miscellaneous
JCross: change background colour of cells 2009.11.07 JCross: change background colour of cells in Hotpotatoes JCross Crossword
JCross: Center thy Clues 2009.11.07 Center the Clues in Hotpotatoes JCross Crossword
Templates and Themes 2009.11.05 Templates and Themes

Login:

Meta:

Valid css | MODx

You are here: Home » Tutorials » for HotPotatoes » Accordion: Chunking

Accordion: Chunking

Posted by Stan Bogdanov on 25 April 2008 - 12:18
Last 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_chunking.jcl - the demo HotPotatoes JCloze
- 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

To change the colours and/or images of the chunk headers, edit the CSS file accordion_styles.css.

Making the exercise

Input your data as usual - questions, answers, feedback, etc.

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.