How can I code questions with a horizontal graphic scale?

JavaScript
1

I would like to include a scale base question in my webpage. I need users to choose their answers using the set values alongside scale. Could you please advise?

2

It sounds like a job for JavaScript, if I understand rightly. Do you mean that users move a slider left/right to choose a value?

3

yes. I need my users to move a slide left/right to choose a value. could you please advise?

4

There are some jQuery range sliders like this. Here’s an example (there are various example options in the right sidebar):

Off Topic:

Thread moved to JavaScript forum

5

if you dont need a smooth slide movement, as ultimately all the data would have incremental steps, you could use radio buttons and labels that latter as a image replacement to cover up and style the rdio button

Essentially, what you have described is a star rating system .

This is probably a bit much and must degrade to accommodate CSS2.1 users, but… just as an example:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
	<head>
		<title></title>
		<style type="text/css">
			* {padding:0; margin:0}
			.rate {list-style: none;  float: left }
			.rate  label{position: relative; float: right; padding:0 .5em}
			.rate  input{  position: absolute; left:-999em}
			.rate  label:hover ~ label, .rate  label:hover { color:red}
			.rate  input:checked ~ label { color:red}
			.rate label span {display: none}/*on a separate rule to avoid 'nulling' of unsupported browsers*/
			.rate .submit div{clear: both; text-align: center}
			.rate .submit input {position: static; left:auto}
			.rate {border: 1px solid red; padding:.5em 0}
		</style>
	</head>
	<body>
    <form  action="#" method="get">
    	<div  class="rate">
    		<input id="stars1" name="stars"type="radio" value="5"><label for="stars1"><span>5</span>&#9734;<span>s</span></label>
    		<input id="stars2" name="stars"type="radio" value="4"><label for="stars2"><span>4</span>&#9734;<span>s</span></label>
    		<input id="stars3" name="stars"type="radio" value="3"><label for="stars3"><span>3</span>&#9734;<span>s</span></label>
    		<input id="stars4" name="stars"type="radio" value="2"><label for="stars4"><span>2</span>&#9734;<span>s</span></label>
    		<input id="stars5" name="stars"type="radio" value="1"><label for="stars5"><span>1</span>&#9734;</label>

    	</div>
<p> your question</p> 		
<p><input type='submit' value='send form'></p> 		

    </form>
	</body>
</html>
6

thank you for the interesting approach and html codes.

if possible, could you please provide further explanation about the <span>5</span>☆<span>s</span>.

i.e. what does the 5 and s do to make the slider work?