Horizontal dropdown with JCloze

This recipe shows how to create a more stylish dropdown with JCloze using a table. See a demo.

Step 1

First, create a prototype your exercise. I am going to use images of hats and gloves for a vocabulary exercise and a table to position them. My prototype looks like this.

Step 2

Open JCloze and Insert->HTML Table. Generate a table, 4 rows by 4 columns without table borders; set the width to 700px.

To center the table, add a style declaration like this:

<table border="0" cellpadding="5" cellspacing=5" width="700"
style="margin-left:auto;margin-right:auto;text-align:center;">

Insert the images and the words from your prototype. Create the gaps. Save and output to a web page. Here's the result.