[Tutorial] Rating system

Image:


Create a new JS code with the following content (The placement: Topics):

Code:

/*
 *  Application: Rating System
 *  Date: 19/04/2018
 *  Version: 1.019042018
 *  Copyright (c) 2018 Daemon <help.forumotion.com>
 *  This work is free. You can redistribute it and/or modify it
*/
function ratingSystem() {

    var images = {
        goldstar: "https://i62.servimg.com/u/f62/18/12/37/46/goldst10.png",
        graystar: "https://i62.servimg.com/u/f62/18/12/37/46/grayst10.png",
        like: "https://i62.servimg.com/u/f62/18/12/37/46/like-011.png",
        unlike: "https://i62.servimg.com/u/f62/18/12/37/46/dislik11.png"
    };

    /* In the array contains 6 different values,
      which by default will add 6 stars depending
      on the percentage of votes in relation
      to the value in the array
    */
    var ratingConfig = [16.6, 32.2, 49.8, 66.4, 83, 100];

    var vote = document.querySelectorAll(".vote"),
        voteBar = null,
        voteButton = null,
        myDiv = null,
        numsBar = null,
        pct = 0,
        num = 0,
        plus = 0,
        minus = 0,
        myImg = null,
        myDiv2 = null;

    for(var i = 0; i < vote.length; ++i) {
        voteBar = vote[i].getElementsByClassName("vote-bar")[0],
        voteButton = vote[i].getElementsByClassName("vote-button")[0];
        // Creating a new DIV element
        myDiv = document.createElement("DIV");
        // Adding a class to the element
        myDiv.className = "rating";
        // Checking the existence of the voting bar
        if(typeof voteBar !== "undefined") {
            // Picking up the title numbers
            numsBar = voteBar.title.match(/\d+/g),
            // Taking percentage
            pct = parseInt(numsBar[0]),
            // Taking number of votes
            num = parseInt(numsBar[1]),
            // Taking positive votes
            plus = Math.round(pct * num) / 100,
            // Taking negative votes
            minus = Math.round(num - plus);
            // For each array item
            ratingConfig.forEach(function(item, i) {
                myImg = document.createElement("IMG");
                myImg.title = plus + " / " + minus;
                if (item <= pct) {               
                    // If the value in the array is less than or equal to the percentage of votes, add gold star
                    myImg.src = images.goldstar;
                } else {
                    // If the value is higher, add gray star
                    myImg.src = images.graystar;
                }
                myDiv.appendChild(myImg);
            });
        } else {
            plus = 0,
            minus = 0;
        }
        // Checking the existence of the voting button
        if(typeof voteButton !== "undefined") {
            myDiv2 = document.createElement("DIV");
            // Adding voting buttons
            myDiv2.innerHTML =
                "<span onclick='rating("" + voteButton.firstChild.href + "",this);' class='rating-button'>" +
                "    <img src='" + images.like + "'><span>" + plus + "</span>" +
                "</span>" +
                "<span onclick='rating("" + voteButton.nextSibling.nextSibling.firstChild.href + "",this);' class='rating-button'>" +
                "    <img src='" + images.unlike + "'><span>" + minus + "</span>" +
                "</span>";
            myDiv.insertBefore(myDiv2, myDiv.firstChild);
        }
        // Adding vote buttons after postbody
        $(".postbody", vote[i].parentNode.parentNode.parentNode.parentNode).after(myDiv);
        // Removing default bar
        vote[i].parentNode.removeChild(vote[i]);
    }
};
function rating(b,a) {
    a.removeAttribute("onclick");
    $.get(b, function() {
        var c = a.lastChild,
            b = parseInt(/\d+/.exec(c.innerHTML)[0])+1;
            c.innerHTML = c.innerHTML.replace(/\d+/,b);
    });
}
document.onreadystatechange = function () {
    if(document.readyState == "complete") {
        ratingSystem();
    }
}

CSS:

Code:

/*Rating System*/
.vote {display: none;}
.rating {
    float: right;
    font-size: 13px;
    color: #000;
    margin: 0 5px 5px 0;
}
.rating span span {
    background-color: #888;
    padding: 1px 3px;
    border-radius: 3px;
    color: #fff;
    font-weight: bold;
}
.rating img {vertical-align: middle;}
.rating .rating-button {
    cursor: pointer;
    opacity: 0.8;
}
.rating .rating-button:hover {opacity: 1;}

Could you please explain how this script works? Thank you!

I mean, it depends on our current voting system or a separate system.

thank you 
so i add the code and i didn't get any results ..do i have to deactivate the previous reputation system i have ?

my test punbb forum 

This system works with the current voting system. If you have any code that already changes the current bar, change by the above code to test it.
It is simply based on the percentage of positive votes, and based on this, the numbers of stars are given as an evaluation.

Daemon wrote:This system works with the current voting system. If you have any code that already changes the current bar, change by the above code to test it.
It is simply based on the percentage of positive votes, and based on this, the numbers of stars are given as an evaluation.

Temporary Progress Charts for (JS section only)
• Adding : Codes displayed to 'javascript codes management' (successful) "as advised the code has been placed."
• Finding : Rating feature on forums (failed) "where do we have to look if the feature is successfully placed?"

With CSS *Note that, you haven't placed if it should be added or not making it not optional if it's important*
• Adding : CSS codes added to 'CSS stylesheet' (successful with unknown effects) "I have place the CSS code where it was supposed to be place not knowing if it was optional or important to do so.
• CSS : No changes were made with the CSS code embedded into my script.

You may see for yourself and reveal to me where it went wrong.


I have also used the very top of my CSS script section.
If there's nothing more to be done, please let us know where should we look.

Also I've also tried other people's posts, and it was unsuccessful there as well.

Daemon wrote:This system works with the current voting system. If you have any code that already changes the current bar, change by the above code to test it.
It is simply based on the percentage of positive votes, and based on this, the numbers of stars are given as an evaluation.

i disable all java and still the code dont work

skouliki wrote:

Daemon wrote:This system works with the current voting system. If you have any code that already changes the current bar, change by the above code to test it.
It is simply based on the percentage of positive votes, and based on this, the numbers of stars are given as an evaluation.

i disable all java and still the code dont work

I'm mistaken, there was images found in the code which means the code doesn't work.

I was waiting for the theme to be qualified by passing the cursor over the stars and changing their color depending on how many we pointed out, something that was done on Youtube a few years ago ...

YoshiGM wrote:I was waiting for the theme to be qualified by passing the cursor over the stars and changing their color depending on how many we pointed out, something that was done on Youtube a few years ago ...

So you mean it in this way?
For example
Gold stars are the best stars.
Blue stars are greater stars.
Green stars are the default stars.

That other feature, color changed stars is a higher version of this topic with a higher complexity code that's unknown though.

Hehe, i'm meaning something like this:

Spoiler:

You can qualify the topic and the stars appear in the topic list.

Yeah I love your idea and your project Daemon. But it'll be great if we have a star rating that can totally separate with the current voting system

I would use this for another forum!