Need advice on styling a FAQ page

I’m working on a MODx beginner’s FAQ. I have a lot of the content in my head and a good list of questions but I can’t seem to decide how to design the page.

I’ve thought about these obvious options:

1. Like the MODx FAQ with the Qs on the left and full answers on the right.
2. List of Qs as links with jumps to question and answer further down the page.
3. Ditto aggregation with a short answer and link to a longer answer.
4. List of Qs where the answer expands below the question with a click and stays there.
5. List of questions with answers in pop-up windows.

Some of the answers will be long and some will be short with links to a page somewhere (occasionally off-site).

I don’t want to start banging out content until I’ve settled on the design. I kind of like #4, but don’t actually know how to do it. I’m guessing Javascript, but I have almost no experience with it.

Any advice/opinions/preferences appreciated.

Bob

Great idea, I have been contemplating this as well so I am glad to see you are doing it.

This faq is cool. I just saw it in a MODx site this morning:
http://www.e-icon.org/faq

I don’t like the question on top of page and answer at the bottom of page setup. to much page movement. Try to keep it so that you can go from question to question without to much effort.

If you plan to add user-comments to the articles, this would probably be the "cleanest" solution (no headaches down the road).

User comments are a good idea.

I did not like the accordion, the effect is cool but if the page is too long going to the next Q is a bit of a pain. The feedreader example is cool.

Quote from: dev_cw at Dec 22, 2007, 07:12 AM

If you plan to add user-comments to the articles, this would probably be the "cleanest" solution (no headaches down the road).

User comments are a good idea.

I did not like the accordion, the effect is cool but if the page is too long going to the next Q is a bit of a pain. The feedreader example is cool.

Can’t the accordion effect be sped up in the .js file, or is it one of those where it makes it seem "jerky" if you do that?

Quote from: dev_cw at Dec 22, 2007, 06:20 AM

Great idea, I have been contemplating this as well so I am glad to see you are doing it.

This faq is cool. I just saw it in a MODx site this morning:
http://www.e-icon.org/faq

Thanks for all the advice. I think I like this one best. Better yet, the author has promised to create a snippet to do it!

I PM’d Soreng (the creator of the other site) but didn’t get a response. I needed something right away, so I went ahead on creating the FAQ snippet based on code he used from DynamicDrive.com.

It isn’t quite ready for publication (I still need to figure out where to put the support files and create installation/usage instructions), but it has some neat parameter options, is (I hope) quite styleable, and has a language file for the error messages. You can see the results here:

http://bobsguides.com/modx-faq.html

The content of the FAQ is in a standard MODx document (published or unpublished) in the form:
Q: blah blah blah

A: blah blah blah

Q: blah blah blah

A: blah blah blah

etc.
Q:END-FAQ
Stuff can go here that you’re working on but isn’t ready to be seen.

I still need some advice, though, on the location of the support files. The snippet needs a large javascript file and a small .css for styling.

The logical place to refer to them is in the header of the template. I think the .js might need to go there. That would mean users would have to create another template for the FAQ; otherwise, the big .js file would be included needlessly on every page. I know people hate to create extra templates, though, but I’m not sure if there’s a way around it.

The .css could just be tacked onto the end of the user’s current .css file but I don’t know if that’s a good solution.

I’m not sure if the .js could be included by the snippet rather than going in the template because I’m not sure it would work outside of the header (the DynamicDrive docs say to put it there).

Any advice/opinions appreciated.


Bob

So put your support files in an asssets/snippets/snippetname folder. That way everything is all in one place, easy to install, and won’t conflict with anything else.

For the JS and CSS, there are API commands that inserts these into the document header (I cant remember what the command is called though). This way the JS and CSS will be inserted dynamically only when the snippet is used.

regClientCSS - http://modxcms.com/regclientcss.html
regClientScript - http://modxcms.com/regclientscript.html

Quote from: dev_cw at Dec 26, 2007, 06:41 AM

For the JS and CSS, there are API commands that inserts these into the document header (I cant remember what the command is called though). This way the JS and CSS will be inserted dynamically only when the snippet is used.

regClientCSS - http://modxcms.com/regclientcss.html
regClientScript - http://modxcms.com/regclientscript.html

Very cool! Although the .js one may not work since it doesn’t put the code in the header. Does anybody know where the code for these functions is? It ought to be possible to create a version of regClientCSS that inserts javascript in the header (unless one exists already?).

Bob

See regClientStartupScript()