SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Adding ticks to question answers in Firefox and IE

    I'm editing a script for multiple-correct questions (i.e. multiple choice with more than one correct answer) and have hit something that works correctly in Firefox but not in IE.

    The basic question consists of check boxes e.g.
    Code:
    <p><input type='checkbox' class='checkbox' id="c1" value="1"><label>Is Mr Briers an existing customer?</label></p>
    The judging script checks if they're correct, strips out the checkbox using DOM, and adds a tick to the text if correct. This is a background image.

    The script goes:
    Code:
    function display(which) {
    	// strip out check boxes whether right or wrong
    	for (j=1;j<correct.length+1;j++) {
    		   
    			var choice=document.getElementById('c' + (j));
    			var holder=choice.parentNode;
    			holder.removeChild(choice)
    			var words=holder.firstChild.firstChild.nodeValue;
    			var item=document.createTextNode(words)
    			var label=holder.firstChild
    			holder.removeChild(label)
    			holder.appendChild(item)
    	
    		if (which=="right" && correct[j-1]==1){
    		// answer is correct		
    			holder.style.color="green"
                            holder.style.fontWeight="bold"
    	           holder.style.backgroundImage="url(../common_files/images/tick.gif)"
    			holder.style.backgroundRepeat="no-repeat"
    			holder.style.backgroundPosition="99% 2px"
    				
    		}
    In Firefox this works correctly. In IE5.5 and 6, the color and font-weight work correctly but the background image doesn't show on the first choice (assuming the first choice is correct).

    It's only the first choice that loses the tick, but I've noticed it where all four are correct it puts the tick on choice 3, then 4, then 2, but not on 1. Firefox seems to put all four ticks up instantaneously. My first attempt didn't add the styles one by one but allocated a className but the same thing happened, IE doesn't like the first background image.

    I'm sorry I can't give a URL as it's intranet stuff, but I'll answer any questions about what the rest of the code is.

  2. #2
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,609
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I'm a stickler for always line-terminating Javascript code with a ;

    I see you have done this sporadically. Not saying this is the problem, but consistency usually helps.

    Another thing I've heard is that IE handles DOm elements differently in relation to how the HTML source is physically written (in terms of spaces after tags etc.). Maybe take a look at Mike's X library at cross-browser.com?
    Ian Anderson
    www.siteguru.co.uk


Bookmarks

Posting Permissions

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