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
    May 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Need Help: How to highlight incorrect answers in Javascript Fill-in-Blank quiz?

    Hello! I feel like I'm getting really close to the creating a well-functioning fill-in-blank quiz, however, I am stuck on creating the last feature: highlighting those input boxes that contain incorrect answers on Submit. After hitting the submit button, a symbol or outline should highlight incorrect answers. The symbol /outline should remain in place until the user clicks on the input box.

    The project can be labeled as an identification quiz as you will see in the following mockup and code. The image illustrates two ideas for an end result:


    The following is my code so far:
    Code:
    <SCRIPT type="text/javascript"> 
    answer_list = [
      ['Right upper', 'Right upper quadrant'],
      ['Left upper', 'Left upper quadrant'],
      ['Right lower','Right lower quadrant'],
      ['Left lower', 'Left lower quadrant']
    ];
    response = [];
    function setAnswer(question, answer) { response[question] = answer; }
    
    function CheckAnswers() {
      var correct = 0;
      var flag, resp, answ;
      for (var i = 0; i < answer_list.length; i++) {
        flag = false;
        for(var j=0; j<answer_list[i].length; j++){
          resp = response[i].toLowerCase();
          answ = answer_list[i][j].toLowerCase();
          if ((resp == answ) || (answ.indexOf(resp) != -1)) { flag = true; }
        }
        if (flag) { correct++; }
      }
    if (correct == answer_list.length) {
      $('.CorrectslideTogglebox').slideToggle();
    }
    else {
    $('.IncorrectslideTogglebox').slideToggle();
    }
    
    }
    </SCRIPT>
     </head>
    <body>
    <div id="ActivityContainer">
     <div class="CorrectslideTogglebox"><img src="images/Correct_Slide_Sm.png"></div>
    <div class="IncorrectslideTogglebox"><img src="images/Incorrect_Slide_Sm.png"></div>
     
    <FORM action="#" method="get">
    <p><INPUT TYPE=text name="question1" size="20" maxlength="20"
    onChange="setAnswer(0, this.value); turnoff('pic1')" onBlur="turnoff('pic1')" onFocus="lightup('pic1')" id="RightUpper"></p>
    
    <p> 
    <input type="text" name="question2" size="20" maxlength="20"
     onchange="setAnswer(1, this.value); turnoff('pic2')" onBlur="turnoff('pic2')" onFocus="lightup('pic2')" id="LeftUpper" ></p>
    
    <p> 
    <input type="text" name="question3" size="20" maxlength="20"
     onchange="setAnswer(2, this.value); turnoff('pic3')" onBlur="turnoff('pic3')" onFocus="lightup('pic3')" id="RightLower"></p>
    
    <p> 
    <input type="text" name="question4" size="20" maxlength="20"
     onchange="setAnswer(3, this.value); turnoff('pic4')" onBlur="turnoff('pic4')" onFocus="lightup('pic4')" id="LeftLower"></p>
    
    <p><input name="submit" type="button" class="SubmitBtn" src="images/SubmitBtn_SmOFF.png" onmouseover="this.src='images/SubmitBtn_SmON.png'" onmouseout="this.src='images/SubmitBtn_SmOFF.png'" onClick="CheckAnswers()"></p>
    </FORM>   
    </div>
    Would a possible solution involve using the "addClass('incorrect_hl') or something similar to create the red outline for the input box? Am I on the right track with if ((resp != answ) …? Can you show me how I can target and affect individual input boxes using the code that I am working with?

    Any help would be greatly appreciated!
    -Adam

  • #2
    Regular Coder
    Join Date
    Sep 2002
    Posts
    456
    Thanks
    0
    Thanked 20 Times in 20 Posts
    You're making it too complicated for yourself.
    highlighting the input boxes that contain incorrect answers on Submit

    Code:
    
    <SCRIPT type="text/javascript"> 
    answer_list = [
      ['Right upper', 'Right upper quadrant'],
      ['Left upper', 'Left upper quadrant'],
      ['Right lower','Right lower quadrant'],
      ['Left lower', 'Left lower quadrant']
    ];
    
    
    function check(form){
    //--- loop through form inputs onsubmit ---//
    //  match form.element[i].value == answer_list[i] [accepted answers]
    // if (incorrect) form.element[1].style='border':solid 1px red;';
    //----------------------------------------//
    }
    
    
    <FORM name="QuizForm" action="#" method="get" onSubmit=check(this.form)">
    <p><INPUT TYPE=text name="question0" size="20" maxlength="20"></p>
    
    
    <p><input name="submit" type="button" class="SubmitBtn" src="images/SubmitBtn_SmOFF.png" onmouseover="this.src='images/SubmitBtn_SmON.png'" onmouseout="this.src='images/SubmitBtn_SmOFF.png'" onClick="CheckAnswers()"></p>
    </FORM>   
    
    This is where you can find my form looping function. It handles the styles but may need updating for various browsers.
    NO Limits!! DHCreationStation.com
    ------------------------------------------------------------
    Broken items wanted for tinkerin'! PostItNow@BrokenEquipment.com
    Global Complaint Dept.

  • Users who have thanked c1lonewolf for this post:

    AdamWraith (07-10-2012)

  • #3
    New to the CF scene
    Join Date
    May 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    c1lonewolf,
    Thank you for your help, however, could you elaborate a little more? I am having trouble implementing your solution into my script. Are you suggesting that I replace my existing code with what you wrote or just add your suggested code to the bottom of the script? I think that I am misunderstanding your solution. Please see the areas that I indicated in green as I am not sure how I should work this into the script, or, are they just developer comments?
    function check(form){
    //--- loop through form inputs onsubmit ---//
    // match form.element[i].value == answer_list[i] [accepted answers]
    // if (incorrect) form.element[1].style='border':solid 1px red;';
    //----------------------------------------//
    }

    Anything you could do to clarify this would be a big help. I know that it might seem like you are solving the entire problem for me, I do want to learn, however, I think that I am missing something major in my understanding of Javascript to connect this all together. I did go to your page on form looping, but I wasn't able to recreate an example with fill-in-blank properties to closely resemble my project. I will keep working on it.
    Thank you,
    -Adam


  •  

    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
    •