Starrating
Inspiration from: http://www.fyneworks.com/jquery/star-rating/
mrInterview Javascript help from: http://www.smarterdimensions.com/blog/
download the example (zip file) – right click on this link and save the file
In the template file we have the image, css file and jQuery files that are also necessary.
STEP1
Add the following in mrStudio:
Metadata Section
Q1 “Star Rating Example”
categorical [1..1]
{
Rating1 “Score 1″,
Rating2 “Score 2″,
Rating3 “Score 3″,
Rating4 “Score 4″,
Rating5 “Score 5″
};
Routing Section
Q1.LayoutTemplate = “StarRatingTemplateCSS.htm“
Q1.ask()
STEP2
You see we are using a seperate template for our Q1 Question, called StarRatingTemplateCSS.htm:
<html>
<head>
<title>TEST SURVEY</title>
<mrRef RefType=”script” type=”text/javascript” src=”jquery.js“>jQuery”></mrRef>
<mrRef RefType=”script” type=”text/javascript” src=”jquery.MetaData.js“>jQuery MetaData”></mrRef>
<mrRef RefType=”script” type=”text/javascript” src=”jquery.rating.js“>jQuery Rating”></mrRef>
<mrRef RefType=”link” rel=”stylesheet” type=”text/css” href=”jquery.rating.css“></mrRef>
</head>
<mrPage IncludeElementIDs=”true”></mrPage>
<body>
<script>
$(function(){
$(‘.auto-submit-star’).rating({
callback: function(value, link){
// ‘this’ is the hidden form element holding the current value
// ‘value’ is the value selected
// ‘element’ points to the link element that received the click.
// Show an alert so we know which value we have
//alert(“We need to fill the Form with document.mrForm._Q0_C” + value + “.checked=true; :\nthis.form.submit();”);
// with one answer it works as following:
// document.mrForm._Q0_C1.checked=true;
// depended on the value:
// just note that answer 1 in mrForm (in your mdd) always starts with 0 (it is an array)
if (value == 1) {document.mrForm._Q0_C0.checked=true;};
if (value == 2) {document.mrForm._Q0_C1.checked=true;};
if (value == 3) {document.mrForm._Q0_C2.checked=true;};
if (value == 4) {document.mrForm._Q0_C3.checked=true;};
if (value == 5) {document.mrForm._Q0_C4.checked=true;};
// To submit the form automatically:
//this.form.submit();
// To submit the form via ajax:
//$(this.form).ajaxSubmit();
}
});
});
</script>
<mrBannerText>mrBannerText</mrBannerText>
<table>
<tr>
<td>
How do you rate this article?
<input class=”auto-submit-star” type=”radio” name=”test-3A-rating-1″ value=”1″/>
<input class=”auto-submit-star” type=”radio” name=”test-3A-rating-1″ value=”2″/>
<input class=”auto-submit-star” type=”radio” name=”test-3A-rating-1″ value=”3″/>
<input class=”auto-submit-star” type=”radio” name=”test-3A-rating-1″ value=”4″/>
<input class=”auto-submit-star” type=”radio” name=”test-3A-rating-1″ value=”5″/>
</td>
<td>
<!– if you need to hide the “normal / real” answers just put the div around mrData: –>
<!– <div style=”visibility:hidden”> –>
Just for this demo you see the rating answers here.
You can hide this part ofcourse for your real survey:
<mrData/>
<!– </div> –>
</td>
</tr>
</table>
<br />
<mrNavButton Name=”Prev”>Previous</mrNavButton>
<mrNavButton Name=”Next”>Next</mrNavButton>
<mrNavButton Name=”Goto”>GoTo</mrNavButton>
</body>
</html>
Make sure to have <mrPage IncludeElementIDs=”true”></mrPage> in your template, with this Dimensions give everything an id.
When you now run (start) your script in mrStudio and you check the source code you will see that answer 1 has the id _Q0_C1
If you now click on <input class=”auto-submit-star” type=”radio” name=”test-3A-rating-1″ value=”1″/> you will see in the script that value 1 is checked and that this answer will be selected.
