Ranking Criteria page modules

Edit the titles and comment on top of the page
Criteria 1 Subtitle Use the mouse on the graph bellow for more details

Put the right values to the graph
The graph is configured trough the javascript in the page. Bellow is the full graph and then explanations of what you have to change. Explanations are between /* and */ in CAPITAL LETTERS



$(document).ready(function {

var chart = new Highcharts.Chart({  chart: {      renderTo: 'rrGraphWindow',      defaultSeriesType: 'column',      margin: [20, 20, 20, 50] /* THIS DEFINES THE MARGINS, IMPORTANT TO RECONFIGURE IN PLANET 3 */   },   title: {      text: 'Criteria', 					      style: {			display: 'none' // center it			}   },   xAxis: {      categories: [         ' '      ]   },   yAxis: {      min: 0,      title: {         enabled: false      },      labels: {						style: {							color: '#CCC'							},						formatter: function {                                return this.value +' %';                        }					},						max: 100   },   credits: {		enabled: false	},   legend: {   	  enabled: false,      layout: 'vertical',      backgroundColor: '#FFFFFF',      style: {         left: '100px',         top: '70px',         bottom: 'auto'      }   },   tooltip: {      formatter: function {         return ''+ this.series.name +' '+ this.x +': '+ this.y +' %'; }  },   plotOptions: { column: { pointPadding: 0.9, borderWidth: 0, groupPadding: 0.02 }  },        series: [{ name: 'Lidl', /* CHANGE THIS NAME TO THE 1st SUPERMARKET */ data: [49.9] /* THIS IS THE VALUE (PERCENTAGE) OF THE SUPERMARKET IN THIS CRITERIA */

}, {     name: 'Jumbo e Pão de Acúcar', /* CHANGE THIS NAME TO THE 2nd SUPERMARKET */ data: [83.6] /* THIS IS THE VALUE (PERCENTAGE) OF THE SUPERMARKET IN THIS CRITERIA */

}, {     name: 'Continente e Modelo', /* CHANGE THIS NAME TO THE 3rd SUPERMARKET */ data: [48.9] /* THIS IS THE VALUE (PERCENTAGE) OF THE SUPERMARKET IN THIS CRITERIA */

}, {     name: 'Pingo Doce e Feira Nova', data: [42.4]

}, {     name: 'Intermarché e Ecomarché', data: [22.4]

}, {     name: 'Minipreço', data: [23.4]

}  ],   colors: [ '#8765d6', /* IF YOU WANT YOU CAN CHANGE THE COLOURS HERE */ '#e300d0', '#00b266', '#fe5c00', '#00bdf5', '#fdff00', '#92A8CD', '#A47D7C', '#B5CA92' ] });

});

Define location of the supermarket logos
The images are defined in the following html. This should be properly configured, then just copy/paste. All images should have 50x70px

     

Translate navigation criteria names
This criteria names are the same as the main page, so just copy/paste

 Pol&iacute;tica de compra e venda de peixe</a></li> <li>Retirar os produtos insustent&aacute;veis</a></li> <li>Apoiar os produtos sustent&aacute;veis</a></li> <li>Tra&ccedil;abilidade dos produtos</a></li> <li>Etiquetagem dos produtos</a></li> <li>Venda de esp&eacute;cies da Lista Vermelha</a></li> <li>Transpar&ecirc;ncia e informa&ccedil;&atilde;o</a></li> </ul>

Add the texts for each supermarket
For each of the criteria edit and change the text bellow. And please note that:

99% Creates a Green 99%

99% Creates an Orange 99%

99% Creates a Red 99%

and

Adds a thumb up (to the best supermarket)

Adds a thumb down (to the worst supermarket)

Supermarket 1 99% <p class="rrExpandable">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut a sapien. Aliquam aliquet purus molestie dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut a sapien. Aliquam aliquet purus molestie dolor. Integer quis eros ut erat posuere dictum. Curabitur dignissim. Integer orci. Fusce vulputate lacus at ipsum. Quisque in libero nec mi laoreet volutpat. Aliquam eros pede, scelerisque quis, tristique cursus, placerat convallis, velit. Nam condimentum. Nulla ut mauris. Curabitur adipiscing, mauris non dictum aliquam, arcu risus dapibus diam, nec sollicitudin quam erat quis ligula. Aenean massa nulla, volutpat eu, accumsan et, fringilla eget, odio. Nulla placerat porta justo. Nulla vitae turpis. Praesent lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas tortor metus, pellentesque nec, vehicula vitae, suscipit sed, quam. Aenean scelerisque sodales tortor. Sed purus. Curabitur turpis est, bibendum tristique, porttitor tempor, pulvinar vitae, tortor. Nullam malesuada dapibus orci. Vivamus aliquet tempus velit. Curabitur interdum posuere risus. Duis egestas, ipsum sit amet molestie tincidunt, ligula libero pretium risus, non faucibus tellus felis mattis sapien. Ut eu velit at massa auctor mattis. Nam tristique velit quis nisl.

<p class="rrParentHide">Hide this text</a>

Why is this criteria important
Each criteria has a text explaining why is it important. Very easy to define:

<p title="Read more..." class="rrExpandable">Why is this criteria important - consectetuer adipiscing elit. Ut a sapien. Aliquam aliquet purus molestie dolor. Integer quis eros ut. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut a sapien. Aliquam aliquet purus molestie dolor. Integer quis eros ut erat posuere dictum. Curabitur dignissim. Integer orci. Fusce vulputate lacus at ipsum. Quisque in libero nec mi laoreet volutpat. Aliquam eros pede, scelerisque quis, tristique cursus, placerat convallis, velit. Nam condimentum. Nulla ut mauris. Curabitur adipiscing, mauris non dictum aliquam, arcu risus dapibus diam, nec sollicitudin quam erat quis ligula. Aenean massa nulla, volutpat eu, accumsan et, fringilla eget, odio. Nulla placerat porta justo. Nulla vitae turpis. Praesent lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas tortor metus, pellentesque nec, vehicula vitae, suscipit sed, quam. Aenean scelerisque sodales tortor. Sed purus. Curabitur turpis est, bibendum tristique, porttitor tempor, pulvinar vitae, tortor. Nullam malesuada dapibus orci. Vivamus aliquet tempus velit. Curabitur interdum posuere risus. Duis egestas, ipsum sit amet molestie tincidunt, ligula libero pretium risus, non faucibus tellus felis mattis sapien. Ut eu velit at massa auctor mattis. Nam tristique velit quis nisl.

<p class="rrParentHide">Hide this text</a>

Remove class="rrExpandable" and all content inside the div if you just want the lead.

What you can do
Here is where you add specific long term cyberactions for this criteria.

What you can do: To help supermarkets start to remove unsustainable products you can: <ul> <li>Consummer</a></li> <li>Student</a></li> <li>Professional</a></li> </ul> As a consummer you can ...Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut a sapien. Aliquam aliquet purus molestie dolor. Integer quis eros ut erat posuere dictum. Curabitur dignissim. Integer orci. Fusce vulputate lacus at ipsum. As a student you can ... Aliquam aliquet purus molestie dolor. Integer quis eros ut erat posuere dictum. Curabitur dignissim. Integer orci. Fusce vulputate lacus at ipsum. Quisque in libero nec mi laoreet volutpat As a professional buyer you can ... Aliquam aliquet purus molestie dolor. Integer quis eros ut erat posuere dictum. Curabitur dignissim. Integer orci. Fusce vulputate lacus at ipsum. Quisque in libero nec mi laoreet volutpat. <script type="text/javascript"> $("#usual1 ul").idTabs; <p id="rrHelpNote">It's everybody's responsability to protect the oceans. Thank you for your help.

The code is commented.

What do this percentages mean?
This module is exactly the same in every page. Translate once and copy/paste.

Configure the supermarket values
You should also add the hover values for the criteria in the appropriate criteria javascript file criteria1.js, criteria2.js, criteria3.js...


 * 1) Define the right percentage for each supermarket
 * 2) Define the right color: rrGreenScore, rrOrangeScore or rrRedScore
 * 3) The code is sorted
 * 4) #rrLogoSuper1 is the first supermarket
 * 5) #rrLogoSuper2 is the second supermarket

$(document).ready(function{ /* WHICH SPECIES MODULE NAVIGATION */

function rrClean{ $("#rrScoreCriteria").removeClass("rrGreenScore").removeClass("rrOrangeScore").removeClass("rrRedScore"); $("#rrScoreCriteria").empty; };

$("#rrLogoSuper1").hover(function{		$("#rrScoreCriteria").addClass("rrGreenScore").text("99%"); /* Use addClass rrGreenScore, rrOrangeScore or rrRedScore */	}, function{		rrClean;	});

$("#rrLogoSuper2").hover(function{

$("#rrScoreCriteria").addClass("rrOrangeScore").text("69%"); /* Use addClass rrGreenScore, rrOrangeScore or rrRedScore */ }, function{ rrClean; });

$("#rrLogoSuper3").hover(function{		$("#rrScoreCriteria").addClass("rrRedScore").text("39%"); /* Use addClass rrGreenScore, rrOrangeScore or rrRedScore */

}, function{ rrClean; });

$("#rrLogoSuper4").hover(function{

$("#rrScoreCriteria").addClass("rrRedScore").text("39%"); /* Use addClass rrGreenScore, rrOrangeScore or rrRedScore */

}, function{ rrClean; });

$("#rrLogoSuper5").hover(function{

$("#rrScoreCriteria").addClass("rrRedScore").text("29%"); /* Use addClass rrGreenScore, rrOrangeScore or rrRedScore */

}, function{ rrClean; });

$("#rrLogoSuper6").hover(function{

$("#rrScoreCriteria").addClass("rrRedScore").text("19%"); /* Use addClass rrGreenScore, rrOrangeScore or rrRedScore */ }, function{ rrClean; });	/* END SAYING WICH SPECIES ARE IN WHICH SUPERMARKETS */

});