Erase to Reveal Spoiler

[orangegold]

Please mark as installed if you use this!

This code creates a spoiler in which the user has to click and drag over the spoiled (hidden) text you reveal it, simulating an eraser effect... This should stimulate user interactivity in your forum and make members feel more enticed to view spoiled text! Click the smiley face for a live demo ---> :) (http://trollpractice.com/showthread.php?12-Eraser-Spoiler-BBCode&p=24#post24)



How to install:

Upload the contents of the zip folder attached below to "/images" directory (*Make sure it's www.mysite.com/images ... NOT www.mysite.com/forums/images or anything else like that)

There are two files, one for people who need the spoiler to have black text (they have light backgrounds for their forums skin/theme) and one for people who need the spoiler to have white text (like in the demo above because I have a dark background for my forums skin/theme)

Now log-in to your AdminCP --> Custom BBCodes --> BBCode Manager --> Add New BBCode

Title: "Eraser Spoiler"

BBCode Tag Name: "espoil"

Replacement (Use this one if you want your spoiler to have white text):
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase=""http://macromedia.com/cabs/swflash.cab#version=6,0,0,0""
WIDTH="550" HEIGHT="200" id="flaMovie1" ALIGN="CENTER">
<PARAM NAME=movie VALUE="/images/EraserSpoiler_WhiteText.swf">
<PARAM NAME=FlashVars VALUE="metavar={param}">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#FFFFFF>
<PARAM NAME="wmode" value="transparent">
<embed src="/images/EraserSpoiler_WhiteText.swf" FlashVars="metavar={param}"
quality="high" bgcolor="#FFFFFF" WIDTH="550" HEIGHT="200"
NAME="flaMovie1" ALIGN TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer" wmode="transparent">
</OBJECT>


Replacement (Use this one if you want your spoiler to have black text):
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase=""http://macromedia.com/cabs/swflash.cab#version=6,0,0,0""
WIDTH="550" HEIGHT="200" id="flaMovie1" ALIGN="CENTER">
<PARAM NAME=movie VALUE="/images/EraserSpoiler_BlackText.swf">
<PARAM NAME=FlashVars VALUE="metavar={param}">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#FFFFFF>
<PARAM NAME="wmode" value="transparent">
<embed src="/images/EraserSpoiler_BlackText.swf" FlashVars="metavar={param}"
quality="high" bgcolor="#FFFFFF" WIDTH="550" HEIGHT="200"
NAME="flaMovie1" ALIGN TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer" wmode="transparent">
</OBJECT>


Example: "hide your text in here and the user has to 'erase' the spoiler coverup in order to reveal your message!"

Description: "Hide your text until a user "erases" the text's cover up and the text is revealed!"

Use Option: "no"

Remove Tag If Empty: "yes"

Disable BB Code Within This BB Code: "yes"

Disable Smilies Within This BB Code: "yes"

Disable Word Wrapping Within This BB Code: "no"

Disable Automatic Link Parsing Within This BB Code: "no"

Now hit save, When you click save you may get an error notification on the next page... just ignore it and hit continue, this has to do with the use of quotes in the code while communicating to flash and it will not affect your forum at all, don't worry! (Also this is a flash spoiler so it will run on flash supporting devices (aka not iPhones) enjoy!)

[Stormnet]

Tried it but it did not work for me, I got nothing where the spoiler should be so the bbcode was working, not the flash...

[orangegold]

Did you upload it to www.mysite.com/images or did you upload it to www.mysite.com/forum/images?

[samburrito]

Thank you works very well. Tested with images couldn't get to work. But good job!

[orangegold]

Ye, I programmed it and added all glyphs for text, I know hot to add images with HTML code but then users could potentially post html code throughout your site, I'm working on some workarounds to just allow some tags like <img> etc.

[Stormnet]

I uploaded it to www.mysite.com/forum/images

I'll try it the other way :)

EDIT: Yes! That worked! Thanks very much...

[orangegold]

Glad you got it working, I edited the upload instructions for the app... no-body else should experience these problems anymore hopefully!

[zhai]

can the spoiler be hide back?

[orangegold]

When you refresh the page or another user visits the page it automatically re-hides.

[hrenos]

I uploaded it to www.mysite.com/forum/images

I'll try it the other way :)

EDIT: Yes! That worked! Thanks very much...

well because im new with this if my images folder is located on /forum/images what is the alternative. do I make new folder images ?

[orangegold]

Yepp! Make a new folder, it won't affect your site in anyway except for allowing this bbcode to work :)

[Alex@bulletin]

Hi there, nice idea. works with 4.2
Is there an option to translate this "Spoiler alert, click and "erase" below to reveal the message:" for use in non-english boards?
Actually I like the option you did do this as an image. But maybe for translation use a text header would be better huh?