Latest Items Added:

Full Component List:

CSS Quiz

Placeholder Picture

CSS Quiz

The downoad file is a zipped project that is best saved as a template. Because of the PHP contents the quiz has to be represented on this page by an image. To see how it works, you need to download the zipped file, unpack it, and upload it to a server with PHP enabled. Nearly every server has PHP enabled, but not Coffeecup's S-drive.

To add your own questions you write the actual question in the container with the class name .legend. For the answer alternatives click on the current text an open the Element pane. Write the same alternative into Text and Value.You can change the number of alternatives (you need at least two!). In that case you only make the change in the SD project file.

Then in the file quiz_handler.php you only have to write the correct answer to each question in the line that is holding the current right answer. The first instance of that appears on line 35, and there is a comment about it. Make sure you have no spaces between the correct answer and the single quotes on either side.

You can add more questions by following the numbering system in both files. And you can of course change the styling as much as you want.

Placeholder Picture

Download this component

This component can be used both for 'mobile-up' and 'desktop-down'.