New Badging System - Badges Prototype Beta 1 (Badges Only)

What is on Your Mind?
1

Today I mapped out the new badging system using FA icons, Beta 1 in no particular order except a 6 x 8 grid:

801×727 85.2 KB

The prototype HTML code for this layout:

<style>
    .fa-badge-grid {
        font-size: 1.5em;
    }

    .row {
        margin: 10px 0px 10px 0px;
    }

    .fas,
    .far,
    .fab {
        color: LightGray;

    }
</style>
<div class="container fa-badge-grid">
    <div class="row">
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-address-book fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fab fa-apple fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-atom fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-award fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-balance-scale  fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-child fa-stack-1x"></i>
        </div>
    </div>

    <div class="row">
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-blender fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-bolt fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-brain fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fab fa-btc fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-bug fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-building fa-stack-1x"></i>
        </div>
    </div>


    <div class="row">
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-chalkboard-teacher fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-chess-bishop fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-chess-rook fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-chess-knight fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-child fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-city fa-stack-1x"></i>
        </div>
    </div>

    <div class="row">
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-code fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-cogs fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-comment fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-database fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fab fa-dev fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-dungeon fa-stack-1x"></i>
        </div>
    </div>


    <div class="row">
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-network-wired fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fab fa-first-order-alt fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-dragon fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-hippo fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fab fa-html5 fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-id-badge fa-stack-1x"></i>
        </div>
    </div>


    <div class="row">
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-image fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-jedi fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fab fa-jedi-order fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-laptop-code fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fab fa-linux fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-microchip fa-stack-1x"></i>
        </div>
    </div>

    <div class="row">
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-terminal fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fab fa-node-js fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fab fa-phoenix-squadron fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-project-diagram fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-puzzle-piece fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fab fa-researchgate fa-stack-1x"></i>
        </div>
    </div>

    <div class="row">
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-shield-alt fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-stroopwafel fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-thumbs-up fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-trophy fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-university fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-user-graduate fa-stack-1x"></i>
        </div>
    </div>

</div>
<script>
    $(function () {
        $(window).on("resize", neoBadgeGrid);
        neoBadgeGrid();
        function neoBadgeGrid() {
            var myWidth = $(window).width();
            if (myWidth > 900) {
                $(".fa-badge-grid").css({ "font-size": "2em" });
            }
            else if (myWidth < 600) {
                $(".fa-badge-grid").css({ "font-size": "1em" });
            } else {
                $(".fa-badge-grid").css({ "font-size": "1.5em" });
            }
        }
    });

</script>

Feel free to suggest different icons from Font Awesome, change the order or location in the grid.

I will start writing the logic for each of the badges, one-badge-at-a-time, soon.

2

After working on both mobile and the desktop found some FA icons that, for some strange reason did not work on mobile, so I switched them out and replaced them, so the work both in mobile and desktop:

859×725 80.1 KB

Here is the code Beta 1a:

<style>
  .fa-badge-grid {
    font-size:1.5em;
 
  }
.row{
margin:10px 0px 10px 0px;
}

</style>
 <div class="container fa-badge-grid">
    <div class="row">
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-address-book fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fab fa-apple fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-atom fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-award fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-balance-scale  fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-code-branch fa-stack-1x"></i>
        </div>
    </div>

    <div class="row">
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-blender fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-bolt fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-brain fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fab fa-btc fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-bug fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-building fa-stack-1x"></i>
        </div>
    </div>


    <div class="row">
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-chalkboard-teacher fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-chess-bishop fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-chess-rook fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-chess-knight fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-child fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-city fa-stack-1x"></i>
        </div>
    </div>

    <div class="row">
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-code fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-cogs fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-comment fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-database fa-stack-1x"></i>
        </div>
         <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-desktop fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-download fa-stack-1x"></i>
        </div>
    </div>


    <div class="row">
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-keyboard fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fab fa-first-order-alt fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-pastafarianism fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-flask fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fab fa-html5 fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-id-badge fa-stack-1x"></i>
        </div>
    </div>


    <div class="row">
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-image fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-jedi fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fab fa-jedi-order fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-laptop-code fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fab fa-linux fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-microchip fa-stack-1x"></i>
        </div>
    </div>

    <div class="row">
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-terminal fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fab fa-node-js fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fab fa-phoenix-squadron fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-project-diagram fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-puzzle-piece fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fab fa-researchgate fa-stack-1x"></i>
        </div>
    </div>

    <div class="row">
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-shield-alt fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-stroopwafel fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-thumbs-up fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-trophy fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-university fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-user-graduate fa-stack-1x"></i>
        </div>
    </div>

</div>
<script>
$(function() {
  $(window).on("resize", neoBadgeGrid);
  neoBadgeGrid();
  function neoBadgeGrid() {
    var myWidth = $(window).width();
    if (myWidth > 900) {
        $(".fa-badge-grid").css({ "font-size": "2em" });
      }
    else if (myWidth < 600) {
      $(".fa-badge-grid").css({ "font-size": "1em" });
    } else  {
      $(".fa-badge-grid").css({ "font-size": "1.5em" });
    }
  }
$('.col').find('.far, .fas, .fab').css({"color":"LightGray"});
});

</script>

Next will code the logic for some of the "low hanging fruit" using the information already in the user information modal (UIM). I'm guessing that will be about 8 to 10 badges (low hanging UIM fruit for badges).

Will more than like use status colors for most of them, using core Bootstrap colors.

Anyone is free to propose any badge logic in pseudocode (or better is jQuery, but pseudocode is OK).

3

750×1334 79.3 KB

1 Like
4

Thanks a TON Neo for GREAT work. I hope we will get more users attracted by this system and moreover we will get more motivation to achieve these badges.

Thanks,
R. Singh

5

LOL... it's starting to be a lot of work.

It was your idea... so now finally your vision is coming true. Thanks for the great idea!

Just created my first prototype badge for user post count. Needs work....

PHP:

<?php
if ($modaluser['posts'] > 1000) {
    $color['fauser'] = 'black';
} elseif ($modaluser['posts'] > 500) {
    $color['fauser'] = 'indigo';
} elseif ($modaluser['posts'] > 100) {
    $color['fauser'] = 'blue';
} elseif ($modaluser['posts'] > 10) {
    $color['fauser'] = 'green';
} else {
    $color['fauser'] = 'lightgray';
}

$badgejs = '<script>';
$badgejs .= 'var badge = [];';
$badgejs .= 'badge["posts"] = "' . $color[fauser] . '";';
$badgejs .= '</script>';

HTML (JS):

<script>
    $(function () {
            $('.fa-child').css("color", badge["posts"]);
            $('.fa-child').closest('div').find('.fa-circle').css("color", badge["posts"]);
    });
</script>

Please help me with the posts thresholds and colors for this badge!

I need to "un-hardcode" the colors and add Bootstrap color classes instead.

Colors . Bootstrap

6

Thank you Neo :slight_smile: I am HAPPY at least I could help a bit to this GREAT forum. Also I hope we have category for badges or awards providing NEW THOUGHTS/Ideas too.

Here is my opinion on badges system.

1- on very first post 1 badge like Welcome kind of.
2- On 100th post of OP any users 1 Badge(bronze kind of or whatever lowest in category).
3- On users 500th post 1 badge.
4- On completing each 1000*N post 1 badge.
5- Special award with badge for completing 10,000 posts.
6- May be we could put 1 highest badge on 10,000 itself, since users will anyways get an badge/award on each 1000 posts so tat should boost them.(I am considering here that A person could earn FEW badges N number of times).

This is just a thought we could have more people to add/edit suggestions here too.

Thanks,
R. Singh

1 Like
7

Hi Ravinder, I will make all of those for sure! Please keep the ideas flowing!

Regarding colors levels for badges, I created this css for now, four positive colors, 1 neutral (not enabled) color and three negative colors. That should cover most cases, and the negative badges will be used for only a few badges (like infractions, code tags, etc)

.mb-4 {
  color: "black";
}
.mb-3 {
  color: "indigo";
}
.mb-2 {
  color: "blue";
}
.mb-1 {
  color: "limegreen";
}
.mb-0 {
  color: "lightgray";
}
.mb-m1 {
  color: "darkorange";
}
.mb-m2 {
  color: "orangered";
}
.mb-m3 {
  color: "red";
}

Please note that in the actually code I am not yet using these mb classes because I cannot get the addClass() jQuery function to work whereas the .css() jQuery function works fine.

So, I'm not going done the rabbit hole today in search of why one function works and another does not, and will stick with badging logic (I think! haha)

8

Hi Ravinder, If others jump in and come up with ideas for badges, that's great!

But honestly, you are the #1 guy for helping out with this new badging system and I appreciate what you are doing and I'm going to create a special and assign a special "forum development" badge for you, for sure!

Rich also suggested creating a special set of badges when people write code for the forums, develop algorithms, find and confirm bugs in the code, etc. I am going to make all these badges!

Thank you.

1 Like
9

Hey Ravinder, I implements the badges you requested (badged in no particular order, originally by alphabet because just prototype):

880×633 51.9 KB

With this rough but working PHP code:

<?php
$color = array();

if ($modaluser['posts'] > 1000) {
    $color['fauser'] = 'black';
} elseif ($modaluser['posts'] > 500) {
    $color['fauser'] = 'indigo';
} elseif ($modaluser['posts'] > 100) {
    $color['fauser'] = 'blue';
} elseif ($modaluser['posts'] > 10) {
    $color['fauser'] = 'limegreen';
} else {
    $color['fauser'] = 'lightgray';
}

if ($modaluser['posts'] > 0) {
    $color['faaward'] = 'limegreen';
}

if ($modaluser['posts'] > 99) {
    $color['fajediorder'] = 'blue';
}

if ($modaluser['posts'] > 499) {
    $color['faphoenix'] = 'indigo';
}

if ($modaluser['posts'] > 999) {
    $color['fajedi'] = 'black';
}

if ($modaluser['posts'] > 9999) {
    $color['faatom'] = 'black';
}

$badgejs = '<script>';
$badgejs .= 'var badge = [];';
$badgejs .= 'var mbclass = [];';
$badgejs .= 'badge["posts"] = "' . $color[fauser] . '";';
$badgejs .= 'badge["firstpost"] = "' . $color[faaward] . '";';
$badgejs .= 'badge["100posts"] = "' . $color[fajediorder] . '";';
$badgejs .= 'badge["500posts"] = "' . $color[faphoenix] . '";';
$badgejs .= 'badge["1000posts"] = "' . $color[fajedi] . '";';
$badgejs .= 'badge["10000posts"] = "' . $color[faatom] . '";';
$badgejs .= '</script>';

jQuery:

$(function () {
  $('.fa-award').css("color", badge["firstpost"]);
  $('.fa-award').css("cursor", "pointer").attr("title", "First Post Completed!");
  $('.fa-award').closest('div').find('.fa-circle').css("color", badge["firstpost"]);

  $('.fa-jedi-order').css("color", badge["100posts"]);
  $('.fa-jedi-order').css("cursor", "pointer").attr("title", "100 Posts Completed!");
  $('.fa-jedi-order').closest('div').find('.fa-circle').css("color", badge["100posts"]);


  $('.fa-phoenix-squadron').css("color", badge["500posts"]);
  $('.fa-phoenix-squadron').css("cursor", "pointer").attr("title", "500 Posts Completed!");
  $('.fa-phoenix-squadron').closest('div').find('.fa-circle').css("color", badge["500posts"]);

  $('.fa-phoenix-squadron').css("color", badge["500posts"]);
  $('.fa-phoenix-squadron').css("cursor", "pointer").attr("title", "500 Posts Completed!");
  $('.fa-phoenix-squadron').closest('div').find('.fa-circle').css("color", badge["500posts"]);

  $('.fa-jedi').css("color", badge["1000posts"]);
  $('.fa-jedi').css("cursor", "pointer").attr("title", "1000 Posts Completed!");
  $('.fa-jedi').closest('div').find('.fa-circle').css("color", badge["1000posts"]);

  $('.fa-atom').css("color", badge["10000posts"]);
  $('.fa-atom').css("cursor", "pointer").attr("title", "10000 Posts Completed!");
  $('.fa-atom').closest('div').find('.fa-circle').css("color", badge["10000posts"]);

  $('.fa-child').css("color", badge["posts"]);
  $('.fa-child').closest('div').find('.fa-circle').css("color", badge["posts"]);

});

Cheers!

Thanks for the good ideas!

1 Like
10

This looks AWESOME, thanks for implementing this.

Thanks,
R. Singh

1 Like
11

Haha... Thank you for waiting so long for me to code this and for your patience!

It's actually a lot of fun to code!! :slight_smile:

1 Like
12

OK.. have implemented prototype badges for:

  • Forum Advisors
  • Moderators
  • Admins
  • Forum Dev Ops (Coders)

Now we have a total of 10 prototype badges out of 48 placeholders for badges:

$(function () {
  $('.fa-award').css("color", badge["firstpost"]);
  $('.fa-award').css("cursor", "pointer").attr("title", "First Post Completed!");
  $('.fa-award').closest('div').find('.fa-circle').css("color", badge["firstpost"]);

  $('.fa-jedi-order').css("color", badge["100posts"]);
  $('.fa-jedi-order').css("cursor", "pointer").attr("title", "100 Posts Completed!");
  $('.fa-jedi-order').closest('div').find('.fa-circle').css("color", badge["100posts"]);


  $('.fa-phoenix-squadron').css("color", badge["500posts"]);
  $('.fa-phoenix-squadron').css("cursor", "pointer").attr("title", "500 Posts Completed!");
  $('.fa-phoenix-squadron').closest('div').find('.fa-circle').css("color", badge["500posts"]);

  $('.fa-phoenix-squadron').css("color", badge["500posts"]);
  $('.fa-phoenix-squadron').css("cursor", "pointer").attr("title", "500 Posts Completed!");
  $('.fa-phoenix-squadron').closest('div').find('.fa-circle').css("color", badge["500posts"]);

  $('.fa-jedi').css("color", badge["1000posts"]);
  $('.fa-jedi').css("cursor", "pointer").attr("title", "1000 Posts Completed!");
  $('.fa-jedi').closest('div').find('.fa-circle').css("color", badge["1000posts"]);

  $('.fa-atom').css("color", badge["10000posts"]);
  $('.fa-atom').css("cursor", "pointer").attr("title", "10000 Posts Completed!");
  $('.fa-atom').closest('div').find('.fa-circle').css("color", badge["10000posts"]);

  $('.fa-balance-scale').css("color", badge["mod"]);
  $('.fa-balance-scale').css("cursor", "pointer").attr("title", "Moderator");
  $('.fa-balance-scale').closest('div').find('.fa-circle').css("color", badge["mod"]);

  $('.fa-chess-bishop').css("color", badge["ug"]);
  $('.fa-chess-bishop').css("cursor", "pointer").attr("title", "Forum Advisors");
  $('.fa-chess-bishop').closest('div').find('.fa-circle').css("color", badge["ug"]);

  $('.fa-building').css("color", badge["admin"]);
  $('.fa-building').css("cursor", "pointer").attr("title", "Forum Admin");
  $('.fa-building').closest('div').find('.fa-circle').css("color", badge["admin"]);

  $('.fa-city').css("color", badge["devops"]);
  $('.fa-city').css("cursor", "pointer").attr("title", "Dev Ops Team");
  $('.fa-city').closest('div').find('.fa-circle').css("color", badge["devops"]);

  $('.fa-child').css("color", badge["posts"]);
  $('.fa-child').css("cursor","pointer").attr("title","Total Posts: " + badge["totalposts"]);
  $('.fa-child').closest('div').find('.fa-circle').css("color", badge["posts"]);

});
13

Congrats to Ravinder, who I have just awarded our first "Formulator" badge who is not a forum "Dev Ops" coder. This Formulator Badge is for pushing hard over the years for us to modernize the site, and for many good ideas, including the badging system. Only four people have this badge: Reborg, Scott and Neo (Admin Dev Ops Coders, Past and Present) and Ravinder Singh.

Thanks Again Ravinder!

$('.fa-flask').css("color",badge["formulator"]);
$('.fa-flask').css("cursor","pointer").attr("title","Big Picture Ideas Team");
$('.fa-flask').closest('div').find('.fa-circle').css("color",badge["formulator"]);
2 Likes
14

Wowww I am feeling honored here. Thanks a TON Neo for this, I am grateful to you and feeling happy to do a bit for this GREAT FORUM :b:

Thanks,
R. Singh

1 Like
15

Welcome!

I am also going to create a badge for folks who have found bugs in the forum and provided the code (from the web site source code) and suggested code fixed which we implemented.

So far, that number is basically the forum coders and a few "outsiders" who found bugs and suggested the fixes who are in the "hall of fame"; but unfortunately those "bug hunters" are not registered forum members.

Others have pointed out small things here and there, but have yet to provide source code from the HTML pages and offer solid solutions (code fixes); so that's not really a "badging category"... but I could be wrong! LOL

We have a lot of badges to go, and this is just the first draft.

I should have created this badging system this many years ago! My bad!

16

Eleven out of 42 Prototype Badges done.... Need to rests soon LOL

462×665 79.4 KB

The time is ripe for anyone to propose a badges about anything.... forum participation, expertise, contributions, etc.

FYI. I will working on "colored level" badges for stats and numbers like number of "thanks", "album pictures", "attachments in post", "years a member of the site", "total bits" soon.

Need a break... nearly 25% done with the prototype :slight_smile:

17

Hello Neo,

Here are some more thoughts.

1- For encouraging users to invite new members I know we are providing BITS to users let us provide them a badge(GOLD, Silver and bronze may be) on inviting every 10/15 users too?
2- For getting 1000 THANKS for a specific TAG in a question get a badge of expertise with certificate from UNIX.com site(which could be worked on later)
3- Visiting site continuously for few days let's say 1 month, 6 months and a year. We could have 3 badges over here.
4- For people asking questions too we could provide badges let's say their criteria is 10 posts then 100, 500 and so on...
5- How about special badges from admins, MODs and forums advisors to each other which could be given may be for good answers, good questions, forum dev(like one you awarded me :)), bug fix(which you are already taking care), posting their POC works, posting some project work etc.

Thinking more with hot tea if I get something will post here ASAP.

Thanks,
R. Singh

1 Like
18

Thanks!

Great idea. You are really a great "Formulator" ... Much appreciated!

It would be hard to get all the 48 badges done without your help and big ideas!

1 Like
19

Thank you Neo :slight_smile:

Also one more thing(not sure how much effort it takes, so if it is too much then you could put it in your work's backlog) let us make these achievements visible to users by populating these achievements as a pop-up(kind of like how it comes in Facebook when someone likes a post etc or for any update it comes) whenever a user either comes online or is already online by this way users(who don't bother to go through entire site will come to know about these badges) will be encouraged more to achieve badges. Which will help us to have more users on site which ultimately means:

more users -->more questions(sensible ones :))--> more answers---> more learning--> overall win win situation for everyone.

Thanks,
R. Singh

20

I like the basic idea; lets keep that idea in Phase II after we complete the prototype badges in Phase I.

We still have over 30 badges to design and code!

Thanks again!

I really like where this new badging system is going and I think after 48 badges are designed and coded we will have many good ideas for Phase II.