Participant badge based on percentage of goal raised

Patrick Brown

Hi - I was wondering if anyone has created a custom badge based on the percentage of goal raised (e.g. a 50% badge would display on a participant's personal page when they're reached that amount.)



I'm looking to implement this method of creating custom badges, but I haven't found a way to create one based on % of goal raised: http://ahs.mn/conviobadges



Any thoughts?



Patrick

Daniel Hartanto

Hi Patrick



You can use Javascript to do that custom badge you are mentioning here in conjunction with the S48 tag to initially obtain the participant's goal and amount raised by him/her so far, passing it for percentage calculation with that js and if the condition is met, render the badge image accordingly.



Note: One of the downside is that these custom badges won't appear by default / automatically on those default Convio roster (i.e. top donors, etc) if that is of a concern, but otherwise, that's one way to achieve what you want.



regards,

Daniel

Patrick Brown

Hi Daniel - thanks very much for this.  For anyone else looking, here's a link to a list of S48 parameters.  The one I was looking for is "if-percent-gt":



https://secure2.convio.net/customer/luminate_online/v10/s-tags/Help/S-Tags/S48_TeamRaiser_Participant.htm



Patrick

Brian Mucha

Edit: At the last BBCon in a session about Gamification they said they could do customizations to the milestones to add stuff just like we did below. I wonder if they could change the logic over to your percentage scheme, and if BBs customization would address Daniel's concern about the badge icons in participant lists.



Would this be for the percent of the minimum goal, or the participant's personal goal? Not so sure it's beneficial to show the top badge to someone who's made their $100 goal, but not to the guy who just missed his $5000 goal.



We completely replaced the Luminate badges with our own set, so we could include new badges such as number of emails sent, customized personal page, etc. You could use this as a start point.



For our badges, we put the following code as reusable content in the Page Footer (Not user editable) on the Default Personal Page.



<div id="NewMilestones" class="TrAchievementBadgeIconListLarge" style="display: none;">



    <div class="TrAchievementBadgeIconListLargeHeader"> Achievements </div>

    [[? xTRUEx::x[[E48:[[S334:fr_id]]-[[S334:px]]:if-dollars-gt:9999]]x::

        <div class="TrAchievementBadgeLarge clearfix">

            <img class="TrAchievementBadgeIconLarge" src="//foundation.luriechildrens.org/_resources-teamraiser/reus_milestones/milestone-00.png" width="48" height="48">

            <div class="TrAchievementBadgeTextLarge">

                <div class="TrAchievementBadgeNameLarge">$10,000 Milestone</div>

                <div class="TrAchievementBadgeDescLarge">Raised $10,000 in pledges and donations</div>

            </div>

        </div>

    ::]]



    [[? xTRUETRUEx::x[[E48:[[S334:fr_id]]-[[S334:px]]:if-dollars-gt:8999]][[E48:[[S334:fr_id]]-[[S334:px]]:if-dollars-lt:10000]]x::

        <div class="TrAchievementBadgeLarge clearfix">

            <img class="TrAchievementBadgeIconLarge" src="//foundation.luriechildrens.org/_resources-teamraiser/reus_milestones/milestone-20.png" width="48" height="48">

            <div class="TrAchievementBadgeTextLarge">

                <div class="TrAchievementBadgeNameLarge">$9,000 Milestone</div>

                <div class="TrAchievementBadgeDescLarge">Raised $9,000 in pledges and donations</div>

            </div>

        </div>

    ::]]



    [[? xTRUETRUEx::x[[E48:[[S334:fr_id]]-[[S334:px]]:if-dollars-gt:7999]][[E48:[[S334:fr_id]]-[[S334:px]]:if-dollars-lt:9000]]x::

        <div class="TrAchievementBadgeLarge clearfix">

            <img class="TrAchievementBadgeIconLarge" src="//foundation.luriechildrens.org/_resources-teamraiser/reus_milestones/milestone-19.png" width="48" height="48">

            <div class="TrAchievementBadgeTextLarge">

                <div class="TrAchievementBadgeNameLarge">$8,000 Milestone</div>

                <div class="TrAchievementBadgeDescLarge">Raised $8,000 in pledges and donations</div>

            </div>

        </div>

    ::]]



    [[? xTRUETRUEx::x[[E48:[[S334:fr_id]]-[[S334:px]]:if-dollars-gt:6999]][[E48:[[S334:fr_id]]-[[S334:px]]:if-dollars-lt:8000]]x::

        <div class="TrAchievementBadgeLarge clearfix">

            <img class="TrAchievementBadgeIconLarge" src="//foundation.luriechildrens.org/_resources-teamraiser/reus_milestones/milestone-18.png" width="48" height="48">

            <div class="TrAchievementBadgeTextLarge">

                <div class="TrAchievementBadgeNameLarge">$7,000 Milestone</div>

                <div class="TrAchievementBadgeDescLarge">Raised $7,000 in pledges and donations</div>

            </div>

        </div>

    ::]]



    [[? xTRUETRUEx::x[[E48:[[S334:fr_id]]-[[S334:px]]:if-dollars-gt:5999]][[E48:[[S334:fr_id]]-[[S334:px]]:if-dollars-lt:7000]]x::

        <div class="TrAchievementBadgeLarge clearfix">

            <img class="TrAchievementBadgeIconLarge" src="//foundation.luriechildrens.org/_resources-teamraiser/reus_milestones/milestone-17.png" width="48" height="48">

            <div class="TrAchievementBadgeTextLarge">

                <div class="TrAchievementBadgeNameLarge">$6,000 Milestone</div>

                <div class="TrAchievementBadgeDescLarge">Raised $6,000 in pledges and donations</div>

            </div>

        </div>

    ::]]



    [[? xTRUETRUEx::x[[E48:[[S334:fr_id]]-[[S334:px]]:if-dollars-gt:4999]][[E48:[[S334:fr_id]]-[[S334:px]]:if-dollars-lt:6000]]x::

        <div class="TrAchievementBadgeLarge clearfix">

            <img class="TrAchievementBadgeIconLarge" src="//foundation.luriechildrens.org/_resources-teamraiser/reus_milestones/milestone-16.png" width="48" height="48">

            <div class="TrAchievementBadgeTextLarge">

                <div class="TrAchievementBadgeNameLarge">$5,000 Milestone</div>

                <div class="TrAchievementBadgeDescLarge">Raised $5,000 in pledges and donations</div>

            </div>

        </div>

    ::]]



    [[? xTRUETRUEx::x[[E48:[[S334:fr_id]]-[[S334:px]]:if-dollars-gt:3999]][[E48:[[S334:fr_id]]-[[S334:px]]:if-dollars-lt:5000]]x::

        <div class="TrAchievementBadgeLarge clearfix">

            <img class="TrAchievementBadgeIconLarge" src="//foundation.luriechildrens.org/_resources-teamraiser/reus_milestones/milestone-15.png" width="48" height="48">

            <div class="TrAchievementBadgeTextLarge">

                <div class="TrAchievementBadgeNameLarge">$4,000 Milestone</div>

                <div class="TrAchievementBadgeDescLarge">Raised $4,000 in pledges and donations</div>

            </div>

        </div>

    ::]]



    [[? xTRUETRUEx::x[[E48:[[S334:fr_id]]-[[S334:px]]:if-dollars-gt:2999]][[E48:[[S334:fr_id]]-[[S334:px]]:if-dollars-lt:4000]]x::

        <div class="TrAchievementBadgeLarge clearfix">

            <img class="TrAchievementBadgeIconLarge" src="//foundation.luriechildrens.org/_resources-teamraiser/reus_milestones/milestone-14.png" width="48" height="48">

            <div class="TrAchievementBadgeTextLarge">

                <div class="TrAchievementBadgeNameLarge">$3,000 Milestone</div>

                <div class="TrAchievementBadgeDescLarge">Raised $3,000 in pledges and donations</div>

            </div>

        </div>

    ::]]



    [[? xTRUETRUEx::x[[E48:[[S334:fr_id]]-[[S334:px]]:if-dollars-gt:1999]][[E48:[[S334:fr_id]]-[[S334:px]]:if-dollars-lt:3000]]x::

        <div class="TrAchievementBadgeLarge clearfix">

            <img class="TrAchievementBadgeIconLarge" src="//foundation.luriechildrens.org/_resources-teamraiser/reus_milestones/milestone-13.png" width="48" height="48">

            <div class="TrAchievementBadgeTextLarge">

                <div class="TrAchievementBadgeNameLarge">$2,000 Milestone</div>

                <div class="TrAchievementBadgeDescLarge">Raised $2,000 in pledges and donations</div>

            </div>

        </div>

    ::]]



    [[? xTRUETRUEx::x[[E48:[[S334:fr_id]]-[[S334:px]]:if-dollars-gt:999]][[E48:[[S334:fr_id]]-[[S334:px]]:if-dollars-lt:2000]]x::

        <div class="TrAchievementBadgeLarge clearfix">

            <img class="TrAchievementBadgeIconLarge" src="//foundation.luriechildrens.org/_resources-teamraiser/reus_milestones/milestone-12.png" width="48" height="48">

            <div class="TrAchievementBadgeTextLarge">

                <div class="TrAchievementBadgeNameLarge">$1,000 Milestone</div>

                <div class="TrAchievementBadgeDescLarge">Raised $1,000 in pledges and donations</div>

            </div>

        </div>

    ::]]



    [[? xTRUETRUEx::x[[E48:[[S334:fr_id]]-[[S334:px]]:if-dollars-gt:899]][[E48:[[S334:fr_id]]-[[S334:px]]:if-dollars-lt:1000]]x::

        <div class="TrAchievementBadgeLarge clearfix">

            <img class="TrAchievementBadgeIconLarge" src="//foundation.luriechildrens.org/_resources-teamraiser/reus_milestones/milestone-11.png" width="48" height="48">

            <div class="TrAchievementBadgeTextLarge">

                <div class="TrAchievementBadgeNameLarge">$900 Milestone</div>

                <div class="TrAchievementBadgeDescLarge">Raised $900 in pledges and donations</div>

            </div>

        </div>

    ::]]



    [[? xTRUETRUEx::x[[E48:[[S334:fr_id]]-[[S334:px]]:if-dollars-gt:799]][[E48:[[S334:fr_id]]-[[S334:px]]:if-dollars-lt:900]]x::

        <div class="TrAchievementBadgeLarge clearfix">

            <img class="TrAchievementBadgeIconLarge" src="//foundation.luriechildrens.org/_resources-teamraiser/reus_milestones/milestone-10.png" width="48" height="48">

            <div class="TrAchievementBadgeTextLarge">

                <div class="TrAchievementBadgeNameLarge">$800 Milestone</div>

                <div class="TrAchievementBadgeDescLarge">Raised $800 in pledges and donations</div>

            </div>

        </div>

    ::]]



    [[? xTRUETRUEx::x[[E48:[[S334:fr_id]]-[[S334:px]]:if-dollars-gt:699]][[E48:[[S334:fr_id]]-[[S334:px]]:if-dollars-lt:800]]x::

        <div class="TrAchievementBadgeLarge clearfix">

            <img class="TrAchievementBadgeIconLarge" src="//foundation.luriechildrens.org/_resources-teamraiser/reus_milestones/milestone-09.png" width="48" height="48">

            <div class="TrAchievementBadgeTextLarge">

                <div class="TrAchievementBadgeNameLarge">$700 Milestone</div>

                <div class="TrAchievementBadgeDescLarge">Raised $700 in pledges and donations</div>

            </div>

        </div>

    ::]]



    [[? xTRUETRUEx::x[[E48:[[S334:fr_id]]-[[S334:px]]:if-dollars-gt:599]][[E48:[[S334:fr_id]]-[[S334:px]]:if-dollars-lt:700]]x::

        <div class="TrAchievementBadgeLarge clearfix">

            <img class="TrAchievementBadgeIconLarge" src="//foundation.luriechildrens.org/_resources-teamraiser/reus_milestones/milestone-08.png" width="48" height="48">

            <div class="TrAchievementBadgeTextLarge">

                <div class="TrAchievementBadgeNameLarge">$600 Milestone</div>

                <div class="TrAchievementBadgeDescLarge">Raised $600 in pledges and donations</div>

            </div>

        </div>

    ::]]



    [[? xTRUETRUEx::x[[E48:[[S334:fr_id]]-[[S334:px]]:if-dollars-gt:499]][[E48:[[S334:fr_id]]-[[S334:px]]:if-dollars-lt:600]]x::

        <div class="TrAchievementBadgeLarge clearfix">

            <img class="TrAchievementBadgeIconLarge" src="//foundation.luriechildrens.org/_resources-teamraiser/reus_milestones/milestone-07.png" width="48" height="48">

            <div class="TrAchievementBadgeTextLarge">

                <div class="TrAchievementBadgeNameLarge">$500 Milestone</div>

                <div class="TrAchievementBadgeDescLarge">Raised $500 in pledges and donations</div>

            </div>

        </div>

    ::]]



    [[? xTRUETRUEx::x[[E48:[[S334:fr_id]]-[[S334:px]]:if-dollars-gt:399]][[E48:[[S334:fr_id]]-[[S334:px]]:if-dollars-lt:500]]x::

        <div class="TrAchievementBadgeLarge clearfix">

            <img class="TrAchievementBadgeIconLarge" src="//foundation.luriechildrens.org/_resources-teamraiser/reus_milestones/milestone-06.png" width="48" height="48">

            <div class="TrAchievementBadgeTextLarge">

                <div class="TrAchievementBadgeNameLarge">$400 Milestone</div>

                <div class="TrAchievementBadgeDescLarge">Raised $400 in pledges and donations</div>

            </div>

        </div>

    ::]]



    [[? xTRUETRUEx::x[[E48:[[S334:fr_id]]-[[S334:px]]:if-dollars-gt:299]][[E48:[[S334:fr_id]]-[[S334:px]]:if-dollars-lt:400]]x::

        <div class="TrAchievementBadgeLarge clearfix">

            <img class="TrAchievementBadgeIconLarge" src="//foundation.luriechildrens.org/_resources-teamraiser/reus_milestones/milestone-05.png" width="48" height="48">

            <div class="TrAchievementBadgeTextLarge">

                <div class="TrAchievementBadgeNameLarge">$300 Milestone</div>

                <div class="TrAchievementBadgeDescLarge">Raised $300 in pledges and donations</div>

            </div>

        </div>

    ::]]



    [[? xTRUETRUEx::x[[E48:[[S334:fr_id]]-[[S334:px]]:if-dollars-gt:199]][[E48:[[S334:fr_id]]-[[S334:px]]:if-dollars-lt:300]]x::

        <div class="TrAchievementBadgeLarge clearfix">

            <img class="TrAchievementBadgeIconLarge" src="//foundation.luriechildrens.org/_resources-teamraiser/reus_milestones/milestone-04.png" width="48" height="48">

            <div class="TrAchievementBadgeTextLarge">

                <div class="TrAchievementBadgeNameLarge">$200 Milestone</div>

                <div class="TrAchievementBadgeDescLarge">Raised $200 in pledges and donations</div>

            </div>

        </div>

    ::]]



    [[? xTRUETRUEx::x[[E48:[[S334:fr_id]]-[[S334:px]]:if-dollars-gt:99]][[E48:[[S334:fr_id]]-[[S334:px]]:if-dollars-lt:200]]x::

        <div class="TrAchievementBadgeLarge clearfix">

            <img class="TrAchievementBadgeIconLarge" src="//foundation.luriechildrens.org/_resources-teamraiser/reus_milestones/milestone-03.png" width="48" height="48">

            <div class="TrAchievementBadgeTextLarge">

                <div class="TrAchievementBadgeNameLarge">$100 Milestone</div>

                <div class="TrAchievementBadgeDescLarge">Raised $100 in pledges and donations</div>

            </div>

        </div>

    ::]]



    [[? xTRUETRUEx::x[[E48:[[S334:fr_id]]-[[S334:px]]:if-dollars-gt:74]][[E48:[[S334:fr_id]]-[[S334:px]]:if-dollars-lt:100]]x::

        <div class="TrAchievementBadgeLarge clearfix">

            <img class="TrAchievementBadgeIconLarge" src="//foundation.luriechildrens.org/_resources-teamraiser/reus_milestones/milestone-02.png" width="48" height="48">

            <div class="TrAchievementBadgeTextLarge">

                <div class="TrAchievementBadgeNameLarge">$75 Milestone</div>

                <div class="TrAchievementBadgeDescLarge">Raised $75 in pledges and donations</div>

            </div>

        </div>

    ::]]



    [[? xTRUETRUEx::x[[E48:[[S334:fr_id]]-[[S334:px]]:if-dollars-gt:49]][[E48:[[S334:fr_id]]-[[S334:px]]:if-dollars-lt:75]]x::

        <div class="TrAchievementBadgeLarge clearfix">

            <img class="TrAchievementBadgeIconLarge" src="//foundation.luriechildrens.org/_resources-teamraiser/reus_milestones/milestone-01.png" width="48" height="48">

            <div class="TrAchievementBadgeTextLarge">

                <div class="TrAchievementBadgeNameLarge">$50 Milestone</div>

                <div class="TrAchievementBadgeDescLarge">Raised $50 in pledges and donations</div>

            </div>

        </div>

    ::]]



    [[? xTRUEx::x[[E130:[[E48:[[S334:fr_id]]-[[S334:px]]:days-since-reg]] 100 > "TRUE" "FALSE" ?]]x::

        <div class="TrAchievementBadgeLarge clearfix">

            <img class="TrAchievementBadgeIconLarge" src="//foundation.luriechildrens.org/_resources-teamraiser/reus_milestones/milestone-b.png" width="48" height="48">

            <div class="TrAchievementBadgeTextLarge">

                <div class="TrAchievementBadgeNameLarge">Old Timer</div>

                <div class="TrAchievementBadgeDescLarge">Registered more than 100 days ago</div>

            </div>

        </div>

    ::]]



    [[? xTRUEx::x[[E130:[[E48:[[S334:fr_id]]-[[S334:px]]:emails-sent]] 50 > "TRUE" "FALSE" ?]]x::

        <div class="TrAchievementBadgeLarge clearfix">

            <img class="TrAchievementBadgeIconLarge" src="//foundation.luriechildrens.org/_resources-teamraiser/reus_milestones/milestone-f.png" width="48" height="48">

            <div class="TrAchievementBadgeTextLarge">

                <div class="TrAchievementBadgeNameLarge">Great Communicator</div>

                <div class="TrAchievementBadgeDescLarge">Sent more than 50 email messages</div>

            </div>

        </div>

    ::]]



    [[? xx::x[[E48:[[S334:fr_id]]-[[S334:px]]:company-name]]x::::

        <div class="TrAchievementBadgeLarge clearfix">

            <img class="TrAchievementBadgeIconLarge" src="//foundation.luriechildrens.org/_resources-teamraiser/reus_milestones/milestone-e.png" width="48" height="48">

            <div class="TrAchievementBadgeTextLarge">

                <div class="TrAchievementBadgeNameLarge">Company Fundraiser</div>

                <div class="TrAchievementBadgeDescLarge">Fundraising on a company team</div>

            </div>

        </div>

    ]]



    [[? xTRUEx::x[[E48:[[S334:fr_id]]-[[S334:px]]:if-on-team]]x::

        <div class="TrAchievementBadgeLarge clearfix">

            <img class="TrAchievementBadgeIconLarge" src="//foundation.luriechildrens.org/_resources-teamraiser/reus_milestones/milestone-d.png" width="48" height="48">

            <div class="TrAchievementBadgeTextLarge">

            [[? xTRUEx::x[[E48:[[S334:fr_id]]-[[S334:px]]:if-is-captain]]x::

                <div class="TrAchievementBadgeNameLarge">Team Captain</div>

                <div class="TrAchievementBadgeDescLarge">Captain of a fundraising team</div>

                ::

                <div class="TrAchievementBadgeNameLarge">Team Member</div>

                <div class="TrAchievementBadgeDescLarge">Member of a fundraising team</div>

            ]]

            </div>

        </div>

    ::]]



    [[? xTRUEx::x[[E48:[[S334:fr_id]]-[[S334:px]]:if-is-self-donor]]x::

        <div class="TrAchievementBadgeLarge clearfix">

            <img class="TrAchievementBadgeIconLarge" src="//foundation.luriechildrens.org/_resources-teamraiser/reus_milestones/milestone-c.png" width="48" height="48">

            <div class="TrAchievementBadgeTextLarge">

                <div class="TrAchievementBadgeNameLarge">Personal Gift</div>

                <div class="TrAchievementBadgeDescLarge">Made a donation to this event</div>

            </div>

        </div>

    ::]]



    [[? xTRUEx::x[[E48:[[S42:1540:prev-fr-id]]:if-has-participant-center]]x::

        <div class="TrAchievementBadgeLarge clearfix">

            <img class="TrAchievementBadgeIconLarge" src="//foundation.luriechildrens.org/_resources-teamraiser/reus_milestones/milestone-b.png" width="48" height="48">

            <div class="TrAchievementBadgeTextLarge">

                <div class="TrAchievementBadgeNameLarge">Familiar Face</div>

                <div class="TrAchievementBadgeDescLarge">Participated in last year's event</div>

            </div>

        </div>

    ::]]



    <div class="TrAchievementBadgeLarge clearfix">

        <img class="TrAchievementBadgeIconLarge" src="//foundation.luriechildrens.org/_resources-teamraiser/reus_milestones/milestone-a.png" width="48" height="48">

        <div class="TrAchievementBadgeTextLarge">

            <div class="TrAchievementBadgeNameLarge">Getting Started</div>

            <div class="TrAchievementBadgeDescLarge">Successfully registered as a fundraiser</div>

        </div>

    </div>



</div>



<script type="text/JavaScript">

    (function($) {

        $(document).ready(function() {

            $(".TrAchievementBadgeIconListLarge").replaceWith($("#NewMilestones"));

            $("#NewMilestones").show();

        });

    })(jQuery);

</script>





Here it is in action: http://foundation.luriechildrens.org/site/TR/Events/MovefortheKids?px=1793265&pg=personal&fr_id=1560

 

Patrick Brown

Hi Brian - this is a great solution.  I'll look at integrating this into our project.  Thanks again for the helpful info.



Patrick

Jay Daniel

Brian,



Very useful!  How were you able to move the location of the Achievements display to the footer?  I am unable to in my testing.



Jeff

Brian Mucha

This doesn't move the display to the footer on the viewable page. I meant that the block of code goes into the PageFooter field, which lives on the Default Personal Page when editing the design.



What it does is manually build a custom, duplicate version of the achievements display called NewMilestones. So at this moment, the stock version is still visible higher in the viewable page, and now there is also second custom version at the bottom of the page.



Then at the very bottom of this block of code there is a little javascript. All that script does is replaces the standard display with the custom one, leaving us with a single new version.



All this happens in a split second, and shouldn't even be visible at all.



To minimize any visible glitches, I initially hide the custom version. You can see there is a style tag setting it to display: none right in the first DIV. Once all the replacing is done, the script turns off the display: none style setting, using the .show() command and the new version appears.



Though not really necessary, I also add a style to my pagewrapper's stylesheet to hide the default achievement display. This way neither is visible until the javascript is done and the .show() command fires.



.TrAchievementBadgeIconListLarge { display: none; }

 

Jay Daniel

Brian,



Where in the code does it change the Achievements display to an expandible window? I am getting everything else but that.



Thanks

Jeff

Brian Mucha

Do you mean how is it scrollable? That's just some CSS on the container DIV.



.sideBar #frBadge .TrAchievementBadgeIconListLarge

{

    max-height: 240px;

    min-height: 140px;

    overflow-y: scroll;

}

 

Note: My original idea was to make it expandable so you could really see the collection. Here's the old test:



http://foundation.luriechildrens.org/_temp/Milestones/new.htm

 

Jay Daniel

Thanks!

Daniel Krumm

 

Hi Brian - 

I have a question about your code above -

If you set up your custom div in the footer like this:

<div id="NewMilestones" class="TrAchievementBadgeIconListLarge" style="display: none;">

And try and manipulate it like this:

$(".TrAchievementBadgeIconListLarge").replaceWith($("#NewMilestones"));

won't it just overwrite itself and just disappear from the page altogether?

Thanks!

DK