Change text color on click

[Yeah]

I have a multiple choice quiz where I would like to use CSS to change the
color of the answers upon clicking them. I would like to present the right
and wrong answers up front, rather than direct the user to a separate page
with all correct answers.

Do the answers have to be "links" for this to work? They have to be inactive
links, because they don't actually go anywhere. They only serve the purpose
of changing color whether they're right or wrong.

There are four answers per question. Every answer will change a color when
clicked. The correct answer will turn green, and the incorrect one will turn
red. By the end of the quiz, most (if not all) choices will have probably
been clicked.

So, I'm trying to do two things, with a CSS class, if possible:
1) Prevent the clicked text link from trying to take me anywhere
2) Change the color of the text link

How do I do this? Any pointers are appreciated! :-)

[Barbara de Zoete]

On Sun, 31 Jul 2005 13:45:18 -0500, Yeah <ye**@positive.net> wrote:

I have a multiple choice quiz where I would like to use CSS to change the
color of the answers upon clicking them. I would like to present the right
and wrong answers up front, rather than direct the user to a separate page
with all correct answers.

Do the answers have to be "links" for this to work? They have to be inactive
links, because they don't actually go anywhere. They only serve the purpose
of changing color whether they're right or wrong.

There are four answers per question. Every answer will change a color when
clicked. The correct answer will turn green, and the incorrect one will turn
red. By the end of the quiz, most (if not all) choices will have probably
been clicked.

So, I'm trying to do two things, with a CSS class, if possible:
1) Prevent the clicked text link from trying to take me anywhere
2) Change the color of the text link

How do I do this? Any pointers are appreciated! :-)

Why use links? If they're not supposed to act like links and the don't take you
anywhere, what's with the choice for links?

I would put the answers in divs with class="answer" and give the right answer an
extra class="answer right". In my stylesheet:

div.answer {
cursor:help; }

div.answer:active {
background-color:red; }

div.right:active {
background-color:green; }

But, hey, _I_ live in a perfect world :-)
^^^^^^^^^^^^^||^^^^^^^^^^^^
||
\/

See <http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes> and note it
says: 'User agents are not required to reflow a currently displayed document due
to pseudo-class transitions.' I bet IE is one of those that feels no obligation
to implement these pseudo classes to any useful extend.

So, In the less perfect real world I would use links in stead of div and with
the above css hope for the best.
--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

[Yeah]

Thanks for the prompt assistance! I have implemented your code and made a
small alteration to the actions for the answers. However, the mouse pointer
changes, but the answers don't change color upon click. In my CSS code, I
have

<Style type="text/css">
<!--
div.answer {cursor: pointer}
div.answer wrong:active {color: red}
div.answer right:active {color: green}
//-->
</Style>

In the actual quiz location in the document, I have this code:

<B>Where is our ridiculously huge store located?</B><BR>
<DD><DIV class="answer wrong">a. Providence, RI</DIV>
<DD><DIV class="answer right">b. Topeka, KS</DIV>
<DD><DIV class="answer wrong">c. Honolulu, HI</DIV>
<DD><DIV class="answer wrong">d. Death Valley, CA</DIV>

My experience with pseudo-classes is limited. Can you help me out a bit
further? :-)

"Barbara de Zoete" <b_********@hotmail.com> wrote in message
news:opsuskr8aix5vgts@zoete_b...

On Sun, 31 Jul 2005 13:45:18 -0500, Yeah <ye**@positive.net> wrote:

I have a multiple choice quiz where I would like to use CSS to change the
color of the answers upon clicking them. I would like to present the
right
and wrong answers up front, rather than direct the user to a separate
page
with all correct answers.

Do the answers have to be "links" for this to work? They have to be
inactive
links, because they don't actually go anywhere. They only serve the
purpose
of changing color whether they're right or wrong.

There are four answers per question. Every answer will change a color
when
clicked. The correct answer will turn green, and the incorrect one will
turn
red. By the end of the quiz, most (if not all) choices will have probably
been clicked.

So, I'm trying to do two things, with a CSS class, if possible:
1) Prevent the clicked text link from trying to take me anywhere
2) Change the color of the text link

How do I do this? Any pointers are appreciated! :-)

Why use links? If they're not supposed to act like links and the don't
take you anywhere, what's with the choice for links?

I would put the answers in divs with class="answer" and give the right
answer an extra class="answer right". In my stylesheet:

div.answer {
cursor:help; }

div.answer:active {
background-color:red; }

div.right:active {
background-color:green; }

But, hey, _I_ live in a perfect world :-)
^^^^^^^^^^^^^||^^^^^^^^^^^^
||
\/

See <http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes> and
note it says: 'User agents are not required to reflow a currently
displayed document due to pseudo-class transitions.' I bet IE is one of
those that feels no obligation to implement these pseudo classes to any
useful extend.

So, In the less perfect real world I would use links in stead of div and
with the above css hope for the best.
--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

[RobG]

Yeah wrote:

Thanks for the prompt assistance! I have implemented your code and made a
small alteration to the actions for the answers. However, the mouse pointer
changes, but the answers don't change color upon click. In my CSS code, I
have

<Style type="text/css">
<!--
div.answer {cursor: pointer}
div.answer wrong:active {color: red}
div.answer right:active {color: green}
//-->
</Style>

In the actual quiz location in the document, I have this code:

<B>Where is our ridiculously huge store located?</B><BR>
<DD><DIV class="answer wrong">a. Providence, RI</DIV>
<DD><DIV class="answer right">b. Topeka, KS</DIV>
<DD><DIV class="answer wrong">c. Honolulu, HI</DIV>
<DD><DIV class="answer wrong">d. Death Valley, CA</DIV>

My experience with pseudo-classes is limited. Can you help me out a bit
further? :-)

You may find a combination of CSS and JavaScript will do the job:
<head>
<title>Answer play</title>
<script type="text/javascript">
function addClass( el, c ){
var re = new RegExp('\b' + c + '\b');
if ( el.className && !re.test( el.className ) ){
el.className += ' ' + c;
}
}
</script>

<style type="text/css">
.answer {cursor: pointer}
.wrong {color: red}
.right {color: green}
</style>
</head><body>
<b>Where is our ridiculously huge store located?</B><BR>
<dd><div class="answer" onclick="
addClass(this, 'wrong');
">a. Providence, RI</div>
<dd><div class="answer" onclick="
addClass(this, 'right');
">b. Topeka, KS</div>
<dd><div class="answer" onclick="
addClass(this, 'wrong');
">c. Honolulu, HI</div>
<dd><div class="answer" onclick="
addClass(this, 'wrong');
">d. Death Valley, CA</div>

</body>
[...]
--
Rob

[Yeah]

RobG,

Thanks for the code! It worked. Now the only thing I'm left to wonder is if
XP SP2's Internet Explorer security alerts (for JavaScript) will interfere
with this...
--
- Dave
www.grundage.com
"RobG" <rg***@iinet.net.auau> wrote in message
news:Sw***************@news.optus.net.au...

Yeah wrote:

Thanks for the prompt assistance! I have implemented your code and made a
small alteration to the actions for the answers. However, the mouse
pointer changes, but the answers don't change color upon click. In my CSS
code, I have

<Style type="text/css">
<!--
div.answer {cursor: pointer}
div.answer wrong:active {color: red}
div.answer right:active {color: green}
//-->
</Style>

In the actual quiz location in the document, I have this code:

<B>Where is our ridiculously huge store located?</B><BR>
<DD><DIV class="answer wrong">a. Providence, RI</DIV>
<DD><DIV class="answer right">b. Topeka, KS</DIV>
<DD><DIV class="answer wrong">c. Honolulu, HI</DIV>
<DD><DIV class="answer wrong">d. Death Valley, CA</DIV>

My experience with pseudo-classes is limited. Can you help me out a bit
further? :-)

You may find a combination of CSS and JavaScript will do the job:
<head>
<title>Answer play</title>
<script type="text/javascript">
function addClass( el, c ){
var re = new RegExp('\b' + c + '\b');
if ( el.className && !re.test( el.className ) ){
el.className += ' ' + c;
}
}
</script>

<style type="text/css">
.answer {cursor: pointer}
.wrong {color: red}
.right {color: green}
</style>
</head><body>
<b>Where is our ridiculously huge store located?</B><BR>
<dd><div class="answer" onclick="
addClass(this, 'wrong');
">a. Providence, RI</div>
<dd><div class="answer" onclick="
addClass(this, 'right');
">b. Topeka, KS</div>
<dd><div class="answer" onclick="
addClass(this, 'wrong');
">c. Honolulu, HI</div>
<dd><div class="answer" onclick="
addClass(this, 'wrong');
">d. Death Valley, CA</div>

</body>
[...]
--
Rob

[Stan Brown]

On Sun, 31 Jul 2005 13:45:18 -0500, "Yeah" <ye**@positive.net>
wrote:

I have a multiple choice quiz

You posted the same query to comp.infosystems.www.authoring.html .

--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/
Why We Won't Help You:
http://diveintomark.org/archives/200..._wont_help_you

[Berna Bleeker]

Yeah schreef:

Thanks for the prompt assistance! I have implemented your code and made a
small alteration to the actions for the answers. However, the mouse pointer
changes, but the answers don't change color upon click. In my CSS code, I
have

<Style type="text/css">
<!--
div.answer {cursor: pointer}
div.answer wrong:active {color: red}
div.answer right:active {color: green}
//-->
</Style>

In the actual quiz location in the document, I have this code:

<B>Where is our ridiculously huge store located?</B><BR>
<DD><DIV class="answer wrong">a. Providence, RI</DIV>
<DD><DIV class="answer right">b. Topeka, KS</DIV>
<DD><DIV class="answer wrong">c. Honolulu, HI</DIV>
<DD><DIV class="answer wrong">d. Death Valley, CA</DIV>

My experience with pseudo-classes is limited. Can you help me out a bit
further? :-)

It should be
div.wrong:active {color: red}
div.right:active {color: green}
and then it works (in Firefox, but not in Explorer; Explorer doesn't do
:active or :hover on anything but links).

HTH,

Berna

--
( )_( ) Berna M. Bleeker-Slikker
/ . . \ be***********@gmail.com
\ \@/ / http://www.volksliedjes.nl

[Yeah]

The idea for my multiple choice quiz was to have the corect answer change
color on hover, but when clicked, not have it do anything. But it uses CSS
and JavaScript in conjunction, which seems too busy for me.

I've thought of a different way of showing answers for my quiz. I'm
reluctant about getting JavaScript involved, because users with Windows SP2
will be getting script warnings if using IE. I'm not sure I want to mess
with that.

I was thinking of having a blank colored space beside each question
(background-color: yellow, color: black). It's NOT an A HREF, and it's not
clickable. When the user hovers over it, the blank space reveals the answer
(colored black).

Can I have non-hyperlinked text change color on hover? Do I have to have a
class (.) to enable hovering effects, or can it be an ID (#)?

Further ideas are appreciated. Thanks!
"Yeah" <ye**@positive.net> wrote in message
news:U_8He.28588$mC.8438@okepread07...

I have a multiple choice quiz where I would like to use CSS to change the
color of the answers upon clicking them. I would like to present the right
and wrong answers up front, rather than direct the user to a separate page
with all correct answers.

Do the answers have to be "links" for this to work? They have to be
inactive
links, because they don't actually go anywhere. They only serve the
purpose
of changing color whether they're right or wrong.

There are four answers per question. Every answer will change a color when
clicked. The correct answer will turn green, and the incorrect one will
turn
red. By the end of the quiz, most (if not all) choices will have probably
been clicked.

So, I'm trying to do two things, with a CSS class, if possible:
1) Prevent the clicked text link from trying to take me anywhere
2) Change the color of the text link

How do I do this? Any pointers are appreciated! :-)

[Mason A. Clark]

On Sun, 7 Aug 2005 16:18:48 -0500, "Yeah" <ye**@positive.net> wrote:

The idea for my multiple choice quiz was to have the corect answer change
color on hover, but when clicked, not have it do anything. But it uses CSS
and JavaScript in conjunction, which seems too busy for me.

I've thought of a different way of showing answers for my quiz. I'm
reluctant about getting JavaScript involved, because users with Windows SP2
will be getting script warnings if using IE. I'm not sure I want to mess
with that.

I was thinking of having a blank colored space beside each question
(background-color: yellow, color: black). It's NOT an A HREF, and it's not
clickable. When the user hovers over it, the blank space reveals the answer
(colored black).

Can I have non-hyperlinked text change color on hover? Do I have to have a
class (.) to enable hovering effects, or can it be an ID (#)?

Further ideas are appreciated. Thanks!

This might for you: just make the answer text the same color
as the background. Invisible until *highlighted* by a sweep of
the mouse (not hover and not click). I know of a quiz that uses
this method. (The viewer may need a few words of instruction.)

Mason C

[Berna Bleeker]

Mason A. Clark schreef:

On Sun, 7 Aug 2005 16:18:48 -0500, "Yeah" <ye**@positive.net> wrote:

The idea for my multiple choice quiz was to have the corect answer change
color on hover, but when clicked, not have it do anything. But it uses CSS
and JavaScript in conjunction, which seems too busy for me.

I've thought of a different way of showing answers for my quiz. I'm
reluctant about getting JavaScript involved, because users with Windows SP2
will be getting script warnings if using IE. I'm not sure I want to mess
with that.

I was thinking of having a blank colored space beside each question
(background-color: yellow, color: black). It's NOT an A HREF, and it's not
clickable. When the user hovers over it, the blank space reveals the answer
(colored black).

Can I have non-hyperlinked text change color on hover? Do I have to have a
class (.) to enable hovering effects, or can it be an ID (#)?

Further ideas are appreciated. Thanks!

This might for you: just make the answer text the same color
as the background. Invisible until *highlighted* by a sweep of
the mouse (not hover and not click). I know of a quiz that uses
this method. (The viewer may need a few words of instruction.)

Another idea is just to make the answers a 'link', and give the correct
answer a differents color via a CSS class:
a.correct:hover { background-color: lime}
a.wrong:hover { background-color:red }

<a class="wrong" href="#">Wrong answer</a>
<a class="wrong" href="#">Another wrong answer</a>
<a class="correct" href="#">Correct answer</a>

In other browsers, Firefox for example, :hover works with any element,
but not in IE, so it has to 'a href="[something]"', or Explorer won't
highlight it. The "#" part is so you don't get a message about a missing
file when you click on it; but it doesn't refer to any location so you
don't jump around in the document either.

It should work with IDs just as well as with classes, but an ID can only
occur once per page, and you can add the 'correct' class to all right
answers, and the 'wrong' class to all wrong answers.

HTH,

Berna

--
( )_( ) Berna M. Bleeker-Slikker
/ . . \ be***********@gmail.com
\ \@/ / http://www.volksliedjes.nl

[Yeah]

But doesn't HREFing to a # jump you to the top of the page? That's another
thing I'm trying to avoid. I've considered either having the user click the
correct answer, or mouseover a selection of invisible text to reveal the
answer, whichever method is simpler...
"Berna Bleeker" <be***********@gmail.com> wrote in message
news:42***********************@news.xs4all.nl...

Mason A. Clark schreef:

On Sun, 7 Aug 2005 16:18:48 -0500, "Yeah" <ye**@positive.net> wrote:

The idea for my multiple choice quiz was to have the corect answer change
color on hover, but when clicked, not have it do anything. But it uses
CSS and JavaScript in conjunction, which seems too busy for me.

I've thought of a different way of showing answers for my quiz. I'm
reluctant about getting JavaScript involved, because users with Windows
SP2 will be getting script warnings if using IE. I'm not sure I want to
mess with that.

I was thinking of having a blank colored space beside each question
(background-color: yellow, color: black). It's NOT an A HREF, and it's
not clickable. When the user hovers over it, the blank space reveals the
answer (colored black).

Can I have non-hyperlinked text change color on hover? Do I have to have
a class (.) to enable hovering effects, or can it be an ID (#)?

Further ideas are appreciated. Thanks!

This might for you: just make the answer text the same color
as the background. Invisible until *highlighted* by a sweep of the mouse
(not hover and not click). I know of a quiz that uses this method. (The
viewer may need a few words of instruction.)

Another idea is just to make the answers a 'link', and give the correct
answer a differents color via a CSS class:
a.correct:hover { background-color: lime}
a.wrong:hover { background-color:red }

<a class="wrong" href="#">Wrong answer</a>
<a class="wrong" href="#">Another wrong answer</a>
<a class="correct" href="#">Correct answer</a>

In other browsers, Firefox for example, :hover works with any element, but
not in IE, so it has to 'a href="[something]"', or Explorer won't
highlight it. The "#" part is so you don't get a message about a missing
file when you click on it; but it doesn't refer to any location so you
don't jump around in the document either.

It should work with IDs just as well as with classes, but an ID can only
occur once per page, and you can add the 'correct' class to all right
answers, and the 'wrong' class to all wrong answers.

HTH,

Berna

--
( )_( ) Berna M. Bleeker-Slikker
/ . . \ be***********@gmail.com
\ \@/ / http://www.volksliedjes.nl

[Berna Bleeker]

Yeah schreef:

But doesn't HREFing to a # jump you to the top of the page? That's another
thing I'm trying to avoid. I've considered either having the user click the
correct answer, or mouseover a selection of invisible text to reveal the
answer, whichever method is simpler...

Oops, you're right! I hadn't noticed that, because I tried it with a
very short page. Then how about this?
<html>
<head>
<title>Just a test</title>
<style type="text/css">
a { color: black; text-decoration: none; }
a.correct:hover { background-color: lime }
a.wrong:hover { background-color: red; color: white }
</style>
</head>
<body>
<p><a name="#question"></a><b>Will your answer to this question be
'No'?</b><br>
a. <a class="wrong" href="#question">No</a><br />
b. <a class="wrong" href="#question">Yes</a><br />
c. <a class="correct" href="#question">I can't answer that question!</a>
</p>
</body>
</html>

That works, if you don't mind the jump to the question (in IE; FF stays
put, as long as the question is in view) when you click on the link.

Berna
--
( )_( ) Berna M. Bleeker-Slikker
/ . . \ be***********@gmail.com
\ \@/ / http://www.volksliedjes.nl