www.webdeveloper.com
Results 1 to 15 of 15

Thread: Making Text Appear on click

  1. #1
    Join Date
    Jul 2005
    Posts
    14

    Arrow Making Text Appear on click

    I'm currently working on an online course and I would like to set up one of the units such that students can read the question and click a link for the answer to appear, in the same page, just next to or below the question.

    I'm also wondering if this is more a HTML problem than it is a Javascript one. I really would appreciate some help.

    Thanks millions.

  2. #2
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,278
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="Content-Script-Type" content="text/javascript">
    <meta name="Content-Style-Type" content="text/css">
    <title>Example</title>
    
    <script type="text/javascript">
    if (document.getElementsByTagName) onload = function () {
    	var e, i = 0;
    	while (e = document.getElementsByTagName ('*')[i++]) {
    		if (e.className && e.className == 'answer') e.style.display = 'none'
    		if (e.className && e.className == 'question') e.onclick = function () {
    			this.nextSibling.style.display = 'block';
    		}
    	}
    }
    </script>
    
    </head>
    <body>
    <div>
    <h3 class="question">The three phases of the Hegelean Dialectic</h3>
    <ul class="answer">
    <li>Thesis,</li>
    <li>Antithesis,</li>
    <li>Synthesis.</li>
    </ul>
    </div>
    </body>
    </html>
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  3. #3
    Join Date
    Jul 2005
    Posts
    14
    I was hoping for a much simpler solution as I will have to do this on 50 pages. Perhaps a suggestions as to how to go about this?

    More detail: Students will have to listen to a linked sound file and transcribe in IPA what they hear. Then I would like them to click on something that would reveal the correct transcription for their comparison.

  4. #4
    Join Date
    Jul 2004
    Location
    Sendai, Japan
    Posts
    1,273
    Something like this :
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd ">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
    a:hover {
    cursor:pointer;
    }
    span {
    visibility:hidden;
    }
    </style>
    <script type="text/javascript">
    function show(div) {
    obj=document.getElementById(div);
    obj.style.visibility="visible"; 
    }
    </script>
    </head>
    <body>
    <div>
    <p><a onclick="show('A1')">Q. What's the capital of France?</a></p>
    <p>A. <span id="A1">Paris</span></p>
    </div>
    </body>
    </html>

  5. #5
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,278
    Please note, with my example as long as you follow the scheme:
    Code:
    <block-level-element>
        <block-level-element class="question"></block-level-element>
        <block-level-element class="amswer"></block-level-element>
    </block-level-element>
    you don't have to mess around with the script. It will expand itself.
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  6. #6
    Join Date
    Jul 2005
    Posts
    14
    Ended up using BonRouge's. Beauty. Much thanks

  7. #7
    Join Date
    Jul 2004
    Location
    Sendai, Japan
    Posts
    1,273
    Quote Originally Posted by peachsorbet
    Ended up using BonRouge's. Beauty. Much thanks
    I hadn't seen Charles's script when I posted... It looks much better than mine. I'd go with that if I were you.

  8. #8
    Join Date
    Jul 2005
    Posts
    14
    New problem: Charles' script works with IE but not FF and Safari, but BonRouge's works with FF and Safari but not IE.

    Thoughts? I would really appreciate some help with making either script compatible with both browsers.

  9. #9
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,278
    Mine owrks just fine in FF. You must be implimenting it incorrectly. Post the URL.
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  10. #10
    Join Date
    Feb 2006
    Location
    Pennsylvania
    Posts
    153
    Sorry to resurrect an old thread but it has exactly what I'm looking for.

    But I do have one question though. Does the statement you click on have to be in the same layer as the answer that pops up?

    I tried putting them in separate div tags and it quit working. Not sure why?

    Second question; can I use this with a link? By that I mean, I have several links on a page and when you click on them they link to an inline frame where my content is displayed. What I would like to do is one of two things. Get rid of the frame and just have the text that's now in them display on the screen or my second option would be to have a text version of the link that was just selected appear above the frame window so you know what you just selected.

  11. #11
    Join Date
    Apr 2006
    Posts
    7
    This whole thing can be solved without javascript using css only:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    
    <style type="text/css">
    	div.answeroff
    	{
    		font-family: Arial, Verdana;
    		font-size: 12px;
    		color: #FFFFFF;
    		background-color: #001144;
    		border: 1px inset #0066C2;
    		padding-top: 2px;
    		padding-right: 2px;
    		padding-bottom: 2px;
    		padding-left: 2px;
    		margin-top: 4px;
    		margin-bottom: 4px;
    		margin-left: 10px;
    		margin-right: 10px;
    		display:inline;
    		cursor:pointer;
    	}
    	
    	div.answer
    	{
    		font-family: Arial, Verdana;
    		font-size: 12px;
    		color: #FFFFFF;
    		background-color: #003366;		
    		padding-top: 2px;
    		padding-right: 2px;
    		padding-bottom: 2px;
    		padding-left: 2px;
    		margin-top: 8px;
    		margin-bottom: 4px;
    		margin-left: 0px;
    		margin-right: 0px;
    	}
    }
    </style>
    
    </head>
    
    <body bgcolor="#003366" text="#ffffff">
    <p>
    Always visible text comes here. 
    <p>
    	<span onClick="this.nextSibling.style.display=((this.nextSibling.style.display=='none')?'':'none');">
    		<div class='answeroff' >ANSWER - click here to reveal the answer.</div>
    	</span><span style='display:none;' onClick="this.style.display='none';">
    		<div class='answer' >
    		This text appears here on clicking the ANSWER block 
    		</div>
    	</span> 
    <p>
    
    </body>
    </html>
    Of course, you may want to customize the styles.

  12. #12
    Join Date
    Feb 2006
    Location
    Pennsylvania
    Posts
    153
    That works great!

    How can I set it up having multiple questions with the answer to each always being displayed in the same place and the answer to the prior one being removed?

    I tried by adding another <div> and named it class2 but when I tried it the first <div> did not work and the second one took on the first ones answer.

    Can you offer me a little more help please.

  13. #13
    Join Date
    Apr 2006
    Posts
    7
    This solution is good for 1 question with 1 or more answers. The question is the "always visible text" field in the example and you may use several double <span></span> tags for the answers. To display the different answers at the same place I would use CSS technique.

    However, in the case you asked for help I would use a different approximation. The answers are in javascript variables, and the buttons direct them into the same textfield. Instead of the form/buttons a span tag with the onclick action could be used, too, as in the previous example, in this case forms[3] becomes forms[0].

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <script type="text/javascript" language="JavaScript">
    	var answ1 ="Answer 1. Ut wisi enim ad minim veniam...";
    	var answ2 ="Answer 2. Duis autem vel eum iriure dolor in...";
    	var answ3 ="Answer 3. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis...";
    </script>
    </head>
    
    <body>
    
    <table class="verdana" width="80%" border="0" bgcolor="beige">
    		<tr>
    		
    			<td width="90%">This is question 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    			</td>
    			<td >
    				<form name="form0" action="">
    					<input type="button" name="button" value="answer" onClick="document.forms[3].elements[0].value = answ1" >	
    				</form>
    			</td>
    		</tr>
    
    		<tr>
    			<td>This is question 2. Cras volutpat pretium metus...
    			</td>
    			<td>
    				<form name="form1" action="">
    					<input type="button" name="button" value="answer" onClick="document.forms[3].elements[0].value = answ2" >
    				</form>
    			</td>
    		</tr>
    
    		<tr>
    			<td>This is question 3. Morbi dolor lectus, vestibulum a, interdum sit amet, scelerisque et, arcu...
    			</td>
    			<td>
    				<form name="form2" action="">
    					<input type="button" name="button" value="answer" onClick="document.forms[3].elements[0].value = answ3" >	
    				</form>
    			</td>
    		</tr
    		<tr>
    			<td>
    				<form name="form3" action="">	
    					<center><textarea  cols="60" rows="2" name="text"  border="0"> </textarea></center>
    				</form>
    			</td>
    		</tr
    
    <p>
    
    </body>
    </html>

  14. #14
    Join Date
    Jul 2004
    Location
    Sendai, Japan
    Posts
    1,273
    tgunda,
    Without wanting to rain on your parade, you just said you could do this without javascript and then... did it with javascript. I don't get it.
    The biggest problem I see with your code though is that the html is horrible. What's with the tables and all the forms? Completely unnecessary.

    RGL,
    If you haven't found anything that suits you yet, this might help (maybe): http://bonrouge.com/test/showinfo2.htm

  15. #15
    Join Date
    Apr 2006
    Posts
    7
    Yes, the second solution differs a bit. The table is not necessary, of course - I cut and simplified the code from some unfinished educational pages of mine. It is not in English and the interactive images won't be seen without the chemical Chime plugin, anyway, here it is .

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles