[Tutorial] Rating system

Go down

[Tutorial] Rating system Empty [Tutorial] Rating system

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

Image:
[Tutorial] Rating system Goldst10

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

[Tutorial] Rating system 1f601
Daemon
Daemon
Forumember

Posts : 104
Reputation : 90
Language : Português

View user profile

Back to top Go down

[Tutorial] Rating system Empty 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.


[Tutorial] Rating system Sarkzk10
SarkZKalie
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 1173
Reputation : 192
Language : English

View user profile https://www.rotavn.xyz/

Back to top Go down

[Tutorial] Rating system Empty 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 
[Tutorial] Rating system Scree348
skouliki
skouliki
Manager
Manager

Female Posts : 9092
Reputation : 1188
Language : English,Greek
Location : Greece

View user profile http://iconskouliki.forumgreek.com

Back to top Go down

[Tutorial] Rating system Empty 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.
Daemon
Daemon
Forumember

Posts : 104
Reputation : 90
Language : Português

View user profile

Back to top Go down

[Tutorial] Rating system Empty 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.
[Tutorial] Rating system Output_26er_Ng

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.
[Tutorial] Rating system Advise10
Dr.Kran
Dr.Kran
Forumember

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

View user profile http://kranutopia.finddiscussion.com/forum

Back to top Go down

[Tutorial] Rating system Empty 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.
Dr.Kran
Dr.Kran
Forumember

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

View user profile http://kranutopia.finddiscussion.com/forum

Back to top Go down

[Tutorial] Rating system Empty 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
skouliki
skouliki
Manager
Manager

Female Posts : 9092
Reputation : 1188
Language : English,Greek
Location : Greece

View user profile http://iconskouliki.forumgreek.com

Back to top Go down

[Tutorial] Rating system Empty 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.
Dr.Kran
Dr.Kran
Forumember

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

View user profile http://kranutopia.finddiscussion.com/forum

Back to top Go down

[Tutorial] Rating system Empty 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 ...
YoshiGM
YoshiGM
Forumember

Male Posts : 919
Reputation : 120
Language : Spanish & English
Location : Mexico

View user profile http://asistencia.foroactivo.com/u21373

Back to top Go down

[Tutorial] Rating system Empty 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.
Dr.Kran
Dr.Kran
Forumember

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

View user profile http://kranutopia.finddiscussion.com/forum

Back to top Go down

[Tutorial] Rating system Empty Re: [Tutorial] Rating system

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

Hehe, i'm meaning something like this:
Spoiler:
[Tutorial] Rating system Star-rating-set_23-2147703309
You can qualify the topic and the stars appear in the topic list.
YoshiGM
YoshiGM
Forumember

Male Posts : 919
Reputation : 120
Language : Spanish & English
Location : Mexico

View user profile http://asistencia.foroactivo.com/u21373

Back to top Go down

[Tutorial] Rating system Empty 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


[Tutorial] Rating system Sarkzk10
SarkZKalie
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 1173
Reputation : 192
Language : English

View user profile https://www.rotavn.xyz/

Back to top Go down

[Tutorial] Rating system Empty Re: [Tutorial] Rating system

Post by Beyonder on June 20th 2019, 6:05 pm

I would use this for another forum!
Beyonder
Beyonder
Forumember

Male Posts : 631
Reputation : 25
Language : English
Location : Beyond Realm

View user profile http://fictionalomniverse.forumotion.com/

Back to top Go down

Back to top


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