Helping Give Away Psychological Science/Banner

Preface

Hello HGAPS and others,

This is a prototype implementation for the emergency crisis banner made by Cody. As it stands, the banner tool is ready to use for all of our wiki pages. This page is an educational tool for HGAPS members to learn how to use, create, and disseminate quality banners for our HGAPS pages. There are many tutorials here to help explain things to wikitext newcomers. Before getting started, please review the following links to acquaint yourself with the necessary syntax. Check out Cody Naccarato's talkpage to see the transclusion function implemented properly!

Use the links below to learn more about editing Wikipedia in general and editing source code. You should have a solid foundation in editing the source code before changing and adding banners:
 * --> for a basic intro to everything wikiediting: https://en.wikipedia.org/wiki/Help:Editing
 * --> for an in-depth coverage of wikitext (i.e. source code) editing: https://en.wikipedia.org/wiki/Help:Wikitext
 * --> HTML syntax (useful for formatting in some situations): https://en.wikipedia.org/wiki/Help:HTML_in_wikitext

Use the link below to learn more about transclusion syntax. It's good to give the entire document a read, but we linked to the most important section for these purposes. You can do some really interesting stuff with the right syntax! Let's improve upon this Version 1 implementation with more detailed code:
 * --> Basic overview of transclusion: https://en.wikipedia.org/wiki/Help:Transclusion#Transclusion_syntax
 * --> The specific type of transclusion used for our banners: https://en.wikipedia.org/wiki/Help:Transclusion#Partial_transclusion
 * --> Full wiki: https://en.wikipedia.org/wiki/Help:Transclusion

Only after a firm grasp on the concepts above should you proceed with attempting to edit banners.

Introduction
Important Info

By successfully changing the code below, you are not editing one Wikiversity page, you are editing EVERY page we have implemented the transclusion function on (potentially dozens if we proceed with this functionality). You should not attempt to change or add banners unless you have a confident understanding of Wiki code. User beware. Please take your time to understand this code. Editing with source code is the best way to edit the banner functions. Do not attempt to implement banners using the visual editor. You need to code for it to work properly. The transclusion function is a versatile tool used for inserting sections without having to enter data repeatedly. This allows us to update many pages by editing sections found in a source page. We are using this function to implement a "banner" of sorts to our wiki pages. The idea is that this will act a lot like the banners on many webpages (think COVID-19 and nimh.nih.gov; or maybe how some pages use banners to alert users to future maintenance). By including the transclusion function at the top of our wiki pages and formatting the transcluded section to be eye-catchy and bright, we can effectively insert banners into any of our wiki pages! Once you paste the transclusion function into the first line of your page's source code, you never have to edit that page's banner code again. We achieve this because all of our magic is happening in the page you are on now. By editing the "Current Crisis" section in our "Banner" subpage, we can make banners appear and disappear on these pages as needed.

This page contains three very important sections: "Practice Implementation," "Current Crisis," and "Past Crises." The Practice Implementation is a sandbox for you to use to get your code looking the way you intend. Please finish your code here BEFORE moving it to the Current Crisis section. This will ensure that you get your banner put in place correctly the FIRST time. We technically could use the "revert page" function Wiki provides, but that still allows for the potential for any poor formatting to get beamed across our wiki pages. Once you finish with the "Practice Implementation" section, please reset it for the next person to use. The original, unedited code is found in a subsection inside "Practice Implementation." Use this to reset the sandbox or fix the code if you or someone else breaks it. Also note that any code added inside of the "Practice Implementation" is only saved locally, meaning that all work in this section is not sent out to the wiki pages. Our transclusion function is only looking at the "Current Crisis" section, and only stuff under the "Current Crisis" header will get beamed to wiki pages (specifically between the "onlyinclude" tags). The Current Crisis section is where the magic will happen. Use this section to edit the banner display. When this section is empty, no banner will be displayed on any page! This allows us to create banners as crises come up. The Past Crises section is where you will move your crisis after it has passed. This is a library of all public service announcements we have sent out and is used to eventually streamline banner implementation and act as a repository of links and resources. The current code uses the transclusion functionality to pull the "Current Crisis" section into whatever page you want to add the banner to. It does this by reading the code of the entire page, and when it encounters our "onlyinclude" tags, it knows to only include the surrounded information into the copy and past functionality.

Below you will find two guides, one for adding the banner to a wiki page and another for editing the contents of the banner. Once you implement banner transclusion code into the desired wiki page, you don't have to touch the code you pasted.

If this is confusing, please see the appendix section to find examples of what your code should look like in various use cases.

One final note, please look at a few of the wiki pages the banner is or is not supposed to appear after every banner change to check and see if you have achieved your desired result.

Quick Guide
This section is meant to act as a quick reference to provide an overview of the banner process. Using this, you should be able to get a sense of the workflow. Use the appendix to go in depth on any topic.  Copy the banner code below into the first line of the page you want to have the banner appear.  Choose your banner format (crisis, announcement, spotlight).  Copy and paste your chosen banner code into the sandbox provided on this page.  Use the sandbox to perfect your banner.  Copy and paste your perfected banner into the "Current Crisis" section, specifically between the "onlyinlcude" tags. If your code is not flanked by these tags, your banner will not be transcluded properly.  When removing or replacing a banner, place the old one in the "Past Crisis" section so we can keep a log of our banners.



Tutorials
Below is a guide to add the banner to any wiki page you want :  Navigate to the page you wish to add a banner to. Go to "edit." '''Be sure to edit the source code of your page. No visual code.'''  Copy the code found below: 
 * The template tells wiki to use the transclusion function
 * the colon tells wiki that we are looking for an article named "Helping Give Away Psychological Science/Banner"
 * The  part is generating a list of pages at the bottom of this page that use this functionality automatically.

 Paste the code above all of the source code in your desired wiki page.  Summarize your edits and click publish changes.  You have now successfully implemented banner functionality onto the wiki page. You never have to edit this code again.  Check out Cody Naccarato's talkpage to see the transclusion function implemented properly! 

Below is a guide for editing the banner :  Begin by clicking "edit" on this page and navigate to the source code editor. <li> If there is no crisis and the banner is not being beamed to all wiki pages, please copy and paste the code found in the "Banner Formatting" section to the area under the "Current Crisis" section. The code found here will make your information eye-catching. <li> Between the two "Note to editors" lines found in the "Banner Formatting" code, within the "Current Crisis" section, you find this header: HGAPS ALERT: YOUR HEADER HERE
 * The above code is also surrounded on each side by  syntax. These flanking pieces of code insert our HGAPS pictures into each corner of the banner and are actually clickable images that will take you to the HGAPS wiki homepage.
 * The wikilink you see allows for  in our title to link back to our main page.
 * The  modifier will make your header bigger, and the three   will bold it. The reason you want to do this is that it will add a header to your banner without giving people the option to edit the content. If you just use the   syntax in the source code or the "Header" functionality in the visual editor it will actually give anyone who sees the banner an edit option. We do not want random people editing or griefing our banners.

<li> After your header, add a link to the page with your resources in between the "Note to editors" lines. <li> Please be aware that we are using onlyinclude tags in order to determine what is transcluded to our wiki pages. When editing the Current Crisis section, you MUST preserve these tags or our banner functionality breaks. Please make all of your edits within these tags.

<li> After an appropriate length of time and you are ready to remove the banner, please move all code out of the "Current Crisis" section. Add the sources and information you included between the "Note to editors" lines to a new section under "Past Crises." These steps will completely remove all banners from our wiki pages and store the legacy banner in our repository for later use/reference. </ol>

Banner Formatting

When there is information you want to beam across all of HGAPS wiki, please copy and paste the red box syntax into the "Current Crisis" section. Please delete the "banner formatting" code once you take down a crisis and no longer wish to beam the banner to all wiki pages. If you do not remove your sources and this syntax, there will be random links and/or a red box across all of our wiki pages. The only way to completely take down a banner is to make sure the "Current Crisis" is 100% empty of all code and text, save for the "onlyinclude" tags. Add your information in-between the "Note to editors" line. Please keep the onlyinclude tags preserved within the current crisis section! If these tags are broken or missing, this entire wiki page will be pasted into the banner location.

Editing the banner is super easy! You should only be replacing the background color in line 1, the "YOUR TITLE HERE" in line 5, and the "YOUR RESOURCES AND CRISIS HERE" in line 8. The bulk of your content will be placed in line 8.

The extra spaces/lines in the code above are for instructional purposes only and help give the reader a better sense of what's going on in the code. Please be aware that any extraneous "enter" or "return" keypresses or forced breaks will result in unnecessary space added to the first few lines of your page. Be sure to have compact code, even if it is harder to read.

Banner Formats
The main purpose of this section is to have different color backgrounds for our banners with the idea that in the distant future, we can use banners for more than just crises. What if we did outreach through wiki banners that raised awareness for certain disorders? Or what if we included links to charities on certain awareness days? What if we get an awesome publication, mention in the news, or conference invite? These are all things we can communicate through banners to help increase our visibility ON wiki itself. Not to mention that this will make us look super professional and well put-together. Later, we can add specific formats for different banners (i.e. adding specific sections for crisis banners, announcement banners, etc.). Use hex codes to change the background color. Use this link for a list of colors.

Crisis Format
The below banner is red. It is intended to alert the public of crises. Notice the  background selection in the first line of code.

Test color:

HGAPS Announcement Format
The below banner is purple. It is intended to alert the public of HGAPS announcements (i.e. new assessment centers, new pages, new projects, exciting HGAPS publications, keynote appearances at conferences, workshops, etc...). Notice the  background selection.

Test color:

Disorder Awareness Format
The below banner is blue. It is intended to inform the public of disorder awareness weeks (depression awareness, autism awareness, etc...). Notice the  background selection.

Test color:

Practice Implementation: Your Sandbox to Get Things Right
Below is what your finished product will look like. Please use this sandbox before attempting to send out a public service announcement.

Practice Implementation's Base Code (Please do not delete)
The code below is the reset value for "Practice Implementation." You should copy and paste this code to reset "Practice Implementation" after using it to create a draft banner.

Below is what your finished product will look like. Please use this sandbox before attempting to send out a public service announcement.

--

Past Crises
Please place your legacy content between  and. This allows for your content to be displayed centered as it would in a banner but without an overload of color on the page. If you ever want to reuse one of the legacy banners, the "div" syntax will be replaced with the banner formatting above: YourContentHere change the above code back to the below code when reusing an old banner--->

We change the flanking code back to  when moving banners out of the library. This is done so we can re-add color functionality to our banners. Each type of banner should also be matched with the appropriate hex color. When moving stuff into the library, it's also a good idea to add a small summary just to give context to whoever is reading it. Also, put a date for how old it is!

Template of Past Event Storage
Recap: provide some context for future HGAPS members Date: give the date for better context Type: provide some context for future HGAPS members

Above is the syntax for storage. Do not copy the  found in the source code when moving this template. This code exists only to visibly show you the source code without wiki executing the code's functions. This  format centers text as it would appear in the banner.

Fabricated Example of Past Crisis
Recap: Recent school shooting in Parkland. This was the second prototype announcement banner created for this page. Date: 26 April 2020 Type: Crisis

HGAPS ALERT: School Shootings and You School shootings are tragic and incomprehensible. If you or a loved one has been affected by the recent shooting, please know that you are not alone and there are resources for you. Link to Resources: ~Coping With a Shooting ~ Finding a Therapist ~ Other Resources ~ ~ More at HGAPS.org ~

Fabricated Example of Past HGAPS Announcement
Recap: Our publication on the effects of team outreach (faux). This was the first prototype announcement banner created for this page. Date: 26 April 2020 Type: Announcement

HGAPS ANNOUNCEMENT: New Publication!

HGAPS is proud to announce a new journal publication on the effectiveness of HGAPS-related information discrimination! Check out the link here! As you can see, we reach thousands of people and are effective at getting good psychological science to the public! ~ More at HGAPS.org ~

Fabricated Example of Past Sexual Assault Awareness Month
Recap: Sexual Assault Awareness Month (faux). This was the first prototype awareness banner created for this page. Date: 26 April 2020 Type: Awareness

HGAPS AWARENESS: Spotlight on Sexual Assault HGAPS would like to spotlight “National Sexual Assault Awareness Month” for the month of April. Please check out these resources! ~Healthy Relationships ~ Sexual Assault ~ Reporting Sexual Assault ~ Other Resources ~ ~ Consider donating to these charities! ~ ~ More at HGAPS.org ~

COVID-19 and YOU
Recap: Suicide and self-help resources. This was the first prototype crisis banner created for this page. Date: 26 April 2020 Type: Crisis

HGAPS ALERT: COVID-19 and You It is understandable to feel hopeless right now. This is an unprecedented time in our lives and it is okay to feel angry, frustrated, or helpless. Below are some important resources you can use to improve mental health and find relief. If you are having thoughts of suicide please seek help. Please know you are not alone. There is help. Link to Suicide Resources:

~ National suicide hotline 24/7:  1-800-273-8255 ~ Crisis Textline 24/7:  Text HOME to 741741 ~ ~ Coping With Suicidal Thoughts ~ Suicide Prevention in Schools ~

Not suicidal but still want help? Click on a link below! ~ Coping with COVID-19 ~ Coping with Social Isolation ~ Finding a Therapist ~ Other Resources ~

~ More at HGAPS.org ~

Resources for ABCT 2020
Recap: Used as a demonstration during ABCT 2020. Date: 21 November 2020 Type: Announcement

HGAPS resources for ABCT 2020 Click here to go to the page with copies of the slides and other goodies

~ More at HGAPS.org ~

(next crisis here)
Recap: Date: Type:

Appendix - Use Cases and Code Implementation: Brownies, Cookies, and Assessment
Please refer to the sections below for various use cases. Note that sometimes parentheses are a way of communicating to the reader and will not be in the final code. We also trimmed some code here for the sake of brevity. You will notice that the practice implementation box is less robust than what is located above. The same ideas and editing format is the same, however.

Adding a Banner To a New Wiki Page
This case often occurs when we create new pages for HGAPS. Please add this banner functionality so we can reach as many people with our crisis banners. Here, the coding action happens on "Helping Give Away Psychological Science/SUBPAGE"

Let's pretend we created a new HGAPS Wikiversity page on a new assessment tool for bipolar disorder. An example of correct implementation of code into this new page is listed below. Note this is described in wikitext source code. The source code for this page might look something like this:

(start of page) = Super Cool Awesome Assessment Tool 9000 = (rest of page)
 * This assessment has good reliability.
 * This assessment has good validity.
 * Eric loves this thing!

In order to implement a new banner into this new assessment page, we must copy and paste the code for transclusion above all source code. We do this because banners are typically the first thing you see on a webpage. After pasting, we get the following source code:

(start of page) = Super Cool Awesome Assessment Tool 9000 = (rest of page)
 * This assessment has good reliability.
 * This assessment has good validity.
 * Eric loves this thing!

The first line of our source code is the transclusion function defined for our crisis banner. This allows for our messages to be at the top of each page. Once this has been inserted, you never have to touch it again and it will automatically update as we push out banners. It will also automatically disappear if we wish to remove banners. By editing the Current Crisis section in our Banner subpage, we can make banners appear and disappear as needed. Check out Cody Naccarato's talkpage to see the transcluded implemented properly!

Putting Up a New Banner
This case often occurs when there has been a great length of time since the past crisis. Follow the implementation below as a reference. Note this is described in wikitext source code. Working code is found in the "Introduction" and "Practice Implementation" sections. Here, the coding action happens on "Helping Give Away Psychological Science/Banner".

Okay, so you have your banner code implemented into your desired page. Now it's time to put some crisis info on it! Navigate to the Banner subpage of Helping Give Away Psychological Science (Hint: you are already here). This is the page where you will implement the following code. Remember, the only thing you had to do on the page where you actually wanted the banner was copy and paste the transclusion code in the first use case. In the event that there is NOT an ongoing crisis, the code of this page will look like this:

Banner Formatting (predicting code here)

Practice Implementation
Below is what your finished product will look like. Please use this sandbox before attempting to send out a public service announcement.

Current Crisis
In order to ensure smooth sailing, the "Practice Implementation" section is for you to tinker with your banner design before pushing out the final product. Note that the "Practice Implementation" currently prints this: Practice Implementation

Below is what your finished product will look like. Please use this sandbox before attempting to send out a public service announcement.

As we can see, you have yet to add anything to the banner. Now we can use the "Practice Implementation" section to create something awesome. Let's pretend we are creating a banner to alert the public of a new brownie recipe you found. We first need to make a prototype to play with before officially releasing the announcement. Within the "Practice Implementation" section, we come up with something like this:

Practice Implementation
Below is what your finished product will look like. Please use this sandbox before attempting to send out a public service announcement.

This code prints out this: Practice Implementation

Below is what your finished product will look like. Please use this sandbox before attempting to send out a public service announcement.

However, we see we can do better on the formatting and grammar. The utility of the practice space is now we don't have potentially thousands of people seeing our poor grammar and bad formatting. After revisions, we come up with this:

Practice Implementation
Below is what your finished product will look like. Please use this sandbox before attempting to send out a public service announcement.

Note that by using the  HTML tag, we can achieve intentional breaks in our code to help us format stuff. This equates to a forced line break. The above code prints out: Practice Implementation

Below is what your finished product will look like. Please use this sandbox before attempting to send out a public service announcement.

Now that looks like a banner worth sharing! Once we are confident in our formatting and general look, we can move our code from "Practice Implementation" to "Current Crisis."

Banner Formatting (predicting code here)

Practice Implementation
(reset to original value)

Below is what your finished product will look like. Please use this sandbox before attempting to send out a public service announcement.

Current Crisis
(pasted final product below)

Please note our banner was placed INSIDE of the "onlyinclude" tags! This is telling our transclusion function to "only include" whatever is inside of this special markup. However, we are not quite finished yet. While we have successfully published the banner, we need to reset the "Practice Implementation" section so the next person can easily use it! Please clean up after yourself so the next person can use this page efficiently. The base code for "Practice Implementation" can be found in that section. After copying and pasting it to reset this section, we see our final code for this entire page looks something like this:

Banner Formatting (predicting code here)

Practice Implementation
(reset to original value)

Below is what your finished product will look like. Please use this sandbox before attempting to send out a public service announcement.

Current Crisis
(pasted final product below)

And just like that, all wiki pages now show the banner and the next person can efficiently navigate a clean workspace! You deserve a cookie, or maybe brownie?

Switching Banners
This case often occurs when a new, more pressing crisis happens on the tail end of another crisis. Follow the implementation below as a reference. Note this is described in wikitext source code. Here, the coding action happens on "Helping Give Away Psychological Science/Banner".

Continuing from the last use case, let's say that instead of making a banner about a new brownie recipe we found, we want to replace it with a banner about a new cookie recipe we found. However, because the brownies we found were so awesome, we also want to store these references for later. We accomplish this by moving the brownie banner from "Current Crisis" to "Past Crises" under a newly labelled section. Let go ahead and create the final draft of the cookie banner as well. Starting out, we see that our current page's code looks something like this:

Practice Implementation
(your final draft for the cookie banner here) HGAPS ALERT: Cookies are Better Attention all psychologists. Check out this perfect recipe for cookies: https://www.bettycrocker.com/recipes/dishes/cookie-recipes

Past Crisis2
First, let's move our old banner into the past section for storage and later reference. To accomplish this, we create a new header using the triple equals syntax. This syntax allows for our past banners to appear in the table of contents for easy reference. Let's name the new header something specific and easily referenceable. The code should look something like this:

Practice Implementation
(your final draft for the cookie banner here) HGAPS ALERT: Cookies are Better Attention all psychologists. Check out this perfect recipe for cookies: https://www.bettycrocker.com/recipes/dishes/cookie-recipes

Martha Stewert Brownie Recipe
HGAPS ALERT: Brownies are Good Attention all psychologists. Check out my newfound brownie recipe: https://www.marthastewart.com/1502268/brownie-recipes

We see that our brownie recipe is now our 3rd past crisis in our list. As we fill up this page with a bunch of banners, it is useful to go back and look at past banners for formatting purposes. Finally, let's move our cookie banner from our "Practice Implementation" section into our "Current Crisis" section. Let's also go ahead and reset the "Practice Implementation" section for the next person's convenience. Our code looks like this:

Martha Stewert Brownie Recipe
HGAPS ALERT: Brownies are Good Attention all psychologists. Check out my newfound brownie recipe: https://www.marthastewart.com/1502268/brownie-recipes

That's it! You have successfully switched out banners correctly.

Taking a Banner Down
This case often occurs when a crisis is outdated and a public service announcement needs to be taken down. Follow the implementation below as a reference. Note this is described in wikitext source code. Here, the coding action happens on "Helping Give Away Psychological Science/Banner".

Let's say that our cookie banner from the previous example has been up for a while and is no longer relevant. Taking it down is super simple. Our current code is this:

Martha Stewert Brownie Recipe
HGAPS ALERT: Brownies are Good Attention all psychologists. Check out my newfound brownie recipe: https://www.marthastewart.com/1502268/brownie-recipes

We start by moving the cookie recipe to the "Past Crises" section, much like we did with the brownie banner. We create a new header under the "Past Crises." By using a well-named header, we are setting up our future to have streamlined banner creation and good templates. We also reset the "Current Crisis" section by deleting our old code. Note that there must NOT be any code under the "Current Crisis" section, as anything left in this section will appear on all wiki pages. This includes any red box or border syntax. We do not have to worry about our residual "onlyinclude" tags showing up on our pages as they are just there to direct where our transclusion takes place, and are not part of the transcluded information itself. Our final code looks like this:

Current Crisis
(no code here!!!)

Martha Stewert Brownie Recipe
HGAPS ALERT: Brownies are Good Attention all psychologists. Check out my newfound brownie recipe: https://www.marthastewart.com/1502268/brownie-recipes

Betty Crocker Cookie Recipe
HGAPS ALERT: Cookies are Better Attention all psychologists. Check out this perfect recipe for cookies: https://www.bettycrocker.com/recipes/dishes/cookie-recipes

And just like that, we have both cleared all wiki pages and stored our banner in our repository!!! Now go show your friends and earn some brownie points! Too corny? Oh well, that's just the way the cookie crumbles.

Future Ideas to Improve This Page

 * better formatting code to allow for more versatility in designing banners
 * pictures to add ~flare~
 * security privileges to prevent randoms from adding to our banner sections
 * dispersion of transclusion code onto our wiki pages
 * be sure to update the Index list of current pages too!
 * we also need to add brief descriptions of the resources in our pages with resources (instead of just listing the Trevor Project in our suicide resources page, we should give a brief sentence description of each)


 * Another use of this page would be to send out announcements to the public
 * add some different "Banner Formatting" code to allow for different color banners. HGAPS-purple for HGAPS related announcements to the public, red for crisis resources, and other colors for other things we can use banners for!
 * for national awareness days/weeks/months, we could also have banners highlighting certain disorders and relevant resources (maybe green or blue, or the banner could be the color of the disorder's awareness date - think breast cancer pink)
 * consideration for our color-blind friends!
 * how can we translate this to more languages?

Index Of Current Pages Using The Banner Functionality
Below is a list of all pages we have put our banners on. This tool works to some extent. I am using the  html tag to dynamically pull every page listed under "HGAPS Banner Indexes." It automatically builds the list for us but does not automatically update this page. Needs some tweaks. To update for the most recent page count, place or delete a space in the code editor to force the list to rebuild itself.

<DynamicPageList> category= HGAPS Banner Indexes order: ascending </DynamicPageList>