TRACKER for current tasks, backlogs and new thoughts for forum's development work.

Hello All,

I am opening this thread for keeping track of on going things/tasks in forums, forum's backlog tasks and for posting new thoughts related to forum's betterment, all are invited to post their ideas, thoughts, views here.

Completed tasks:

1- HTML and php code's upgrades to new versions.

2- Forum's look change(as of now we are considering it done it should be on going project, Neo could confirm more on same).

3- New Badge system implementation Phase-I(congratulations to Neo for completing this)

Pending tasks:

1- Review Badge system in forums with different users, F.As, MODs.(I will be working on it as of now, anyone who is interested could join this task too).

New thoughts on new Badge system: We could cover these in Phase-II of Badge system in forums if possible.

1- System generated badges are ready, now if all experts OK to have user related badges eg--> a MOD could award a badge for good answer to any user/OP/F.A similarly a F.A could award a BADGE to any OP/other F.As etc, then 1 more category could be OP/normal user(not a MOD and not a F.A) for any good answer or appreciation.

2- How about creating pop ups for any user in forums whoever gets a new aware badge(like Facebook has pop up kind of thing)?

New thoughts on Forum's betterment:

1- Allow Guest users with optimum level of restrictions to only post real questions?

2- Add more technology(specially new technologies eg----> Docker, CLOUD, AWS, R, Regex) sub forums in forums.

3- Invite specialists in new technologists so that we could get knowledge on forums and people start asking questions related to new tags may be?

I know we are going to complete these tasks 1 by 1 but mentioning them here to keep track of all tasks and updating in same THREAD so that all could be aware of it too.

Thanks,
R. Singh

Is there any way to create drafts of your topic/question or does one get created automagically?

There is a post preview function in the "Advanced Editor"... where posts (as a draft) are previewed before final submission.

Is that what you are looking for?

Hey Ravinder, Thanks.

According to the current jQuery code, I have created the prototype logic for 24 our of 48 badges in the grid (half of them in a single day, not bad heh?).

See this jQuery file for detailed.

https://www.unix.com/scripts/js/badge.js?v=21

Also, there is crude mouse over titles (assigned in the jQuery file above) for each of the 24 (we can change the exact titles later of course, during the "refinement" phase).

My question to you and for your action:

1. Should we change the current 6 x 8 grid to a 5 by 7 grid?
2. If so, please pick 13 badges which are not yet allocated to "logic" which can be removed.

The reason I ask is that the 6 x 8 grid is a bit small on mobile, and 5 x 7 might look better, which means we would to assign "badge logic" to 35 (total) minus 24 (protos done) equals 11. I am OK with 48 or 35, my thought on 35 is only that it may better on my iPhone, I think. I'm OK with 48, but we can add them later in some future space and time.

Regarding "popups and notifiers" that is something we can look at later, but if we do implement notifiers, we will add a switch to make sure the member who do not like "award notifiers" (or notifiers and alerts in general), can turn them off and on easily. This is a simple switch, which I can add on the browser side in JS, so it's easy to do. (Actually, it is all easy, when we have great ideas and time to do it).

Also, please note that if you want to keep all 48, that's OK with me. We can easily hide 13 badges on small screens, or keep them as they are.

You tell me. I will code it.

Also, please note here is the current 48 grid; of course, this is also easily seen in the source for the UIM page(s):

 <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 mb-posts" 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>

Hello Neo,

Thanks for detailed explanation here, yes even I right clicked on page of UI and got the code there. I went through the code of html and would like to ask you a thing before we decide to hide/remove any badges.

From DIV tags I couldn't understand their functionality(may be if comments are there then could check as per their functionality and could suggest whichever may not needed for time being). I apologies if I didn't get the point but mentioning here my understanding.

Now coming to next point, could see for THANKS achievements we are getting different-2 badges but for activity could see only 1 BLACK badge for me. Point from IMHO is either we should give different badges for different achievements with as per achievement(Like BLACK for being MASTER in anything). OR we could ONLY 1 BADGE(which I think shouldn't be but want to check with you/all once) where only colors will change as per a person keep achieving.

Again I apologies if I missed something here, I am grateful for your trust and patience in me sir.

Thanks,
R. Singh

The prototype logic, for this beta version is here. You can read this code for the logic for all badges:

<?php
$version = 21;
$query = "SELECT * FROM " . TABLE_PREFIX . "user WHERE userid='" . $uid . "'";
$usertable = $db->query_read_slave($query);
$modaluser = $db->fetch_array($usertable);
$modaluser['joindate_formatted'] = gmdate("d F Y", $modaluser['joindate']);
$modaluser['checking_formatted'] = number_format($modaluser['credits']);
$modaluser['savings_formatted'] = number_format($modaluser['credits_saved']);
$total_bits = $modaluser['credits'] + $modaluser['credits_saved'];
$modaluser['total_bits_formatted'] = number_format($total_bits);
$modaluser['total_thanks_formatted'] = number_format($modaluser['post_thanks_thanked_times']);
$modaluser['total_thanks_given_formatted'] = number_format($modaluser['post_thanks_user_amount']);
$modaluser['total_thanked_posts_formatted'] = number_format($modaluser['post_thanks_thanked_posts']);
$f_query = "SELECT * FROM " . TABLE_PREFIX . "userfield WHERE userid='" . $uid . "'";
$userfields = $db->query_read_slave($f_query);
$modaluserfields = $db->fetch_array($userfields);

$query_csa = "SELECT * FROM " . TABLE_PREFIX . "neo_csa_session_manager WHERE user_id='" . $uid . "'";
$user_csa_row = $db->query_read_slave($query_csa);
$usercsa = $db->fetch_array($user_csa_row);

if ($usercsa['country'] == '') {
    if ($modaluser['country_iso2'] != '') {
        $usercsa['country'] = $modaluser['country_iso2'] . " (Legacy)";
    } else {
        $usercsa['country'] = 'TBD - Waiting for Update';
    }
}
if ($usercsa['ip_address'] == '') {
    if ($modaluser['ipaddress'] != '') {
        $usercsa['ip_address'] = $modaluser['ipaddress'] . " (Legacy)";
    } else {
        $usercsa['ip_address'] = 'TBD - Waiting for Update';
    }
}

if ($usercsa['user_agent'] == '') {
    $usercsa['user_agent'] = 'TBD - Waiting for Update';
}

if ($usercsa[riskscore] == '') {
    $usercsa[riskscore] = 'TBD';
}

if ($usercsa[hitcount] == '') {
    $usercsa[hitcount] = 'TBD';
}

$a_query = "SELECT SUM(visible) AS totalpics FROM album WHERE userid='" . $uid . "'";
$pics = $db->query_read_slave($a_query);
$userpics = $db->fetch_array($pics);

$at_query = "SELECT COUNT(attachmentid) AS totalattachments FROM attachment WHERE userid='" . $uid . "'";
$attachs = $db->query_read_slave($at_query);
$userattachments = $db->fetch_array($attachs);

$pm_query = 'SELECT COUNT(pmtextid) AS count ' .
    'FROM ' . pm .
    ' WHERE userid = "' . $uid . '"';
$userpm = $vbulletin->db->query_first($pm_query);

$sub_query = 'SELECT COUNT(threadid) AS count ' .
    'FROM ' . subscribethread .
    ' WHERE userid = "' . $uid . '"';
$usersubs = $vbulletin->db->query_first($sub_query);
$color = array();
$mbclass = 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'] > 1000) {
    $mbclass['fauser'] = 'mb-4';
} elseif ($modaluser['posts'] > 500) {
    $mbclass['fauser'] = 'mb-3';
} elseif ($modaluser['posts'] > 100) {
    $mbclass['fauser'] = 'mb-3';
} elseif ($modaluser['posts'] > 10) {
    $mbclass['fauser'] = 'mb-1';
} else {
    $mbclass['fauser'] = 'mb-0';
}

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

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

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

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

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

$mods = array('6', '10');
$color['fascale'] = 'lightgray';
if (in_array($modaluser['usergroupid'], $mods)) {
    $color['fascale'] = 'black';
}

$admins = array('1');
$color['fabuilding'] = 'lightgray';
if (in_array($modaluser['userid'], $admins)) {
    $color['fabuilding'] = 'black';
}

$ug = array('6', '10', '13');
$color['fabishop'] = 'lightgray';
if (in_array($modaluser['usergroupid'], $ug)) {
    $color['fabishop'] = 'black';
}

$devops = array('1', '39016', '302063521');
$color['facity'] = 'lightgray';
if (in_array($modaluser['userid'], $devops)) {
    $color['facity'] = 'black';
}

$forumideas = array('1', '39016', '302063521', '302148617');
$color['faflask'] = 'lightgray';
if (in_array($modaluser['userid'], $forumideas)) {
    $color['faflask'] = 'black';
}

$color['fathumbsup'] = 'lightgray';
$color['fatrophy'] = 'lightgray';
$color['fachalkboardteacher'] = 'lightgray';
$color['fashieldalt'] = 'lightgray';
$color['fastroopwafel'] = 'lightgray';
$color['fafirstorderalt'] = 'lightgray';

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

if ($modaluser['post_thanks_thanked_times'] > 99) {
    $color['fathumbsup'] = 'blue';
    $color['fatrophy'] = 'black';
}

if ($modaluser['post_thanks_thanked_times'] > 999) {
    $color['fathumbsup'] = 'indigo';
    $color['fachalkboardteacher'] = 'black';
}

if ($modaluser['post_thanks_thanked_times'] > 1999) {
    $color['fathumbsup'] = 'black';
    $color['fashieldalt'] = 'black';
}

if ($modaluser['post_thanks_thanked_times'] > 2999) {
    $color['fastroopwafel'] = 'black';
}

if ($modaluser['post_thanks_thanked_times'] > 3999) {
    $color['fafirstorderalt'] = 'black';
}

$idfields = 0;
if ($modaluserfields['field1']) {
    $idfields++;
}
if ($modaluserfields['field2']) {
    $idfields++;
}
if ($modaluserfields['field3']) {
    $idfields++;
}
if ($modaluserfields['field4']) {
    $idfields++;
}

switch ($idfields) {
    case 0:
        $color['faidbadge'] = 'lightgray';
        break;
    case 1:
        $color['faidbadge'] = 'limegreen';
        break;
    case 2:
        $color['faidbadge'] = 'blue';
        break;
    case 3:
        $color['faidbadge'] = 'indigo';
        break;
    case 4:
        $color['faidbadge'] = 'black';
        break;
}

$contacts = 0;
if ($show['pm']) {
    $contacts++;
}
if ($show['email']) {
    $contacts++;
}

if ($modaluser[homepage]) {
    $contacts++;
}

switch ($contacts) {
    case 0:
        $color['faaddressbook'] = 'lightgray';
        break;
    case 1:
        $color['faaddressbook'] = 'limegreen';
        break;
    case 2:
        $color['faaddressbook'] = 'blue';
        break;
    case 3:
        $color['faaddressbook'] = 'black';
        break;
    default:
        $color['faaddressbook'] = 'lightgray';
}

$color['fabtc'] = 'lightgray';
$color['fauniversity'] = 'lightgray';

if ($total_bits < -20000) {
    $color['fabtc'] = 'red';
} elseif ($total_bits < 0) {
    $color['fabtc'] = 'dark orange';
}

if ($total_bits > 0) {
    $color['fabtc'] = 'limegreen';
}

if ($total_bits > 100000) {
    $color['fabtc'] = 'blue';
}

if ($total_bits > 1000000) {
    $color['fabtc'] = 'indigo';
}

if ($total_bits > 10000000) {
    $color['fabtc'] = 'black';
    $color['fauniversity'] = 'blue';
}

if ($total_bits > 100000000) {
    $color['fauniversity'] = 'black';
}

$color['fausergraduate'] = 'lightgray';
$time_inactive = time() - $modaluser['lastactivity'];
$week = 7 * 24 * 60 * 60;
$month = 4 * $week;
$quarter = $week * (52 / 4);
$halfyear = $week * (52 / 2);
$year = $week * 52;
$twoyears = 2 * $year;
$threeyears = 3 * $year;

if ($time_inactive < $week) {
    $color['fausergraduate'] = 'black';
} elseif ($time_inactive < $month) {
    $color['fausergraduate'] = 'indigo';
} elseif ($time_inactive < $quarter) {
    $color['fausergraduate'] = 'blue';
} elseif ($time_inactive < $halfyear) {
    $color['fausergraduate'] = 'green';
} elseif ($time_inactive < $year) {
    $color['fausergraduate'] = 'lightgray';
} elseif ($time_inactive < $twoyears) {
    $color['fausergraduate'] = 'darkorange';
} elseif ($time_inactive < $threeyears) {
    $color['fausergraduate'] = 'red';
}

$color['fabolt'] = 'lightgray';
$activity = floatval($prepared['postsperday']);
if ($activity < 0.02) {
    $color['fabolt'] = 'red';
} elseif ($activity < 0.1) {
    $color['fabolt'] = 'darkorange';
} elseif ($activity < 0.5) {
    $color['fabolt'] = 'green';
} elseif ($activity < 1.0) {
    $color['fabolt'] = 'blue';
} elseif ($activity < 2.0) {
    $color['fabolt'] = 'indigo';
} else {
    $color['fabolt'] = 'black';
}

$badgejs = '<script>';
$badgejs .= 'var badge = [];';
$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 .= 'badge["mod"] = "' . $color[fascale] . '";';
$badgejs .= 'badge["admin"] = "' . $color[fabuilding] . '";';
$badgejs .= 'badge["ug"] = "' . $color[fabishop] . '";';
$badgejs .= 'badge["devops"] = "' . $color[facity] . '";';
$badgejs .= 'badge["formulator"] = "' . $color[faflask] . '";';
$badgejs .= 'badge["totalposts"] = "' . $modaluser[posts] . '";';
$badgejs .= 'badge["thanked"] = "' . $color['fathumbsup'] . '";';
$badgejs .= 'badge["100thanked"] = "' . $color['fatrophy'] . '";';
$badgejs .= 'badge["1000thanked"] = "' . $color['fachalkboardteacher'] . '";';
$badgejs .= 'badge["2000thanked"] = "' . $color['fashieldalt'] . '";';
$badgejs .= 'badge["3000thanked"] = "' . $color['fastroopwafel'] . '";';
$badgejs .= 'badge["4000thanked"] = "' . $color['fafirstorderalt'] . '";';
$badgejs .= 'badge["profile"] = "' . $color['faidbadge'] . '";';
$badgejs .= 'badge["contact"] = "' . $color['faaddressbook'] . '";';
$badgejs .= 'badge["contacttotal"] = "' . $contacts . '";';
$badgejs .= 'badge["profilenumber"] = "' . $idfields . '";';
$badgejs .= 'badge["fabtc"] = "' . $color['fabtc'] . '";';
$badgejs .= 'badge["fauniversity"] = "' . $color['fauniversity'] . '";';
$badgejs .= 'badge["bits"] = "' . number_format($total_bits) . '";';
$badgejs .= 'badge["activity"] = "' . $color['fausergraduate'] . '";';
$badgejs .= 'badge["ppd"] = "' . $color['fabolt'] . '";';
$badgejs .= 'badge["ppdval"] = "' . $activity . '";';
$badgejs .= '</script>';

Maybe do a write-up for each badge and the description for each (using the logic defined in the code), and put the write-ups in LIST format (for for each list item)?

That will help you understand the logic I think.

OH... I forgot to mention, if you want to change or add logic, please do!

It's fun and easy.

This is a great project! Enjoy!