[Tutorial] Rating system

Go down

[Tutorial] Rating system

Post by Daemon on April 20th 2018, 3:41 am

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;}

avatar
Daemon
Forumember

Posts : 101
Reputation : 80
Language : Português

Back to top Go down

Re: [Tutorial] Rating system

Post by SarkZKalie on April 20th 2018, 7:09 am

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

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


avatar
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 851
Reputation : 135
Language : English

http://rotavn.forumotion.com

Back to top Go down

Re: [Tutorial] Rating system

Post by skouliki on April 20th 2018, 7:44 am

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 
avatar
skouliki
Manager
Manager

Female Posts : 4328
Reputation : 707
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Re: [Tutorial] Rating system

Post by Daemon on April 20th 2018, 8:04 am

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.
avatar
Daemon
Forumember

Posts : 101
Reputation : 80
Language : Português

Back to top Go down

0% usable.

Post by Dr.Kran on April 24th 2018, 4:31 am

@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.

avatar
Dr.Kran
Forumember

Male Posts : 70
Reputation : 1
Language : English
Location : Classified

http://kranutopia.forumotion.com/forum

Back to top Go down

Like only works on other users on this forums but not a feature with this code.

Post by Dr.Kran on April 24th 2018, 4:38 am

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

Male Posts : 70
Reputation : 1
Language : English
Location : Classified

http://kranutopia.forumotion.com/forum

Back to top Go down

Re: [Tutorial] Rating system

Post by skouliki on April 24th 2018, 7:49 am

@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
avatar
skouliki
Manager
Manager

Female Posts : 4328
Reputation : 707
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Re: [Tutorial] Rating system

Post by Dr.Kran on April 24th 2018, 9:28 am

@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.
avatar
Dr.Kran
Forumember

Male Posts : 70
Reputation : 1
Language : English
Location : Classified

http://kranutopia.forumotion.com/forum

Back to top Go down

Re: [Tutorial] Rating system

Post by YoshiGM on May 1st 2018, 7:39 pm

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 ...
avatar
YoshiGM
Forumember

Male Posts : 746
Reputation : 106
Language : Spanish & English
Location : Mexico

http://asistencia.foroactivo.com/u21373

Back to top Go down

Re: [Tutorial] Rating system

Post by Dr.Kran on May 2nd 2018, 8:59 am

@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.
avatar
Dr.Kran
Forumember

Male Posts : 70
Reputation : 1
Language : English
Location : Classified

http://kranutopia.forumotion.com/forum

Back to top Go down

Re: [Tutorial] Rating system

Post by YoshiGM on May 2nd 2018, 5:58 pm

Hehe, i'm meaning something like this:
Spoiler:

You can qualify the topic and the stars appear in the topic list.
avatar
YoshiGM
Forumember

Male Posts : 746
Reputation : 106
Language : Spanish & English
Location : Mexico

http://asistencia.foroactivo.com/u21373

Back to top Go down

Re: [Tutorial] Rating system

Post by SarkZKalie on May 2nd 2018, 9:04 pm

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 Very Happy


avatar
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 851
Reputation : 135
Language : English

http://rotavn.forumotion.com

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum