[Tutorial] Rating system
+2
SarkZKalie
Daemon
6 posters
Page 1 of 1
[Tutorial] Rating system
Image:
Create a new JS code with the following content (The placement: Topics):
CSS:
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;}
Daemon- Forumember
- Posts : 104
Reputation : 91
Language : Português
Re: [Tutorial] Rating system
Could you please explain how this script works? Thank you!
I mean, it depends on our current voting system or a separate system.
I mean, it depends on our current voting system or a separate system.
Re: [Tutorial] Rating system
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.
It is simply based on the percentage of positive votes, and based on this, the numbers of stars are given as an evaluation.
Daemon- Forumember
- Posts : 104
Reputation : 91
Language : Português
0% usable.
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.
Like only works on other users on this forums but not a feature with this code.
Also I've also tried other people's posts, and it was unsuccessful there as well.
Re: [Tutorial] Rating system
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
Re: [Tutorial] Rating system
I'm mistaken, there was images found in the code which means the code doesn't 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
Re: [Tutorial] Rating system
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 ...
Re: [Tutorial] Rating system
So you mean it in this way?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 ...
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.
Re: [Tutorial] Rating system
Hehe, i'm meaning something like this:
- Spoiler:
Re: [Tutorial] Rating system
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
Similar topics
» Rating system
» RATING SYSTEM
» Rating System on Html Pages
» Twitch in Toolbar & Rating System
» Question About Sites Rating
» RATING SYSTEM
» Rating System on Html Pages
» Twitch in Toolbar & Rating System
» Question About Sites Rating
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum