Closed Bug 457988 Opened 16 years ago Closed 14 years ago

radio button re-rendered as selected on x,y coordinate of page upon refresh, maybe javascript related

Categories

(Firefox :: General, defect)

x86
Windows Vista
defect
Not set
normal

Tracking

()

RESOLVED WORKSFORME

People

(Reporter: quach4, Unassigned)

Details

(Whiteboard: [CLOSEME 2010-11-01])

Attachments

(1 file)

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

I have a javascript to demonstrate random quiz stuff.  The script writes a form (doesn't post anywhere) with a set of questions, choices, and the correct answers shown in blue in CSS.  The questions and choices are randomly shuffled, but the answers should always be correct.

When I refresh the page, the bug shows up only when another set of radio buttons is rendered where the previously selected radio button is, exactly at the x,y coordinate of the previous state.  I can't disable the selection of the radio by looping through the form elements in javascript.  I can't add a meta tag to do "no-cache": no effect.  Also no effect if I form.reset() with body onLoad.  I can't get rid of the cached state.

Reproducible: Always

Steps to Reproduce:
1.  Load the script into your browser.
2.  Select a radio button.  Its state is "checked".
3.  Refresh the page a few times and notice other radio buttons at that position on the page.  Whatever radio button that's there will also be checked.


Expected Results:  
Expected Results: form should be clear, as intended by developer or whatever is written.  I have not tested this in straight HTML.  Note that the form is produced with Javascript document.writeln().

Cut and paste the below into a file and load it in FF.
-------------- 8< cut-and-paste >-------------------------

<html>
<head>
<script>

/*
RandomizeTest accepts and returns a Test object. The questions in the
returned object should be in a random order. The order of the choices
within each question should also be randomized.
*/
function RandomizeTest(tstObject){
    // A generic Fisher-Yates function.
    var fy = function(ar) {
      var i = ar.length;
      if (i == 0) return false;
      while (--i) {
         var j = Math.floor( Math.random() * ( i + 0.5 ) );
         var tmpi = ar[i];
         var tmpj = ar[j];
         ar[i] = tmpj;
         ar[j] = tmpi;
       }
    };
    
    // This part is the same concept as the algorithm shown
    // in the Fisher-Yates shuffle above.
    // A range operator would be nice.  Alas, no.
    // Shuffle the indices of questions.  One more shuffle of inner
    // array indices on answers xor choices.
    var outerSeq = new Array();
    var innerSeq = new Array();
    for(i=0; i<tstObject.questions.length; i++) {
        outerSeq[i] = i;
        innerSeq[i] = new Array();
        for(j=0; j<tstObject.answers[i].length; j++) {
            innerSeq[i][j] = j;
        }
        fy(innerSeq[i]);
    }
    fy(outerSeq);
    
    var c = 0; // The index of the outer array.
    var qArray = new Array(); // Declare outer arrays.
    var cArray = new Array();
    var aArray = new Array();
    for(var o in outerSeq) {
        var a = outerSeq[o]; // The value of the outer shuffle order.
        qArray[c] = tstObject.questions[a];
        var n = 0; // The index of the inner array.
        var seq = innerSeq[a];
        cArray[c] = new Array(); // Declare inner arrays.
        aArray[c] = new Array();
        for(var i in seq) {
            var b = seq[i]; // The value of the inner shuffle order.
            cArray[c][n] = tstObject.choices[a][b];
            aArray[c][n] = tstObject.answers[a][b];
            n++;
        }
        c++;
    }
    
    // Reassign back to test object.
    tstObject.questions = qArray;
    tstObject.choices   = cArray;
    tstObject.answers   = aArray;
	return tstObject;
}


//definition of the test object
function Test(aryQuestions, aryChoices, aryAnswers){
	this.questions = aryQuestions;
	this.choices = aryChoices;
	this.answers = aryAnswers;
}



//displays the sample test in the browser with the correct answer highlighted
function WriteTest() {

	var tst = CreateSampleTest();
	tst = RandomizeTest(tst);
	
	document.write("<table border=0 cellspacing=3 cellpadding=3><form name=test id=test>");
	
	for (i=0; i < tst.questions.length; i++) {
	
		document.write("<tr><td valign=top>&nbsp;</td>")

		document.write("<td><p>" + (i+1) + ".&nbsp;" + tst.questions[i]);
		for (j=0; j < tst.choices[i].length; j++) {
			
			var correctcount = 0;
			var setblue = "";
			
			for (k=0; k<tst.answers[i].length; k++) {
				if (tst.answers[i][k] == 1) {
					correctcount++;
				}
			}
			
			if (tst.answers[i][j] == 1) {
				setblue="class=blue";
			}
			
			// Tweaked attributes of radio buttons and textboxes that
			// that they don't clash as (a) set(s).  Added disabling and
			// and readonly, lest easter egg. Unfortunately, I stumbled
		    // upon a bug in Mozilla 3.0.3 that I'll report later.
			if (correctcount == 1) {
    			// Mozilla 3.0.3 has a bug regarding radio buttons.
				document.write("<br><input type=radio name=rad"+i+" value='"+i+"."+j+"'>");
				document.write("<span "+setblue+">"+tst.choices[i][j]+"</span>");
			} 
			else { // a unique name for this set of checkboxes
				document.write("<br><input readonly type=checkbox name=chbx"+i+" value='"+i+"."+j+"' onclick='return false;'>");
				document.write("<span "+setblue+">"+tst.choices[i][j]+"</span>");
			}
		}
		
		document.write("</td></tr><tr><td colspan=2><br></td></tr>");
	}
}



function CreateSampleTest(){

	var questions = [
		"What can you find in my house?",
		"My favorite color is",
		"I am between the age of",
		"A means is (choose all that apply):",
		"Water is"
	];

	var choices = [
		[
			"Moldy bread",
			"A laptop",
			"Organic foods",
			"A cat",
			"Porn magazines"
		],
		[
			"red",
			"blue",
			"green",
			"chartreuse"
		],
		[
			"10-15",
			"16-19",
			"20-27",
			"28-35",
			"36-99"
		],
		[
			"Not a way",
			"The plural of to be mean",
			"The arithmetic average"
		],
		[
			"70+ % of the human body's fluids",
			"raining down on me",
			"available of Mars",
			"good for ya",
			"H<sub>2</sub>0"
		]
	];

	var answers = [
		[1,1,0,1,0],
		[0,1,0,0],
		[0,0,0,1,0],
		[0,0,1],
		[1,0,0,1,1]
	];	
	
	return new Test(questions, choices, answers);
}


</script>
<style type="text/css">
.blue {font-size : 14px; font-family : arial, helvetica, sans-serif; color : #336897; font-weight:bold;}
</style>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">
</head>
<body>
<script>
WriteTest();
</script>
</body>
</html>



-------------- 8< end >-------------------------
Load attachment into FF.  Check a radio button and note the position on the page of the checked button.  Keep refreshing the page until another group of radio buttons show up in that area.  The radio button will be checked even though the form state specifies (even tried explicitly) for it not to be checked.
I think you need to save the test code as *.html and try it separately.  You won't see the bug when it's rendered server-side by a CGI script.  Try it separately to confirm bug exists.
This is a mass search for bugs which are in the Firefox General component, are
UNCO, have not been changed for 500 days and have an unspecified version. 

Reporter, can you please update to Firefox 3.6.10 or later, create a fresh profile, http://support.mozilla.com/en-US/kb/managing+profiles, and test again. If you still see the issue, please update this bug. If the issue is gone, please set the status to RESOLVED > WORKSFORME.
Whiteboard: [CLOSEME 2010-11-01]
Updated to Firefox 3.5.13 on Windows 64.  Bug no longer there.
Status: UNCONFIRMED → RESOLVED
Closed: 14 years ago
Resolution: --- → WORKSFORME
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: