Hello! How can we help?

Search our knowledge base for loads of useful advice and answers to common questions

If you're still stuck you can always submit a support request and we'll get back to you ASAP

How to embed a fact bank on the overview page

Alan Hoey -

We occasionally hear from people who would like to embed a fact bank on their overview page. This can be done, although please be advised that the process is a little less straightforward than adding fact banks to questions or pages within a survey, as Citizen Space doesn't have the functionality to add components to the overview page.

Instead, the fact bank component can be replicated on the overview page by pasting some html code into the source view of the text editor and then making some changes. This can be done in any of the text editors on the overview page, i.e. anywhere you see the WYSIWYG bar as shown below.

Text editor bar with the Source button circled. Screenshot.

If you're feeling confident about inserting html code into the source view, you'll find the code you need below plus some guidance on which bits you need to amend. You'll need to find the appropriate place in the source view to insert this based on where you want to the fact-bank to sit in relation to other content on the page.

Alternatively if you're not feeling confident, you can as always contact us via support@delib.net and we'll be more than happy to give you a hand.

<div class="cs-factbank">
    <h4 class="cs-factbank-header dss-heading-x-small">
        <a class="collapsed hide-when-no-js" data-toggle="collapse" 
            href="#fact-bank-1" role="button">
        <span>Please click here to read more</span>
        <span class="show-when-no-js"><span>More Information</span></span>

    <div class="cs-factbank-content collapse" id="fact-bank-1" 
aria-live="polite"> <div class="cs-factbank-content-inner"> Fact bank content goes here! </div> </div> </div>

Once you have this code in place you need to change both references to fact-bank-1 to a unique ID for this fact bank (safest to stick to letters, numbers, dashes and underscores for this).  It's perfectly acceptable to use fact-bank-2, fact-bank-3 and so on. This is important if you have multiple fact banks in your activity because if you don't change both of these to something unique, then clicking on the fact bank may cause the wrong fact bank to open.

Additionally, you'll need to update the three pieces of text displayed:

1. Please click here to read more is the text of the link to open the fact bank.

2. More Information is the title of the block shown if there is no Javascript available in the browser and the fact bank is open by default.

3. Fact bank content goes here! is the HTML content of your fact bank.  This is editable using the editor once you've got the basics set up.

If you're unsure about any of the above, please contact us via support@delib.net and we'll assist where we can.