SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question How can I code questions with a horizontal graphic scale?

    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,175
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    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. #3
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes. I need my users to move a slide left/right to choose a value. could you please advise?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,175
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by faez View Post
    yes. I need my users to move a slide left/right to choose a value. could you please advise?
    There are some jQuery range sliders like this. Here's an example (there are various example options in the right sidebar):

    http://jqueryui.com/demos/slider/#range

    Off Topic:

    Thread moved to JavaScript forum

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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:
    Code:
    <!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>☆<span>s</span></label>
        		<input id="stars2" name="stars"type="radio" value="4"><label for="stars2"><span>4</span>☆<span>s</span></label>
        		<input id="stars3" name="stars"type="radio" value="3"><label for="stars3"><span>3</span>☆<span>s</span></label>
        		<input id="stars4" name="stars"type="radio" value="2"><label for="stars4"><span>2</span>☆<span>s</span></label>
        		<input id="stars5" name="stars"type="radio" value="1"><label for="stars5"><span>1</span>☆</label>
    
        	</div>   
    <p> your question</p> 		
    <p><input type='submit' value='send form'></p> 		
    
        </form>
    	</body>
    </html>

  6. #6
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •