Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

suggestion to reduce posting of duplicate questions

innerHTML

  • Please log in to reply
4 replies to this topic

#1 jerrywickey

jerrywickey

    CC Resident

  • Advanced Member
  • PipPipPipPip
  • 51 posts

Posted 17 January 2012 - 01:04 PM

You guys did a fantastic job writing the software for this site!

Excellent work! It looks great and works flawlessly. As far as I have experienced.

(the search input field moves a line down and covers up other newpost and privatemessage links if the screen is resized smaller.)

I just have a suggestion and offer a little code to help make it happen.

Sorting through many answers to a poster's question is tedious and encourages people to merely repost the same questions over and over. If on the other hand, a forum user discovers that reading the thread of a similar question quickly brings him answers, everybody wins.

This can be done if forum readers are given a very quick and convenient way to rate replies for relevance and for helpfulness. Threads can then always display the most helpful replies very near the top, with deference for very new posts.

Getting users to rate is the problem. If rating causes the page to reload or they must enter information, they won't do it. A rating widget must be one click and conspicuously embedded within the comment; and should reward the user with a thank you message encouraging him to do it again, but also must not invoke a pesky page reload.

I think the following code could do this. I didn't put a lot of time into it. I know there are at least two bugs. One component works on Mac but not windows. Something stupid I overlooked, I'm sure. If you like the idea and want to use the code, just let me know. I will spend the time to clean it up. But for now you can get an idea with a quick look at the link

The meat and potatoes of it is this

	<!-- php delivers the comment id at some point before insertion -->
	<?php $comment_id= 'jjts' ?>
	<!-- accomidates any comment id scheme already in use -->

	<!-- insert this html anywhere within each comment -->
	<span id="rating<?php echo $comment_id ?>"></span>
	<script type="text/javascript"> 
		// populate the js rate comment array from php comment output
		commentId[noComments]= '<?php echo $comment_id ?>';
		commentRating[noComments]= <?php echo comment_rating($comment_id) ?>;
		commentUserRating[noComments]= 0;
		noComments++;
	</script>
	<!-- end inline insert -->

The back end

<?php
// testing data for display demo
function comment_rating($a){
	$comment_rate['jjts']= 7;
	$comment_rate['qqks']= 5;
	return $comment_rate[$a];
}

// testing comment functions for display demo
if (strpos($_SERVER['QUERY_STRING'], 'rate=')===0){
	$commentId= $_GET['c'];
	$rating= $_GET['rate'];
	echo 'comment id '.$commentId.' : '.$rating;
	exit();
}
?>

<html>
<head>
	<script type="text/javascript"> 
		<!-- required in head or before generating any comment text-->
		var commentId= new Array(); 
		var commentRating= new Array(); 
		var commentUserRating= new Array();
		var noComments= 0;
	</script>
	<style>
		span.ratecomment{
			color: #888;
			font-size: 10px;
			font-family: arial;
		}
	</style>
</head>
<body>

<!-- add to php code which generates each comment -->
<!-- text of comment -->


	<!-- insert this html anywhere within each comment -->
	<!-- accomidates any comment id already in use -->
	<?php $comment_id= 'jjts' ?>
	<span id="rating<?php echo $comment_id ?>"></span>
	<script type="text/javascript"> 
		// populate the js rate comment array from php comment output
		commentId[noComments]= '<?php echo $comment_id ?>';
		commentRating[noComments]= <?php echo comment_rating($comment_id) ?>;
		commentUserRating[noComments]= 0;
		noComments++;
	</script>
	<!-- end inline insert -->


<!-- more text of comment -->
<br>one comment<br>
<br>
<br>


<!-- add to php generate generating each comment -->
<!-- text of another comment -->


	<!-- insert this html anywhere within each comment -->
	<!-- accomidates any comment id already in use -->
	<?php $comment_id= 'qqks' ?>
	<span id="rating<?php echo $comment_id ?>"></span>
	<script type="text/javascript"> 
		// populate the js rate comment array from php comment output
		commentId[noComments]= '<?php echo $comment_id ?>';
		commentRating[noComments]= <?php echo comment_rating($comment_id) ?>;
		commentUserRating[noComments]= 0;
		noComments++;
	</script>
	<!-- end inline insert -->


<!-- other comment text -->
<br>another comment<br>
<br>
<br>

<!-- for testing and demo -->
<span id="test2"></span>
<div id="testoutput">O</div>
<!--  -->

</body>
</html>

<script type="text/javascript"> 

// testing
document.getElementById('test2').innerHTML= '<span onclick="rateCommit(1, 4)" onmouseover="rateHover(2, 1, 4)" onmouseout="rateHover(1, 1, 4)">(click to test commit a rating of 4 on second comment)</span>';
// ======

// initial populate ratings
var rate1= '<img src="';
var rate2= '" onclick="rateCommit(';
var rate3= ')" onmouseover="rateHover(2, ';
var rate4= ')" onmouseout="rateHover(1, ';
var rate5= ')">';
var temp= '';
for (i=0; i<noComments; i++){
	poprate(i, commentRating[i], 0, 0);
}

function poprate(id, forum, rate, userrate){
	var rateimg= '';
	var p= '';
	for (j=1; j<=8; j++){
		if (j<=rate || j<=userrate){
			rateimg= 'http://www.jerrywickey.com/images/fostar.jpg';			
		}else if (j<=forum){
			rateimg= 'http://www.jerrywickey.com/images/custar.jpg';			
		}else{
			rateimg= 'http://www.jerrywickey.com/images/unstar.jpg';			
		}
		// 
		p += rate1+rateimg+rate2+id+', '+j+rate3+id+', '+j+rate4+id+', '+j+rate5;
	}
	p += '<br><span class="ratecomment">Rate this comment. Click to submit rating.</span>';
	document.getElementById('rating'+commentId[id]).innerHTML= p; 
}

function rateHover(inout, id, rate){
	mouse(inout);	
	if (inout==2){
		poprate(id, commentRating[id], rate, commentUserRating[id]);		
	}else if (inout==1){
		poprate(id, commentRating[id], 0, commentUserRating[id]);		
	}
}

function rateCommit(id, rating){
	// for testing only
	document.getElementById('testoutput').innerHTML= 'comment '+commentId[id]+' rated '+rating+' sent to server';

	// use the code below instead after implementing processcomment.php
	commentUserRating[id]= rating;
	poprate(id, commentRating[id], rating, rating);
	document.getElementById('testoutput').innerHTML= server('?rate='+rating+'&c='+commentId[id]);
	// the server output doesn't need to go anywhere
	// code to display thank user reward
}	

function mouse(mp){
	if (mp==1){mp= 'default';}
	else if (mp==2){mp= 'pointer';}
	document.body.style.cursor= mp; 
}

function server(url){
	gethttp= browserdependant();
	gethttp.open('GET', url, false);
	gethttp.send();
	return gethttp.responseText;		
}

function browserdependant(){
	if (window.XMLHttpRequest){
		return new XMLHttpRequest();
	}else{
		return new ActiveXObject("Microsoft.XMLHTTP");
	}
} 
</script>


<?php
// file processcomment.php

// other comment processing in the form
if (strpos($_SERVER['QUERY_STRING'], 'otherfunctions=')===0){
	// do stuff
	if ($succeed){
		echo $result;
	}else{
		echo 'fail';	
	}
	exit();
}

if (strpos($_SERVER['QUERY_STRING'], 'rate=')===0){
	$commentId= $_GET['c'];
	$rating= $_GET['rate'];
	if ($currentrate= getCommentField($commentId, 'numberOfRatings')){ 
		$weight= getCommentField($commentId, 'numberOfRatings');
		$rate= (getCommentField($commentId, 'rating')*$weight+$rating)/$weight++;
		setCommentField($commentId, 'rating', $rate);
		setCommentField($commentId, 'numberOfRatings', $weight);
		echo $commentId.' : '.$rating;
	}else{
		echo 'fail';
	}
	exit();
}

function sortcomments($commentarray){
	// each element of the array contains an array of the comment fields
	// returns same 2 dimensional array sorted for display
	$freshnessweight= 1;  // how important is a recent post
	$userratingweight= 2; // how important is user ratings
	// these are test values as rating max at 8 and time can be thousands
	// this is accounted for by adjusting the weight value
	$highestrating= 8;
	$count= 0;
	foreach ($commentarray as $comment){
		$newcom[$count]= $comment;
		$count++;
	}	
	$done= false;
	while (!$done){
		$done= true;
		$f= time()-intval($newcom[0]['unixPostTime']);
		$r= $highestrating-intval($newcom[0]['userRating']);
		$previndex= ($f/$freshnessweight) + ($r/$userratingweight);
		for ($i=1; $i<$count; $i++){
			$f= time()-intval($newcom[$i]['unixPostTime']);
			$r= $highestrating-intval($newcom[$i]['userRating']);
			$index= $f/$freshnessweight + $r/$userratingweight;
			if ($index<$previndex){
				$done= false;
				$temp= $newcom[$i];
				$newcom[$i]= $newcom[$i-1];
				$newcom[$i-1]= $temp;
			}
			$previndex= $index;
		}	
	}
	return $newcom; 
}

Edited by jerrywickey, 17 January 2012 - 01:40 PM.

  • 0

#2 jerrywickey

jerrywickey

    CC Resident

  • Advanced Member
  • PipPipPipPip
  • 51 posts

Posted 17 January 2012 - 03:27 PM

The glitch occurred to me while I was working on something else. I am writing new contents to the span while the mouse is over it and expecting the mouse events to follow the change. Different browsers handle that differently, evidently undefined behavior for some.

None the less, if you like the idea, I'll clean up the code so its no work or little work for you guys.

Jerry
  • 0

#3 Roger

Roger

    Skadoosh!

  • Administrator
  • 1222 posts
  • Programming Language:C, PHP
  • Learning:Others

Posted 17 January 2012 - 05:43 PM

Hey Jerry,

This forum (software) is actually coded by vBulletin.com and includes modules by free-lancers, so we can't take any credit (or blame) for any of the features! ;-)

Thanks for the idea and suggested code! I have thought about how to move useful information to the top of the thread... In reading the pros/cons of this idea, known widely as the Q&A format (Stackoverflow.com implementation), the general consensus is that a forum is intrinsically different from a Q&A site in that it is more of a discussion than a straight Q&A platform. There are some mod's (modifications) out there that does the rating / post-promotion, but none of them are well implemented. vBulletin also states that they don't plan to support a Q&A format (even though it would seem easy for them to implement).

I am currently considering moving this forum from vBulletin to another platform (IPBoard), which also doesn't have this Q&A feature. However, I did think about another option (Zoho Discussions), which includes a forum + Q&A type platform. On the Zoho platform, both discussions and Q&A can occur within the same forum... I'll take a look again tonight to see if it's a better fit. The only downside to Zoho is that it's UI is not as nice as IPBoard.

If we end up staying on vBulletin, I'll take a look at your code to see if we can get it implemented. Right now, I'm on a self-imposed feature/code-freeze, since a move is likely.

On a separate note, your code looks well thought-out.. might be a good idea to turn it into a tutorial in our PHP section! ;-)

Roger
  • 0

New around here? Click here to register and start participating in under a minute?

Or do a quick search and you may find the answer you're looking for.


#4 jerrywickey

jerrywickey

    CC Resident

  • Advanced Member
  • PipPipPipPip
  • 51 posts

Posted 17 January 2012 - 06:23 PM

Thank you.

I might do that.

I very much like the idea of some threads using QA while most are discussions

perhaps the original poster can choose.

If I choose to fix this and put it up as a tutorial in what forum should I do that?

Jerry

---------- Post added at 09:23 PM ---------- Previous post was at 08:51 PM ----------

I fixed it. It works completely now. I changed only the .src element of the img and that took care of it.

Now a viewer sees the forum rating while his rating moves with the mouse until he clicks then his rating appears overlayed over the forum average rating. The viewer can change his vote anytime while the average is calculated on the server and can be stored with the comment database.

see it all happen here


again all that needs to be put in the comment code is this
<span id="rating<?php echo $comment_id ?>"></span>
<script type="text/javascript"> 
	// populate the js rate comment array from php comment output
	commentId[noComments]= '<?php echo $comment_id ?>';
	commentRating[noComments]= <?php echo comment_rating($comment_id) ?>;
	commentUserRating[noComments]= 0;
	noComments++;
</script>


The js back end is
<script type="text/javascript"> 
		<!-- required in head or before generating any comment text-->
		var commentId= new Array(); 
		var commentPHPName= new Array();
		var commentRating= new Array(); 
		var commentUserRating= new Array();
		var noComments= 0;
		var nascentUserRating= 0;
	</script>
	<style>
		span.ratecomment{
			color: #888;
			font-size: 10px;
			font-family: arial;
		}
	</style>

 <!--      and     --> 

<script type="text/javascript"> 

// initial populate ratings
var rate1= '<img src="';
var rate2= '" onclick="rateCommit(';
var rate3= ')" onmouseover="rateHover(';
var rate4= ')" id="img';
var rate5= '" onmouseout="rateHoverOut(';
var rate6= ')">';
for (i=0; i<noComments; i++){
	var rateimg= '';
	var p= '';
	for (j=1; j<=8; j++){
		if (j<=commentRating[i]){
			rateimg= 'http://www.jerrywickey.com/images/custar.jpg';			
		}else{
			rateimg= 'http://www.jerrywickey.com/images/unstar.jpg';			
		}
		p += rate1+rateimg+rate2+i+rate3+i+', '+j+rate4+i+j+rate5+i+', '+j+rate6;
	}
	p += '<br><span class="ratecomment">Rate this comment. Click to submit rating.</span>';
	document.getElementById('rating'+commentId[i]).innerHTML= p; 
}

function rateHover(id, rate){
	mouse(2);	
	poprate(id, commentRating[id], rate);		
	nascentUserRating= rate;
}

function rateHoverOut(id, rate){
	mouse(1);	
	poprate(id, commentRating[id], commentUserRating[id]);		
	nascentUserRating= rate;
}

function poprate(id, forum, rate){
	for (j=1; j<=8; j++){
		var rateimg= '';
		if (j<=rate){
			rateimg= 'http://www.jerrywickey.com/images/fostar.jpg';			
		}else if (j<=forum){
			rateimg= 'http://www.jerrywickey.com/images/custar.jpg';			
		}else{
			rateimg= 'http://www.jerrywickey.com/images/unstar.jpg';			
		}
		document.getElementById('img'+id+j).src= rateimg;
	}
}

function rateCommit(id){
	commentUserRating[id]= nascentUserRating;
	document.getElementById('testoutput').innerHTML= server('processrating.php?rate='+nascentUserRating+'&c='+commentId[id]);
	// the server output doesn't need to go anywhere
	// code to display thank user reward
}	

function mouse(mp){
	if (mp==1){mp= 'default';}
	else if (mp==2){mp= 'pointer';}
	document.body.style.cursor= mp; 
}

function server(url){
	gethttp= browserdependant();
	gethttp.open('GET', url, false);
	gethttp.send();
	return gethttp.responseText;		
}

function browserdependant(){
	if (window.XMLHttpRequest){
		return new XMLHttpRequest();
	}else{
		return new ActiveXObject("Microsoft.XMLHTTP");
	}
} 
</script>


Plus a php file named processrating.php
<?php
// file processcomment.php

// other comment processing in the form
if (strpos($_SERVER['QUERY_STRING'], 'otherfunctions=')===0){
	// do stuff
	if ($succeed){
		echo $result;
	}else{
		echo 'fail';	
	}
	exit();
}

if (strpos($_SERVER['QUERY_STRING'], 'rate=')===0){
	$commentId= $_GET['c'];
	$rating= $_GET['rate'];
	if ($currentrate= getCommentField($commentId, 'numberOfRatings')){ 
		$weight= getCommentField($commentId, 'numberOfRatings');
		$rate= (getCommentField($commentId, 'rating')*$weight+$rating)/$weight++;
		setCommentField($commentId, 'rating', $rate);
		setCommentField($commentId, 'numberOfRatings', $weight);
		echo $commentId.' : '.$rating;
	}else{
		echo 'fail';
	}
	exit();
}

function sortcomments($commentarray){
	// each element of the array contains an array of the comment fields
	// returns same 2 dimensional array sorted for display
	$freshnessweight= 1;  // how important is a recent post
	$userratingweight= 2; // how important is user ratings
	// these are test values as rating max at 8 and time can be thousands
	// this is accounted for by adjusting the weight value
	$highestrating= 8;
	$count= 0;
	foreach ($commentarray as $comment){
		$newcom[$count]= $comment;
		$count++;
	}	
	$done= false;
	while (!$done){
		$done= true;
		$f= time()-intval($newcom[0]['unixPostTime']);
		$r= $highestrating-intval($newcom[0]['userRating']);
		$lastindex= ($f/$freshnessweight) + ($r/$userratingweight);
		for ($i=1; $i<$count; $i++){
			$f= time()-intval($newcom[$i]['unixPostTime']);
			$r= $highestrating-intval($newcom[$i]['userRating']);
			$index= $f/$freshnessweight + $r/$userratingweight;
			if ($index<$lastindex){
				$done= false;
				$temp= $newcom[$i];
				$newcom[$i]= $newcom[$i-1];
				$newcom[$i-1]= $temp;
			}
		}	
	}
	return $newcom; 
}

  • 0

#5 Roger

Roger

    Skadoosh!

  • Administrator
  • 1222 posts
  • Programming Language:C, PHP
  • Learning:Others

Posted 17 January 2012 - 08:52 PM

Thanks, Jerry. This would definitely go into the PHP or JS section. Give it a good name, include code and even some screenshot! I think people would enjoy this tutorial.

---------- Post added at 08:52 PM ---------- Previous post was at 07:44 PM ----------

Just did some research and it looks like IPBoard is the best commercial platform: Forum Software Timeline 1994 - 2011 | Forum Software Reviews
  • 0

New around here? Click here to register and start participating in under a minute?

Or do a quick search and you may find the answer you're looking for.






Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download