Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Change the background of a div with Javascript with condition

    Note: Don't just answer the title, give a complete answer based on my situation
    The idea This is my a management exam that I'm trying to make a modification. The exam shows questions one by one hiding the other When I press on one of the answers if the answer is correct, right before going to the next question the background of the pressed question goes green if it was the correct answer, red if it was the wrong answer.

    What I want: When the user presses the wrong answer I want the system not only to show a red background for the pressed button but also make the background of the correct answer green. Showing this way to the user what was the correct answer. If I missed code please let me know.

    The PHP
    Code:
     $orderbyrand = "SELECT * FROM management  
                    ORDER BY rand(), `answer` ASC LIMIT 2";
       $rend_result=mysql_query($orderbyrand); 
       $k=1; 
       while($row_rand=mysql_fetch_array($rend_result)){
       $answerarry[$k]= $row_rand['answer'];
       $k++;}
          $answerarry['0'] = $answerarry_shuffle['0'];
          $answerarry['1'];
          $answerarry['2'];
         shuffle($answerarry);
    
    if($answerarry_shuffle['0']==$answerarry[0])
      { $correcr_answer[0]=1; } else { $correcr_answer[0]=0; }
    if($answerarry_shuffle['0']==$answerarry[1])
      { $correcr_answer[1]=1; } else { $correcr_answer[1]=0; }
    if($answerarry_shuffle['0']==$answerarry[2])
      { $correcr_answer[2]=1; } else { $correcr_answer[2]=0; }
    The Javascript
    Code:
    function change_question(quest_num,optionvalue,ans_div_num){
    
    var hidediv = 'question_'+optionvalue;
    var add_optionvalue = (Number(optionvalue)+Number(1));
    var showdiv = 'question_'+add_optionvalue;
    var noofques = document.getElementById('noofques').value;
    var totalno = (Number(noofques)+Number(1));
    var totalcount = document.getElementById('noofques').value=totalno;
    if(quest_num==1){
    var correct_answer = document.getElementById('optvalue').value;
    var optinoresult_add = (Number(correct_answer)+Number(1));
    var addoptvalue = document.getElementById('optvalue').value=optinoresult_add;
    document.getElementById('answerdiv_'+ans_div_num+'_'+optionvalue).style.background='#bbd387';
    }  else {
    var correct_answer = document.getElementById('optvalue').value;
    var optinoresult_add = (Number(correct_answer)+Number(0));
    var addoptvalue = document.getElementById('optvalue').value=optinoresult_add;
    if(ans_div_num!=0){
    document.getElementById('answerdiv_'+ans_div_num+'_'+optionvalue).style.background='#dd5f5b'; }
    }
    }
    The HTML
    Code:
     <div class="row-fluid answer">
            <div id="answerdiv_1_<?php echo $i; ?>" onClick="return change_question('<?php echo $correcr_answer[0]; ?>','<?php echo $i; ?>','1');" class="span12 show_cursor"><p><?php echo substr($answerarry[0],0,300);?></p></div>
          </div>
          <div class="row-fluid answer">
            <div  id="answerdiv_2_<?php echo $i; ?>" onClick="return change_question('<?php echo $correcr_answer[1]; ?>','<?php echo $i; ?>','2');" class="span12 show_cursor"><p><?php echo substr($answerarry[1],0,300);?></p> </div>
          </div>
          <div class="row-fluid answer">
            <div id="answerdiv_3_<?php echo $i; ?>" onClick="return change_question('<?php echo $correcr_answer[2]; ?>','<?php echo $i; ?>','3');" class="span12 show_cursor"><p><?php echo substr($answerarry[2],0,300);?></p> </div>
          </div>

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    You are not sending the correct answer to the JS function so this is a little hard to do. First thing I would do is to alter the PHP. Place this just before the end
    PHP Code:
    $answer implode(''$correcr_answer);
    ?> 
    This changes the array to a string. In your HTML change all three
    Code:
    onClick="return change_question('<?php echo $correcr_answer[0]; ?>',.....
    to
    Code:
    onclick="return change_question('<?php echo $answer; ?>', .....
    Lastly in the javascript function:
    change
    Code:
    if(quest_num==1){
    To
    Code:
    quest_stat = quest_num.indexOf(1);
    real = quest_stat +1;
    if(quest_stat == ans_div_num-1){
    and add this line
    Code:
    }else{
    		var correct_answer = document.getElementById('optvalue').value;
    		var optinoresult_add = (Number(correct_answer)+Number(0));
    		var addoptvalue = document.getElementById('optvalue').value=optinoresult_add;
    		if(ans_div_num!=0){
    			document.getElementById('answerdiv_'+ans_div_num+'_'+optionvalue).style.background='#dd5f5b';
    			document.getElementById('answerdiv_'+real+'_'+optionvalue).style.background='#bbd387';
    		}
    Say a prayer and test
    Evolution - The non-random survival of random variants.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    We might point out that having JavaScript know which is the correct answer is equivalent to handing the correct answer to any savvy user. A little poking around on the web page via VIEW-->>SOURCE or using a debugger will easily let the test taker score 100%.

    Since you want to show the correct answer even when the user gives the wrong one, that's probably not a consideration for this code. But it's worth keeping in mind.

    You could use AJAX to "score" the exam, passing the user's answer back to the server and then, only after the user answers, sending the correct answer back to the browser.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Tags for this Thread

    Posting Permissions

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