| View Question |
|
|
 | ||
|
| Subject:
Click-to-See-Answer JavaScript
Category: Computers > Algorithms Asked by: cluelessone-ga List Price: $10.00 |
Posted:
06 Jul 2006 12:16 PDT
Expires: 05 Aug 2006 12:16 PDT Question ID: 743844 |
I'd like to do an online quiz where a picture is displayed and below it a graphic that says "click to see answer" if you click on that graphic, the answer is displayed. I'd like to have a page with 15 or so quiz items, and people can just go one-by-one and click on each answer button to see the answer. |
| ||
|
| Subject:
Re: Click-to-See-Answer JavaScript
Answered By: palitoy-ga on 07 Jul 2006 01:14 PDT |
Hello again cluelessone-ga,
Thank-you for your question.
The solution requires you to add a few <div> elements to your HTML
code and a small snippet of javascript.
The following code should be added in the between the <head>...</head>
tags in your HTML document:
<script type="text/javascript">
<!--
function toggle(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
//-->
</script>
This small snippet of code allows you to show/hide any element on the
page when it is clicked on.
This is how I would set this up in the <body> of my HTML page:
=================================================================
This is where the HTML code for the question goes. <a href="#"
onclick="toggle('answer1');">Click here</a> to see the answer.
<div style="display:none" id="answer1">
This is where the HTML code for the answer goes.
</div>
=================================================================
Things to note:
1) The answer is held within a div that is special. It has its own
unique id (id="answer1") and is not shown when you first enter the
page (style="display:none"). To add additional questions you must
make sure each new div you add has a unique id, for example
id="answer2" or id="elephants".
2) In my example above you click on a "link" to show the answer but
this can easily be changed to an image using this: <img
src="whereyourimageis.jpg" onclick="toggle('answer1');" /> instead of
the <a>...</a> tag.
3) To toggle (show or hide) answers you need to add the name of the
answer you wish to toggle in the onclick part of the code. For
instance, toggle('answer1') shows/hides the div with an id of
"answer1", toggle('elephants') would show/hide a div that has an id
called "elephants".
This is quite difficult to explain but hopefully you should be able to
see what I mean when you have a play around with the code. If you
require any further assistance please do not hesitate to ask for
clarification.
Below is the complete code I wrote while testing this solution for you
(with 2 questions on it):
<html>
<head>
<script type="text/javascript">
<!--
function toggle(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
//-->
</script>
</head>
<body>
<div id="question1">
This is where the HTML code for the question 1 goes. <a href="#"
onclick="toggle('answer1');">Click here</a> to see the answer.
</div>
<div style="display:none" id="answer1">
This is where the HTML code for the answer 1 goes.
</div>
<div id="question2">
This is where the HTML code for the question 1 goes. <a href="#"
onclick="toggle('answer2');">Click here</a> to see the answer.
</div>
<div style="display:none" id="answer2">
This is where the HTML code for the answer 2 goes.
</div>
</body>
</html> |
| ||
|
| There are no comments at this time. |
If you feel that you have found inappropriate content, please let us know by emailing us at answers-support@google.com with the question ID listed above. Thank you. |
| Search Google Answers for |
| Google Home - Answers FAQ - Terms of Service - Privacy Policy |