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.
<!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
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.
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
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
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.
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.
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>
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.
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 .
Making Text Appear on click
Reply With Quote
Originally Posted by peachsorbet
Bookmarks