Solved

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

Posted on 2011-09-08
6
172 Views
Last Modified: 2012-05-12
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
Comment
Question by:traport
6 Comments
 
LVL 4

Expert Comment

by:SafetyFish
ID: 36502532
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
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36502571
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
 

Author Comment

by:traport
ID: 36503609
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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 40

Expert Comment

by:gurvinder372
ID: 36503655
which browser did you tried my code with?

I tried on Chrome6 and safari4 and it worked
0
 
LVL 52

Accepted Solution

by:
_agx_ earned 500 total points
ID: 36503731
@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
 

Author Comment

by:traport
ID: 36503917
Yes, IE8 doesn't support it. Thanks.
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

920 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now