Making data form checkbox fields useful

Making data form checkbox fields useful

Do something useful with checkbox fields in wikidot data forms with these helpful solutions.

Working out what to do with the checkbox field in wikidot data forms has puzzled me for months. The only output it gives is a 1 or 0, which is hardly useful for the user, even if they are completely literate in binary. So after seeing some creative ideas on the wikidot community, I came up with the following solutions.

Inline spans and a CSS module

The first solution uses spans wrapped around each of the possible answers (such as Yes/No or Agree/Disagree), which are given a class name that changes depending on whether or not the checkbox has been ticked. This is achieved by appending a 1 or 0 on the end of the class name, which is grabbed from the checkbox field with %%form_data{fieldName}%%. So we end up with something like this…

Do you agree? [[span class="yes%%form_data{Checkbox}%%"]]Yes[[/span]][[span class="no%%form_data{Checkbox}%%"]]No[[/span]].

Then, all we have to do is toggle the display of the classes depending on whether the checkbox has been selected or not (i.e 1 or 0):

.yes1 {display:inline;}
.yes0 {display:none;}
.no1 {display:none;}
.no0 {display:inline;}

Wrap this in a CSS module on the live template, and badda bing you’ve got a meaningful answer from the checkbox field. When the checkbox has been ticked, you'll get a Yes, and when it's left sitting there idly, you'll get a No. If you'd like to take it one step further, you can add extra styles to the CSS, such as making the yes green and the no red. Just remember that you can’t start an element’s class name with a number, so you’ll always need something else in front of the 1/0.

Includes

As was demonstrated by Timothy Foster on the wikidot community forum, the other alternative is to use includes to grab the content from another page. This uses a similar principle to that used above, but instead of changing the class name, we include one of two predefined pages instead. For example, say we have a checkbox that asks the question ‘Do you agree?’, and we wanted to display different text depending on whether or not the user has agreed. We would first create two pages: inc:agree0 and inc:agree1, and then on the data form template page, we'd use %%form_data{}%% to add a 1 or 0 to the end of the page name, giving us the desired page:

[[include inc:agree%%form_data{fieldName}%%]]

This solution is best suited to adding more complex elements to page that still depend on whether or not the user has checked the box.

More options

Building on the solutions above, you can do even more with the checkbox field. If you’d like to see some more examples, as well as those above, you can create a page on a sample form I’ve created by clicking on the button below.

And if you’ve got any more ideas on how to get the most out of the checkbox field, I’d love to hear about them in the comments below.

Enjoy the article? Tweet it!

Discussion - No comments yet…1 comments

Add a New Comment
or Sign in as Wikidot user
(will not be published)
- +
Site design © BMC WebDesign, 2011. All rights reserved. All tutorials on this site are free for commerical use, subject to conditions outlined in the disclaimer.