Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Conditional selection of a hide/show div

Status
Not open for further replies.
pepper28

pepper28

Programmer
Dec 29, 2004
2
0
0
US
I am trying to create a radio function where a random question is asked and three radio button answers are presented. When the user selects one of the three answers the other two are grayed out and the third is tested to determine if it is the correct answer. If correct the application is suppose to hide the Q/A div (revealcontent)and present the congratulation (winner)div. If the user answers incorrectly the application is suppose to hide the Q/A div and display the Sorry Wrong Answer (losser)div.

My application is practically working, but when I select the second radio button both the WINNER div is showing and the LOSSER div is showing.

I have been using the Apple Dynamic Forms with DHTML samples from the developer’s connections (
Outlined below is my code I have used PHP5.0, Javascripting and MySQL for the Q/A data:

echo ("<SCRIPT LANGUAGE=\"JavaScript\">\n");
echo ("function validate_question(val) {\n");
echo ("frm=document.forms[0]\n");
echo ("if(val==\"option1\")\n");
echo ("{\n");
echo ("frm.option1.disabled=false;\n");
echo ("frm.option2.disabled=true;\n");
echo ("frm.option3.disabled=true;\n");
echo ("var textString1 = \"$myrow[4]\";\n");
echo ("var textString2 = \"$myrow[7]\";\n");
echo ("}\n");
echo ("if (textString1 == textString2){\n");
echo ("changeObjectVisibility(\"winner1\", \"visible\");\n");
echo ("changeObjectVisibility(\"revealcontent\", \"hidden\");\n");
echo ("}else{\n");
echo ("changeObjectVisibility(\"winner1\", \"hidden\");\n");
echo ("changeObjectVisibility(\"losser1\", \"visible\");\n");
echo ("}\n");
echo ("if(val==\"option2\")\n");
echo ("{\n");
echo ("frm.option1.disabled=true;\n");
echo ("frm.option2.disabled=false;\n");
echo ("frm.option3.disabled=true;\n");
echo ("var textString3 = \"$myrow[5]\";\n");
echo ("var textString4 = \"$myrow[7]\";\n");
echo ("}\n");
echo ("if (textString3 == textString4){\n");
echo ("changeObjectVisibility(\"winner2\", \"visible\");\n");
echo ("changeObjectVisibility(\"revealcontent\", \"hidden\");\n");
echo ("}else{\n");
 
Sort by date Sort by votes
before we go any further, could you view that page in a browser, then copy/paste the HTML to this screen? the code you have there is hell to debug.

*cLFlaVA
----------------------------
[tt]Sigs cause cancer.[/tt]
 
Upvote 0 Downvote
Sorry I didn't include the entire script. Thought it would have been unacceptable.

Here it is

<html>
<head>
<style>
<!--
.intro{
position:absolute;
left:0;
top:0;
border:0.1px solid yellow;
z-index:10;
background-image: url(images/col_3_bg.jpg);
}
body {
background-color: #FFFFCC;
}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>The MP3 Game</title></head>


<style type="text/css">

.revealcontent{
visibility: hidden;
}

</style>

<script type="text/javascript">

/***********************************************
* Sequential Content Revealer- © Dynamic Drive DHTML code library (* Visit DynamicDrive.com for hundreds of original DHTML scripts
* This notice must stay intact for legal use
***********************************************/

var contentpause=10000 //customize time each content should pause for before the next one is revealed (1000=1 second)
var once_session=0 //Should "reveal" animation only be applied once per browser session? (0=no, 1=yes):

var curobjindex=0
var orderoffset=100

function collectElementbyid(){
var id="revealcontent"
glidearray=new Array()
var inc=0
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (i=0; i<alltags.length; i++){
if (alltags id==id){
glidearray[inc++]=alltags
glidearray[inc-1].displayorder=(glidearray[inc-1].getAttribute("displayorder"))? parseInt(glidearray[inc-1].getAttribute("displayorder")) : inc+orderoffset
}
}
if (glidearray.length>0){
glidearray.sort(compareorder)
seqreveal()
}
}

function seqreveal(){
if (curobjindex<glidearray.length){
glidearray[curobjindex].style.visibility="visible"
var actualpause=(glidearray[curobjindex].getAttribute("pausesec"))? parseFloat(glidearray[curobjindex].getAttribute("pausesec"))*1000 : parseFloat(contentpause)
glidetimer=setTimeout("seqreveal()",actualpause)
curobjindex++
}
}

function compareorder(a, b){
return a.displayorder-b.displayorder
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = ""
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset)
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

if (once_session && get_cookie("textdisplayed")=="" || !once_session){
if (window.addEventListener)
window.addEventListener("load", collectElementbyid, false)
else if (window.attachEvent)
window.attachEvent("onload", collectElementbyid)
else if (document.getElementById)
window.onload=collectElementbyid

if (once_session)
document.cookie="textdisplayed=yes"
}
else
document.write('<style>\n revealcontent{visibility:visible;}\n</style>')
</script>

</head>

<body onLoad="self.focus();" onBlur="self.focus();">

<div id="i1" class="intro"></div><div id="i2" class="intro"></div>

<script language="JavaScript1.2">
/*
Top-Down Curtain Script- By Dynamic Drive (For full source code, installation instructions, and TOS,
visit */

var ns4=document.layers?1:0
var ie4=document.all?1:0
var ns6=document.getElementById&&!document.all?1:0
var speed=3
var temp=new Array()
var temp2=new Array()
if (ns4){
for (i=1;i<=2;i++){
temp=eval("document.i"+i+".clip")
temp2=eval("document.i"+i)
temp.width=window.innerWidth
temp.height=window.innerHeight/2
temp2.top=(i-1)*temp.height
}
}
else if (ie4||ns6){
var clipbottom=ns6?parseInt(window.innerHeight)/2:document.body.offsetHeight/2
cliptop=0
for (i=1;i<=2;i++){
temp=ns6?document.getElementById("i"+i).style:eval("document.all.i"+i+".style")
temp.width=ns6?window.innerWidth-15:document.body.clientWidth
temp.height=ns6?window.innerHeight/2:document.body.offsetHeight/2
temp.top=(i-1)*parseInt(temp.height)
}
}

function openit(){
window.scrollTo(0,0)
if (ns4){
temp[1].bottom-=speed
temp[2].top+=speed
if (temp[1].bottom<=0)
clearInterval(stopit)
}
else if (ie4||ns6){
clipbottom-=speed
temp[1].clip="rect(0 auto "+clipbottom+" 0)"
cliptop+=speed
temp[2].clip="rect("+cliptop+" auto auto auto)"
if (clipbottom<=-5){
clearInterval(stopit)
if (ns6){
temp[1].display="none"
temp[2].display="none"
}
}
}
}
function gogo(){
stopit=setInterval("openit()",100)
}
gogo()

function switchDiv(div_id)
{
var style_sheet = getStyleObject(div_id);
if (style_sheet)
{
hideAll();
changeObjectVisibility(div_id,"visible");
}
else
{
alert("sorry, this only works in browsers that do Dynamic HTML");
}
}

// function hideAll()
// hides a bunch of divs
//
function hideAll()
{
changeObjectVisibility("revealcontent","hidden");
changeObjectVisibility("winner1","hidden");
changeObjectVisibility("losser1","hidden");
changeObjectVisibility("winner2","hidden");
changeObjectVisibility("losser2","hidden");
changeObjectVisibility("winner3","hidden");
changeObjectVisibility("losser3","hidden");
}

// function getStyleObject(string) -> returns style object
// given a string containing the id of an object
// the function returns the stylesheet of that object
// or false if it can't find a stylesheet. Handles
// cross-browser compatibility issues.
//
function getStyleObject(objectId) {
// checkW3C DOM, then MSIE 4, then NN 4.
//
if(document.getElementById && document.getElementById(objectId)) {
return document.getElementById(objectId).style;
}
else if (document.all && document.all(objectId)) {
return document.all(objectId).style;
}
else if (document.layers && document.layers[objectId]) {
return document.layers[objectId];
} else {
return false;
}
}

function changeObjectVisibility(objectId, newVisibility) {
// first get a reference to the cross-browser style object
// and make sure the object exists
var styleObject = getStyleObject(objectId);
if(styleObject) {
styleObject.visibility = newVisibility;
return true;
} else {
// we couldn't find the object, so we can't change its visibility
return false;
}
}
// -->

</script>

<table width="99%" border="0">
<tr>
<td>&nbsp;</td>
<td>&nbsp;<table width="879" height="292" border="0">
<tr>
<td width="93"></td>
<td width="227"><div id="revealcontent" displayorder="1">

<p><strong><font size="4">"What tv show had a character called Rerun?"</font></strong><br/>

<div id="revealcontent" displayorder="2">
<FORM NAME="document.forms.0">

<INPUT TYPE=radio NAME="option1" VALUE="option1" onClick="validate_question(this.value)" >
"What's happening now" <br/>

<INPUT TYPE=radio NAME="option2" VALUE="option2" onClick="validate_question(this.value)">

"What's is the Problem" <br/>

<INPUT TYPE=radio NAME="option3" VALUE="option3" onClick="validate_question(this.value)">

"The Baby Boom Genera" <br/>

<br />

<INPUT TYPE="submit" VALUE="reset" ></p>

</FORM></div>
&nbsp;</td>
<a href="javascript:top.window.close()">Close MP3 Game</a> <td width="545">&nbsp;</td>

</tr>
<tr>
<td>

</td>
<td>&nbsp;<SCRIPT LANGUAGE="JavaScript">
function validate_question(val) {
frm=document.forms[0]
if(val=="option1")
{
frm.option1.disabled=false;
frm.option2.disabled=true;
frm.option3.disabled=true;
var textString1 = "What's happening now";
var textString2 = "What's happening now";
}
if (textString1 == textString2){
changeObjectVisibility("winner1", "visible");
changeObjectVisibility("revealcontent", "hidden");
}else{
changeObjectVisibility("winner1", "hidden");
changeObjectVisibility("losser1", "visible");
}
if(val=="option2")
{
frm.option1.disabled=true;
frm.option2.disabled=false;
frm.option3.disabled=true;
var textString3 = "What's is the Problem";
var textString4 = "The Pepsi Generation";
}
if (textString3 == textString4){
changeObjectVisibility("winner2", "visible");
changeObjectVisibility("revealcontent", "hidden");
}else{
changeObjectVisibility("winner2", "hidden");
changeObjectVisibility("losser2", "visible");
}
if(val=="option3")
{
frm.option1.disabled=true;
frm.option2.disabled=true;
frm.option3.disabled=false;
var textString5 = "The Baby Boom Genera";
var textString6 = "The Pepsi Generation";
}
if (textString5 == textString6){changeObjectVisibility("winner3", "visible");
changeObjectVisibility("revealcontent", "hidden");
}else{
changeObjectVisibility("winner3", "hidden");
changeObjectVisibility("losser3", "visible");
}
}
</script>
<div id="winner1" style="visibility:hidden; position:absolute; left:150px; top:150px;">
<p> Place the download content</p>
</div>

<div id="losser1" style="visibility:hidden; position:absolute; left:150px; top:150px;">
<p> Sorry Please Try again</p>
</div>

<div id="winner2" style="visibility:hidden; position:absolute; left:150px; top:150px;">
<p> You have won</p>
</div>

<div id="losser2" style="visibility:hidden; position:absolute; left:150px; top:150px;">
<p> Sorry Please Try again</p>

<div id="winner3" style="visibility:hidden; position:absolute; left:150px; top:150px;">
<p> You have won</p>
</div>

<div id="losser3" style="visibility:hidden; position:absolute; left:150px; top:150px;">
<p> Sorry Please Try again</p>
</div>
</div>
</td>
</table>


</body>
</html>
 
Upvote 0 Downvote
Well...there are many things wrong with this so I'm not sure where the right place is to begin.

1. Put all of you javascript "functions" in the head of the document or in an external js file...what you have here is creating problems.

2. You should check your code using a mozilla flavor of browswer and type "javascript:" in the address bar to use the built-in debugger to check your code (I received several errors just when the document loaded)

3. Pick a naming convention. I know I shouldn't harp on coding styles, but you have quite a mixture of HTML/Javascript coding styles here that give your code a very inconsistent feel (and it makes things hard to decipher). Use standard, lowercase HTML tags, quote all values, and indent your code.

After you've done those things I mentioned above, come back to this thread with any other problems you're still having. Please understand that I'm not brushing you off for help, but many of us here barely have time to help as it is, let alone working through code that is obfuscated on top of it.


Jon

________________________________________
Give a man a match, he'll be warm for a minute. But light him on fire, and he'll be warm for the rest of his life.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
177
Kennelbloke
Kennelbloke
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
155
malpa
malpa
Mike Lewis
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid)
Replies
4
Views
268
Mike Lewis
Mike Lewis
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
183
xwb
xwb
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
139
coldbohemia
coldbohemia

Part and Inventory Search

Sponsor

Back
Top