Solved

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

Posted on 2011-09-08
6
167 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 40

Expert Comment

by:gurvinder372
Comment Utility
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
Comment Utility
@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
Comment Utility
Yes, IE8 doesn't support it. Thanks.
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Suggested Solutions

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

771 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

14 Experts available now in Live!

Get 1:1 Help Now