CODE ON THE PAGE (ADAPT TO FIT IN YOUR PAGE)

<!-- 50th Widget -->
<div class="factSheet_wrapper flex-container flex-row-vertical-center">
<div class="factSheet_columnBody flex-container flex-vertical flex-justifyContent-center flex-element">
<span class="factSheet_text_header"></span>
<span class="factSheet_text_body "></span>
</div>
<img alt="" src="/portals/0/Images/button_refresh.png" class="factSheet_refreshButton" />
</div>
<!-- End 50th Widget -->



--------------------JAVA SCRIPT (ADAPT TO FIT YOUR SITE)------------------------------
<script type="text/javascript">
var currentFact = 0;
var newFact = 0;

function newStat(i){	
	$.get('/Portals/0/Documents/stats.xml', function(data){
		$('.factSheet_columnBody span').hide();
		$('.factSheet_text_header').text($(data).find('factHeader').eq(currentFact).text());
		$('.factSheet_text_body').text($(data).find('factBody').eq(currentFact).text());
		var bodyText = $('.factSheet_text_body').text();

		if ((bodyText.length < 20)){$ ('.factSheet_text_body').css('font-size','3em'); }
		if ((bodyText.length >= 20) && (bodyText.length < 40)){$ ('.factSheet_text_body').css('font-size','2em'); }
		if (bodyText.length >= 40){$ ('.factSheet_text_body').css('font-size','1.5em'); }
		
		$('.factSheet_columnBody span').show(500);
	});
}


$(document).ready(function(){
	newStat(currentFact);

$('.factSheet_refreshButton').click(function(){
	
	$.get('/Portals/0/Documents/stats.xml', function(data){
		var factTotal = $(data).find('fact').length;
		
		//SEQUENTIAL ORDER
		//if ((currentFact+1) < factTotal){
		//	currentFact ++;
		//} else {
		//	currentFact = 0;
		//}
		
		//RANDOM ORDER
		newFact = Math.floor(Math.random() * factTotal);
		while (newFact === currentFact) {
		newFact = Math.floor(Math.random() * factTotal);
		}
		currentFact = newFact;

		
		newStat(currentFact);
		
	});
});
});
</script>





--------------sTYLE SHEET-------------------

<style type="text/css">

.factSheet_wrapper {width:97%; min-height:150px; background-color:#0B98D6; color:#fff; padding:30px 20px; font-family: 'Roboto', sans-serif;}
.factSheet_text_header {display:block; font-size:1.25em; margin-bottom:10px;}
.factSheet_text_body {display:block; font-weight:900}
.factSheet_refreshButton {transition:.25s ease;}
.factSheet_refreshButton:hover {opacity:.6; transform: rotate(-90deg);}
.factSheet_refreshButton:active {transform: rotate(90deg); opacity:1}

/* FLEX LAYOUTS */
	.flex-container {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;}
	.flex-element {-webkit-flex: 1 1 auto; flex: 1 1 auto;}
	.flex-vertical {flex-direction:column; -webkit-flex-flow: column;}
	.flex-row-vertical-center {align-items:center; -webkit-align-items:center;}
	.flex-justifyContent-center {justify-content:center; -webkit-justify-content:center}


</style>