• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 203
  • Last Modified:

Need help making a survey more visually appealing and helpful...

My group wants a survey with the questions posed just like this:

 One of the questions
I'd like to provide some sort of gradient background or some sort of style that would visually show how as you move from left to right your feelings turn more positive (for lack of a better way of saying it). Any suggestions?

The code right now is very simple:
 
<li>How would you rate your proposal manager's <b>responsiveness</b> on this proposal? 
                <div> 
                    <input type="radio" name="q1" value="-5" <cfif q1 EQ "-5">checked</cfif>/>-5&nbsp;
                    <input type="radio" name="q1" value="-4" <cfif q1 EQ "-4">checked</cfif>/>-4&nbsp; 
                    <input type="radio" name="q1" value="-3" <cfif q1 EQ "-3">checked</cfif>/>-3&nbsp;
                    <input type="radio" name="q1" value="-2" <cfif q1 EQ "-2">checked</cfif>/>-2&nbsp;
                    <input type="radio" name="q1" value="-1" <cfif q1 EQ "-1">checked</cfif>/>-1&nbsp;
                    <input type="radio" name="q1" value="0" <cfif q1 EQ "0">checked</cfif>/>0&nbsp;                   
                    <input type="radio" name="q1" value="+1" <cfif q1 EQ "+1">checked</cfif>/>+1&nbsp;
                    <input type="radio" name="q1" value="+2" <cfif q1 EQ "+2">checked</cfif>/>+2&nbsp;
                    <input type="radio" name="q1" value="+3" <cfif q1 EQ "+3">checked</cfif>/>+3&nbsp;
                    <input type="radio" name="q1" value="+4" <cfif q1 EQ "+4">checked</cfif>/>+4&nbsp;
                    <input type="radio" name="q1" value="+5" <cfif q1 EQ "+5">checked</cfif>/>+5&nbsp;
                    
                </div>
            </li>

Open in new window

0
traport
Asked:
traport
1 Solution
 
SafetyFishCommented:
There are some great explanations for putting backgrounds and images onto pages using CSS at this website. I think this page, in particular, might help a lot:

http://www.w3schools.com/CSS/css_image_transparency.asp

If you look along the left side, however, there are many more parts (especially in the advanced section) that may be helpful.

Enjoy!
0
 
Gurvinder Pal SinghCommented:
check this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
	<style>
		ul
		{
			list-style-type:none;
		}
		ul li div span
		{
			margin-left:5px;
		}
		ul li div 
		{
			background-image: -webkit-gradient(linear, 25% 0%, 0% 0%, from(rgb(176, 196, 222)), to(rgb(255, 255, 255)));
			width:550px;
		}
	</style>
</HEAD>

<BODY>
	<ul>
		<li>How would you rate your proposal manager's <b>responsiveness</b> on this proposal? 
			<div> 
				<span><input type="radio" name="q1" value="-5"/> -5</span>
                <span><input type="radio" name="q1" value="-4"/> -4</span>
                <span><input type="radio" name="q1" value="-3"/> -3</span>
                <span><input type="radio" name="q1" value="-2"/> -2</span>
                <span><input type="radio" name="q1" value="-1"/> -1</span>
                <span><input type="radio" name="q1" value="0"/> 0</span>
                <span><input type="radio" name="q1" value="+1"/> +1</span>
                <span><input type="radio" name="q1" value="+2"/> +2</span>
                <span><input type="radio" name="q1" value="+3"/> +3</span>
                <span><input type="radio" name="q1" value="+4"/> +4</span>
                <span><input type="radio" name="q1" value="+5"/> +5</span>
			</div>
		</li>
	</ul>
</BODY>
</HTML>

Open in new window

0
 
traportAuthor Commented:
Thanks for the link!

gurvinder372: I didn't get any styling in page when I tried what you provided. I wonder why? I just copied and pasted it... ?
0
Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

 
Gurvinder Pal SinghCommented:
which browser did you tried my code with?

I tried on Chrome6 and safari4 and it worked
0
 
_agx_Commented:
@gurvinder372 - It sounded interesting so I tried it with FF and IE, but no gradient.  This site says there's no standards for the gradient stuff yet:

http://www.htmlcenter.com/blog/cross-browser-gradient-backgrounds/
Chrome and Safari (and, as far as I know, all other modern Webkit-based browsers) currently utilize the proprietary method -webkit-gradient(), while Firefox uses the proprietary method -moz-[type]-gradient(). No versions of Internet Explorer (except possibly the IE9 platform preview) support CSS3 gradients, but IE does support a proprietary filter() method that is capable of implementing native gradients. Unfortunately, Opera still has no native support for gradients, but using a background color, you can allow your page to degrade gracefully in that browser.
0
 
traportAuthor Commented:
Yes, IE8 doesn't support it. Thanks.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now