[Request] Glossary and/or FAQs

[polyfragmented]

I searched the forum and Extend for glossary or FAQ plugins, but couldn't find any.

So, if one of our plugin developers might need the functionality at some point in time as well, I'd gladly help with conception, testing and documentation.

It would be cool to manage several glossaries/faqs and be able to place them wherever.

[nitsuj]

I was just searching for the same thing. I'm really surprised that no one has created one yet.

Since almost every website seams to have an FAQ area, would it be worth adding this functionality to the core?

[mikeh]

I'll give it a shot, it would benefit me in a few different ways.

What kind of features would be desired?

[Oleg06]

I also need a FAQ plugins

[polyfragmented]

I'll give it a shot, it would benefit me in a few different ways.

That would be brilliant!

What kind of features would be desired?

What comes to mind here right now is:

FAQ

• Create and manage multiple independent FAQs
  
• Add, edit and delete individual/multiple FAQ entries
  
• Use definition lists for output
  
• Easily insert FAQ into page
  
• Link to individual questions [named anchors, auto-generated (e.g. faq-name_01)]
  
• Make collapsing optional so a FAQ can be displayed fully
  

Glossary

• Create and manage multiple independent glossaries
  
• Add, edit and delete individual/multiple glossary entries
  
• Auto-generated in-page menu with used starting characters (A, B, F, G, ...) and in-page links to the respective sections [named anchors in markup]
  
• Nice would be if terms from the glossary could automagically be marked up in the frontend of any/specific pages where the term appears [ performance hit?]
  
• Easily insert glossary into page
  

Will add to this if more things pop up. Thanks for taking this on, mikeh! \o/

[polyfragmented]

Since almost every website seams to have an FAQ area, would it be worth adding this functionality to the core?

I think it makes for a good plugin addition. I know it can seem tempting to include lots of (seemingly) "must-have" modules, but those really start to bloat up the software after a while.

Thanks to Chris' work, installing a plugin is a pretty easy process.

[mikeh]

Since almost every website seams to have an FAQ area, would it be worth adding this functionality to the core?

I think it makes for a good plugin addition. I know it can seem tempting to include lots of (seemingly) "must-have" modules, but those really start to bloat up the software after a while.

Thanks to Chris' work, installing a plugin is a pretty easy process.

I have already started on it
Please expect up to a week until completion.

[polyfragmented]

I have already started on it Please expect up to a week until completion.

You rock! \m/

[mikeh]

I have already started on it
Please expect up to a week until completion.

I ran into a couple snags. It could be up to another week before I finish this plugin

[polyfragmented]

Mate,

take your time.

[Rene]

A FAQ plugin would be brilliant!

I had the same plan and this ( http://getsimple.dare-is.nl/faq/) is what I have so far ...

Put next jQuery code in header

Code:

$('#faqs span').each(function() {
    var tis = $(this), state = false, answer = tis.next('div').hide().css('height','auto').slideUp();
    tis.click(function() {
        state = !state;
        answer.slideToggle(state);
        tis.toggleClass('active',state);
    });
});

Put next code in CSS

Code:

#faqs { position:relative; margin-left:10px;}
#faqs span {
    background: url(images/icon_plus.jpg) no-repeat left center;
    display: block;
    cursor:pointer;
    font-size: 15px;
    font-weight: normal;
    color: #3a3a3b;
    letter-spacing: -1px;
    padding: 6px 0 6px 26px;
    margin: 0 0 0 -10px;
}
#faqs span:hover    { color:#0099CC;}
#faqs span.active { color:#0099CC; background: url(images/icon_minus.jpg) no-repeat left center; }
#faqs div { height:0; overflow:hidden; position:relative; }
#faqs div p { position:relative; }

Create new page (example 'FAQ'), press button code and copy/paste next HTML code into it ...

Code:

<h1>Frequently Asked Questions</h1>
<div id="faqs">
    <span>Question A Lorem Ipsum?</span>
    <div>
        <p>Massa cum cras pid porttitor? Placerat? Odio. <a href="/">Pulvinar porta nascetur, sit pellentesque!</a>. Magna urna nec adipiscing aenean aliquet pid, ultricies in. Penatibus, mauris ac scelerisque ac a? Nec arcu rhoncus enim non et pulvinar placerat dignissim pulvinar massa hac!</p>
    </div>
    <span>Question B Lorem Ipsum?</span>
    <div>
        <p>Scelerisque vel augue adipiscing enim mauris integer lundium odio penatibus nisi lacus. Magna etiam platea scelerisque! Auctor? Magna turpis lorem tempor. Massa adipiscing, elementum, magna! Amet placerat eros nec scelerisque! Porta! Elementum placerat, et cras placerat sit, porta natoque, pellentesque urna.</p>
    </div>
    <span>Question C Lorem Ipsum?</span>
    <div>
        <p>Massa cum cras pid porttitor? Placerat? Odio. <a href="/">Pulvinar porta nascetur, sit pellentesque!</a>. Magna urna nec adipiscing aenean aliquet pid, ultricies in. Penatibus, mauris ac scelerisque ac a? Nec arcu rhoncus enim non et pulvinar placerat dignissim pulvinar massa hac!</p>
    </div>
</div>

The only thing you have to do is to alter the text. Not brilliant, but it works for sofar. Next step was to put text into a XML file. Hope some code is usefull for Mikeh.

[polyfragmented]

Rene,

nice idea and indeed seems to basically work just fine. Way to go!

[mikeh]

A FAQ plugin would be brilliant!

I had the same plan and this ( http://getsimple.dare-is.nl/faq/) is what I have so far ...

Put next jQuery code in header

Code:

$('#faqs span').each(function() {
    var tis = $(this), state = false, answer = tis.next('div').hide().css('height','auto').slideUp();
    tis.click(function() {
        state = !state;
        answer.slideToggle(state);
        tis.toggleClass('active',state);
    });
});

Put next code in CSS

Code:

#faqs { position:relative; margin-left:10px;}
#faqs span {
    background: url(images/icon_plus.jpg) no-repeat left center;
    display: block;
    cursor:pointer;
    font-size: 15px;
    font-weight: normal;
    color: #3a3a3b;
    letter-spacing: -1px;
    padding: 6px 0 6px 26px;
    margin: 0 0 0 -10px;
}
#faqs span:hover    { color:#0099CC;}
#faqs span.active { color:#0099CC; background: url(images/icon_minus.jpg) no-repeat left center; }
#faqs div { height:0; overflow:hidden; position:relative; }
#faqs div p { position:relative; }

Create new page (example 'FAQ'), press button code and copy/paste next HTML code into it ...

Code:

<h1>Frequently Asked Questions</h1>
<div id="faqs">
    <span>Question A Lorem Ipsum?</span>
    <div>
        <p>Massa cum cras pid porttitor? Placerat? Odio. <a href="/">Pulvinar porta nascetur, sit pellentesque!</a>. Magna urna nec adipiscing aenean aliquet pid, ultricies in. Penatibus, mauris ac scelerisque ac a? Nec arcu rhoncus enim non et pulvinar placerat dignissim pulvinar massa hac!</p>
    </div>
    <span>Question B Lorem Ipsum?</span>
    <div>
        <p>Scelerisque vel augue adipiscing enim mauris integer lundium odio penatibus nisi lacus. Magna etiam platea scelerisque! Auctor? Magna turpis lorem tempor. Massa adipiscing, elementum, magna! Amet placerat eros nec scelerisque! Porta! Elementum placerat, et cras placerat sit, porta natoque, pellentesque urna.</p>
    </div>
    <span>Question C Lorem Ipsum?</span>
    <div>
        <p>Massa cum cras pid porttitor? Placerat? Odio. <a href="/">Pulvinar porta nascetur, sit pellentesque!</a>. Magna urna nec adipiscing aenean aliquet pid, ultricies in. Penatibus, mauris ac scelerisque ac a? Nec arcu rhoncus enim non et pulvinar placerat dignissim pulvinar massa hac!</p>
    </div>
</div>

The only thing you have to do is to alter the text. Not brilliant, but it works for sofar. Next step was to put text into a XML file. Hope some code is usefull for Mikeh.

Thanks! I like what you did with the jquery and I will incorporate that coding! Thanks for your help

[jlm]

Hello,
I think I followed the procedure, but I can not run this code. Sorry.
Can you upload the theme "Innovation" with embedded code. This could help people with no knowledge on php
thank you

[mvlcek]

@Rene, @mikeh, @polyfragmented,
thanks for the input, however, I think you missed an important point:

• It must be simple for the user to enter FAQs.
  

How would you enter an FAQ, if you just had paper? Maybe format the questions as headers and the answers as anything else. It could be long answers with bullets and images and so on.
And if you use headers for questions, why not structure the questions in multiple levels, e.g. questions for the I18N plugin, questions for the I18N Search plugin, ...?

But how can the user specify that a page is a FAQ: the easiest way I see is to enter a special tag, e.g _faq.

The rest was easy - well not SO easy - but I have created a simple FAQ plugin.

It's not much longer than what Rene suggested. Just some Javascript to style the questions and to put answers longer than one element in a container. And if you have Javascript disabled, you will just see the questions and answers as normal headers and text - still readable.

And here is an Example.

Any questions, suggestions, etc. please in the FAQ plugin topic http://get-simple.info/forum/topic/1876/faq-plugin/

[Rene]

Hello,
I think I followed the procedure, but I can not run this code. Sorry.
Can you upload the theme "Innovation" with embedded code. This could help people with no knowledge on php
thank you

@jlm

Chris C wouldn't like me to upload an altered Innovation theme but I've attached a simple working example of the code i've posted before. Hope this help, otherwise use the FAQ plugin posted by mvlcek.

[mikeh]

@Rene, @mikeh, @polyfragmented,
thanks for the input, however, I think you missed an important point:

• It must be simple for the user to enter FAQs.
  

How would you enter an FAQ, if you just had paper? Maybe format the questions as headers and the answers as anything else. It could be long answers with bullets and images and so on.
And if you use headers for questions, why not structure the questions in multiple levels, e.g. questions for the I18N plugin, questions for the I18N Search plugin, ...?

But how can the user specify that a page is a FAQ: the easiest way I see is to enter a special tag, e.g _faq.

The rest was easy - well not SO easy - but I have created a simple FAQ plugin.

It's not much longer than what Rene suggested. Just some Javascript to style the questions and to put answers longer than one element in a container. And if you have Javascript disabled, you will just see the questions and answers as normal headers and text - still readable.

And here is an Example.

Any questions, suggestions, etc. please in the FAQ plugin topic http://get-simple.info/forum/topic/1876/faq-plugin/

It would have been nice if you could have expressed your interest in making this plugin so I did not have to waste my time.

Anyway, the way you made it work using regular page creation was interesting. good thinking!

[mvlcek]

It would have been nice if you could have expressed your interest in making this plugin so I did not have to waste my time.

Sorry about that.
Based on the posts I assumed you are working on a full-blown plugin as described by polyfragmented and running into difficulties :-(

Yesterday afternoon I read this topic and thought about a slightly different approach and if it would work well enough. Two hours later I had a working version and submitted it to Extend after a bit of finetuning.

[polyfragmented]

Mikeh,

if you still want to continue work on your implementation, I'm still game.

[mvlcek]

FAQ

• Create and manage multiple independent FAQs
  
• Add, edit and delete individual/multiple FAQ entries
  
• Use definition lists for output
  
• Easily insert FAQ into page
  

Glossary

• Create and manage multiple independent glossaries
  
• Add, edit and delete individual/multiple glossary entries
  
• Auto-generated in-page menu with used starting characters (A, B, F, G, ...) and in-page links to the respective sections [named anchors in markup]
  
• Nice would be if terms from the glossary could automagically be marked up in the frontend of any/specific pages where the term appears [ performance hit?]
  
• Easily insert glossary into page
  

Some more ideas:

• Instead of multiple independent FAQs, glossaries (or maybe additional to it) allow tags/keywords per entry. Then the user can include entries with (% faq name=getsimple tags=installation %) on any page.
  
• Allow the display of all FAQs where each FAQ is a group that can also be toggled (% faq %)
  

[mikeh]

It would have been nice if you could have expressed your interest in making this plugin so I did not have to waste my time.

Sorry about that.
Based on the posts I assumed you are working on a full-blown plugin as described by polyfragmented and running into difficulties :-(

Yesterday afternoon I read this topic and thought about a slightly different approach and if it would work well enough. Two hours later I had a working version and submitted it to Extend after a bit of finetuning.

no problem, my post was not well-thought-out.

[polyfragmented]

Added a feature idea to my original post above.

Link to individual questions [named anchors, auto-generated (e.g. faq-name_01)]

[polyfragmented]

Added a feature idea to my idea post.

Make collapsing optional so a FAQ can be displayed fully