Author Rating

[RateU]

Reuquirement: XThreads

This is a simple example for adding an author rating for our XThreads applications. So we can use the default MyBB rating as user's rating.
Maybe we can use it for our review forum or other type of forums.

In this example, we will apply it to general forum.

Create a custom thread fields:
AdminCP -> Configuration -> Custom Thread Fields

• Title: Author Rating
• Key: author_rating
• Applicable Forums: 'select in which forum(s) we want to apply it'
• Input Field Type: Option Buttons
• Values List:
  
  Code:

  1 2 3 4 5

  ---

  Because we'll use the MyBB thread rating as user's rating, so we need to assign the same range.

• Editable by / Required Field?: Everyone (required)
• Display Format:
  
  HTML Code

  <div class="clear float_left" style="white-space: nowrap"><strong class="float_left">Author Rating:</strong><ul class="star_rating" style="margin-left: 110px"><li style="width: {VALUE}%" class="current_rating"></li></ul></div>

  ---

• Underlying Data Type: Integer (unsigned)
• Formatting Map List:
  • Value: 1
    Displayed Output: 20
  • Value: 2
    Displayed Output: 40
  • Value: 3
    Displayed Output: 60
  • Value: 4
    Displayed Output: 80
  • Value: 5
    Displayed Output: 100
    
  Code:

  1{|}20 2{|}40 3{|}60 4{|}80 5{|}100

  ---

• Edit our forumdisplay_thread_rating template:
  
  HTML Code

  1 2 3 4 5 6 7 8 9 10 11 12

  <td align="center" class="{$bgcolor}{$thread_type_class}" id="rating_table_{$thread['tid']}"> <strong class="float_left">User Rating:</strong> <ul class="star_rating{$not_rated}" id="rating_thread_{$thread['tid']}" style="margin-left: 110px"> <li style="width: {$thread['width']}%" class="current_rating" id="current_rating_{$thread['tid']}">{$ratingvotesav}</li> </ul> <script type="text/javascript"> <!-- Rating.build_forumdisplay({$thread['tid']}, { width: '{$thread['width']}', extra_class: '{$not_rated}', current_average: '{$ratingvotesav}' }); // --> </script> {$GLOBALS['threadfields']['author_rating']} </td>

  ---

• Edit our showthread_ratethread template:
  
  HTML Code

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

  <div style="margin-top: 6px; padding-right: 10px;" class="float_right"> <script type="text/javascript" src="jscripts/rating.js?ver=1400"></script> <div id="success_rating_{$thread['tid']}" style="float: left; padding-top: 2px; padding-right: 10px;">&nbsp;</div> <strong style="float: left; padding-right: 10px;">{$lang->thread_rating}</strong> <div class="inline_rating"> <ul class="star_rating{$not_rated}" id="rating_thread_{$thread['tid']}"> <li style="width: {$thread['width']}%" class="current_rating" id="current_rating_{$thread['tid']}">{$ratingvotesav}</li> <li><a class="one_star" title="{$lang->one_star}" href="./ratethread.php?tid={$thread['tid']}&amp;rating=1&amp;my_post_key={$mybb->post_code}">1</a></li> <li><a class="two_stars" title="{$lang->two_stars}" href="./ratethread.php?tid={$thread['tid']}&amp;rating=2&amp;my_post_key={$mybb->post_code}">2</a></li> <li><a class="three_stars" title="{$lang->three_stars}" href="./ratethread.php?tid={$thread['tid']}&amp;rating=3&amp;my_post_key={$mybb->post_code}">3</a></li> <li><a class="four_stars" title="{$lang->four_stars}" href="./ratethread.php?tid={$thread['tid']}&amp;rating=4&amp;my_post_key={$mybb->post_code}">4</a></li> <li><a class="five_stars" title="{$lang->five_stars}" href="./ratethread.php?tid={$thread['tid']}&amp;rating=5&amp;my_post_key={$mybb->post_code}">5</a></li> </ul> </div> </div> <div style="margin-top: 6px; padding-right: 10px;" class="float_right">{$GLOBALS['threadfields']['author_rating']}</div>

  ---

Modify it as our needs.

Screenshots:
Threadlist - Showthread
       

[RateU]

Maybe this example is a good example to share my limited knowledge about the basic correlation between Values List, Display Format, Formatting Map List and Input Field HTML settings (need at least XThreads 1.50).

Our purpose is to create an input field like this:
   
And the output like this (or view the screenshots in the first post):
   

If we use at least XThreads 1.50, we can do that in this way:
Values List

Code:

1{|}20 2{|}40 3{|}60 4{|}80 5{|}100

---

Note that there is a pipe {|} separator for each line.
The left side of the separator is the true value of our input value. They are the value that will be saved to our database when a user submitting a thread.
The right side of the separator is the display value (label) for our input field. No matter what value at this side, it won't be saved to the database (please remember that the data that will be saved to the database is the data at the left side).

At this step, this is our input field:
   
And if a user submit a thread, this is the output of the field:
   

Now, we can style the input field. Set the Use Custom Input HTML to Yes, then the Input Field HTML setting will be displayed.
Put this code at the setting:

HTML Code

<![ITEM[<label style="display: block;" class="clear"><input{NAME_PROP} type="radio" class="radio float_left" value="{VALUE}"{CHECKED}{TABINDEX} /><ul class="star_rating float_left"><li style="width:{LABEL}%" class="current_rating"></li></ul></label>]]>

---

The {VALUE} variable in the above code is the value of the left side in our Values List setting.
And the {LABEL} variable is the value of the right side in our Values List setting.
Please read the descriptions of the setting if we want to know what variables are available, and what they are for.

Now, this is our input field (we've finished the input field):
   
But the output layout is still the same.

We need to use the Formatting Map List setting to manipulate the output layout.
Click the textarea, and the popout window will be displayed.
There are two field for each row we need to fill.
The Value field should be filled with the value of the left side of our Values List.
The Displayed Output is for the output layout for the Value.
For example, if we put 1 in the Value field, and we put Blah in the Displayed Output, each time a user choose 1 when creating a thread, it will be displayed as Blah for the result.
In this example, we'll fill the Displayed Output with the value of the right side of our Values List:

• Row 1:
  • Value: 1
  • Displayed Output: 20
    
• Row 2:
  • Value: 2
  • Displayed Output: 40
    
• Row 3:
  • Value: 3
  • Displayed Output: 60
    
• Row 4:
  • Value: 4
  • Displayed Output: 80
    
• Row 5:
  • Value: 5
  • Displayed Output: 100
    

The result is:

Code:

1{|}20 2{|}40 3{|}60 4{|}80 5{|}100

---

At this step, this is the output layout (I choose 4 stars when creating a thread):
   
We can see that if we choose 4 stars (4 option) when creating a new thread, the output is 80. The 80 is the Displayed Output of the Value 4.

Now, in the Display Format, we'll style the output:

Code:

<div class="clear float_left" style="white-space: nowrap"><strong class="float_left">Author Rating:</strong><ul class="star_rating" style="margin-left: 110px"><li style="width:{VALUE}%" class="current_rating"></li></ul></div>

---

The {VALUE} variable in this setting is the value of the right side (Displayed Output) of our Formatting Map List setting.

We've finished the output layout:
   

Maybe we can use more simple way for this (especially for this example) by using the Values List and the Formatting Map List settings only.
But like I said above, I just want to share my limited knowledge about the basic correlation between Values List, Display Format, Formatting Map List and Input Field HTML settings.

We need to use those settings (even maybe all of them) if we want to create a relative "complex"/stylish input and output field for our XThreads applications. The Input Field HTML setting provides us a more flexibility to create it.

Because I'm still learning, please tell me if there is something wrong with the code above

[Sama34]

I see this very interesting for something like the review system maybe, I have to think about something fot it...

BTW, star_ratings.css is no attached to editpost.php or newthread.php by default, you skipped that step

[RateU]

(04-22-2012 12:57 PM)Sama34 Wrote:  BTW, star_ratings.css is no attached to editpost.php or newthread.php by default, you skipped that step

Thanks
Personally (only my personal opinion), I prefer to use other class.