PDA

View Full Version : BB Code Enhancements - ProProfs Brain Games BB Code- embed games in your forum (bbcode)


BirdOPrey5
08-19-2010, 10:00 PM
ProProfs Brain Games (http://www.proprofs.com/games/) is a site where you can create several types of games to embed into your forum using standard BB Code.

Live Demo: Here (http://www.juot.net/forums/showthread.php?p=853884#post853884)

For all the codes listed here there will be several common settings-
Add a new BB Code
Description: Embedded game from ProProfs.com.
Use Option: No
Remove Tag If Empty: Yes
All Disable Options: Yes

The following are the unique settings for each game...

Title: Crossword Puzzle
BB Code Tag Name: crossword
Replacement:
<object width='630' height='580'><param name='movie' value='http://www.proprofs.com/games/crossword/swf/crossword_w.swf' /><param name='FlashVars' value='id={param}&level=easy' /> <param name='allowScriptAccess' value='always' /><param name='quality' value='high' /><embed name='proprofs_flashGame' src='http://www.proprofs.com/games/crossword/swf/crossword_w.swf' FlashVars='id={param}&level=easy' width='630' height='580' allowScriptAccess='always' quality='high' type='application/x-shockwave-flash'></embed></object><div style='font-size:10px; font-family:Arial, Helvetica, sans-serif; color:#000;'><a href='http://www.proprofs.com/games/crossword/' title='make crossword puzzle' target='_blank'>make crossword puzzle</a></div>
Example: 2466

In the embed code look for FlashVars='id=NUMBER and put NUMBER between the [crossword] tags.

---

Title: Word Search
BB Code Tag Name: wordsearch
Replacement:

<object width='625' height='450'><param name='movie' value='http://www.proprofs.com/games/word-search/swf/wse_w.swf' /><param name='FlashVars' value='id={param}&wordscount=6&gametime=3600' /> <param name='allowScriptAccess' value='always' /><param name='quality' value='high' /><embed name='proprofs_flashGame' src='http://www.proprofs.com/games/word-search/swf/wse_w.swf' FlashVars='id={param}&wordscount=6&gametime=3600' width='625' height='450' allowScriptAccess='always' quality='high' type='application/x-shockwave-flash'></embed></object><div style='font-size:10px; font-family:Arial, Helvetica, sans-serif; color:#000;'><a href='http://www.proprofs.com/games/word-search/' title='free word search' target='_blank'>free word search</a></div>

Example: 84

In the embed code look for FlashVars='id=NUMBER and put NUMBER between the [wordsearch] tags.

---

Title: Slide Puzzle
BB Code Tag Name: slide
Replacement:

<iframe style='width:420px; height:460px; overflow-x:hidden;' frameborder='0' name='proprofs' id='proprofs' src='http://www.proprofs.com/games/puzzle/sliding/widget/?title={param}'></iframe><div style='font-size:10px; font-family:Arial, Helvetica, sans-serif; color:#000;'><a href='http://www.proprofs.com/games/puzzle/sliding/' title='slide puzzle' target='_blank'>slide puzzle</a></div>

Example: sedona-az

From the embed code look for "title=puzzle-title" and put "puzzle-title" between the [slide] tags.

---

Title: Hangman
BB Code Tag Name: hangman
Replacement:

<object width='625' height='450'><param name='movie' value='http://www.proprofs.com/games/word-games/hangman/swf/hangman_w.swf' /><param name='FlashVars' value='id={param}' /> <param name='allowScriptAccess' value='always' /><param name='quality' value='high' /><embed name='proprofs_flashGame' src='http://www.proprofs.com/games/word-games/hangman/swf/hangman_w.swf' FlashVars='id={param}' width='625' height='450' allowScriptAccess='always' quality='high' type='application/x-shockwave-flash'></embed></object><div style='font-size:10px; font-family:Arial, Helvetica, sans-serif; color:#000;'><a href='http://www.proprofs.com/games/word-games/hangman/' title='hangman game' target='_blank'>hangman game</a></div>

Example: 1863

In the embed code look for FlashVars='id=NUMBER' and put NUMBER between the [hangman] tags.

---

Title: Word Scramble
BB Code Tag Name: scramble
Replacement:

<object width='600' height='300'><param name='movie' value='http://www.proprofs.com/games/word-games/word-scramble/swf/wordscramble_w.swf' /><param name='FlashVars' value='id={param}' /> <param name='allowScriptAccess' value='always' /><param name='quality' value='high' /><embed name='proprofs_flashGame' src='http://www.proprofs.com/games/word-games/word-scramble/swf/wordscramble_w.swf' FlashVars='id={param}' width='600' height='300' allowScriptAccess='always' quality='high' type='application/x-shockwave-flash'></embed></object><div style='font-size:10px; font-family:Arial, Helvetica, sans-serif; color:#000;'><a href='http://www.proprofs.com/games/word-games/word-scramble/' title='word scramble game' target='_blank'>word scramble game</a></div>

Example: 707

In the embed code look for 'FlashVars' value='id=NUMBER' and put NUMBER between the [scramble] tags.

---

Title: Jigsaw Puzzle
BB Code Tag Name: jigsaw
Replacement:

<object width='625' height='450'><param name='movie' value='http://www.proprofs.com/games/jigsaw/swf/jigsaw_w.swf' /><param name='FlashVars' value='id={param}' /> <param name='allowScriptAccess' value='always' /><param name='quality' value='high' /><embed name='proprofs_flashGame' src='http://www.proprofs.com/games/jigsaw/swf/jigsaw_w.swf' FlashVars='id={param}' width='625' height='450' allowScriptAccess='always' quality='high' type='application/x-shockwave-flash'></embed></object><a href='http://www.proprofs.com/games/jigsaw/' title='jigsaw puzzles' target='_blank'>jigsaw puzzles</a></div>

Example: 4021

In the embed code look for 'FlashVars' value='id=NUMBER' and put NUMBER between the [jigsaw] tags.

I will try and attach some editor buttons shortly, they are optional of course.

Please mark as installed if you use this. :)

Check My Profile (https://vborg.vbsupport.ru/member.php?u=258922) for other BB Code enhancements. They work on all versions.

Download the .txt file for a copy of the Install Instructions.

MagicThemeParks
08-20-2010, 11:36 AM
Thank you sir! :up:

I'm using the WordSearch and Crossword Puzzle ones!

Demo of WordSearch: http://www.waltdisneyboards.com/fun-games/55118-disney-princess-word-search.html

Demo of Crossword Puzzle: http://www.waltdisneyboards.com/fun-games/55119-magic-kingdom-attraction-crossword-puzzle.html

I also attached two images to use (optional) for those :D

BirdOPrey5
08-20-2010, 12:15 PM
The following games are different then the first in that you can't make your own versions of these games, but you may still embed the existing games on ProProfs.com. The example code is probably the only code you need to ever call the game.

Sudoku

Title: Sudoku
BB Code Tag Name: sudoku
Replacement:

<object width='600' height='400'><param name='movie' value='http://www.proprofs.com/games/swf/sudoku/sudoku.swf' /><param name='FlashVars' value='id={param}' /> <param name='allowScriptAccess' value='always' /><param name='quality' value='high' /><embed name='proprofs_flashGame' src='http://www.proprofs.com/games/swf/sudoku/sudoku.swf' FlashVars='id={param}' width='600' height='400' allowScriptAccess='always' quality='high' type='application/x-shockwave-flash'></embed></object><div style='font-size:10px; font-family:Arial, Helvetica, sans-serif; color:#000;'><a href='http://www.proprofs.com/games/sudoku/' target='_blank' title='Sudoku'>Sudoku</a> &raquo; <a href='http://www.proprofs.com/games/' title='Puzzle games' target='_blank'>Puzzle games</a></div>

Example: 26

In the embed code look for 'FlashVars' value='id=NUMBER' and put NUMBER between the [sudoku] tags.

---

Sudoku X

Title: Sudoku X
BB Code Tag Name: sudokux
Replacement:


<object width='600' height='400'><param name='movie' value='http://www.proprofs.com/games/swf/sudoku/sudoku-x.swf' /><param name='FlashVars' value='id={param}' /> <param name='allowScriptAccess' value='always' /><param name='quality' value='high' /><embed name='proprofs_flashGame' src='http://www.proprofs.com/games/swf/sudoku/sudoku-x.swf' FlashVars='id={param}' width='600' height='400' allowScriptAccess='always' quality='high' type='application/x-shockwave-flash'></embed></object><div style='font-size:10px; font-family:Arial, Helvetica, sans-serif; color:#000;'><a href='http://www.proprofs.com/games/sudoku-x/' target='_blank' title='Sudoku X'>Sudoku X</a> &raquo; <a href='http://www.proprofs.com/games/' title='free puzzles' target='_blank'>free puzzles</a></div>


Example: 27

In the embed code look for 'FlashVars' value='id=NUMBER' and put NUMBER between the [sudokux] tags.

---

Memory Game

Title: Memory Game
BB Code Tag Name: memory
Replacement:


<object width='600' height='400'><param name='movie' value='http://www.proprofs.com/games/swf/brain-training/memory.swf' /><param name='FlashVars' value='id={param}' /> <param name='allowScriptAccess' value='always' /><param name='quality' value='high' /><embed name='proprofs_flashGame' src='http://www.proprofs.com/games/swf/brain-training/memory.swf' FlashVars='id={param}' width='600' height='400' allowScriptAccess='always' quality='high' type='application/x-shockwave-flash'></embed></object><div style='font-size:10px; font-family:Arial, Helvetica, sans-serif; color:#000;'><a href='http://www.proprofs.com/games/memory/' target='_blank' title='Memory'>Memory</a> &raquo; <a href='http://www.proprofs.com/games/' title='Brain Games' target='_blank'>Brain Games</a></div>


Example: 48

In the embed code look for 'FlashVars' value='id=NUMBER' and put NUMBER between the [memory] tags.

---

Tic Tac Toe

Title: Tic Tac Toe
BB Code Tag Name: tictactoe
Replacement:


<object width='600' height='400'><param name='movie' value='http://www.proprofs.com/games/swf/logic-games/tic-tac-toe.swf' /><param name='FlashVars' value='id={param}' /> <param name='allowScriptAccess' value='always' /><param name='quality' value='high' /><embed name='proprofs_flashGame' src='http://www.proprofs.com/games/swf/logic-games/tic-tac-toe.swf' FlashVars='id={param}' width='600' height='400' allowScriptAccess='always' quality='high' type='application/x-shockwave-flash'></embed></object><div style='font-size:10px; font-family:Arial, Helvetica, sans-serif; color:#000;'><a href='http://www.proprofs.com/games/tic-tac-toe/' target='_blank' title='Tic Tac Toe'>Tic Tac Toe</a> &raquo; <a href='http://www.proprofs.com/games/' title='Brain Games' target='_blank'>Brain Games</a></div>


Example: 40

In the embed code look for 'FlashVars' value='id=NUMBER' and put NUMBER between the [tictactoe] tags. Due to the random nature of the game you could always use the example code.

---

Checkers

Title: Checkers
BB Code Tag Name: checkers
Replacement:


<object width='600' height='400'><param name='movie' value='http://www.proprofs.com/games/swf/logic-games/checkers.swf' /><param name='FlashVars' value='id={param}' /> <param name='allowScriptAccess' value='always' /><param name='quality' value='high' /><embed name='proprofs_flashGame' src='http://www.proprofs.com/games/swf/logic-games/checkers.swf' FlashVars='id={param}' width='600' height='400' allowScriptAccess='always' quality='high' type='application/x-shockwave-flash'></embed></object><div style='font-size:10px; font-family:Arial, Helvetica, sans-serif; color:#000;'><a href='http://www.proprofs.com/games/checkers/' target='_blank' title='Checkers'>Checkers</a> &raquo; <a href='http://www.proprofs.com/games/' title='Puzzle games' target='_blank'>Puzzle games</a></div>


Example: 93

In the embed code look for 'FlashVars' value='id=NUMBER' and put NUMBER between the [checkers] tags. Due to the random nature of the game you could always use the example code.

---

Chess

Title: Chess
BB Code Tag Name: chess
Replacement:


<object width='600' height='400'><param name='movie' value='http://www.proprofs.com/games/swf/logic-games/chess.swf' /><param name='FlashVars' value='id={param}' /> <param name='allowScriptAccess' value='always' /><param name='quality' value='high' /><embed name='proprofs_flashGame' src='http://www.proprofs.com/games/swf/logic-games/chess.swf' FlashVars='id={param}' width='600' height='400' allowScriptAccess='always' quality='high' type='application/x-shockwave-flash'></embed></object><div style='font-size:10px; font-family:Arial, Helvetica, sans-serif; color:#000;'><a href='http://www.proprofs.com/games/chess/' target='_blank' title='Chess'>Chess</a> &raquo; <a href='http://www.proprofs.com/games/' title='Puzzle games' target='_blank'>Puzzle games</a></div>


Example: 93

In the embed code look for 'FlashVars' value='id=NUMBER' and put NUMBER between the [chess] tags. Due to the random nature of the game you could always use the example code.

---

There are many other games available, if you have a request for a specific one from ProProfs.com let me know and I'll add it.

MagicThemeParks
08-20-2010, 07:02 PM
Thanks Joe! :up:

Good work as usual :)

BirdOPrey5
08-20-2010, 07:18 PM
Thank you sir! :up:

I also attached two images to use (optional) for those :D

Here are icons for the rest (of the originals) if anyone is interested...

Glynn58
08-21-2010, 05:13 AM
thanks it makes a nice touch to my puzzle section.

ps , have you got a chess image by any chance

BirdOPrey5
08-21-2010, 10:27 AM
More icons...

Dave234
05-21-2012, 01:18 PM
Please can you tell me where in my vbulletin 4 I can embed this code? I am a novice with all of this. I know it is in admincp, but where do I go after that?

Thanks

FYI I have Idbpro Arcade installed already. Does that make any difference?

BirdOPrey5
05-21-2012, 06:51 PM
The arcade makes no difference.

Open the Admin CP... (yoursite.com/admincp/)

On the side menu scroll down to "Custom BB Codes" and expand it if it is collapsed.

Click on "Add New BB Code"

And you will see a bunch of empty fields and yes/no options. Copy the entries for each field from the instructions above.

When done "Save" the BB Code and you should now be able to use it on your forum using the "example" like code in a post.

If you need to edit these codes later you would go to the "BB Code Manager" which is also in the Admin CP.

Dave234
05-21-2012, 08:44 PM
I am following you so far, and I think I can do that. Thanks for making it easy for me to understand.

Golden Question: How could I make these games appear in their own tab on my website?

BirdOPrey5
05-21-2012, 10:12 PM
You would need to create your own vBulletin pages and put the HTML embed code ProProf's gives you into a custom template.

There is an article in the VB4 Articles section about creating your own vBulletin pages. It takes some doing but if you follow the instructions should not be a problem.

Dave234
05-22-2012, 01:32 PM
When I enter the embed code into the "Replacement" section as it appears above, it says:

The following BB Code replacement may not be properly formed. All HTML attributes should be enclosed within double quotes.

•<object width='630' height='580'><param name='movie' value='http://www.proprofs.com/games/crossword/swf/crossword_w.swf' /><param name='FlashVars' value='id={param}&level=easy' /> <param name='allowScriptAccess' value='always' /><param name='quality' value='high' /><embed name='proprofs_flashGame' src='http://www.proprofs.com/games/crossword/swf/crossword_w.swf' FlashVars='id={param}&level=easy' width='630' height='580' allowScriptAccess='always' quality='high' type='application/x-shockwave-flash'></embed></object><div style='font-size:10px; font-family:Arial, Helvetica, sans-serif; color:#000;'><a href='http://www.proprofs.com/games/crossword/' title='make crossword puzzle' target='_blank'>make crossword puzzle</a></div>

BirdOPrey5
05-22-2012, 02:07 PM
You can safely hit "Continue" it is safe and OK.

Dave234
05-22-2012, 05:36 PM
What does this mean:

In the embed code look for FlashVars='id=NUMBER and put NUMBER between the tags.

And why is there a 2466 in between [crossword]2466

BirdOPrey5
05-22-2012, 06:42 PM
Proprof will give you a long embed URL... look through the URL because all you care about is the number that follows id= in the URL.

You then put that number and only that number between the [crosswords] tags.

Dave234
05-22-2012, 09:54 PM
So you have to always put that particular number in it? Isn't that the number that's already in the examples provided?

BirdOPrey5
05-22-2012, 11:44 PM
No that number is from the example URL... you take the number that ProProfs gives you on your own crossword puzzle- everyone's will be different.

I just went to ProProfs and made a new crossword- I don't see a link to the crossword given anymore- but there is embed code.

So go to the embed code they give you for example:


<object width='430' height='300'><param name='movie' value='http://www.proprofs.com/games/crossword/swf/crossword_w.swf' /><param name='FlashVars' value='id=11358&level=easy' /> <param name='allowScriptAccess' value='always' /><param name='quality' value='high' /><embed name='proprofs_flashGame' src='http://www.proprofs.com/games/crossword/swf/crossword_w.swf' FlashVars='id=11358&level=easy' width='430' height='300' allowScriptAccess='always' quality='high' type='application/x-shockwave-flash'></embed></object><div style='font-size:10px; font-family:Arial, Helvetica, sans-serif; color:#000;'><a href='http://www.proprofs.com/games/crossword/vbulletin-test/' target='_blank' title='vBulletin Test crossword puzzle game'>vBulletin Test crossword puzzle game</a> ? <a href='http://www.proprofs.com/games/crossword/' title='make crossword puzzle' target='_blank'>make crossword puzzle</a></div>


You still need the number after id= so in this case (in red) it is: 11358

So the crossword bbcode would be

11358

Dave234
05-23-2012, 11:08 AM
So I need to go to that website and then make my own puzzles?

BirdOPrey5
05-23-2012, 06:27 PM
yes, that is the point. To embed puzzles you make on their website.