Haha. Oops.
If anyone is interested, I made a little PHP code for automatic rendering
The questions are listed in an array [0] = question, [1] = question 2, so on
$thequestions[0] = array('pie/*this is what will be returned in the form on submit*/', 'What do you think about pie?', 'It's great', 'It's pretty good', 'It's alright', 'I don't like it', 'I hate it');
$thequestions[1] = array('cake', 'What do you like about eating cake?', 'One of the best decisions of my life', 'I made the right decision', 'Indifferent', 'I regret it', 'I strongly regret it');
The javascript. The “foreach” automatically makes a new javascript entry for every question
<script type="text/javascript">
$(document).ready(function() {
<?php foreach($thequestions as $info)
{ ?>
var <?php echo $info[0] ?>slider = $('#<?php echo $info[0] ?>slider'), <?php echo $info[0] ?>scale = $('#<?php echo $info[0] ?>scale');
<?php echo $info[0] ?>slider.slider({
slide: function(event, ui) {
var spans = $('span', <?php echo $info[0] ?>scale);
spans.removeClass('chosen');
spans.eq(Math.floor((ui.value / 20.01))).attr('class', 'chosen');
<?php echo $info[0] ?>a.text(100-ui.value);
document.getElementById('<?php echo $info[0] ?>_box').value = 100-ui.value;
}
});
var <?php echo $info[0] ?>a = <?php echo $info[0] ?>slider.find('a');
<?php echo $info[0] ?>a.text('100');
<?php } ?>
});
</script>
The css:
<style type="text/css">
<?php foreach($thequestions as $info)
{ ?>
#<?php echo $info[0] ?>slider a {
text-decoration:none;
font:normal 10px sans-serif;
height:1.6em;
width:2em;
padding-top:0.4em
}
#<?php echo $info[0] ?>slider, #<?php echo $info[0] ?>scale {
width:240px;
margin:20px auto;
text-align:center
}
#<?php echo $info[0] ?>scale {
width:auto;
margin-bottom:50px;
}
#<?php echo $info[0] ?>scale span {
color:#999; margin:15px;
}
#<?php echo $info[0] ?>scale .chosen {
color:#fff
}
<?php } ?>
</style>
The following function will post the argumented question when called:
function postQuestion($question)
{
?>
<p class="question"><?php echo $question[1]; ?></p>
<div id="<?php echo $question[0]; ?>slider"></div>
<p id="<?php echo $question[0]; ?>scale"><span><?php echo $question[2]; ?></span>
<span><?php echo $question[3]; ?></span><span><?php echo $question[4]; ?></span><span><?php echo $question[5]; ?></span>
<span><?php echo $question[6]; ?></span><input id="<?php echo $question[0]; ?>_box" type="hidden" name="<?php echo $question[0]; ?>" value="100" /></p>
<?php
}
And then in the body:
<form ... >
<?php postQuestion($thequestions[0]); ?>
<?php postQuestion($thequestions[1]); ?> ...
Hope this somehow becomes useful to somebody
Just one more thing…
how can I make it start at 50%? I know I can make the a.text 50%, but that won’t actually move the slider halfway through. Does anyone know how to do this? Thanks again